Използването на стилове дава възможност да се промени изгледът на вече дефинирани елементи като заглавия, параграфи, хипервръзки.
Фонов цвят
В този случай атрибутът style се прилага за елемента body, но може да се отнася и за заглавия, параграфи и т.н.:
<body style="background-color:yellow"> - с това фонът на цялата страница ще стане жълт
Шрифт на текст
Шрифт се задава с "font-family:", следвано от името на шрифта. Например:
<p style="font-family:courier new"> това ще укаже за шрифт на параграфа да се използва Courier New</p>:
Цвят на текста
декларира се с "color:", следвано от една от следните декларации за вид цвят:
· валидна дума за цвят, например red:
<p style="color:red"> така текстът в дадения параграф ще стане червен</p>:
<p style="color:red"> така текстът в дадения параграф ще стане червен</p>:
· rgb стойност, напр.
<p style="color:rgb(0, 0, 255)"> Този параграф е син на цвят</p>:
<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>:
<p style="color:#00ff00"> ще укаже текста в този параграф да бъде показан със зелен цвят</p>:
Задаването на цвят с hex стойност е аналогично на rgb(), като разликата е че числата вместо в десетичен, са в щестнадесетичен вид. Обърнете вниманиче, че когато използвате hex, преди числата стои знакът #.
Големина на текста
указва се с "font-size:", следвано от размера в пиксели (px), em, проценти(%) или някой от другите валидни начини за задаване на размер:
<p style="font-size:24px">Това е текст с големина на шрифта 24 пиксела</p>ще изведе на екрана:
Дебелина на шрифта
Задава се с 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>
Хипервръзката ще изглежда така:силата на интернет във Ваши ръце!
<a style="text-decoration:none" href="http://www.parvisait.com/">силата на интернет във Ваши ръце!</a>
Хипервръзката ще изглежда така:силата на интернет във Ваши ръце!
· overline: чертата минава над текста, напр.
<h3 style="text-decoration:overline">Заглавие</h3>ще изведе на екрана
<h3 style="text-decoration:overline">Заглавие</h3>ще изведе на екрана
Заглавие
· line-through: чертата минава през текста, напр.
<h3 style="text-decoration:line-through">Заглавие</h3> ще изведе на екрана
<h3 style="text-decoration:line-through">Заглавие</h3> ще изведе на екрана
· underline: чертата минава под текста, напр.
· <h3 style="text-decoration:underline">Заглавие</h3> ще изведе на екрана
Заглавие
Малки и големи букви
Използвайки таг text-transform: можете да укажете дали текста да се извежда с малки или големи букви, а трета възможност е всяка дума да започва с главна дума (както е прието в писането на заглавия на английски):
· lowercase: ще направи всички букви малки
· uppercase: ще направи всички букви големи
· capitalize: ще направи началната буква на всяка дума главна
Ето и един пример:
<h3 style="text-transform:capitalize">едно сензационно заглавие!</h3>
ще бъде показано като:
ще бъде показано като:
едно сензационно заглавие!
Позицията на текст
можете да укажете къде да се разполага текста с "text-align:", следвано от:
· center - за центриране на текста:
<p style="text-align:cener">този текст ще бъде центриран</p>
ще има следния ефект:
<p style="text-align:cener">този текст ще бъде центриран</p>
ще има следния ефект:
този текст ще бъде центриран
· left - за ляво подравняване (което е по подразбиране, така че обикновено няма нужда да указвате подравняване на ляво);
· right - за дясно подравняване:
<p style="text-align:right">Този текст ще бъде дясно подравнен</p>
ще има следния ефект:
<p style="text-align:right">Този текст ще бъде дясно подравнен</p>
ще има следния ефект:
Този текст ще бъде дясно подравнен
· justify - за двустранно подравняване
За две ръце протегнати насреща,
земята бих до края извървял.
За две очи, като звезди горещи,
за цялата си топлина бих дал.
За две слова, от мене вдъхновени,
най-хубавите думи бих редил.
За две сълзи, изплакани за мене,
аз всички океани бих изпил.
Как малко исках аз - по зрънце само,
по капка от далечен, чакан дъжд.
А ти дойде наистина голяма
и всичко ми донесе изведнъж.
Донесе ми от ветрове заръка,
пожари звездни, за да не тъжа,
от мъка - песен, а от песен - мъка
и аз не зная как ще издържа.
Проект:
Създайте HTML страница със следния
текст:
ЗА ДВЕ РЪЦЕ ... За две ръце протегнати насреща,
земята бих до края извървял.
За две очи, като звезди горещи,
за цялата си топлина бих дал.
За две слова, от мене вдъхновени,
най-хубавите думи бих редил.
За две сълзи, изплакани за мене,
аз всички океани бих изпил.
Как малко исках аз - по зрънце само,
по капка от далечен, чакан дъжд.
А ти дойде наистина голяма
и всичко ми донесе изведнъж.
Донесе ми от ветрове заръка,
пожари звездни, за да не тъжа,
от мъка - песен, а от песен - мъка
и аз не зная как ще издържа.
Задайте:
1.
Цвят на фона
– светло зелен;
2.
Заглавие:
-
Шрифт: Arial;
-
Стил на
текста: удебелен;
-
Големина:
24 px;
-
Цвят на
текста: кафяв;
-
Позиция на
текста: центриран;
3.
Основен
текст:
-
Шрифт: Times New Roman;
-
Големина:
16 px;
-
Цвят на
текста: тъмно сиво;
-
Позиция на
текста: ляво подравнен;
4.
Отделните
стихове да са в отделни параграфи.
