REC-CSS1-19990111

Cascading Style Sheets, ниво 1

Препоръка на W3C, 17 декември 1996, последна преработка на 11 Януари 1999

Тази версия:	http://www.w3.org/TR/1999/REC-CSS1-19990111
Последна версия:	http://www.w3.org/TR/REC-CSS1
Предишна версия:	http://www.w3.org/TR/REC-CSS1-961217
Автори(Authors):	Хейкон Уиум Ли(Hakon Wium Lie) (howcome@w3.org) Берт Бос(Bert Bos) (bert@w3.org)
Превод(Translator):	Трифон Статков(Triphon Statkoff, a.k.a. s0b1.340)(trezeguet@gmail.com)

Това е превод, така че не е гарантирана абсолютната точност на съдържанието. Надявам се да дам добър пример и да се появят още преводи на спецификации на български. Оригиналната версия на английски език на тази спецификация може да бъде намерена на адрес: http://www.w3.org/TR/1999/REC-CSS1-19990111

Статукво на този документ

Този документ е W3C препоръка. Той е бил разглеждан от членове на W3C (World Wide Web Consortium; http://www.w3.org/) и е бил постигнато всеобщо съгласие, че спецификацията е подходяща за употреба. Това е постоянен документ и може да бъде използван като справочник или да бъде цитиран в някой друг документ. W3C насърчава често срещаното разгръщане на тази Препоръка.

Списък с текущите W3C препоръки и други технически документи може да бъде намерен на адрес http://www.w3.org/TR/.

Този документ е преработена версия на документа, който е издаден за пръв път на 17 декември 1996. Промените в сравнение с оригиналната версия са изброени в Приложение Ж(F). с познатите грешки в тази спецификация може да бъде намерен на адрес http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata Бел.прев.: Това е превод и неговата абсолютна точност не е гарантирана. Не забравяйте, че можете да намерите оригиналния текст на английски на адрес: http://www.w3.org/TR/CSS1

РЕЗЮМЕ

Този документ определя ниво 1(level 1) на Cascading Style Sheet механизма(CSS1). CSS1 е прост style sheet механизъм, който позволява на авторите и читателите да прикачат стил(например шрифтове, цветове и отмествания) към HTML документи. Езика CSS1 е четим и на него може да бъде писано от хора и изразява стила в общата терминология в desktop publishing-a.

Едно от основните свойства на CSS е, че стиловите листа(style sheet-овете) се изсипват; авторите могат да прикачат желания стилов лист, докато читателя може да има личен стилов лист, който да приспособи документа за човешки или технологически недъзи. Правилата за решаване на конфликти между различните стилови листа са дефинирани в тази спецификация.

Тази Препоръка е резултат от дейностите на W3C в областта на стиловите листа. За допълнителна информация върху тях вижте глава [1].

СЪДЪРЖАНИЕ

ТЕРМИНОЛОГИЯ

атрибут: HTML атрибут
aвтор: автора на HTML документа
блоков елемент: елемент, който включва символа за нов ред в своето начало и край(например h1 в HTML)
платно: частта от браузъра на потребителя, в която се рендерират(показват) документите
дъщерен елемент: поделемент в SGML [5] терминологията
контекстов селектор: селектор, който подбира елементите, в зависимост от тяхната позиция в структурата на документа. Контекстовия селектор се състои от няколко прости селектора. Например, контекстовия селектор 'h1.initial b' се състои от два прости селектора, 'h1.initial' и 'b'.
CSS: Cascading Style Sheets
CSS1: Cascading Style Sheets, ниво(level) 1. Този документ определя CSS1, който е прост style sheet механизъм, предназначен за уеб пространството.
Напредничави свойства на CSS1: Свойства, които са описани в тази спецификация, но са окачествени като такива, които не са сред съществените свойства на CSS1.
Съществени свойства на CSS1: частта от CSS1, която се изисква във всички приспособени към CSS1 браузъри.
CSS1 парсер: браузър, който чете CSS1 стилови листове(style sheets)
декларация: свойство(например 'font-size') И съответната му стойност(например '12pt')
дизайнер: дизайнера на стиловия лист
документ: HTML документ
елемент: HTML елемент
тип на елемента: обширен идентификатор в SGML [5] терминологията
въображаема поредица от тагове: инструмент за описание на поведението на псевдо-класовете и псевдо-елементите.
размер на шрифта: размера, за който е създаден шрифта. По принцип, размера на шрифта е приблизително равен на разстоянието от долната част на най-ниската буква с камшиче, до горната част на най-високата буква с такава добавка и (по желание) с diacritical знак.
HTML: Hypertext Markup Language [2], приложение на SGML.
разширение на HTML: код, представен от продавачи на браузъри, най-често с цел поддръжка на определени визуални ефекти. Елементите 'font', 'center' и 'blink' са примери за HTML разширения, също както и 'bgcolor' атрибута. Една от целите на CSS е да осигури алтернатива на HTML разширенията.
вътрешноредов елемент: елемент, който не съдържа знак за нов ред преди и след себе си(например 'strong' в HTML)
свойствени измерения: широчината и височината, както са дефинирани от самия елемент, без да са наложени от околните елементи. В тази спецификация се предполага, че всички заместени и само заместени елементи носят със себе си и свойствени измерения.
родителски елемент: съдържащия елемент в SGML [5] терминологията
псевдо-елемент: псевдо-елементите се използват при CSS селекторите, за да адресират типографични елементи(например първия ред на елемента), вместо структурни такива.
псевдо-клас: псевдо-класовете се използват при CSS селекторите, за да позволят на информация, външна за HTML източника(например факта дали една котва е била посетена или не) да класифицира елементите.
свойство: стилов параметър, на който може да се влияе чрез CSS. Тази спецификация дефинира списък от свойства и съответните им стойности.
читател: лицето, на което се показва документа
заместен елемент: елемент, за който CSS форматора знае единствено свойствените измерения. В HTML елементите 'img', 'input', 'textarea', 'select' и 'object' представляват примери за заместени елементи. Например, съдържанието на елемента 'img', често се замества от изображение, към което сочи атрибута src. CSS1 не дефинира начина, по който се намират свойствените измерения.
правило: декларация(например 'font-family: helvetica') и нейния селектор(например 'h1')
селектор: символен низ, който идентифицира за какви елементи се отнася съответното правило. Селектора може да е или прост(например 'h1') или контекстов(например 'h1 b'), който се състои от няколко прости селектора.
SGML: Standard Generalized Markup Language [5]; приложение на който е и HTML
прост селектор: селектор, който подбира елементите базирайки се на техния тип и/или атрибути, а не на позицията на елемента в структурата на документа. Например 'h1.initial' е прост селектор.
стилов лист(style sheet): сбор от правила
UA(user agent): уеб браузър или уеб клиент
потребител: синоним на читател
тежест: приоритета на правило

В текста на тази спецификация единичните кавички('...') обозначават извадки от HTML и CSS.

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 парсера коментара е еквивалентен на празно място.

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>

3 КАСКАДНИЯТ МОДЕЛ

Презентацията в CSS може да бъде повлияна от повече от един стилов лист. Съществуват две основни причина за това свойство: приспособимост и баланс автор/читател.

приспособимост

Дизайнер на стилови листа може да комбинира няколко(непълни) стилови листа, за да намали претрупаността:

@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);

H1 { color: red }     /* променя импортираните стилове */

баланс автор/читател

И читателите, и авторите могат да изменят презентацията чрез стилови листа. За да го направят, те използват един и същи език за стилови листа, което води до едно фундаментално свойство на уеб средата: всеки може да бъде издател. Браузърът избира механизма за отнасяне към личните стилови листа.

Понякога може да възникнат конфликти между стиловите листа, които да повлияят на презентацията. Решението на тези конфликти се базира на идеята всяко стилово правило да има свое тегло. По подразбиране, теглото на правилата на читателите е по-малко от това на правилата на документите на автора. Т.е., ако съществуват противоречия между стиловите листа на входящ документ и личните листа на читателя, ще бъдат използвани правилата на автора. И читателските, и авторските правила надделяват над стойностите по подразбиране на браузъра.

Импортираните стилови листа също прилагат каскадния модел едни на други в реда, по който са били импортирани, в зависимост от каскадните правила, дефинирани по-долу. Правила, които са били декларирани в самия стилов лист надделяват над правилата в импортираните стилови листа. Това ще рече, че импортираните стилови листа се намират по-ниско в каскадния ред от правилата в самия стилов лист. Импортираните стилови листа, от своя страна, могат да импортират и надделяват над други стилови листа, и т.н.

В CSS1, всички '@import' оператори трябва да настъпват в началото на стиловия лист, преди каквито и да са декларации. Така още по-лесно се вижда, че правилата в самия стилов лист надделяват над правилата в импортираните стилови листа.

3.1 'важно'('important')

Дизайнерите на стилови листа могат да увеличат тежестта на своите декларации:

H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }

В примера, показан горе, първите три декларации имат по-голямо тегло, докато последната декларация има нормално тегло.

A Читателско право с декларация 'important' ще надделее над авторско правило с нормална декларация. Авторско право с декларация 'important' ще надделее над читателско право с декларация 'important'.

3.2 Каскаден ред

Противоречащите правила са свойствени за механизма на CSS. За да бъде намерена стойността на комбинацията елемент/свойство, трябва да се следва следния алгоритъм:

Да бъдат намерени всички декларации, които важат за комбинацията елемент/свойство, за която става на въпрос. Декларациите важат, ако селектора пасва на елемента, за който става на въпрос. Ако декларациите не важат се използва наследената стойност. Ако няма наследена стойност(такъв е случая при 'html' елемента и при свойствата, които не се наследяват), се използва първоначалната стойност.
Подредете декларациите по ясно тегло: декларациите маркирани с '!important' имат по-голямо тегло от немаркираните(нормалните) декларации.
Подредете по произход: авторовите стилови листа надделяват над читателските стилови листа, които от своя страна надделяват над настройките по подразбиране на браузъра. Импортиран стилов лист има същия произход като стиловия лист, от който е импортиран.
Подредете в зависимост от спецификата на селектора: по-специфичните селектори ще надделеят над по-обобщените такива. За да намерите спецификата, пребройте броя на ID атрибутите в селектора(a), броя на класовите атрибути в селектора(b) и броя на имената на тагове в селектора(c). Сбора на трите числа(в бройна система с голяма основа) дава стойността на спецификата. Ето и някои примери:
```
LI            {...}  /* a=0 b=0 c=1 -> специфика =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> специфика =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> специфика =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> специфика =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> специфика =  13 */ 
#x34y         {...}  /* a=1 b=0 c=0 -> специфика = 100 */ 
```
Псевдо-елементите и псевдо-класовете се броят като нормални елементи и класове, съответно.
Подредете по реда на деклариране: ако две правила имат едно и също тегло, последното, което е било декларирано надделява. Смята се, че правилата в импортираните стилови листа трябва да се намират преди всички други правила в самия стилов лист.

Търсенето на стойност на свойство може да бъде прекъснато, когато едно правило има по-голямо тегло от другите правила, които важат за същата комбинация елемент/свойство.

Тази стратегия дава на авторските стилови листа значително по-голямо тегло от тези на читателите. За това е много важно читателя да притежава способността да изключва влиянието на определен стилов лист, например чрез падащо меню.

Декларация в атрибута 'style' на елемента(вижте примера в глава 1.1) има същото тегло, като декларация в ID-базиран селектор, който е деклариран в края на стиловия лист:

<STYLE TYPE="text/css">
  #x97z { color: blue }
</STYLE>

<P ID=x97z STYLE="color: red">

В горния пример цвета на елемента 'p' ще е червен. Въпреки, че спецификата е една и съща и при двете декларации, декларирането в атрибута 'style' ще надделее над това в 'style' елемента, поради причини, споменати в каскадно правило номер 5.

Браузърът може да избере почете други стилистически HTML атрибути, например 'align'. Ако това стане, тези атрибути се превеждат на съответните CSS правила със стойност за специфика, равна на 1. Счита се, че правилата трябва да бъдат в началото на авторския стилов лист и последващите стилови листа могат да надделеят над тях. По време на фазата на преминаване, тази стратегия ще улесни едновременното съществуване на стиловите атрибути, заедно с други стилови листа.

4 МОДЕЛ НА ФОРМАТИРАНЕ

CSS1 използва прост кутийно-ориентиран модел на форматиране, в който всеки форматиран елемент бива интерпретиран като една или повече правоъгълни кутии. (Елементите, чиято стойност на атрибута 'display' е установена на 'none' не се форматират и следователно няма да бъдат интерпретирани като кутия). Всички кутии имат своя собствена област на съдържание, като по избор могат да бъдат зададени стойности за уплътнение('padding'), рамки('border') и полета('margin').

 _______________________________________
|                                       |
|           поле(прозрачно)('margin')   |
|   _________________________________   |
|  |                                 |  |
|  |        рамка('border')          |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     уплътнение('padding') |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  съдържание         |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

          |широчина на елемента|
|          широчина на кутията          |

Размера на полето, рамката и уплътнителната област се задават с помощта съответно на свойствата margin(5.5.1-5.5.5), padding(5.5.6-5.5.10), и border(5.5.11-5.5.22). Уплътнителната област използва същия фон като самия елемент(зададен чрез фоновите свойства(5.3.2-5.3.7)).Цвета и стила на рамката се задава чрез свойствата й. Полетата винаги са прозрачни, така че родителския елемент ще се вижда, когато е под тях.

Размера на кутията се определя от сбора на широчината на елемента(например форматиран текст или изображение) и този на на уплътнителната област, рамката и полетата.

От гледна точка на форматиране съществуват два основни типа елементи: блокови и вътрешноредови.

4.1 Блокови елементи

Елементите, стойността на атрибута 'display', на които е установена на 'block' или 'list-item' се наричат блокови елементи. За блокови елементи се считат и плаващите такива(тези, чиято стойност 'float' е различна от 'none).

Следващият пример показва как полетата и уплътнението форматират елемент 'ul' с два дъщерни елемента. За да бъде по-проста скицата няма рамки. Също така, еднобуквените константи в този пример не са валиден CSS1 синтаксис, но са удобен начин да бъдат включени стилови стойности във фигурата.

<STYLE TYPE="text/css">
  UL { 
    background: red; 
    margin: A B C D;      
    padding: E F G H;
  }
  LI { 
    color: white;    
    background: blue;     /* текста е бял на син фон */ 
    margin: a b c d; 
    padding: e f g h;
  }
</STYLE>
..
<UL>
  <LI>1st element of list
  <LI>2nd element of list
</UL>

 _______________________________________________________
|                                                       |
|    A      UL поле('margin')(прозрачно)                |
|    _______________________________________________    |
| D |                                               | B |
|   |    E UL уплътнителна област('padding')(червена|   |
|   |    _______________________________________    |   |
|   | H |                                       | F |   |
|   |   |    a   LI поле('margin')(прозрачно,   |   |   |
|   |   |        така че прозира червения цвят) |   |   |
|   |   |    _______________________________    |   |   |
|   |   | d |                               | b |   |   |
|   |   |   | e LI уплътнение('padding')син)|   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  първи елемент от списъка f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |     max(a, c)                         |   |   | <- забележете, че се търси максималната стойност
|   |   |    _______________________________    |   |   |
|   |   |   |                               |   |   |   |
|   |   | d | e LI уплътнение('padding')син)|   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  втори елемент от списъка f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |   c  LI поле('margin')(прозрачно,     |   |   |
|   |   |      така че прозира червения цвят)   |   |   |
|   |   |_______________________________________|   |   |
|   |                                               |   |
|   |    G                                          |   |
|   |_______________________________________________|   |
|                                                       |
|   C                                                   |
|_______________________________________________________|

Технически, свойствата 'padding' и 'margin' не се наследяват. Но, както примера показва, разположението на елемента е относително с това на предшествениците и подобните му, така че стойностите за уплътнение и поле на тези елементи влияят върху дъщерните им елементи.

Ако в горния пример бяха включени рамки('border') те щяха да се намират между уплътнението и полетата.

Следващата фигура демонстрира малко полезна терминология:

                           --------------- <-- външен горен ръб
                             горно поле
                           ---------------
                             горна рамка
                           ---------------
                            горно уплътнение
                           +-------------+ <-- вътрешен горен ръб
|        |        |        |             |         |         |         |
|--ляво--|--лява--|--ляво--|--съдържание-|--дясно--|--дясна--|--дясно--|
|  поле  |  рамка | уплътн.|             | уплътн. |  рамка  |   поле  |
|        |        |        |             |         |         |         |
                           +-------------+ <-- вътрешен долен ръб
^                          ^             ^                             ^
ляв         ляв вътрешен ръб             десен вътрешен ръб          right
външен                                                             					   външен
ръб                  долно уплътнение                                              ръб
                           ---------------
                             долна рамка
                           ---------------
                             долно поле
                           --------------- <-- долен външен ръб

Левият външен ръб е ръба на елемента, ако се взимат в предвид стойностите, зададени на неговото уплътнение, рамка и поле. Левият вътрешен ръб е ръба единствено на съдържанието, което се намира във вътрешността на уплътнението, рамката или полето. Същото се отнася и за дясната част. Горната част е горната част на елемента , като се взимат в предвид стойностите, зададени за уплътнение, рамка и поле; тя е дефинирана единствено за вътрешноредови и плаващи елементи, но не и за не-плаващи блокови елементи. Вътрешния горен ръб е горния ръб на съдържанието, което се намира във вътрешността на уплътнението, рамката или полето, ако има такива. Долният ръбе долния ръб на елемента, извън стойностите за уплътнение, рамка и поле; той е дефиниран за вътрешноредови и плаващи елементи, но не и за блокови елементи. Вътрешният долен ръб е долния ръб на елемента, вътре в стойностите за уплътнение, рамка и поле.

Широчината на елемента е широчината на съдържанието, т.е. разстоянието между левия вътрешен ръб и десния вътрешен ръб. Височината е височината на съдържанието, т.е. разстоянието от вътрешния горен ръб до вътрешния долен ръб.

4.1.1 Вертикално форматиране

Широчината на полето на не-плаващ блоков елемент определя минималното разстояние до ръбовете на околните кутии. Две или повече съседни вертикални полета(т.е. без рамка, уплътнение или съдържание между тях) се сливат, така че да се използва максималната стойност от тях. В повечето случаи, след сливане на вертикални полета резултата е по-приятен за окото и по-близък до това, което дизайнера очаква. В примера по-горе, полетата между двата 'li' елемента се сливат чрез използване на максималната стойност от тази, зададена на 'margin-bottom' атрибута на първия елемент и тази, зададена на 'margin-top' атрибута на втория елемент. Подобно, ако уплътнението между 'ul' елемента и първия 'li' елемент(константата E) е било със стойност 0 , полето на ul елемента и това на първия li елемент щяха да се слеят.

В случай, че са зададени отрицателни полета, абсолютния максимум от отрицателните съседни полета се изважда от максимума на положителните съседни полета. Ако не съществуват положителни полета, абсолютния максимум на отрицателните съседни полета се изважда от 0.

4.1.2 Хоризонтално форматиране

Хоризонталната позиция, както и размера на неплаващ, блоков елемент се определя от седем свойства: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' и 'margin-right'. Сумата на тези седем атрибута е винаги равна на широчината('width') на родителския елемент.

По подразбиране, стойността на 'width' свойството е 'auto'. Ако елемента не е заместен такъв, 'width' се изчислява от браузъра, така че сумата на споменатите по-горе седем свойства да бъде равна на широчината на родителския елемент. Ако елемента е заместен елемент, стойността 'auto' на свойството 'width' автоматично се замества от собствената широчина на елемента.

За три от седемте свойства може да бъде зададена автоматична стойност('auto'): 'margin-left', 'width' и 'margin-right'. При заместени елементи стойност 'auto', зададена на широчината('width') може да бъде заместена от присъщата широчина, така че за тях може да има и само две стойности 'auto'.

Свойството 'width' притежава неотрицателна минимална стойност, която се дефинира от браузъра(която може да се различава от елемент на елемент и дори може да зависи от други свойства). Ако стойността на 'width' попадне под тази граница или защото е зададена изрично или защото има стойност 'auto' и правилата по-долу са я направили твърде малка, стойността ще бъде заместена с минималната такава.

Ако на точно един от елементите 'margin-left', 'width' или 'margin-right' е зададена стойност 'auto', браузърът ще присвои на това свойство такава стойност, че сумата на седемте свойства да бъде равна на широчината на родителския елемент.

Ако няма свойство със зададена стойност 'auto', ще се счете, че стойността на 'margin-right' е със стойност 'auto'.

Ако на повече от едноот три свойства е зададена стойност 'auto, и едно от свойствата с такава стойност е 'width', тогава на останалите('margin-left' и/или 'margin-right') ще бъде зададена стойност 0 и на 'width' ще бъде зададена такава стойност, че сумата на седемте свойства да бъде равна на широчината на родителския елемент.

Иначе, ако и 'margin-left' и 'margin-right' са зададени на 'auto' ще имат равни стойности. Това ще разположи елемента централно в неговия родителски такъв.

Ако 'auto' е зададено като стойност на едно от седемте свойства в елемент, който е вътрешноредов или плаващ, това свойства ще бъде третирано, сякаш му е зададена стойност 0.

За разлика от вертикалните полета, хоризонталните не могат да се сливат.

4.1.3 Елементи от списък(List-Item)

Елементите, стойността на атрибута 'display', на които е зададена на 'list-item' биват форматирани като блокови елементи, но се предшестват от маркер за списък. Типа на този маркер се определя от свойството 'list-style'. Маркера се разполага в зависимост от стойността на 'list-style' свойството:

<STYLE TYPE="text/css">
  UL         { list-style: outside }
  UL.compact { list-style: inside }
</STYLE>
  
<UL>
  <LI>first list item comes first
  <LI>second list item comes second
</UL>

<UL CLASS=COMPACT>
  <LI>first list item comes first
  <LI>second list item comes second
</UL>

Горния пример ще бъде форматиран по подобен начин:

* first list item 
  comes first

* second list item
  comes second

  * first list
  item comes first

  * second list
  item comes second

В текст, който се разполага от дясно на ляво, маркерите ще бъдат разположени от дясната страна на кутията.

4.1.4 Плаващи елементи

Чрез свойството 'float' може да бъде декларирано, че един елемент се намира извън нормалния поток на елемeнтите. Тогава той се форматира като блоков елемент. Например, чрез задаване на стойност 'left' за свойството 'float' на изображение, то ще бъде местено наляво, докато не бъде достигнато полето, уплътнението или рамката на друг блоков елемент. Нормалния поток ще обгърне елемента от дясната му страна. Полетата, рамките и уплътненията на самия елемент ще бъдат спазени и полетата няма да се сливат с тези на съседните елементи.

Позиционирането на плаващия елемент е подчинено на следните ограничения(вижте глава 4.1за обяснение на термините):

Левият външен ръб на плаващ вляво елемент(такъв, на чийто атрибут 'float' е зададена стойност 'left') може и да не се намира вляво на левия вътрешен ръб на своя родителски елемент. Същото се отнася и за плаващите вдясно елементи.
Левият външен ръб на плаващ вляво елемент трябва да се намира вдясно на десния външен ръб на всеки по-ранен(в зависимост от момента си на появяване в HTML сорс кода) плаващ вляво елемент или горната част на първия трябва да е по-ниско от долната част на последния. Същото важи и за плаващите вдясно елементи.
Десният външен ръб на плаващия вляво елемент не може да се намира вдясно на левия външен ръб на който и да е плаващ вдясно елемент, който се намира вдясно от него. Същото важи и за плаващите вдясно елементи.
Горният ръб на плаващ елемент не може да се намира по-високо от вътрешния горен ръб на неговия родителски елемент.
Горният ръб на плаващ елемент не може да се намира по-високо от горния ръб на по-рано деклариран плаващ или блоков елемент.
Горният ръб на плаващ елемент не може да се намира по-високо от всяка редова кутия(вижте глава 4.4) със съдържание, която го предшества в HTML сорс кода.
Горният ръб на плаващ елемент трябва да бъде разположен, колкото се може по-високо.
Плаващ вляво елемент трябва да бъде разположен максимално вляво, плаващ вдясно елемент трябва да бъде разположен максимално вдясно. Предпочита се по-високата позиция пред тази, която е по-далеч от лявата/дясната част.

<STYLE TYPE="text/css">
  IMG { float: left }
  BODY, P, IMG { margin: 2em }
</STYLE>

<BODY>
  <P>
    <IMG SRC=img.gif>
    Some sample text that has no other...
</BODY>

Горния пример може да бъде форматиран по подобен на долния начин:

 ________________________________________
|
|          max(BODY поле, P поле)
|          ______________________________
|    |    |       Some sample text
| B  | P  | IMG полета, чиято единствена
| O  |    |    _____    цел е да 
| D  | П  |   |     |   покажат как плаващите
| Y  | о  |   | IMG |   елементи се придвижват
|    | л  |   |     |   откъм страната на 
| п  | е  |   |_____|   родителския елемент
| о  |    |             докато се спазват
| л  |    |             полета, рамки
| е  |    |             и уплътнение. Обърнете внимание
|    |    |на това как съседните вертикални полета 
|    |    |при неплаващите блокови елементи
|    |    |се сливат.

Забележете как полето на 'p' елемента огражда плаващия 'IMG' елемент.

Съществуват две ситуации, при които плаващите елементи могат да застъпят полето, рамката и уплътнителните области на други елементи:

когато плаващия елемент има негативно поле: негативните полета на плаващите елементи се третират, както и при останалите блокови елементи.
когато плаващия елемент е по-широк или по-висок от елемента, в който се намира.

4.2 Вътрешноредови елементи

Елементите, които не са форматирани като блокови елементи, се наричат вътрешноредови елементи. Вътрешноредовият елемент може да дели редовото пространство с други елементи. Вземете в предвид следния пример:

<P>Several <EM>emphasized</EM> words <STRONG>appear</STRONG>.</P>

Елементът 'p' обикновено е блоков, докато 'em' и 'strong' са вътрешноредови елементи. Ако елемента 'p' е достатъчно широк, че да бъде форматиран целия елемент на един ред ще има два вътрешноредови елемента на реда:

Several emphasized words appear.

Ако мястото на един ред не е достатъчно вътрешноредовия елемент ще бъде разделен на няколко кутии:

<P>Several <EM>emphasized words</EM> appear here.</P>

Горния пример ще бъде форматиран по подобен начин на този, показан по-долу:

Several emphasized
words appear here.

Ако към вътрешноредовият елемент са прикачени полета, рамки, уплътнение или текстови украшения, те няма да укажат ефект на местата, където елемента е счупен:

         ----------
Several |emphasized
         ----------
-----
words| appear here.
-----

(по-горната фигура е леко деформирана, поради употребата на ASCII графика. Вижте глава 4.4, където има описание на това как да се изчислява височината на редовете.

4.3 Заместени елементи

Заместен елемент е елемент, който е заместен от съдържание, което е посочено от него. Например, в HTML, елемента 'img' е заместен от изображение, което е посочено от 'src' атрибута. Може да се предположи, че заместените елементи вървят ръка за ръка със своите свойствени измерения. Ако стойността на свойството 'width' е установена на 'auto', присъщата широчина се използва като широчина на елемента. Ако е зададена стойност, различна от 'auto' в стиловия лист, тази стойност се използва и размера на заместения елемент се променя в зависимост от стойността(метода на промяна на размера ще зависи от media типа). Свойството 'height' се използва по същия начин.

Заместените елементи могат да бъдат или блокови, или вътрешноредови.

4.4 Височина на редовете

Всички елементи притежават 'line-height' свойство, което по същество, дава общата височина на ред от текста. Добавя се място отгоре и отдолу на текста на реда, така че височината на реда да бъде равна на зададената. Например, ако текста е висок 12pt(12 пункта) и 'line-height' свойството е установено на 14pt(14 пункта), допълнително място от 2 пункта се добавя, а именно 1 пункт над и 1 пункт под реда. Празните елементи влияят на тези изчисления по същия начин, по който влияят и елементите със съдържание.

Разликата между размера на шрифта и 'line-height' стойността се нарича leading. Половината от тази стойност се нарича half-leading. След форматирането, всеки ред ще сформира правоъгълна редова кутия.

Ако един ред с текст съдържа области, в които са зададени различни стойности на свойството 'line-height'(поради това, че има вътрешноредови елементи на реда), то всяка от тези области ще има своя-собствена стойност за half-leading съответно отгоре и отдолу. Височината на редовата кутия се определя от разстоянието на най-високата точка в най-високата област до най-ниската точка на най-ниската област. Забележете, че не е задължително горната част и долната част да отговарят на тези на най-високия елемент, тъй като елементите могат да бъдат позиционирани вертикално чрез свойството 'vertical-align'. За да бъде сформиран параграф, всяка редова кутия се поставя веднага след предишния ред.

Нужно е да се подчертае, че ако има уплътнение, рамка или поле над или под незаместените вътрешноредови елементи, това няма да повлияе на височината на реда. С други думи: ако стойността, зададена на 'line-height' е твърде малка за съответното уплътнение или рамка, ще се получи застъпване с текста на други редове.

Заместените елементи(например изображенията) на реда могат да направят редовата кутия по-голяма, ако горната част на заместения елемент(това включва всички уплътнения, рамки или полета) се намира над най-високата област в текста или ако долната част се намира под най-ниската област от текста.

В най-често срещания случай, когато се използва само една стойност за свойството 'line-height' в един параграф, и няма високи изображения, горната дефиниция ще гарантира, че baseline частите на последователните редове се намират на точно такова разстояние по между си, каквото е зададено със свойството 'line-height'. Това е важно, например, когато колони от текст, който е с различен шрифт трябва да бъдат подравнени в таблица.

Забележете, че това не изключва възможността текст на два съседни реда да се застъпва. За свойството 'line-height' може да се зададе стойност, по-малка от тази на височината на текста, като в този случай leading стойността ще е отрицателна. Полезно е, ако знаете, че текста няма да съдържа символни очертания под baseline частта на редовете(т.нар. descender-и)(например, защото съдържа само главни букви), така че редовете могат да бъдат разположени по-близо един до друг.

4.5 Платно

Платното е част от изобразителната област на браузъра, в която документите се визуализират. Нито един структурен елемент на документа не отговаря на платното, поради което възникват два въпроса при форматирането на документа:

от къде трябва да се зададат размерите на платното?
как да се визуализира празната област, когато документа не заема цялото платно?

Разумен отговор на първия въпрос е, че първоначалната широчина на платното зависи от размера на прозореца, но CSS1 оставя този въпрос в ръцете на браузъра. Също така е разумно да се очаква браузъра да променя широчината на платното, когато размера на прозореца бъде променен, но това също е извън възможностите на CSS1.

HTML разширенията са образували прецедент при втория въпрос: атрибутите на елемента 'body' задават фона на цялото платно. За да бъдат задоволени очакванията на дизайнерите, CSS1 представя специално правило, с което се намира фона на платното:

Ако стойността 'background' на елемента 'html' е със стойност, различна от 'transparent'(прозрачен фон) тогава тя се използва, в противен случай се използва 'background' стойността на елемента 'body'. Ако съответната стойност е 'transparent' визуализирането не се дефинира.

Това правило позволява следния код:

<HTML STYLE="background: url(http://style.com/marble.png)">
<BODY STYLE="background: red">

В примера горе платното ще бъде покрито с изображението "marble.png". Фонът на елемента 'body'(който може и да не покрива напълно платното) ще бъде червен.

Докато не се появят други средства за адресиране на платното, се препоръчва свойствата на платното да се задават чрез елемента 'body'.

4.6 'BR' елементи

Текущите CSS1 свойства и стойности не могат да опишат описанието на елемента 'br'. В HTML, 'br' елемента служи за деклариране на преминаване на нов ред в думите. Фактически, елемента се замества от символ за нов ред. Бъдещите версии на CSS най-вероятно ще могат да се справят с добавено и заместено съдържание, но CSS1-базираните форматори трябва да третират 'br' елемента по специфичен начин.

5 CSS1 СВОЙСТВА

Стиловите листа влияят на визуализацията на документите чрез присвояване на стойности на стилови свойства. Тази глава изброява дефинираните стилови свойства и съответния им списък от възможни стойности в CSS1.

5.1 Система за означаване на стойностите на свойства

В текста по-долу допустимите стойности на всяко свойство са изброени със синтаксис, подобен на следния:

Стойност: N | NW | NE
Стойност: [ <дължина> | дебел | тънък ]{1,4}
Стойност: [<име на семейството> , ]* <име на семейството>
Стойност: <url>? <цвят> [ / <цвят> ]?
Стойност: <url> || <цвят>

Думите, намиращи се между символите "<" и ">" определят типа на стойността. Най-често срещаните типове са <дължина>, <процент>, <url>, <число> и <цвят>; те са описани в глава 6. По-специализираните типове(например <име на семейството> and <стил на рамката>) са описани под съответното свойство.

Другите думи са ключови и трябва да се използват буквално, без кавички. Наклонената черта или слаш(/) и запетаята(,) трябва също да се изобразяват буквално.

Това, че няколко неща са поставени едно до друго, означава че те трябва да се използват в дадения ред. Вертикалната черта(|) разделя алтернативите: трябва да се използва една от тях. Двойна вертикална черта(A || B) означава, че или A, или B, или и двете трябва да се зададат, в какъвто и да е, ред. Квадратните скоби([]) се използват за групиране. Поставянето на думи една до друга е с по-силен приоритет от този на двойната вертикална черта, а двойната вертикална черта е с по-силен приоритет от вертикалната черта. Така "a b | c || d e" е равносилно на "[a b ] | [c || [ d e ]]".

Всеки тип, ключова дума или група, заградена в скоби трябва да бъдат последвани от един от следните модификатори:

звездичката(*) означава, че предшестващия я тип, дума или група се повтаря нула или повече пъти.
плюс(+) означава, че предшестващия тип, дума или група се повтарят един или повече пъти.
въпросителен(?) означава, че предшестващия тип, дума или група не са задължителни.
двойка числа в кръгови скоби({A,B}) означава, че предшестващия тип, дума или група се повтаря най-малко A и най-много B на брой пъти.

5.2 Шрифтови свойства

Задаването на шрифтови свойства би трябвало да бъде сред най-често срещания начин за употреба на стиловите листа. За съжаление, не съществува добре дефинирана, приемлива навсякъде система за класифициране на шрифтове и термини, които важат за едно семейство от шрифтове, може да не са подходящи за друго. Например 'italic' е всеобщо използван термин, значещ наклонен текст, но наклонения текст може да бъде наречен и Oblique, Slanted, Incline, Cursive или Kursiv. Следователно, това да бъдат разпределени типичните свойства на шрифтовата селекция на определен шрифт, не е прост проблем.

CSS1 дефинира свойствата 'font-family', 'font-style', 'font-variant' и също така 'font-weight', 'font-size', 'font'.

5.2.1 Уеднаквяване на шрифтове

Поради това, че няма общоприета, универсална система за класификация на шрифтовите свойства, подбора на свойства за шрифтовете трябва да се прави внимателно. Свойствата се подбират по точно-определен ред, за да се гарантира, че резултатите от този подборен процес ще са, колкото се може по-еднакви сред различните браузъри(ако се предполага, че на всеки от тях се презентира същата библиотека от шрифтове).

Браузърът прави(или установява достъп) до база данни със свързани помежду си CSS свойства за всички шрифтове, за които е наясно. Браузърът може да е наясно за присъствието на шрифт, ако той е бил инсталиран локално или е бил изтеглен от Интернет преди това. Ако съществуват два шрифта с абсолютно еднакви свойства, единия от тях ще бъде игнориран.
В даден елемент и за всеки символ от този елемент, браузъра сглобява шрифтовите свойства, които са приложими за този елемент. Използвайки пълния списък със свойства, браузъра използва свойството 'font-family', за да избере тестово шрифтово семейство. Останалите свойства се тестват с това семейство, в зависимост от подборния критерий, описан във всяко свойство. Ако съществуват съвпадения с всички останали свойства, тогава това ще бъде шрифта, който пасва за дадения елемент.
Ако след изпълнението на стъпка 2 няма шрифт, зададен чрез 'font-family' свойството, който да пасва и, ако съществуват алтернативни стойности 'font-family' в шрифтовите настройки, се изпълнява стъпка 2 с тези алтернативни стойности на свойството 'font-family'.
Ако съществува пасващ шрифт, но той не съдържа графичната визуализация на текущия символ, и ако има следваща, алтернативна настройка 'font-family' в шрифтовите настройки, се повтаря стъпка 2 със следващата алтернативна настройка 'font-family'. Вижте приложение C, където има описание на шифроването на шрифтовете и символите.
Ако не съществува шрифт във фамилията, която е избрана в стъпка 2, се използва браузърно-зависимо шрифтово семейство(това, по подразбиране или по default) и се повтаря стъпка 2, използвайки се най-пасващия случай, който може да бъде получен от шрифта по подразбиране.

(Горния алгоритъм може да бъде оптимизиран, за да се избегне повторната проверка на CSS1 свойствата за всеки символ.)

Ето и подборните правила за свойствата от стъпка 2 по-горе:

Първо се опитва 'font-style'. 'italic' ще бъде задоволен, ако съществува шрифт в шрифтовата база данни на браузъра, който е обозначен с CSS ключовата дума 'italic'(по-предпочитания вариант) или 'oblique'. Иначе стойностите трябва да бъдат подбрани точно или настройките на шрифтовия стил ще бъдат неуспешни.
След това се опитва 'font-variant'.'normal' пасва на шрифт, който не е обозначен като 'small-caps'(малки букви); 'small-caps' пасва(1) на шрифт, обозначен като 'small-caps', (2) шрифт, в който малките букви са синтезирани, или(3) шрифт, в който всички малки букви са заместени от големи букви. Шрифт с малки букви може да бъде синтезиран чрез електронно мащабиране на големите букви от нормален шрифт.
Следващото нещо, което се подбира е 'font-weight'. Подборът винаги е успешен.(вижте 'font-weight' по-долу).
'font-size' или настройката за размера на шрифта трябва да бъде подбрана в зависими от браузъра граници на толеранс.(Обикновено, размерите на векторните шрифтове се закръгляват до най-близкия цял пиксел, докато толеранса при растерните шрифтове може да е около 20%.) По-нататъшни изчисления, например чрез 'em' стойностите в другите свойства се базират на стойността, която се използва за 'font-size' свойството, а не тази, която просто е зададена.

5.2.2 'font-family'(шрифтово семейство)

Стойност: [[<име на семейството> | <шрифтов род>],]* [<име на семейството> | <родово семейство>]
Първоначална стойност: Зависи от браузъра
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A

Стойността пре�