Най-често в HTML документи стилови таблици (стилове) се използуват по един от следните три начина.
Първият начин е чрез записвне на стиловата таблица в отделен файл с разширение .css.
Файловете с разширение .css представляват текстови файлове в ASCI код без форматиращи символи.
Те могат да се създават например с текстовия редактор Notepad на Windows или с друг редактор, но се записват като обикновен текстов файл с разширение .css.
Фактически файлът с раширение на името .css съдържа необходимите селектори, за задаване на свойства на съответните обекти (тагове).
В този случай включването на каскадни стилови таблици в HTML документ се извършва с таг <LINK...> в главата на документа (между <HEAD>...</HEAD>)
Видът на тага <LINK...> за този случай е следният:
<LINK REL = STYLESHEET TYPE="text/css" HREF = "URL адрес" TITLE = "име на стила">.
Аатрибутите REL = , TYPE= и HREF = са задължителни.
Стойността на атрибута HREF = задава връзката на HTML документа с файла, съдържащ каскадна стилова таблица.
Атрибутът TYPE="text/css" определя типа на съдържанието на файла . В случая стойността "text/css" показва,че типът на съдържанието е стилова таблица, написана на езика css.
Този начин на задаване на стилови таблици е може би най-удобен.
При използването му лесно може да се зададе един и същ стил, например на всички страници на Web сайт. Това се постига като във всяка страница се включи в главата на документа един и същ таг <LINK....>.
Например свойствата на текста в натоящето учебно пособие са зададени с файла
stylbook.css, със следното съдържание:
P {text-align:justify; text-indent:0.5in; font-family:"Times
New Roman", Arial, Academy, serif}
H3 {text-align:center;font-family:"Times New Roman", Arial, Academy,
serif}
В кода на всяка страница е включен следния таг за връзка:
<link rel=stylesheet href="stylbook.css"
type="text/css"> .
Много е важно да се подчертае, че при необходимост от изменение на стила трябва да се изменят само селектори или отделни свойства във файла, съдържащ стиловите таблици, в случая във файла stylbook.css .
Вторият начин за включване на каскадни стилови таблици в HTML документ е чрез използуване на неконтейрния таг <STYLE...>....</STYLE> в главата на HTML документ.
Основният атрибут на тага <STYLE...> е TYPE= . В случая той трябва да има стойност "text/css".
При използуване на тага <STYLE...> за дефиниране на стил е необходимо в главата на HTML документа преди него да се зададе езикът на стиловата таблица.
Това се извършва с неконтейрния таг <META..> (параграф 18.1), който в случая има следния вид:
<META http - eguiv = "content - Style - Type" content = "text/css">.
Задаването на своиствата на текста на учебното пообие в случай на използване
на тага <STYLE..>...</SYLE> ще
стане по сления начин:
<HTML>
<HEAD>
...
<META http - eguiv = "content - Style - Type" content
= "text/css">
...
<STYLE TYPE="text/css" >
P {text-align:justify; text-indent:0.5in;
font-family:"Times New Roman", Arial, Academy, serif}
H3 {text-align:center;font-family:"Times New Roman", Arial, Academy,
serif}
</STYLE>
...
</HEAD>
...
<BODY>
...
</BODY>
</HTML>
Дефинираният с тага <STYLE...> стил се отнася само за страницата, в който е дефиниран.
Ако трябва един и същ стил да се използува в няколко HTML документа (Web страници), той трябва да се дефинира във всеки HTML документ.
В примера това означава, че във всички страници на пособието трябва да се включи кода, изобразен с червен цвят.
При необходимост да се измени стилът във всички или част от HTML документи, в които е дефиниран, е необходимо да се внесат изменения в стиловите таблици във всички HTML документи.
Този начин не е подходящ за задаване на един и същи стил в много страници.
Той е целесъобразно да се използва, когато трябва да се зададе определен стил само на една или няколко страници.
Третият начин за дефиниране на стил е така нареченото локално или "in line style" дефиниране.
Във всички тагове, чрез които се извежда и представя информация, може да се използува атрибутът STYLE =, чрез който се задават свойства само за тага, в който се използува.
Ако е дефиниран общо за целия HTML документ стил с тага <LINK...> или с тага <STYLE....>, локалното дефиниране има приоритет пред тях.
Т.е.с атрибута STYLE = се предефинира стилът само за тага, в който се използува.
Например,ако трябва да се дефинира или предефинира стилът в един таг за параграф, това би изглеждало по следния начин:
<P STYLE = "font-size:12 pc;color:black">...</P>
Честото предефиниране на вече дефиниран стил за HTML документ до известна степен обезмисля използуването на стилови таблици.
В таговете на HTML може да се използува още един атрибут, чрез който се създава най-голяма гъвкавост при прилагане на вече дефинирани стилове за HTML документа по един от описаните по-горе начини.
Този атрибут е CLASS = "име на class".
За да се използва атрибут CLASS= файла със стилове (.css) или в тага <STYLE...> първо трябва да се дефинира клас със съответното име.
Общият вид на дефиниция на клас
е следния:
.име на клас{свойство1:стойност;свойство2:стойност;...свойство
n: стойност}
Наличието на точка (.) пред името на класа показва, че това е дефиниция на клас.
В таговете на HTML документа чрез присвояване на стойност на атрибута CLASS = името на съответния клас, се задават свойствата, формулирани в стиловата таблица на този клас.
За разлика от дефиниране на стил с тага STYLE =, в който се задават всички необходими свойства на стила за дадения таг, при използуване на атрибут CLASS = стойността му е само името на дефинирания по-рано клас в стиловата таблица.
Следния пример показва начина на използуване
на атрибут CLASS= в тагове на HTML документа:
<HTML>
<HEAD>
...
<STYLE TYPE="text/css" >
...
.blue{font- color:blue;font-size:14 pc}
...
</STYLE>
...
</HEAD>
...
<BODY>
...
<P CLASS="blue">...</P>
...
<H1 CLASS =" blue">...</H1>
</BODY>
</HTML>
Текстът от параграфа, в който се използува атрибутът CLASS="blue ще има свойства, определени в дефиницията на този клас в тага <STYLE...>.
Същите свойства ще има и текстът в заглавния таг <H1>, в който се използува атрибутът CLASS = със същата стойност.
Могат да се дефинират класове, които се използват само за отделни тагове.
Например, ако трябва да се зададе клас
само за тага <H1> от предишния пример,той ще изглежда по следния начин:
<HTML>
<HEAD>
...
<STYLE TYPE="text/css" >
...
.blue{font- color:blue;font-size:14 pc}
H1.red{font-color:red}
...
</STYLE>
...
<HEAD>
<BODY>
...
<P CLASS= blue>...</P>
<H1 CLASS= blue>...</H1>
...
<H1 CLASS= red>...</H1>
...
</BODY>
</HTML>
Първото заглавие ще има свойствата, дефинирани с класа blue, който може да се използва във всички тагове за текст.
Второто заглавие, стойност на атрибута CLASS= "red", ще бъде с червен цвят. Този клас може да се използува само за тагове, за които е дефиниран класът. Например, той не може да се използва в таг за параграф <P...>.
По-старите или с по-ограничени по своите
възможности Web браузери, които не могат да интерпретират STYLE SHEETS, биха
изобразили съдържанието на STYLE SHEETS като обикновен текст. За да не става
това, съдържанието на STYLE SHEETS се представя като коментар. Това се
извършва по следния начин:
<STYLE TYPE="text/css" >
<!--
H1{color:red}
H2{color:navy}
// край на атрибут ->
</STYLE>
Символът <!--показват на браузера, че това е началото на коментар, т.е.текст, който не трябва да се изобразява в прозореца на браузера.
Символът //- също показват, че това е коментар.
Символът -> е за край на коментара, но в случая той не се интерпретира от браузера, тъй като в началото на реда е поставен символът // .
Подробна информация за каскадните
стилови таблици може да се получи на адреси:
http://www.w3org/TR/REC-css/-961217.htm.