CSS level 1 Спецификация
1 ОСНОВНИ ПОНЯТИЯ
Съставянето на прости стилови листове е лесна задача. Нужни са известни знания в областта на HTML и такива в областта на desktop publishing терминологията. Например, за да се зададе син цвят на h1 елементите, може да се използва следната декларация:
H1 { color: blue }
Примера, показан по-горе е просто CSS правило. Правилото се състои от две основни части: селектор(h1) и декларация(color: blue). Декларацията е съставена от две части: свойство(color(цвят)) и стойност(blue(син)). Макар, че примера по-горе опитва да влияе само на едно от свойствата, които са нужни за визуализирането на HTML документ, самия той може да бъде определен за стилов лист. В комбинация с други стилови листове(едно от основните свойства на CSS е, че стиловите листа са комбинирани) той ще определи крайния външен вид на документа.
Селекторът е връзката между HTML документа и стиловия лист и всички типове елементи в HTML са възможни селектори. Типовете елементи в HTML са дефинирани в HTML спецификацията[2].
Свойството 'color' (цвят) е едно от около петдесетте свойства, които определят външния вид на HTML документа. Списъкът на свойствата и техните възможни стойности е дефиниран в тази спецификация.
Авторите на HTML файлове трябва да пишат стилови листа само, ако искат да предложат специфичен стил на своите документи. Всеки браузър(думата се среща и като "уеб браузър" или "уеб клиент") ще има свой-собствен, зададен по подразбиране стилов лист, който ще представя документите по приемлив, но не съвсем обичаен, начин. Приложение A съдържа примерни стилови листа, които представят HTML документи, както се предлага в HTML 2.0 спецификацията[3].
Граматиката на CSS1 езика по същество е дефинирана в Приложение Б(B).
1.1 Съдържане в HTML
За да повлияят на презентацията стиловите листа, браузъра трябва да е наясно, че те съществуват. HTML спецификацията [2] дефинира как да се свързва HTML със стилови листа. Следователно, този раздел е информативен, но не и нормативен.
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>
Примерът показва четири начина, по които да бъдат комбинирани стил и HTML: употреба на елемента 'link', за да се осъществи връзка с външен стилов лист, елемент 'style', който се намира в елемента 'head', импортиран стилов лист, използвайки '@import' означението в CSS и атрибут 'style' приложен на елемент, вътре в 'body'. Последната възможност смесва стила със съдържанието и при нея се губят съответните предимства на традиционните стилови листа.
Елементът 'link' се отнася към алтернативните стилови листа, които читателя може да избере, докато импортираните стилови листа автоматично се сливат с останалата част от стиловия лист.
По традиция браузърите "тихо" игнорират непознатите тагове. В следствие на това, старите браузъри ще игнорират елемента 'style', но неговото съдържание ще бъде третирано като част от тялото на документа и следователно ще бъде визуализирано като такава. По време на фазата на преход, съдържанието на елемента 'style' може да е скрито чрез SGML коментарите:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Тъй като 'style' елемента е деклариран като "cdata" в DTD(както е дефинирано в [2]), приспособените към стилове SGML парсери няма да счетат горния стилов лист за коментар, който трябва да бъде премахнат.
1.2 Групиране
За да се намали размера на стиловите листа, те могат да бъдат групирани в разделени със запетая списъци:
H1, H2, H3 { font-family: helvetica }
По подобен начин могат да бъдат групирани и декларациите:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Освен това, някои свойства притежават свой собствен синтаксис за групиране:
H1 { font: bold 12pt/14pt helvetica }
което е еквивалентно на предишния пример.
1.3 Наследяване
В първия пример е зададен син цвят на h1 елементите. Да предположим, че съществува h1 елемент, в който е поставен елемент с наклонение(em):
<H1>The headline <EM>is</EM> important!</H1>
Ако не е зададен цвят на em елемента, "наклоненото" "is" ще наследи цвета на родителския елемент, като в случая също ще се появи със син цвят. Другите стилови свойства се наследяват по подобен начин, например свойствата 'font-family' и 'font-size'.
За да се зададе стилово свойство по подразбиране за даден документ може да се зададат свойствата на елемент, от който всички видими елементи произлизат. В HTML документите тази функция може да изпълнява 'body' елемента:
BODY {
color: black;
background: url(texture.gif) white;
}
Това ще действа дори, ако автора е пропуснал 'body' тага(което не е неправилно), тъй като HTML парсера ще "подскаже" липсващия таг. Примера, показан по-горе задава черен цвят на текста и също така фоново изображение. Фонът ще стане бял, ако изображението не може да бъде намерено. (Вижте раздел 5.3 за повече информация по този въпрос).
Някои стилови свойства не се наследяват от дъщерния елемент на родителски елемент. Най-често се подразбира защо се получава така. Например, свойството 'background' не се наследява, но фона на родителските елементи се вижда по подразбиране.
Често, стойността на свойство е изразена с процент, който се отнася за друго свойство:
P { font-size: 10pt }
P { line-height: 120% } /* отнася се за 'font-size', т.е. 12pt */
За всяко свойство, което позволява процентни стойности е дефинирано това за кой елемент се отнася. Дъщерните елементи на 'p' ще наследят изчислената стойност на 'line-height'(т.е. 12pt), а не процентната.
1.4 Клас като селектор
За да се подобри възможността за контрол върху елементите, в HTML се добавя ново свойство[2]: 'CLASS'. Всички елементи, които се намират вътре в 'body' елемента могат да бъдат класифицирани и също така могат да се изпълняват декларации по адрес на класа в стиловия лист:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Way too green</H1>
</BODY>
</HTML>
Нормалните правила на наследяването важат за класовите елементи; те наследяват стойности от своите родители в структурата на документа.
Могат да бъдат адресирани всички елементи от един клас чрез пропускане на името на тага в селектора:
.pastoral { color: green } /* всички елементи в класа pastoral */
Само един клас може да бъде определен в селектора. Следователно 'p.pastoral.marine' е невалиден селектор в CSS1.(Контекстните селектори, описани долу, могат да имат само един клас за прост селектор)
CSS дава толкова много сила на атрибута клас, че в много случаи няма значение на какъв HTML елемент е зададен класа - можете да накарате даден елемент да симулира функцията на почти всички останали. Да се разчита на тази му мощ не се препоръчва, тъй като това премахва структурираността на универсалното значение(HTML елементите). Структура, базирана на на класове е полезна единствено в ограничен обсег, където значението на класа е било взаимно удобрено.
1.5 ID като селектор
HTML [2] също така представя атрибута ID, при който е гарантирано, че има само една уникална стойност в документа. Следователно той може да е от специална важност като селектор на стилови листа и може да бъде адресиран чрез поставяне на знак '#' преди неговото име:
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Wide text</P>
В примера горе, първия селектор пасва на 'p' елемента, поради стойността на 'ID' атрибута. Втория селектор определя и типа на елемента('h1'), и стойността на ID атрибута и следователно не пасва на 'p' елемента.
Чрез употреба на атрибута ID като селектор може да бъдат зададени стиловите свойства на основа елемент по елемент. Докато стиловите листа са измислени, за да укрепят структурата на документа, това свойство ще позволи на авторите да създават документи, които се интерпретират добре без да се използват структурните елементи на HTML. Тази употреба на стиловите листа не се удобрява.
1.6 Контекстни селектори
Наследяването позволява на CSS дизайнерите да си спестят писане. Вместо да се настройват всички стилови свойства, могат да бъдат зададени такива по подразбиране и след това да се отделят изключенията от тях. За да бъде зададен различен цвят на 'em' елементите в 'h1' елемента, може да бъде зададен следния код:
H1 { color: blue }
EM { color: red }
Когато стиловия лист е в сила всички отрязъци с приложен елемент 'em', които се намират вътре или извън 'h1' елемент а ще бъдат визуализирани с червен цвят. Ако някой поиска само 'em' елементите, които се намират в 'h1' елемента да станат червени може да използва следната декларация:
H1 EM { color: red }
Селекторът сега е шаблон за търсене в стека на отворените елементи и този тип селектор се нарича контекстов селектор. Контекстовите селектори се състоят от няколко прости селектора, които са разделени от интервал(всички селектори, описани до този момент са прости селектори). Биват адресирани само елементи, които пасват на последния прост селектор(в този случай 'em' елемента) при това само ако шаблона за търсене пасва. Контекстовите селектори в CSS1 търсят родителски връзки, но и други връзки(например родителски-дъщерен обект) може да бъдат представени в по-късни преработки. В примера по-горе, шаблона за търсене пасва, ако 'em' елемента е потомък на 'h1', т.е. ако той се намира вътре в 'h1' елемента.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Тук първият селектор пасва на 'li' елементите с поне един \ul' предшественик. Вторият селектор пасва на подмножество на първия, т.е. на 'li' елементите с поне два 'ul' предшественика. Евентуални конфликти се разрешават чрез по-голяма насоченост на втория селектор чрез по-дълъг шаблон за търсене. Вижте каскадния ред(глава 3.2) за повече информация по този въпрос.
Контекстовите селектори могат да търсят по тип на елемента, класови атрибут, ID атрибут или комбинация от тях:
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
Първият селектор пасва на всички 'p\ елементи, които съдържат 'div' предшественик. Вторият селектор пасва на всички 'h1' елементи, които имат предшественик от клас 'reddish'. Третият селектор пасва на всички 'code' елементи, които са дъщерни за елементи с 'ID' 'x78y'. Четвъртият селектор пасва на всички 'h1' елементи, които имат 'div' предшественик с клас 'sidenote'.
Няколко контекстови селектора могат да бъдат групирани:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Което е еквивалентно на:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
1.7 Коментари
Текстовите коментари в CSS стиловите листа са подобни на тези в програмния език C[7]:
EM { color: red } /* червено, наистина червено!!! */
Коментарите не могат да бъдат вмествани един в друг. За CSS парсера коментара е еквивалентен на празно място.