как се прави сайт №1 - www.parvisait.com

Стилове в HTML

Наскоро разгледахме офромянето на текст с тагове като <q>, <em>, и <strong>, които придават определен смисъл на така форматирания текст - цитат, курсив, изтрит, вмъкнат и т.н.

Използването на стилове от своя страна, дава възможност да се промени изгледът на вече дефинирани елементи като заглавия, параграфи, хипервръзки. Можете да укажете стил както направо за всеки отделен елемент - като негов атрибут, или за всички елементи от даден клас (например всички параграфи) в отделен CSS команден блок.

Повече за предимствата на CSS можете да научите от статията CSS - стилове в интернет страници, а конкретни указания за употребата на стилове със CSS команди можете да прочетете в отделните CSS уроци. Тук ще разгледаме как се указват стилове като атрибут на отделните елементи в HTML.

Фонов цвят.

В този случай атрибутът style се прилага за елемента body, но може да се отнася и за заглавия, параграфи и т.н.:

<body style="background-color:yellow"> : с това фонът на цялата страница ще стане жълт: опитай сам.

Повече за цветовете в HTML можете да прочетете в статията HTML цветове.

Шрифт на текст:

Шрифт се задава с "font-family:", следвано от името на шрифта. Например:

<p style="font-family:courier new"> това ще укаже за шрифт на параграфа да се използва Courier New</p>:

това ще укаже за шрифт на параграфа да се използва Courier New.

Повече за различните видове шрифтове, кои са най-универсалните шрифтове, както и как да използвате шрифтове, които са по-малко разпорстранени можете да научите от статията Шрифтове - същност, видове и употреба

Цвят на текста

декларира се с "color:", следвано от една от следните декларации за вид цвят:

валидна дума за цвят, например red:
<p style="color:red"> така текстът в дадения параграф ще стане червен</p>:

така текстът в дадения параграф ще стане червен
rgb стойност, напр.
<p style="color:rgb(0, 0, 255)"> Този параграф е син на цвят</p>:

Този параграф е син на цвят
Задаването на цвят с rgb (a, b, c) използва 3 числа, изразяващи интензивността на един от трите основни цвята - съответно a за червено, b за зелено и c за синьо. rgb числата могат да имат стойност от 0 до 255, като колкото по-голямо е числото, толкова по-интензивен е дадения цвят.
hex стойност, напр.
<p style="color:#00ff00"> ще укаже текста в този параграф да бъде показан със зелен цвят</p>:

ще укаже текста в този параграф да бъде показан със зелен цвят
Задаването на цвят с hex стойност е аналогично на rgb(), като разликата е че числата вместо в десетичен, са в щестнадесетичен вид. Обърнете вниманиче, че когато използвате hex, преди числата стои знакът #.

Големина на текста

указва се с "font-size:", следвано от размера в пиксели (px), em, проценти(%) или някой от другите валидни начини за задаване на размер:

<p style="font-size:24px">Това е текст с големина на шрифта 24 пиксела</p>ще изведе на екрана:

Това е текст с големина на шрифта 24 пиксела

Дебелина на шрифта

Задава се с font-weight:, следвано от някоя от следните думи:

normal: определя нормален фонт и е стойността по подразбиране.
bold: определя удебелен текст.
bolder: определя още по-удебелен текст.
lighter определя по-тънко изписан текст.
100~900: Можете да използвате числата 100, 200, 300 и т.н. до 900, като 400 съответства на нормален, а 700 - на удебелен фонт.

Подчертаване на текст

Това допълнително оформяне изгледа на текста става с таг text-decoration:, следван от някоя от следните думи:

none: премахва подчертаване, ако такова е имало. Например хипервръзките по подразбиране са подчертани, но можем да направим хипервръзка без подчертаване по следния начин:

<a style="text-decoration:none" href="http://www.parvisait.com/">силата на интернет във Ваши ръце!</a>

Хипервръзката ще изглежда така:

силата на интернет във Ваши ръце!
overline: чертата минава над текста, напр.
<h3 style="text-decoration:overline">Заглавие</h3>ще изведе на екрана

Заглавие
line-through: чертата минава през текста, напр.
<h3 style="text-decoration:line-through">Заглавие</h3> ще изведе на екрана

Заглавие
underline: чертата минава под текста, напр.
<h3 style="text-decoration:underline">Заглавие</h3> ще изведе на екрана

Заглавие

Един често срещан въпрос е как да се премахне подчертаването на хипервръзки. За целта се използват CSS псевдокласове, за които можете да прочетете в статията CSS - родители, деца, псевдокласове

Малки и големи букви

Използвайки таг text-transform: можете да укажете дали текста да се извежда с малки или големи букви, а трета възможност е всяка дума да започва с главна дума (както е прието в писането на заглавия на английски):

lowercase: ще направи всички букви малки
uppercase: ще направи всички букви големи
capitalize: ще направи началната буква на всяка дума главна

Ето и един пример:

<h3 style="text-transform:capitalize">едно сензационно заглавие!</h3>
ще бъде показано като:

едно сензационно заглавие!

Позицията на текст

можете да укажете къде да се разполага текста с "text-align:", следвано от:

center - за центриране на текста:
<p style="text-align:cener">този текст ще бъде центриран</p>
ще има следния ефект:

този текст ще бъде центриран
left - за ляво подравняване (което е по подразбиране, така че обикновено няма нужда да указвате подравняване на ляво);
right - за дясно подравняване:
<p style="text-align:right">Този текст ще бъде дясно подравнен</p>
ще има следния ефект:

Този текст ще бъде дясно подравнен
justify - за двустранно подравняване