Оценка на читателите: / 83
Слаба статияОтлична статия 

Стилове в 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 - за двустранно подравняване

Следва: HTML изображения

начало на страницата

 

Ако решите, че "как се прави сайт" ръководството може да бъде полезно и за други хора, моля гласувайте за сайта:

+добави в любими.ком Елате в .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт!!!

Ако желаете да оставите коментар към статията, трябва да се регистрирате.