CSS level 1 Спецификация
2 ПСЕВДО-КЛАСОВЕ И ПСЕВДО-ЕЛЕМЕНТИ
В CSS1, стила обикновено се прикачва на елемент в зависимост от неговата позиция в структурата на документа. Този прост модел е задоволителен при множество стилове, но не покрива някои често срещани ефекти. Концепцията за псевдо-класовете и псевдо-елементите разширява адресирането в CSS1, така че да може процеса на форматиране да бъде повлиян от външна информация.
Псевдо-класовете и псевдо-елементите могат да бъдат използвани в CSS селекторите, но не съществуват в HTML сорс кода. Вместо това, те се вмъкват от браузъра при специфични условия, така че да може да бъдат адресирани в стиловите листа. Те се определят като "класове" и "елементи", тъй като това е удобен начин да бъде описано тяхното поведение. По-специфичния термин, с който се дефинира тяхното поведение е измислена поредица от тагове.
Псевдо-елементите се използват за адресиране на подразделения на елементи, докато псевдо-класовете позволяват на стиловите листа да различават различните типове елементи.
2.1 Псевдо-класове за връзки(котви)
Браузърите често визуализират наскоро посетените връзки по по-различен начин от по-старите такива. В CSS1, този процес може да бъде управляван чрез псевдо-класове на елемента 'а':
A:link { color: red } /* непосетени линкове */
A:visited { color: blue } /* посетени линкове */
A:active { color: lime } /* активни линкове */
Всички елементи 'а', които се намират в атрибута 'href' ще бъдат поставени в една и само една от тези групи(например целевите котви няма да бъдат засегнати). Браузърите може да решат да преместят даден елемент от 'visited' на 'link' след определен период от време. Активната('active') връзка е тази, която е избрана в момента(например чрез натискане на бутона на мишката) от читателя.
Форматирането на псевдо-класа за връзки се осъществява сякаш класа е бил вмъкнат ръчно. От браузъра не се изисква да преформатира текущо показания документ, поради промените на псевдо-класа за връзки. Например, стилов лист може(по напълно допустим начин) да зададе по-голяма стойност за атрибута 'font-size' на 'active' връзка, от колкото тази за 'visited' връзка, но от браузъра не се изисква динамично да преформатира документа, когато читателя селектира 'visited' връзката.
Псевдо-класовете селектори не пасват на нормалните класове и обратно. Стиловото правило в примера по-долу следователно няма да окаже никакво влияние:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
В CSS1, псевдо-класовете за връзки нямат ефект върху елементи, различни от 'a'. Следователно типа на елемента може да бъде пропуснат в селектора:
A:link { color: red }
:link { color: red }
Горните селектори ще селектират едни и същи елементи в CSS1.
В имената на псевдо-класовете няма значение дали буквите са малки или главни, т.е. те не ги различават.
Псевдо-класовете могат да бъдат използвани в контекстови селектори:
A:link IMG { border: solid blue }
Също така, псевдо-селекторите могат да бъдат комбинирани с нормални класове:
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">external link</A>
Ако връзката в горния пример е посетена(visited), тя ще бъде визуализирана в син цвят. Нужно е да се отбележи, че имената на класовете предшестват тези на псевдо-класовете в селекторите.
2.2 Типографски псевдо-елементи
Някои често срещани типографски ефекти се асоциират не със структурни елементи, а с типографски такива, в зависимост от начина, по който се форматират на платното. В CSS1, могат да бъдат адресирани чрез псевдо-елементи два такива типографски ефекта: първия ред на елемента и първата буква.
CSS1 същина: Браузърите може да игнорират всички правила, съдържащи ':first-line' или 'first-letter' в селектора; друга възможност е да поддържат само част от свойствата на тези псевдо-елементи. (вижте глава 7)
2.3 Псевдо-елемент 'first-line'(първи ред)
Псевдо-елемента 'first-line' се използва за прилагане на специални стилове на първия ред, докато той се форматира на платното:
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.
На текстово-базиран браузър, това би се форматирало по подобен на следния начин:
THE FIRST LINE OF AN article in Newsweek.
Поредицата от измислени тагове в горния пример е:
<P> <P:first-line> The first line of an </P:first-line> article in Newsweek. </P>
Крайният таг на 'first-line' се вмъква в края на първия ред, който се форматира на платното.
Псевдо-елементът 'first-line' може да бъде прикачен единствено към блоков елемент.
Псевдо-елементът 'first-line' е подобен на вътрешноредов елемент, но притежава определени ограничения. Само следващите свойства могат да бъдат прилагани на 'first-line' елемент: шрифтови свойства(font-)(5.2), цветови и фонови свойства(5.3), разстояние между думите('word-spacing')(5.4.1), разстояние между буквите('letter-spacing')(5.4.2), текстови украшения('text-decoration')(5.4.3), вертикално подравняване(позициониране)('vertical-align') (5.4.4), трансформиране на текст('text-transform')(5.4.5), височина на редовете('line-height')(5.4.8), почистване('clear')(5.5.26).
2.4 Псевдо-елемент 'first-letter'(първа буква)
Псевдо-елементът 'first-letter' се използва за начални букви и т.н. drop caps, които са често срещани типографски ефекти. Той е подобен на вътрешноредов елемент, ако свойството му 'float' е установено на 'none', иначе е подобен на плаващ елемент. Ето и свойствата, които важат за 'first-letter' псевдо-елементите: шрифтови свойства(5.2), цветови и фонови свойства(5.3), текстови украшения('text-decoration')(5.4.3), вертикално позициониране('vertical-align') (само, когато 'float' е установен на 'none', 5.4.4), трансформиране на текста('text-transform') (5.4.5), височина на реда('line-height')(5.4.8), полеви свойства('margin')(5.5.1-5.5.5), padding свойства(5.5.6-5.5.10), свойства на рамката('border')(5.5.11-5.5.22), свойство 'float'(5.5.25), почистване('clear')(5.5.26).
Така може да бъде създаден 'dropcap' начална буква, която обхваща два реда:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
Ако текстово-базиран браузър поддържа псевдо-елемента 'first-letter'(което е малко вероятно) горния пример ще бъде форматиран по подобен начин:
___ | HE FIRST few | words of an article in the Economist.
Поредицата от измислени тагове е следната:
<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>
Забележете, че таговете на псевдо-елемента 'first-letter' граничат със съдържанието(т.е. първоначалната буква), докато началния таг на псевдо-елемента 'first-line' е вмъкнат вдясно след стартовия таг на елемента, към който е прикачен.
Браузърът дефинира това кои символи влизат вътре в 'first-letter' елемента. Обикновено кавичките, които се намират преди първата буква биват включени:
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
Когато параграфа започва с друг пунктуационен знак(например кръгли скоби и елипсовидни точки) или други символи, които обикновено не биват считани за букви(например цифри и математически символи), 'first-letter' псевдо-елементите най-често са игнорирани.
Някои езици имат специфични правила за това, как да бъдат третирани определени комбинации от букви. В холандския, например, ако буквената комбинация "ij" присъства в началото на думата, и двете букви би трябвало да влизат в 'first-letter' псевдо-елемента.
Псевдо-елементът 'first-letter' може да бъде прикачен единствено към блоков елемент.
2.5 Псевдо-елементи в селектори
При контекстните селектори, псевдо-елементите са позволени единствено в края на селектора:
BODY P:first-letter { color: purple }
Псевдо-елементите могат да бъдат комбинирани с класове в селектори:
P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</A>
Горният пример би трябвало да направи началната буква на всички 'p' елементи, които се намират 'class=initial' червени. Когато са кобинирани с класове или псевдо-класове, псевдо-елементите трябва да бъдат определени в края на селектора. Само един псевдо-елемент може да бъде определен в селектор.
2.6 Множество псевдо-елементи
Някои псевдо-елементи могат да бъдат комбинирани:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Some text that ends up on two lines</P>
В този пример, първата буква на всеки 'p' елемент ще бъде зелена и големината на шрифта й ще е 24pt(пункта). Останалата част от реда(по начина, по който бива форматирана на платното) ще бъде синя, докато останалата част от параграфа ще е червена. Да предположим, че е сложен символ за нов ред преди думата "ends", тогава поредицата от измислени тагове е такава:
<P> <P:first-line> <P:first-letter> S </P:first-letter>ome text that </P:first-line> ends up on two lines </P>
Забележете, че елемента 'first-letter' се намира вътре в 'first-line' елемента. Свойствата, които бъдат зададени в 'first-line' ще бъдат наследени от 'first-letter', но се отменят, ако бъде зададени същите за елемента 'first-letter'.
Ако псевдо-елемент се намира в реален елемент, необходимите допълнителни тагове трябва да бъдат регенерирани в поредицата от измислени тагове. Например, ако span елемент обхваща </P:first-line> тага, стартовите и началните span тагове трябва да бъдат регенерирани и поредицата от измислени тагове става:
<P> <P:first-line> <SPAN> This text is inside a long </SPAN> </P:first-line> <SPAN> span element </SPAN>