REC-CSS1-19990111
Cascading Style Sheets, ниво 1
Препоръка на W3C, 17 декември 1996, последна преработка на 11 Януари 1999
Това е превод, така че не е гарантирана абсолютната точност на съдържанието. Надявам се да дам добър пример и да се появят още преводи на спецификации на български. Оригиналната версия на английски език на тази спецификация може да бъде намерена на адрес: 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].
Резюме
Терминология
1
Основни понятия
1.1
Съдържане в HTML
1.2
Групиране
1.3
Наследяване
1.4
Клас като селектор
1.5
ID като селектор
1.6
Контекстни селектори
1.7
Коментари
2
Псевдо-класове и псевдо-елементи
2.1
Псевдо-класове-котви
2.2
Типографични псевдо-елементи
2.3
Псевдо-елемент "първи ред"
2.4
Псевдо-елемент "първа буква"
2.5
Псевдо-елементи в селектори
2.6
Множество псевдо-елементи
3
Каскадният модел
3.1
'Важно'('important')
3.2
Ред на изсипване
4
Модел на форматиране
4.1
Блокови елементи
4.1.1
Вертикално форматиране
4.1.2
Хоризонтално форматиране
4.1.3
Елементи от тип представител на списък(list-item)
4.1.4
Плаващи елементи
4.2
Вътрешноредови елементи
4.3
Заместени елементи
4.4
Височина на редовете
4.5
Платно
4.6
BR елементи
5
Свойства на CSS1
5.1
Система за означаване на стойности на свойства
5.2
Свойства на шрифтове
5.2.1
Уеднаквяване на шрифтове
5.2.2
Шрифтово семейство(font-family)
5.2.3
Стил на шрифтове(font-style)
5.2.4
Вариант на шрифтове(font-variant)
5.2.5
"Тежест" на шрифтове(font-weight)
5.2.6
Размер на шрифтове(font-size)
5.2.7
Шрифт(font)
5.3
Свойства на цвета и фона
5.3.1
Цвят(color)
5.3.2
Фонов цвят(background-color)
5.3.3
Фоново изображение(background-image)
5.3.4
Повторение на фона(background-repeat)
5.3.5
Прикаченост на фона(background-attachment)
5.3.6
Позициониране на фона(background-position)
5.3.7
Фон(background)
5.4
Текстови свойства
5.4.1
Разстояние между думите(word-spacing)
5.4.2
Разстояние между буквите(letter-spacing)
5.4.3
Текстови украшения(text-decoration)
5.4.4
Вертикално подравняване(vertical-align)
5.4.5
Трансформиране на текста(text-transform)
5.4.6
Подравняване на текста(text-align)
5.4.7
Назъбване на текста(text-indent)
5.4.8
Височина на реда(line-height)
5.5
Свойства на кутиите
5.5.1
Поле отгоре(margin-top)
5.5.2
Поле отдясно(margin-right)
5.5.3
Поле отдолу(margin-bottom)
5.5.4
Поле отляво(margin-left)
5.5.5
Поле(margin)
5.5.6
Уплътнение отгоре(padding-top)
5.5.7
Уплътнение отдясно(padding-right)
5.5.8
Уплътнение отдолу(padding-bottom)
5.5.9
Уплътнение отляво(padding-left)
5.5.10
Уплътнение(padding)
5.5.11
Широчина на горната рамка(border-top-width)
5.5.12
Широчина на дясната рамка(border-right-width)
5.5.13
Широчина на долната рамка(border-bottom-width)
5.5.14
Широчина на лявата рамка(border-left-width)
5.5.15
Широчина на рамка(border-width)
5.5.16
Цвят на рамката(border-color)
5.5.17
Стил на рамката(border-style)
5.5.18
Горна рамка(border-top)
5.5.19
Дясна рамка(border-right)
5.5.20
Долна рамка(border-bottom)
5.5.21
Лява рамка(border-left)
5.5.22
Рамка(border)
5.5.23
Широчина(width)
5.5.24
Височина(height)
5.5.25
Поток(float)
5.5.26
Изчистване(clear)
5.6
Свойства при класифицирането
5.6.1
Показване(display)
5.6.2
Бели пространства(white-space)
5.6.3
Тип на списъка(list-style-type)
5.6.4
Изображение на списъка(list-style-image)
5.6.5
Позициониране на списъка(list-style-position)
5.6.6
Стил на списъка(list-style)
6
Мерни единици
6.1
Мерни единици за дължина
6.2
Процентни мерни единици
6.3
Цветови мерни единици
6.4
URL
7
Спазване на CSS1
7.1
Forward-compatible
parsing
8
Справочници
9
Благодарности
Приложение А: Примерен стилов лист за HTML 2.0
Приложение B: CSS1 граматика
Приложение C: Шифроване
Приложение D: Гама корекция
Приложение Е: Приложимост и възможност за разширение на CSS1
Приложение F: Промени в сравнение с версията от 17 декември 1996
-
атрибут
-
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.
Съставянето на прости стилови листове е лесна задача. Нужни са известни знания в областта на 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).
За да повлияят на презентацията стиловите листа, браузъра трябва да е наясно, че те съществуват. 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 парсери няма да счетат горния стилов лист за коментар, който трябва да бъде премахнат.
За да се намали размера на стиловите листа, те могат да бъдат групирани в разделени със запетая списъци:
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 }
което е еквивалентно на предишния пример.
В първия пример е зададен син цвят на 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), а не процентната.
За да се подобри възможността за контрол върху елементите, в 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 елементите). Структура, базирана на на класове е полезна единствено в ограничен обсег, където значението на класа е било взаимно удобрено.
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. Тази употреба на стиловите листа не се удобрява.
Наследяването позволява на 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 }
Текстовите коментари в CSS стиловите листа са подобни на тези в програмния език C[7]:
EM { color: red } /* червено, наистина червено!!! */
Коментарите не могат да бъдат вмествани един в друг. За CSS парсера коментара е еквивалентен на празно място.
В CSS1, стила обикновено се прикачва на елемент в зависимост от неговата позиция в структурата на документа. Този прост модел е задоволителен при множество стилове, но не покрива някои често срещани ефекти. Концепцията за псевдо-класовете и псевдо-елементите разширява адресирането в CSS1, така че да може процеса на форматиране да бъде повлиян от външна информация.
Псевдо-класовете и псевдо-елементите могат да бъдат използвани в CSS селекторите, но не съществуват в HTML сорс кода. Вместо това, те се вмъкват от браузъра при специфични условия, така че да може да бъдат адресирани в стиловите листа. Те се определят като "класове" и "елементи", тъй като това е удобен начин да бъде описано тяхното поведение. По-специфичния термин, с който се дефинира тяхното поведение е измислена поредица от тагове.
Псевдо-елементите се използват за адресиране на подразделения на елементи, докато псевдо-класовете позволяват на стиловите листа да различават различните типове елементи.
Браузърите често визуализират наскоро посетените връзки по по-различен начин от по-старите такива. В 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), тя ще бъде визуализирана в син цвят. Нужно е да се отбележи, че имената на класовете предшестват тези на псевдо-класовете в селекторите.
Някои често срещани типографски ефекти се асоциират не със структурни елементи, а с типографски такива, в зависимост от начина, по който се форматират на платното. В CSS1, могат да бъдат адресирани чрез псевдо-елементи два такива типографски ефекта: първия ред на елемента и първата буква.
CSS1 същина: Браузърите може да игнорират всички правила, съдържащи ':first-line' или 'first-letter' в селектора; друга възможност е да поддържат само част от свойствата на тези псевдо-елементи. (вижте глава 7)
Псевдо-елемента '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).
Псевдо-елементът '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' може да бъде прикачен единствено към блоков елемент.
При контекстните селектори, псевдо-елементите са позволени единствено в края на селектора:
BODY P:first-letter { color: purple }
Псевдо-елементите могат да бъдат комбинирани с класове в селектори:
P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</A>
Горният пример би трябвало да направи началната буква на всички 'p' елементи, които се намират 'class=initial' червени. Когато са кобинирани с класове или псевдо-класове, псевдо-елементите трябва да бъдат определени в края на селектора. Само един псевдо-елемент може да бъде определен в селектор.
Някои псевдо-елементи могат да бъдат комбинирани:
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>
Презентацията в CSS може да бъде повлияна от повече от един стилов лист. Съществуват две основни причина за това свойство: приспособимост и баланс автор/читател.
-
приспособимост
-
Дизайнер на стилови листа може да комбинира няколко(непълни) стилови листа, за да намали претрупаността:
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* променя импортираните стилове */
-
баланс автор/читател
-
И читателите, и авторите могат да изменят презентацията чрез стилови листа. За да го направят, те използват един и същи език за стилови листа, което води до едно фундаментално свойство на уеб средата: всеки може да бъде издател. Браузърът избира механизма за отнасяне към личните стилови листа.
Понякога може да възникнат конфликти между стиловите листа, които да повлияят на презентацията. Решението на тези конфликти се базира на идеята всяко стилово правило да има свое тегло. По подразбиране, теглото на правилата на читателите е по-малко от това на правилата на документите на автора. Т.е., ако съществуват противоречия между стиловите листа на входящ документ и личните листа на читателя, ще бъдат използвани правилата на автора. И читателските, и авторските правила надделяват над стойностите по подразбиране на браузъра.
Импортираните стилови листа също прилагат каскадния модел едни на други в реда, по който са били импортирани, в зависимост от каскадните правила, дефинирани по-долу. Правила, които са били декларирани в самия стилов лист надделяват над правилата в импортираните стилови листа. Това ще рече, че импортираните стилови листа се намират по-ниско в каскадния ред от правилата в самия стилов лист. Импортираните стилови листа, от своя страна, могат да импортират и надделяват над други стилови листа, и т.н.
В CSS1, всички '@import' оператори трябва да настъпват в началото на стиловия лист, преди каквито и да са декларации. Така още по-лесно се вижда, че правилата в самия стилов лист надделяват над правилата в импортираните стилови листа.
Дизайнерите на стилови листа могат да увеличат тежестта на своите декларации:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
В примера, показан горе, първите три декларации имат по-голямо тегло, докато последната декларация има нормално тегло.
A Читателско право с декларация 'important' ще надделее над авторско правило с нормална декларация. Авторско право с декларация 'important' ще надделее над читателско право с декларация 'important'.
Противоречащите правила са свойствени за механизма на 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. Счита се, че правилата трябва да бъдат в началото на авторския стилов лист и последващите стилови листа могат да надделеят над тях. По време на фазата на преминаване, тази стратегия ще улесни едновременното съществуване на стиловите атрибути, заедно с други стилови листа.
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)).Цвета и стила на рамката се задава чрез свойствата й. Полетата винаги са прозрачни, така че родителския елемент ще се вижда, когато е под тях.
Размера на кутията се определя от сбора на широчината на елемента(например форматиран текст или изображение) и този на на уплътнителната област, рамката и полетата.
От гледна точка на форматиране съществуват два основни типа елементи: блокови и вътрешноредови.
Елементите, стойността на атрибута '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
външен външен
ръб долно уплътнение ръб
---------------
долна рамка
---------------
долно поле
--------------- <-- долен външен ръб
Левият външен ръб е ръба на елемента, ако се взимат в предвид стойностите, зададени на неговото уплътнение, рамка и поле. Левият вътрешен ръб е ръба единствено на съдържанието, което се намира във вътрешността на уплътнението, рамката или полето. Същото се отнася и за дясната част. Горната част е горната част на елемента , като се взимат в предвид стойностите, зададени за уплътнение, рамка и поле; тя е дефинирана единствено за вътрешноредови и плаващи елементи, но не и за не-плаващи блокови елементи. Вътрешния горен ръб е горния ръб на съдържанието, което се намира във вътрешността на уплътнението, рамката или полето, ако има такива. Долният ръбе долния ръб на елемента, извън стойностите за
уплътнение, рамка и поле; той е дефиниран за вътрешноредови и плаващи елементи, но не и за блокови елементи. Вътрешният долен ръб е долния ръб на елемента, вътре в стойностите за уплътнение, рамка и поле.
Широчината на елемента е широчината на съдържанието, т.е. разстоянието между левия вътрешен ръб и десния вътрешен ръб.
Височината е височината на съдържанието, т.е. разстоянието от вътрешния горен ръб до вътрешния долен ръб.
Широчината на полето на не-плаващ блоков елемент определя минималното разстояние до ръбовете на околните кутии. Две или повече съседни вертикални полета(т.е. без рамка, уплътнение или съдържание между тях) се сливат, така че да се използва максималната стойност от тях. В повечето случаи, след сливане на вертикални полета резултата е по-приятен за окото и по-близък до това, което дизайнера очаква. В примера по-горе, полетата между двата 'li' елемента се сливат чрез използване на максималната стойност от тази, зададена на 'margin-bottom' атрибута на първия елемент и тази, зададена на 'margin-top' атрибута на втория елемент. Подобно, ако уплътнението между 'ul' елемента и първия 'li' елемент(константата E) е било със стойност 0 , полето на ul елемента и това на първия li елемент щяха да се слеят.
В случай, че са зададени отрицателни полета, абсолютния максимум от отрицателните съседни полета се изважда от максимума на положителните съседни полета. Ако не съществуват положителни полета, абсолютния максимум на отрицателните съседни полета се изважда от 0.
Хоризонталната позиция, както и размера на неплаващ, блоков елемент се определя от седем свойства: '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.
За разлика от вертикалните полета, хоризонталните не могат да се сливат.
Елементите, стойността на атрибута '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
В текст, който се разполага от дясно на ляво, маркерите ще бъдат разположени от дясната страна на кутията.
Чрез свойството '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' елемент.
Съществуват две ситуации, при които плаващите елементи могат да застъпят полето, рамката и уплътнителните области на други елементи:
- когато плаващия елемент има негативно поле: негативните полета на плаващите елементи се третират, както и при останалите блокови елементи.
- когато плаващия елемент е по-широк или по-висок от елемента, в който се намира.
Елементите, които не са форматирани като блокови елементи, се наричат
вътрешноредови елементи. Вътрешноредовият елемент може да дели редовото пространство с други елементи. Вземете в предвид следния пример:
<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, където има описание на това как да се изчислява височината на редовете.
Заместен елемент е елемент, който е заместен от съдържание, което е посочено от него. Например, в HTML, елемента 'img' е заместен от изображение, което е посочено от 'src' атрибута. Може да се предположи, че заместените елементи вървят ръка за ръка със своите свойствени измерения. Ако стойността на свойството 'width' е установена на 'auto', присъщата широчина се използва като широчина на елемента. Ако е зададена стойност, различна от 'auto' в стиловия лист, тази стойност се използва и размера на заместения елемент се променя в зависимост от стойността(метода на промяна на размера ще зависи от media типа). Свойството 'height' се използва по същия начин.
Заместените елементи могат да бъдат или блокови, или вътрешноредови.
Всички елементи притежават '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-и)(например, защото съдържа само главни букви), така че редовете могат да бъдат разположени по-близо един до друг.
Платното е част от изобразителната област на браузъра, в която документите се визуализират. Нито един структурен елемент на документа не отговаря на платното, поради което възникват два въпроса при форматирането на документа:
- от къде трябва да се зададат размерите на платното?
- как да се визуализира празната област, когато документа не заема цялото платно?
Разумен отговор на първия въпрос е, че първоначалната широчина на платното зависи от размера на прозореца, но 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'.
Текущите CSS1 свойства и стойности не могат да опишат описанието на елемента 'br'. В HTML, 'br' елемента служи за деклариране на преминаване на нов ред в думите. Фактически, елемента се замества от символ за нов ред. Бъдещите версии на CSS най-вероятно ще могат да се справят с добавено и заместено съдържание, но CSS1-базираните форматори трябва да третират 'br' елемента по специфичен начин.
Стиловите листа влияят на визуализацията на документите чрез присвояване на стойности на стилови свойства. Тази глава изброява дефинираните стилови свойства и съответния им списък от възможни стойности в CSS1.
В текста по-долу допустимите стойности на всяко свойство са изброени със синтаксис, подобен на следния:
Стойност: 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 на брой пъти.
Задаването на шрифтови свойства би трябвало да бъде сред най-често срещания начин за употреба на стиловите листа. За съжаление, не съществува добре дефинирана, приемлива навсякъде система за класифициране на шрифтове и термини, които важат за едно семейство от шрифтове, може да не са подходящи за друго. Например 'italic' е всеобщо използван термин, значещ наклонен текст, но наклонения текст може да бъде наречен и Oblique, Slanted, Incline, Cursive или
Kursiv. Следователно, това да бъдат разпределени типичните свойства на шрифтовата селекция на определен шрифт, не е прост проблем.
CSS1 дефинира свойствата 'font-family', 'font-style', 'font-variant' и също така 'font-weight', 'font-size', 'font'.
Поради това, че няма общоприета, универсална система за класификация на шрифтовите свойства, подбора на свойства за шрифтовете трябва да се прави внимателно. Свойствата се подбират по точно-определен ред, за да се гарантира, че резултатите от този подборен процес ще са, колкото се може по-еднакви сред различните браузъри(ако се предполага, че на всеки от тях се презентира същата библиотека от шрифтове).
- Браузърът прави(или установява достъп) до база данни със свързани помежду си 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' свойството, а не тази, която просто е зададена.
Стойност: [[<име на семейството> | <шрифтов род>],]*
[<име на семейството> | <родово семейство>]
Първоначална стойност: Зависи от браузъра
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A
Стойността представлява приоритетен списък от имена на шрифтови семейства и/или имена на шрифтови родове. За разлика от повечето от останалите CSS1 свойства, стойностите се разделят със запетая, за да се покаже, че те са алтернативи една на друга:
BODY { font-family: gill, helvetica, sans-serif }
Съществуват два типа стойности в списъка:
- <име на семейството>
- Името на шрифтовото семейство, което е избрано. В последния пример шрифтовите семейства са "gill" и "Helvetica".
- <шрифтов род>
- Последната стойност в примера горе е такава на шрифтов род. Дефинирани са следните шрифтови родове(типове):
- 'serif'(серифни шрифтове)(например Times)
- 'sans-serif'(несерифни шрифтове)(например Helvetica)
- 'cursive'(курсивни шрифтове)(например Zapf-Chancery)
- 'fantasy'(например Western)
- 'monospace'(печатни шрифтове)(например Courier)
Дизайнерите на стилови листа се насърчени да прилагат шрифтов род, като последната алтернатива в списъка.
Имената на шрифтовете, които съдържат символи за интервал(празни места) трябва да бъдат поставени в кавички:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
Ако кавичките бъдат пропуснати, символите за интервал преди и след името на шрифта ще бъдат игнорирани и каквато и да е последователност от тях, вътре в името на шрифта ще бъде превърната в единичен интервал.
Стойност: normal(нормален) | italic(наклонен) | oblique(полегат)
Начална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A
Свойството 'font-style' може да избира измежду три стойности: нормален(normal)(понякога наричан и "roman или "upright"), наклонен(italic) и полегат(oblique) шрифт от дадено шрифтово семейство.
Стойност 'normal' избира шрифт, който е класифициран като 'normal' в шрифтовата база данни на браузъра, докато 'oblique' избира шрифт, който е обозначен като 'oblique' там. Стойност 'italic' избира шрифт, който е обозначен 'italic' или, ако такъв няма на разположение, такъв със стойност 'oblique'.
Шрифт в шрифтовата база данни на браузъра, който е обозначен с 'oblique' може всъщност да е бил генериран по електронен път чрез наклоняване на нормален шрифт.
Шрифтове, съдържащи в своите имена думите 'oblique', 'slanted' или 'incline' обикновено се обозначават с 'oblique' в шрифтовата база данни на браузъра. Шрифтове, съдържащи Italic, Cursive или Kursiv в своите имена обикновено се обозначават с 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
В горния пример, текста, в 'h1' на който е приложен атрибута 'em' ще се визуализира с нормален шрифт.
Стойност: normal(нормален) | small-caps(малки букви)
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A
Друг тип различие в шрифтовото семейство е т.н. small-caps(малки букви). При small-caps шрифта, малките букви изглеждат по начин, подобен на този на големите, но са с по-малък размер и имат малко по-различни пропорции. Свойството 'font-variant' избира този шрифт.
Ако стойността, която е зададена на свойството е 'normal', бива избран шрифт, който не е small-caps такъв. Ако стойността е 'small-caps', бива избран small-caps шрифт. В CSS1 е допустимо(но не се изисква), small-caps шрифта да бъде създаден чрез заместване на малките букви в нормален шрифт с мащабирани големи букви. В краен случай горните букви ще заместят small-caps шрифта.
Следващия пример води до визуализиране на 'h3' елемент с small-caps шрифт, като на думите също така е приложен атрибутита 'em', чието свойство 'font-style' е установено на 'oblique'.
H3 { font-variant: small-caps }
EM { font-style: oblique }
Може да съществуват също така и други варианти в шрифтовото семейство, като например шрифтове с числа със старовремски стил, small-caps числа, сбити или уголемени букви и т.н. CSS1 не притежава свойства, с чиято помощ те да могат да бъдат избирани.
CSS1 същина: до толкова, доколкото това свойство води до трансформиране на текста в такъв с главни букви, тук важат същите съображения като при свойството 'text-transform'.
Стойност: normal(нормален) | bold(удебелен) | bolder(много удебелен) | lighter(по-тънък) | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | 900
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A
Свойството 'font-weight' избира тежестта на шрифта. Стойностите от '100' до '900' образуват подредена последователност, в която всяко число определя тежест, която е поне толкова тъмна, колкото предшестващата я. Ключовата дума 'normal' е синоним на стойност '400', а 'bold' е синоним на '700'. Ключовите думи, различни от 'normal' и 'bold' често биват бъркани с имената на шрифтовете и затова е избран числов вид на списъка от 9 стойности.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
Свойството 'font-weight' избира тежестта на шрифта. Стойностите от '100' до '900' образуват подредена последователност, в която всяко число определя тежест, която е поне толкова тъмна, колкото предшестващата я. Ключовата дума 'normal' е синоним на стойност '400', а 'bold' е синоним на '700'. Ключовите думи, различни от 'normal' и 'bold' често биват бъркани с имената на шрифтовете и затова е избран числов вид на списъка от 9 стойности.
STRONG { font-weight: bolder }
Дъщерните елементи наследяват съответната изчислена тежест, а не стойността на ключовата дума.
Шрифтовете(шрифтовата информация) обикновено имат едно или повече свойства, чийто стойности са имена, които описват тежестта на шрифта. Не съществува общоприето, универсално значение на имената на тези тежести. Тяхната основна цел е да различават шрифтовете в дадено шрифтово семейство по тъмнота. Употребата им сред шрифтовите семейства е доста разнообразна; например шрифт, който бихте счели за 'bold', може да бъде описан като Regular(нормален), Roman(отново стойност, с която се означава нормалния), Book(книжен), Medium(среден), Semi- или DemiBold,
Bold, или Black(черен), в зависимост от това колко черна е нормалната разновидност на шрифта в конструкцията. Поради това, че не е установена стандартна употреба на имената, стойностите на свойството за тежест в CSS1 се задават чрез числов подход, в който стойност '400'(или 'normal') отговаря на нормалната разновидност на шрифта в даденото шрифтово семейство. Името на тежестта, свързваща се с тази разновидност обикновено е Book, Regular, Roman, Normal, и понякога, Medium.
Връзката на други стойности в семейство с числовите стойности за тежест се прави единствено, за да се запази реда на тъмнината в това семейство. Въпреки това, следващите евристични методи разясняват това, как се осъществява присвояването на стойност в общия случай:
- ако шрифтовото семейство вече използва числова скала с девет стойности(като шрифта OpenType, например), тогава шрифтовите тежести трябва да бъдат нанесени чрез директен подход.
- ако съществуват едновременно шрифтове обозначени с думите Medium и един от Book, Regular, Roman или Normal, тогава на Medium се присвоява стойност на тежестта '500'.
- шрифт, обозначен с думата "Bold" в общия случай отговаря на стойност на тежестта '700'.
- ако в шрифтовото семейство съществуват по-малко от девет стойности, алгоритъма по подразбиране за запълване на "дупките" е следния. Ако на стойност '500' не е присвоено нищо, на нея ще бъде присвоен същия шрифт като този, на който е присвоена стойност '400'. Ако за някоя от стойностите '600', '700', '800' или '900' не е присвоено нищо, те ще бъдат присвоени на същия шрифт, като този, за който се отнася следващата присвоена ключова дума за по-тъмен шрифт, ако има такава и съответно следващата присвоена ключова дума за по-светъл шрифт в ако няма такава. Ако някоя от стойностите '300', '200' или '100' остане незададена, тя ще бъде зададена за следващата ключова дума за по-светъл шрифт, ако има такава, докато в противен случай ще бъде присвоена на следващата ключова дума за по-светъл шрифт.
Следващите два примера илюстрират този процес. Да предположим, че са зададени четири стойности за тежест в шрифтовото семейство "Example1", от най-светлата към най-тъмната те са следните:
Regular, Medium, Bold, Heavy. В шрифтовото семейство "Example2" пък са дефинирани шест стойности за тежест: Book, Medium, Bold, Heavy, Black,
ExtraBlack. Забележете как във втория пример е решено да не може "Example2 ExtraBlack" да се присвоява на нищо.
Достъпни шрифтове | Присвояване | Запълване на "дупките"
----------------------+---------------+-------------------
"Example1 Regular" | 400 | 100, 200, 300
"Example1 Medium" | 500 |
"Example1 Bold" | 700 | 600
"Example1 Heavy" | 800 | 900
Достъпни шрифтове | Присвояване | Запълване на "дупките"
----------------------+---------------+-------------------
"Example2 Book" | 400 | 100, 200, 300
"Example2 Medium" | 500 |
"Example2 Bold" | 700 | 600
"Example2 Heavy" | 800 |
"Example2 Black" | 900 |
"Example2 ExtraBlack" | (none) |
Тъй като смисълът на относителните ключови думи 'bolder' и 'lighter' е да затъмнят или изсветлят шрифта в семейството и, защото шрифтовото семейство, може и да не притежава шрифтове с всички специфични специфични стойности за тежест, пасването на 'bolder' се осъществява към следващия по-тъмен шрифт от шрифтовото семейство, който е на разположение на клиента, докато пасването на 'lighter' тежестта се осъществява към следващия по-светъл шрифт на в шрифтовото семейство. За да бъдем точни, значението на относителните ключови думи 'bolder' и 'lighter' е следното:
- 'bolder' избира следващото тежест, което се присвоява на шрифт, който е по-тъмен от наследения такъв. Ако няма такава тежест, 'bolder' просто задава следващата по-тъмна числена стойност(и шрифта остава непроменен), освен ако наследената стойност не е '900', при която получената тежест ще е също '900'.
- 'lighter' действа по подобен начин, но работи в обратната посока: тази стойност избира следващата ключова дума за по-светъл шрифт от наследената такава, освен ако няма такъв шрифт, в който случай се избира следващата по-светла числена стойност(и шрифта остава непроменен).
Няма гаранция, че ще съществува по-тъмен шрифт за всяка от стойностите на свойството 'font-weight'; например, някои шрифтове могат да имат само нормални и удебелени разновидности, други могат да имат осем различни тежести на шрифта. Няма гаранция за това как браузъра ще разпредели шрифтовете от едно шрифтово семейство по тежест. Единственото сигурно е, че шрифт със зададена стойност няма да бъде по-малко тъмен от шрифтовете, в които са използвани по-светли стойности.
Стойност: <абсолютен размер> | <относителен размер> |
<дължина> | <процент>
Първоначална стойност: medium(среден)
Важи за: всички елементи
Наследимост: Да
Процентни стойности: относителни спрямо шрифтовия размер на родителския елемент
- <абсолютен размер>
- Ключовата дума <абсолютен размер> служи като показалец към таблица с шрифтови размери,изчислена и съхранявана от браузъра. Възможните стойности са: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. На компютърния екран се препоръчва мащабен коефициент от 1.5 между съседните показалци; ако 'medium' шрифта е 10pt(10 пункта), 'large' шрифта съответно ще е 15pt(15 пункта). Различните медийни посредници се нуждаят от различни мащабни коефициенти. Също така, браузъра трябва да вземе в предвид и качеството и достъпността на шрифтовете, когато изчислява тази таблица. Таблиците на две различни шрифтови семейства може да се различават една от друга.
- <относителен размер>
- Ключовата дума <относителен размер> се интерпретира по начин, относителен на таблицата с шрифтовите размери и този на родителския елемент. Възможните стойности са: [ larger | smaller ]. Например, ако на шрифтовия размер на родителския елемент е зададена стойност 'medium', то задаване на стойност 'larger' ще направи размера на шрифта на текущия елемент 'large'. Ако размера на шрифта на родителския елемент не е близък по големина на размер от таблицата, браузъра може да прибавя нови размери в таблицата и също така да закръглява до най-близкия. На браузъра може да се наложи да екстраполира стойности от таблицата, ако числовата стойност надхвърля тази на ключовите думи.
Дължината и процентните стойности не би трябвало да взимат в предвид таблицата с шрифтовите размери, когато изчисляват размера на шрифта на елемента.
Отрицателните стойности не са разрешени.
При всички останали свойства, стойностите за дължина 'em' и 'ex' са свързани с размера на шрифта на текущия елемент. При свойството 'font-size', тези мерки за дължина се отнасят за шрифтовия размер на родителския елемент.
Нужно е да се отбележи, че приложението може да наложи нова интерпретация на зададения размер, в зависимост от контекста. Например, шрифта в една VR сцена може да се изобрази с различен размер поради изкривяване на гледната точка.
Примери:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Ако се използва препоръчваният коефициент на мащабиране, т.е. 1.5, последните три декларации ще бъдат идентични.
Стойност: [ <font-style> || <font-variant> ||
<font-weight> ]? <font-size> [ / <line-height> ]?
<font-family>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Да
Процентни стойности: позволени са при стойностите <font-size> и
<line-height>
Свойството 'font' е свойство за бърз достъп, с чиято помощ се задават стойностите на свойствата 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' и 'font-family' на едно и също място в стиловия лист. Синтаксиса на това свойство е базиран на традиционната типографска кратка система за обозначения, с чиято се задават множество свойства, свързани с шрифтовете.
Вижте предишно дефинираните свойства за определение на разрешени и първоначални стойности. На свойствата, за които не са зададени стойности, се задават техните първоначални стойности.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
Процентната стойност(80%) на шрифтовия размер във второто правило се отнася за шрифтовия размер на родителския елемент. В третото правило, процентната стойност, зададена за височината на реда се изчислява чрез размера на шрифта на самия елемент.
В първите три правила по-горе, стойностите за свойствата 'font-style', 'font-variant' и 'font-weight' не са изрично декларирани, което означава, че и на трите се присвоява първоначалната им стойност('normal'). Четвъртото правило задава на свойството 'font-weight' стойност 'bold', на 'font-style' - 'italic' и по мълчалив подход на свойството 'font-variant' се задава стойност 'normal'.
Петото правило настройва стойностите на свойствата 'font-variant'('small-caps'), 'font-size'(120% от размера на шрифта на родителския елемент), 'line-height'(120% от размера на шрифта на елемента) и 'font-family'('fantasy'). От това следва, че ключовата дума 'normal' важи и за останалите две свойства: 'font-style' и 'font-weight'.
Тези свойства описват цвета(често наричан основен цвят) и фона на елемента(т.е. повърхността, върху която се визуализира съдържанието). Могат да бъдат задавани фонов цвят и/или фоново изображение. Позицията на изображението, това как да се повтаря(ако се повтаря) и дали е неподвижно или се движи в зависимост от положението на платното, могат да бъдат настройвани чрез CSS.
Свойството'color' се наследява по нормалния начин. Фоновите свойства не се наследяват, но фона на родителския елемент ще прозира по подразбиране, защото първоначалната стойност на свойството 'background-color' е 'transparent'.
Стойност: <цвят>
Първоначална стойност: в зависимост от браузъра
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A
Това свойство описва текстовия цвят на елемент(т.н. обикновен цвят). Съществуват различни начини да се зададе червен цвят:
EM { color: red } /* на нормален език */
EM { color: rgb(255,0,0) } /* RGB стойност от 0 до 255 */
Вижте глава 6.3 където са описани възможните цветови стойности.
Стойност: <цвят> | transparent(прозрачен цвят)
Първоначална стойност: transparent(прозрачен цвят)
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това свойство задава фоновия цвят на елемент.
H1 { background-color: #F00 }
Стойност: <url> | none(без фоново изображение)
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това свойство задава фоново изображение на елемента. Когато се задава такова, трябва да бъде зададен и фоновия цвят, в случай че изображението не е достъпно(не е на разположение). Когато изображението е достъпно(на разположение), то се полага върху фоновия цвят.
BODY { background-image: url(marble.gif) }
P { background-image: none }
Стойност: repeat | repeat-x | repeat-y | no-repeat
Първоначална стойност: repeat
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Ако е зададено фоново изображение, стойността на свойството 'background-repeat' определя по дали и по какъв точно начин изображението ще се повтаря.
Стойност 'repeat' означава, че изображението ще се повтаря и във вертикална и в хоризонтална посока. Стойността 'repeat-x'('repeat-y') води до хоризонтално(съответно вертикално) повторение на изображението, за да се създаде единична ивица от изображения от едната към другата страна(в хоризонтална или вертикална посока). Стойност 'no-repeat' ще рече, че изображението няма да се повтаря.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
В примера горе, изображението ще се повтаря по вертикалната ос.
Стойност: scroll | fixed
Първоначална стойност: scroll
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Ако е зададено фоново изображение, стойността на свойството 'background-attachment' определя дали то ще е неподвижно спрямо платното или ще се движи заедно със съдържанието.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 същина: Браузърите могат да третират стойността 'fixed' като 'scroll' такава понякога. Въпреки това се препоръчва да интерпретират 'fixed' по правилен начин, поне в HTML и BODY елементите, тъй като няма начин, автора на документа да зададе изображение само за тези браузъри, които поддържат 'fixed' стойността.(Вижте глава 7)
Стойност: [<процентна стойност> | <дължина>]{1,2} | [top | center
| bottom] || [left | center | right]
Първоначална стойност: 0% 0%
Важи за: блоковите и заместените елементи
Наследимост: Не
Процентни стойности: относителни спрямо размерите на самия елемент
Ако е било зададено фоново изображение, стойността на свойството 'background-position' определя неговата първоначална позиция.
Ако за стойност е зададена двойката '0% 0%', горния ляв ъгъл на изображението се поставя в горния ляв ъгъл на кутията, която се намира около съдържанието на елемента(а не кутията, която се намира около уплътнението, рамката или полето). Ако за стойност е зададена двойката '100% 100%', долния десен ъгъл на изображението ще бъде разположен в долния десен ъгъл на елемента. При задаване на двойката '14% 84%', точката, която се намира на 14% хоризонтално и 84% вертикално на изображението ще бъде разположена в точката, която се намира на 14% хоризонтално и 84% вертикално в елемента.
Ако за стойност е зададена двойката '2cm 2cm', горния ляв ъгъл на изображението ще бъде поставен на 2 сантиметра вдясно и на 2 сантиметра надолу от горния ляв ъгъл на елемента.
Ако е зададена само една мярка за дължина или процентна стойност, тя ще бъде използвана само за хоризонталната позиция; за вертикалната позиция ще бъде присвоена стойност 50%. Ако са зададени две стойности, първата ще се счита за хоризонтална. Разрешено е комбинирането на мерки за дължина с процентни стойности, например '50% 2cm'. Разрешени са и отрицателните стойности на позициите.
За да се зададе позицията на фоново изображение, за стойности могат да бъдат използвани и ключови думи. Те не могат да бъдат комбинирани с процентни стойности или мерки за дължина. Възможните комбинации от ключови думи и съответните им интерпретации са описани по-долу:
- 'top left' и 'left top' означават същото, като '0% 0%'.
- 'top', 'top center' и 'center top' означават същото, като '50% 0%'.
- 'right top' и 'top right' означават същото, като '100% 0%'.
- 'left', 'left center' и 'center left' означават същото, като '0% 50%'.
- 'center' и 'center center' означават същото, като '50% 50%'.
- 'right', 'right center' и 'center right' означават същото, като '100% 50%'.
- 'bottom left' и 'left bottom' означават същото, като '0% 100%'.
- 'bottom', 'bottom center' и 'center bottom' означават същото, като '50% 100%'.
- 'bottom right' и 'right bottom' означават същото, като '100% 100%'.
Ето и някои примери::
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
Ако фоновото изображение е неподвижно('fixed') спрямо платното(прочетете за свойството 'background-attachment' по-горе), изображението се разполага спрямо платното вместо спрямо елемента. Например:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
В примера горе, изображението ще бъде разположено в долния десен ъгъл на платното.
Стойност: <фонов цвят> || <фоново изображение> ||
<повтаряемост на фона> || <прикаченост на фона> ||
<позиция на фона>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: такива се позволяват единствено при стойността на свойството <background-position>
Свойството 'background' е свойство за бърз достъп, което служи за задаване на отделните фонови свойства(като 'background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') на едно и също място в стиловия лист.
Възможните стойности на свойството 'background' се определя от множеството от възможни стойности на отделните свойства.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
Свойството 'background' винаги задава всички отделни фонови свойства. В първото правило от горния пример, единствено стойността на свойството 'background-color' е зададена и на другите отделни свойства е зададена тяхната първоначална стойност. Във второто правило, всички отделни свойства биват зададени изрично.
Стойност: normal | <дължина>
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A
Мярката за дължина индикира добавяне към разстоянието между думите по подразбиране. Стойностите могат да бъдат и отрицателни, но съществуват и специфични ограничения при изпълняването на инструкциите. На браузъра е дадена свобода на действие при избора на точния алгоритъм по поставянето на разстояние между думите. То може да бъде повлияно и от т.н. 'justification' подравняване(което е стойност на свойството 'text-align').
H1 { word-spacing: 1em }
В този пример, текущата стойност на разстоянието между думите в елементите 'h1' ще бъде увеличена с '1em'.
CSS1 същина: Възможно е браузърите да интерпретират, каквато и да е стойност на свойството 'word-spacing' като 'normal'.(Вижте глава 7.)
Стойност: normal | <дължина>
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A
Мярката за дължина индикира за добавката на съответното разстояние към това между символите. Стойностите могат да бъдат и отрицателни, но може да съществуват ограничения при съобразяването с тези стойности. Браузърът притежава свобода на действие върху избора на точно определен алгоритъм за оставяне на разстояние между буквите. То може да бъде повлияно и от т.н. justification подравняване(което може да бъде зададено чрез съответната стойност на свойството 'align').
BLOCKQUOTE { letter-spacing: 0.1em }
Тук, разстоянието между символите в елементите 'blockquote' ще бъде увеличено с '0.1em'.
При зададена стойност 'normal', браузъра може да променя разстоянието между буквите, за да осъществи двустранно подравняване на текста. Това няма да се случи, ако свойството на 'letter-spacing' изрично е зададена като стойност мярка за <дължина>:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Когато полученото разстояние между две букви не е същото като това по подразбиране, браузъра не би трябвало да използва лигатури(пренасяне).
CSS1 същина: браузърите могат да интерпретират, която и да е стойност на 'letter-spacing' като 'normal'.(Вижте глава 7.)
Стойност: none | [ underline || overline || line-through || blink ]
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Не, но трябва да се види разяснението по-долу.
Процентни стойности: N/A
Това свойство описва украшенията, които се добавят към текста на даден елемент. Ако елемента не съдържа текст(например 'img' елемента в HTML) или е празен елемент(например '<EM></EM>'), свойството не указва ефект. Стойност 'blink' кара текста да мига.
Цветоветът или цветовете, с които трябва да се визуализира текстовото украшение, трябва да бъдат зададени чрез стойността на свойството 'color'(защото те ще произлизат от него).
Това свойство не се наследява, но елементите трябва да пасват на своя родителски такъв. Така например, ако един елемент е подчертан, чертата трябва да обхваща и дъщерните елементи. Цвета на линията за подчертаване ще остане същия, дори ако за по-долните елементи са зададени различни стойности на свойството 'color'.
A:link, A:visited, A:active { text-decoration: underline }
Горният пример ще доведе до подчертаване на всички хипервръзки(линкове)(т.е. всички 'a' елементи с зададен атрибут 'href').
Браузърите би трябвало да разпознават ключовата дума 'blink', но поддръжката на ефекта на "мигането" не се изисква от тях.
Стойност: baseline | sub | super | top | text-top | middle | bottom
| text-bottom | <процентна стойност>
Първоначална стойност: baseline
Важи за: вътрешноредовите елементи
Наследимост: Не
Процентни стойности: относителни спрямо стойността на свойството 'line-height' на самия елемент
Това свойство оказва влияние върху вертикалното позициониране на елемента. Множеството от ключови думи са относителни спрямо родителския елемент:
- 'baseline'
- подравнява основния ред на елемента(или долната част, ако елемента няма основен ред) с основния ред на родителския елемент.
- 'middle'
- подравнява вертикалната среда на елемента(най-често изображение) със сумата на основния ред и половината от височината на x на родителския елемент
- 'sub'
- прави елемента subscript
- 'super'
- прави елемента superscript
- 'text-top'
- подравнява горната част на елемента с горната част на символите на родителския елемент
- 'text-bottom'
- подравнява долната част на елемента с долната част на символите на родителския елемент
Друго множество от свойства е относително спрямо форматирания ред, от който е част елемента:
- 'top'
- подравнява горната част на елемента с най-високия елемент от реда
- 'bottom'
- подравнява долната част на елемента с най-ниския елемент на реда
При употребата на 'top' и 'bottom' подравняването, могат да възникнат безизходни ситуации, в които зависимостите между елементите сформират цикъл.
Процентните стойности са относителни спрямо стойността на свойството 'line-height' на самия елемент. Те повдигат основния ред на елемента(или долната му част, ако няма основен ред) на зададеното разстояние над основния ред на родителския елемент. Възможна е и употребата на отрицателни стойности. При стойност, например, '-100%', елемента ще се снижи, така че основният му ред да бъде разположен там, където трябва да бъде основния ред на следващия ред. Това позволява осъществяването на прецизен контрол над вертикалното позициониране на елементите(като изображения, които са на мястото на букви), които не притежават основен ред.
Очаква се, че бъдещата версия на CSS ще позволи използването на <мерни единици> като стойност на това свойство.
Стойност: capitalize | uppercase | lowercase | none
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A
- 'capitalize'
- прави първия символ на всяка дума главна буква
- 'uppercase'
- всички букви от елемента стават главни букви
- 'lowercase'
- всички букви на елемента стават малки букви
- 'none'
- неутрализира наследената стойност
Действителното преобразуване(трансформиране) на всяка буква зависи от човешкия език. Вижте [4], за да научите начини, по които да намерите езика, използван за даден елемент.
H1 { text-transform: uppercase }
Примерът горе ще превърне всички 'h1' елементи в текст с главни букви.
CSS1 същина: Браузърите могат да игнорират 'text-transform' свойството(т.е. да го третират неговата стойност като 'none'), за символи, които не са от репертоара на Latin-1 и за елементи в езиците, за които трансформирането се осъществява по различен начин от определения от таблиците за промяна на буквите начин в Unicode[8].
Стойност: left | right | center | justify
Първоначална стойност: в зависимост от браузърите
Важи за: блоковите елементи
Наследимост: Да
Процентни стойности: N/A
Това свойство описва начина, по който ще се подравни текста в елемента. Точния алгоритъм на т.н. justafication или двустранно подравняване, зависи от браузъра и човешкия език.
Например:
DIV.center { text-align: center }
Тъй като свойството 'text-align' се наследява, всички блокови елементи, които се намират вътре в 'div' елемент, на който е зададен 'class = center', ще бъдат центрирани. Нужно е да се отбележи, че подравняването зависи от широчината на елемента, а не тази на платното. Ако стойността 'justify' не се поддържа, браузъра ще осигури нейн заместник. Обикновено стойността-заместник при западните езици е 'left'.
CSS1 същина: Браузърите могат да третират стойност 'justify' като 'left' или 'right', в зависимост от това, дали посоката на писане по подразбиране на елемента е от ляво на дясно или от дясно на ляво, респективно.
Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: блоковите елементи
Наследимост: Да
Процентни стойности: относителни спрямо широчината на родителския елемент
Това свойство определя назъбването, което се появява преди първия форматиран ред. Зададената стойност на 'text-indent' може да бъде и отрицателна, но може да съществуват ограничения при съобразяването с тези стойности и тяхната имплементация(осъществяване). Назъбването не се поставя в средата на елемент, ако той е бил "разкъсан" от друг(като елемента 'br' в HTML).
Например:
P { text-indent: 3em }
Стойност: normal | <число> | <мярка за дължина> |
<процентна стойност>
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: относителни спрямо размера на шрифта на самия елемент
Свойството задава разстоянието между основните редове на два съседни реда
Когато е зададена числена стойност(число), за височина на реда се задава произведението от шрифта на текущия елемент и зададената числена стойност. Този случай се различава от този при задаване на процентна стойност с начина, по който се наследява: когато е зададена числова стойност, дъщерните елементи ще наследят самия множител(числото), а не получената стойност(какъвто е и случая с процентите и другите мерки за стойност).
Не е разрешено задаването на отрицателни стойности.
Трите правила, зададени в примера долу, водят до получаване на еднаква височина на реда:
DIV { line-height: 1.2; font-size: 10pt } /* число */
DIV { line-height: 1.2em; font-size: 10pt } /* мярка за дължина */
DIV { line-height: 120%; font-size: 10pt } /* процентна стойност */
Задаване на стойност 'normal' води до задаване на подходяща стойност за свойството 'line-height' за съответния шрифт на елемента. Прието е, че браузъра трябва да възприема стойността 'normal', все едно че е зададена стойност в областта от 1.0 до 1.2.
Вижте глава 4.4, където е описано влиянието на свойството 'line-height' върху форматирането на блоков елемент.
Тези свойства задават размера, околността и позицията на кутиите, които представляват елементите. Вижте модела на форматиране(глава 4), където са дадени примери за употребата на свойствата на кутиите.
Свойствата на полето(margin) настройват полето на елемента. Свойството 'margin' задава полетата за всичките четири страни, докато другите свойства на полета, задават полетата само на техните страни, респективно.
Свойствата на уплътнението задават колко място да се вмъква между рамката и съдържанието(например, текст или изображение). Свойството 'padding' задава уплътнение за всичките четири страни, докато останалите свойства задават само за съответната страна.
Свойствата на рамката(border) задават рамката на елемент. Всеки елемент притежава четири рамки, за всяка от неговите страни, които се дефинират чрез тяхната широчина, цвят и стил.
Свойствата 'width' и 'height' задават размера на кутията, докато свойствата 'float' и 'clear' могат да променят позицията на елементите.
Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшестващ блоков елемент.
Това свойство задава горното поле на елемент:
H1 { margin-top: 2em }
Разрешени са отрицателните стойности, но може да съществуват ограничения при съобразяването с тези стойности по време на имплементацията(осъществяването) им.
Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент
Това свойство задава полето отдясно на даден елемент:
H1 { margin-right: 12.3% }
Разрешени са и отрицателните стойности, но може да има ограничения при съобразяването с тези стойности по време на имплементацията им.
Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент
Това свойство задава полето отдолу на даден елемент:
H1 { margin-bottom: 3px }
Разрешава се задаването на отрицателни стойности, но може да има ограничения при съобразяването с тези стойности по време на имплементацията им.
Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент
Това свойство задава полето отляво на даден елемент:
H1 { margin-left: 2em }
Разрешава се задаването на отрицателни стойности, но може да има ограничения при съобразяването с тези стойности по време на имплементацията им.
Стойност: [ <мярка за дължина> | <процентна стойност> | auto ]{1,4}
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент
Свойството 'margin' е свойство за "кратък" достъп, с чиято помощ се задават стойностите за свойствата 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' на едно и също място в стиловия лист.
Ако са зададени четири мерки за дължина, те ще се отнасят съответно за горното, дясното, долното и лявото поле. Ако е зададена само една стойност, тя ще бъде приложена на полетата от всички страни, ако са зададени две или три, липсващите стойности ще бъдат заместени с тези, зададени на полето от противоположната страна.
BODY { margin: 2em } /* на всички полета се задава стойност 2em */
BODY { margin: 1em 2em } /* на горното и долното поле се задава стойност 1em,
докато на дясното и лявото се задава стойност 2em */
BODY { margin: 1em 2em 3em } /* на горното поле се задава стойност 1em,
на дясното - 2em, на долното - 3em, на лявото - 2em */
Последното правило от горния пример е равносилно на примера отдолу:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* стойност-копие на тази, зададена на полето на срещуположната
} страна(дясната или margin-right) */
Разрешава се задаването на отрицателни стойности, но може да има ограничения при съобразяването с тези стойности по време на имплементацията им.
Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент
Това свойство задава уплътнението отгоре за даден елемент.
BLOCKQUOTE { padding-top: 0.3em }
Не е разрешено зададените стойности да бъдат отрицателни.
Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент
Това свойство задава уплътнението отдясно за даден елемент.
BLOCKQUOTE { padding-right: 10px }
Не е разрешено зададените стойности да бъдат отрицателни.
Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент
Това свойство задава уплътнението отдолу за даден елемент.
BLOCKQUOTE { padding-bottom: 2em }
Не е разрешено зададените стойности да бъдат отрицателни.
Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент
Това свойство задава уплътнението отляво за даден елемент.
BLOCKQUOTE { padding-left: 20% }
Не е разрешено зададените стойности да бъдат отрицателни.
Стойност: [ <мярка за дължина> | <процентна стойност> ]{1,4}
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент
Свойството 'padding' е свойство за кратък достъп, чрез което се задават стойностите за свойствата 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' на едно и също място в стиловия лист.
Ако четирите стойности са зададени, те ще се отнасят съответно за горното, дясното, долното и лявото уплътнение, респективно. Ако е зададена само една стойност, тя ще бъде използвана за уплътненията на всички страни, ако са зададени две или три, липсващите стойности ще бъдат взети от тези, зададени на уплътнението на противоположната страна.
Повърхността на областта на уплътнението се задава чрез свойството 'background':
H1 {
background: white;
padding: 1em 2em;
}
Горният пример задава вертикално уплътнение със стойност '1em'(тази стойност се задава съответно за 'padding-top' и 'padding-bottom') и съответно хоризонтално уплътнение със стойност '2em'(тази стойност се задава съответно за 'padding-right' и 'padding-left'). Мерната единица 'em' е относителна спрямо размера на шрифта на елемента: '1em' е равен на размера на шрифта, който се използва в момента.
Не е разрешено зададените стойности да бъдат отрицателни.
Стойност: thin(тънка) | medium(средна) | thick(дебела) | <мярка за дължина>
Първоначална стойност: 'medium'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това свойство задава широчината на горната рамка на елемента. Широчината на ключовите стойности зависи от браузъра, но е в сила следната зависимост:
'thin' <= 'medium' <= 'thick'.
Широчините, на които отговарят ключовите думи са едни и същи, в рамките на документа:
H1 { border: solid thick red }
P { border: solid thick blue }
В горния пример, елементите 'h1' и 'p' ще имат една и съща рамка, независимо от размера на шрифта. За да бъдат постигнати относителни широчини на рамките, може да бъде използвана мярката 'em':
H1 { border: solid 0.5em }
Широчините на рамките не могат да бъдат с отрицателна стойност.
Стойност: thin | medium | thick | <мярка за дължина>
Първоначална стойност: 'medium'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това свойство задава широчината на дясната рамка на елемента. Ако стойността на свойството не бъде зададена, тя ще бъде равна на тази, зададена на свойството 'border-top-width'(стойността за широчината на горната рамка).
Стойност: thin | medium | thick | <мярка за дължина>
Първоначална стойност: 'medium'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това свойство задава широчината на долната рамка на елемента. Ако стойността на свойството не бъде зададена, тя ще бъде равна на тази, зададена на свойството 'border-top-width'(стойността за широчината на горната рамка).
Стойност: thin | medium | thick | <мярка за дължина>
Първоначална стойност: 'medium'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това свойство задава широчината на лявата рамка на елемента. Ако стойността на свойството не бъде зададена, тя ще бъде равна на тази, зададена на свойството 'border-top-width'(стойността за широчината на горната рамка).
Стойност: [thin | medium | thick | <мярка за дължина>]{1,4}
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това е свойство за кратък достъп, чрез което се задават стойностите за свойствата 'border-width-top', 'border-width-right', 'border-width-bottom' и 'border-width-left' на едно и също място в стиловия лист.
Може да бъдат зададени от една до четири стойности, като те биват интерпретирани по следния начин:
- една стойност: на широчините и на четирите рамки се задава именно тази стойност
- две стойности: на широчините на горната и долната рамки се задава първата стойност, докато на тези на лявата и дясната рамки се задава втората стойност.
- три стойности: на широчината на горната рамка се задава първата стойност, на дясната и лявата се задава втората, на долната се задава третата.
- четири стойности: тези стойности отговарят съответно за широчините на горната, дясната, долната и лявата рамка, респективно
В примерите долу, коментарите показват съответните широчини на горната, дясната, долната и лявата рамка:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */
За стойност на широчините на рамките не може да бъде задавана отрицателна стойност.
Стойност: <цвят>{1,4}
Първоначална стойност: стойността на свойството 'color'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Свойството 'border-color' задава цвета на четирите рамки. Могат да бъдат зададени от една до четири стойности и те се задават за рамките на различните страни, както за свойството 'border-width' по-горе.
Ако не е зададена нито една цветова стойност, ще бъде използвана стойността на свойството 'color' на елемента.
P {
color: black;
background: white;
border: solid;
}
В резултат на правилата от примера горе, рамката ще бъде плътна черна линия.
Стойност: none | dotted | dashed | solid | double | groove | ridge
| inset | outset
Първоначална стойност: none
Важи за: all elements
Наследимост: Не
Процентни стойности: N/A
Свойството 'border-style' задава стила на четирите рамки. За него могат да бъдат зададени от една до четири стойности, като тези стойности се задават за рамката на различните страни, както при свойството 'border-width' по-горе.
#xy34 { border-style: solid dotted }
В горния пример, хоризонталните рамки ще бъдат 'solid'(плътни) и вертикалните рамки ще бъдат 'dotted'(на точки).
Тъй като първоначалната стойност на стиловете на рамките е 'none', няма да се виждат никакви рамки, освен, ако не бъде зададена стойност за свойството 'border-style'.
Значенията на стиловете на рамките са, както следва:
- none
- не се изобразява рамка(независимо от стойността, зададена на свойството 'border-width')
- dotted
- рамката представлява линия на точки, която се изобразява върху фона на елемента
- dashed
- рамката представлява линия на тирета, която се изобразява върху фона елемента
- solid
- рамката представлява плътна линия
- double
- рамката представлява двойна линия, която се изобразява върху фона на елемента. Сборът на двете единични линии и разстоянието между тях е равен на стойността, зададена за свойството <border-width>.
- groove
- рамката представлява 3D(триизмерна) вдлъбнатина, която се изобразява с цветове, базирани на стойността <цвят>.
- ridge
- рамката представлява 3D(триизмерна) ивица, която се изобразява с цветове, базирани на стойността <цвят>.
- inset
- рамката представлява 3D(триизмерна) вмъкната фигура, която се изобразява с цветове, базирани на стойността <цвят>.
- outset
- рамката представлява 3D(триизмерна) фигура, със структура, противоположна на inset стила, която се изобразява с цветове, базирани на стойността <цвят>.
CSS1 същина: Браузърите понякога може да интерпретират 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset', като 'solid'.
Стойност: <border-top-width> || <border-style> ||
<цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това е свойство за "кратък" достъп, с чиято помощ се задават стойностите на свойствата за широчина, стил и цвят на горната рамка на даден елемент.
H1 { border-bottom: thick solid red }
Горното правило ще зададе стойности за широчината, стила и цвета на рамката, която се намира под h1 елемента. Пропуснатите стойности, ще бъдат заместени със своите първоначални стойности:
H1 { border-bottom: thick solid }
Тъй като в горния пример цветовата стойност е пропусната, цвета на рамката ще бъде същия като стойността на свойството 'color' на самия елемент.
Трябва да се отбележи, че докато свойството 'border-style' приема максимум четири стойности, това свойство приема само една стилова стойност.
Стойност: <border-right-width> || <border-style> ||
<цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това е свойство за "кратък" достъп, чрез което се задават стойностите за свойствата широчина, стил и цвят на дясната рамка на елемент. Иначе е еквивалентно на 'border-top' по начин на употреба.
Стойност: <border-bottom-width> || <border-style> ||
<цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това е свойство за "достъп", чрез което се задават стойностите на свойствата за широчина, стил и цвят на долната рамка на елемента. Иначе е евквивалентно на 'border-top' по начин на употреба.
Стойност: <border-left-width> || <border-style> ||
<цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това е свойство за "достъп", чрез което се задават стойностите на свойствата за широчина, стил и цвят на лявата рамка на елемента. Иначе е евквивалентно на 'border-top' по начин на употреба.
Стойност: <border-width> || <border-style> ||
<цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойностиs: N/A
Свойството 'border' е свойство за "кратък" достъп, чрез което се задават едни и същи стойности за широчина, цвят и стил на четирите рамки на един елемент. Например, първото правило долу е еквивалентно на четирите правила, които са показани след него:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
За разлика от свойствата за "кратък" достъп 'margin' и 'padding', чрез свойството 'border' не могат да бъдат задавани различни стойности за четирите рамки. За да бъде направено това, трябва да се използват едно или повече от останалите свойства на рамките.
Тъй като свойствата до известна степен притежават еднаква функционалност, реда по който се задават правилата става важен. Вземете в предвид следния пример:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
В горния пример, цвета на лявата рамка ще бъде черен, докато останалите рамки ще бъдат червени. Това се дължи на задаването на 'border-left' стойностите за широчина, стил и цвят. Тъй като не е зададена стойност за цвета на свойството 'border-left', ще бъде използвана тази от свойството 'color'. Факта, че свойството 'color' се задава след свойството 'border-left' не е важен.
Забележете, че докато свойството 'border-width' приема до четири стойности, това свойство приема само една.
Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: auto
Важи за: блоковите и заместените елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на родителския елемент
Това свойство може да бъде задавано при текстови елементи, но е най-полезно, когато се използва за заместени елементи, като изображения, например. Широчината се спазва, дори и с цената на мащабиране на изображението. Когато се мащабира изображението, неговите пропорции се запазват, ако свойството 'height' е установено на стойност 'auto'.
Например:
IMG.icon { width: 100px }
Ако стойностите, зададени на свойствата 'width' и 'height' на определен заместен елемент са 'auto', за тяхната стойност ще се използват съответните същински измерения на елемента.
Не е разрешена употребата на отрицателни стойности.
Вижте модела на форматиране(глава 4) за описание на връзката между това свойство, полето и уплътнението.
Стойност: <мярка за дължина> | auto
Първоначална стойност: auto
Важи за: блоковите и заместените елементи
Наследимост: Не
Процентни стойности: N/A
Това свойство може да се използва при текст, но е най-полезно при заместени елементи, като изображения, например. Височината се спазва чрез мащабиране на изображението, ако то е необходимо. При мащабирането, пропорциите на изображението се запазват, ако стойността на свойството 'width' е установена на 'auto'.
Например:
IMG.icon { height: 100px }
Ако стойностите на свойствата 'width' и 'height' на заместен елемент са установени на 'auto', тези свойства ще получат за стойност същинските размери на елемента.
Ако свойството е използвано с текстов елемент, височината може да бъде спазена и с т.н. скролбар(scrollbar).
Не е разрешено задаването на отрицателни стойности.
CSS1 същина: Браузърите може да игнорират свойството 'height'(т.е. да третират стойността му като 'auto'), ако елемента не е заместен такъв.
Стойност: left | right | none
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
При зададена стойност 'none', елемента ще бъде визуализиран на мястото, където се появява в текста. При зададена стойност 'left'('right') елемента ще бъде поместен вляво(или вдясно) и текста ще обгърне дясната(лявата) страна на елемента. При зададена стойност 'left' или 'right', елемента се третира като блоков(т.е. свойството 'display' се игнорира). Вижте глава 4.1.4 за пълните подробности по въпроса.
IMG.icon {
float: left;
margin-left: 0;
}
Горният пример поставя всички елементи img в 'class=icon' около лявата страна на родителския елемент.
Това свойство най-често се използва при изображения, вмъкнати в реда, но е в сила и при текстови елементи.
Стойност: none | left | right | both
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това свойство определя дали елемента позволява присъствието на плаващи елементи около него. По-точно, стойността на това свойство определя, къде точно не се приема присъствието на плаващи елементи. При задаване на стойност 'left' на свойството 'clear', елемента ще бъде поставен под плаващия елемент от лявата му страна, ако има такъв. При задаване на стойност 'none' на свойството 'clear', плаващите елементи са позволени и от двете страни на елемента.
Например:
H1 { clear: left }
Тези свойства класифицират елементите в категории, още повече те задават специфични визуални параметри на елементите.
Свойствата list-style описват начина на форматиране на списъчните елементи(т.е. елементите, за които е зададена стойност 'list-item' на свойството 'display'). Този тип свойства могат да бъдат задавани за всеки елемент и ще се наследяват по нормалния начин, надолу в родословното му дърво. Тези свойства ще оказват ефект единствено на елементите, чиято стойност за свойството 'display' е 'list-item'. Такъв е елемента 'li' в HTML.
Стойност: block | inline | list-item | none
Първоначална стойност: block
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A
Това свойство описва дали/как се показва елемента на платното(което може да е принтирана/разпечатана страница, компютърен екран и т.н.).
Елемента, стойността на свойството 'display', на който е установена на 'block' отваря нова кутия. Тя се разполага, в зависимост от съседните кутии, според модела на форматиране на CSS. Обикновено, елементи като 'h1' и 'p' са от тип блокови елементи. Стойността 'list-item' е подобна на 'block', като се изключи това, че се добавя маркер за елемент от списък. Елементът 'li' в HTML обикновено притежава тази стойност.
Елемент, за който е зададена стойност 'inline' на свойството 'display' става нова вътрешноредова кутия, която се намира на същия ред като предишното съдържание. Кутията се оразмерява в зависимост от форматирания размер на съдържанието. Ако то представлява текст, кутията може да обхваща няколко реда и на всеки ред ще има кутия. Свойствата поле, рамка и уплътнение са в сила при вътрешноредовите елементи(тези със стойност 'display' установена на 'inline'), но няма да окажат ефект при отделните редове.
Стойност 'none' на свойството 'display' премахва визуализирането на елемента, неговите дъщерни елементи и заобикалящата го кутия.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
Последното правило премахва визуализирането на изображенията в документа.
Първоначалната стойност на свойството 'display' e 'block', но браузъра обикновено има стойности по подразбиране за всички HTML елементи, в зависимост от предложеното в HTML спецификацията[2] изобразяване на елементите.
CSS1 същина: Браузърите могат да игнорират свойството 'display' и да използват единствено стойностите по подразбиране. (вижте глава 7)
Стойност: normal | pre | nowrap
Първоначална стойност: normal
Важи за: блоковите елементи
Наследимост: Да
Процентни стойности: N/A
Това свойство задава начина, по който се третират белите пространства в даден елемент: по нормалния начин(стойност 'normal')(при който белите пространства се "сливат"), 'pre' начина(чието поведение е като на 'pre' елемента в HTML) или 'nowrap' начина(при който обгръщането се осъществява чрез елементи br):
PRE { white-space: pre }
P { white-space: normal }
Първоначалната стойност на свойството 'white-space' е 'normal', но обикновено браузърите притежават стойности по подразбиране за всички HTML елемент, в зависимост от предложения в HTML спецификацията[2] начин за визуализиране на елементите.
CSS1 същина: Браузърите може да игнорират свойството 'white-space' в авторските и читателските стилови листа и вместо това да използват собствени стойности по подразбиране.(вижте глава 7.)
Стойност: disc | circle | square | decimal | lower-roman | upper-roman
| lower-alpha | upper-alpha | none
Първоначална стойност: disc
Важи за: елементите, за които е зададена стойност 'list-item' на свойството 'display'
Наследимост: Да
Процентни стойности: N/A
Това стойство се използва, за да се определи външния вид на маркера на елементите от списък, ако стойността на свойството 'list-style-image' е 'none' или, ако изображението, което е посочено в адреса(url) не може да бъде показано.
OL { list-style-type: decimal } /* 1 2 3 4 5 и т.н. */
OL { list-style-type: lower-alpha } /* a b c d e и т.н. */
OL { list-style-type: lower-roman } /* i ii iii iv v и т.н. */
Стойност: <url> | none
Първоначална стойност: none
Важи за: елементите, за които е зададена стойност 'list-item' на свойството 'display'
Наследимост: Да
Процентни стойности: N/A
Това свойство задава изображението, което ще бъде използвано като маркер на елементите от списък. Когато изображението е достъпно, то ще замести, маркера, който е зададен чрез свойството 'list-style-type'.
UL { list-style-image: url(http://png.com/ellipse.png) }
Стойност: inside | outside
Първоначална стойност: outside
Важи за: елементите, за които е зададена стойност 'list-item' на свойството 'display'
Наследимост: Да
Процентни стойности: N/A
Стойността на свойството 'list-style-position' определя как се визуализира маркера на списъчните елементи, в зависимост от съдържанието. За пример на форматирането вижте глава 4.1.3.
Стойност: [disc | circle
| square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none] || [inside | outside] || [<url> | none]
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: елементи, за които е зададена стойност 'list-item' на свойството 'display'
Наследимост: Да
Процентни стойности: N/A
Свойството 'list-style' е свойство за кратък достъп, чрез което се задават стойностите на свойствата 'list-style-type', 'list-style-image' и 'list-style-position' на едно и също място в стиловия лист.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
Директното задаване на свойството 'list-style' при елементите 'li' може да доведе до неочаквани резултати. Вземете в предвид следния код:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
Тъй като спецификата за първото правило(тази, която е дефинира в каскадния ред) на стиловия лист в горния пример ще надделее над второто правило за всички елементи 'li' и ще бъдат използвани само списъчните стилове 'list-alpha'. Следователно е препоръчително да се задава стойност на свойството 'list-type' за елементите от списък:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
В горния пример, наследимостта ще предаде стойностите 'list-style' от елементите 'ol' и 'ul' на 'li' такивите.
Стойност за url може да бъде комбинирана с всяка друга стойност:
UL { list-style: url(http://png.com/ellipse.png) disc }
В горния пример, стила 'disc' ще бъде използван, когато изображението не е достъпно.
Видът на мярката за дължина е незадължителен символ('+' или '-' като '+' е този по подразбиране), последван от число(с или без десетична запетая), което от своя страна е последвано от идентификатор за мерни единици(двубуквено съкращение). След поставяне на числото '0', идентификатора на мерни единици е незадължителен.
Някои свойства разрешават задаването на отрицателни мерки за дължина, но това може да ослужни модела на форматиране и да възникнат ограничения, свързани със съобразяването с тези стойности по време на имплементацията им. Ако дадена отрицателна стойност не се поддържа, тя трябва да бъде закръглена до най-близката стойност, която се поддържа.
Съществуват два типа мерки за дължина: относителни и абсолютни. Относителните мерки определят дължина, която е относителна спрямо друго свойство, на което е зададена дължина. Стиловите листа, които използват относителни мерки много по-лесно ще бъдат мащабирани от една медия към друга(например от компютърен монитор към лазерен принтер).
Процентните мерки(описани по-долу) и ключовите стойности(например 'x-large') предлагат подобни предимства.
Позволени са следните относителни мерки:
H1 { margin: 0.5em } /* em-ове, височината на шрифта на елемента */
H1 { margin: 1ex } /* x-height, височината на буквата 'x' */
P { font-size: 12px } /* пиксели, относителни спрямо платното */
Относителните мерки 'em' и 'ex' са относителни спрямо размера на шрифта на самия елемент. Единственото изключение от това правило в CSS1 е свойството 'font-size', където 'em' и 'ex' стойностите са относителни спрямо размера на шрифта на родителския елемент.
Пикселните мерки, като тези, използвани в последното правило, са относителни спрямо разделителната способност(резолюцията) на платното, т.е. в най-често срещания случай, компютърния екран. Ако гъстотата на пикселите на изходното устройство е много по-различна от тази при компютърен монитор, браузъра трябва да премащабира пикселните стойности. Предложеният пиксел-справка е визуалния ъгъл на един пиксел на дадено устройство с гъстота на пикселите, равна на 90dpi(dots per inch) и разстояние до читателя, равно на една ръка разстояние. За номинална(фиктивна) дължина на една ръка, равна на 28 инча, визуалния ъгъл е равен на приблизително 0.0227 градуса.
Дъщерните елементи наследяват изчислената стойност, а не относителната такава:
BODY {
font-size: 12pt;
text-indent: 3em; /* т.е. 36pt */
}
H1 { font-size: 15pt }
В горния пример стойността на свойството 'text-indent' на елементите 'h1' ще бъде 36pt(36 пункта), а не 45pt.
Мерките за абсолютна дължина са полезни, единствено, когато физическите свойства на изходното устройство се знаят. Поддържат се следните абсолютни мерки:
H1 { margin: 0.5in } /* инчове, 1in = 2.54cm */
H2 { line-height: 3cm } /* сантиметри */
H3 { word-spacing: 4mm } /* милиметри */
H4 { font-size: 12pt } /* пунктове, 1pt = 1/72in */
H4 { font-size: 1pc } /* пики, 1pc = 12pt */
В случай, че зададената дължина не се поддържа, браузърите трябва да намерят близка на нея. По-нататъшните изчисления и наследимостта за всички CSS1 свойства, трябва да бъдат базирани на приближената стойност.
Форматът на процентната стойност е незадължителен символен знак('+' или '-', като '+' е символа по подразбиране), последван от число(с или без десетична запетая), което от своя страна е последвано от символа '%'.
Процентните стойности са винаги относителни на друга стойност, например мярка за дължина. Всяко свойство, което поддържа процентни стойности, също определя за коя стойност се отнася процента. Най-често това е шрифта на самия елемент:
P { line-height: 120% } /* 120% от стойността на свойството 'font-size' на елемента */
При всички наследени CSS1 свойства, ако е зададена процентна стойност, дъщерните елементи наследяват изчислената стойност, а не процентната такава.
Цветът може да бъде или ключова дума или бройна RGB спецификация.
Препоръчителния списък от ключови думи за имена на цветове е следния: aqua(аква), black(черен), blue(син), fuchsia, gray(сив), green(зелен), lime(цвят-варовик), maroon(кестеняв), navy(светло-син), olive(маслинен), purple(лилав), red(червен), silver(сребрист), teal, white(бял) и yellow(жълт). Тези 16 цвята са взети от Windows VGA палитрата и техните RGB стойности не са дефинирани в тази спецификация.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
При числовите означения на цвят се използва цветовия модел RGB. Всичките примери по-долу задават един и същи цвят:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* целочислена стойност в обхвата 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* плаващ обхват от 0.0% до 100.0% */
Формата на RGB стойността в шестнадесетичната бройна система е символа '#', последван от три или шест шестнадесетични знака. Трицифрената RGB система за обозначение(#rgb) се превръща в шестцифрена форма(#rrggbb), чрез копиране на цифрите, а не чрез добавяне на нулеви стойности. Например, #fb0 става #ffbb00. Това гарантира, че белия цвят(#ffffff) може да бъде зададен чрез кратката система за обозначение(#fff) и всички зависимости с дълбочината на цвета на монитора биват премахнати.
Формата на RGB стойността в функционалния тип обозначение е 'rgb(последван от разделен със запетая списък от три числови стойности(или три целочислени стойности в областта от 0 до 255, или три процентни стойности в областта от 0.0% до 100.0%), последвани от символа ')'. Символите за празно място около числовите стойности са позволени.
Стойностите, които се намират извън допустимите граници, ще бъдат приближени, така че да попаднат в тях. Трите правила по-долу водят до едно и също нещо:
EM { color: rgb(255,0,0) } /* числа от целочислената област от 0 до 255 */
EM { color: rgb(300,0,0) } /* стойността 300 се приближава към 255 */
EM { color: rgb(110%, 0%, 0%) } /* стойността 110% се приближава към 100% */
RGB цветовете са дефинирани в sRGB цветовото пространство[9]. Точността на представяне на тези цветове, може да бъде различна при различните браузъри, но употребата на sRGB осигурява ясна и обективно измерима дефиниция за това, какво трябва да представлява цвета, която може да бъде свързана с международните стандарти[10].
Браузърите могат да поставят ограничения пред себе си при визуализирането на цветове, чрез осъществяване на гама-корекции по тях. sRGB цветовото пространство задава гама стойност, равна на 2.2 под определени зрителни условия. Браузърите настройват цветовете, зададени в CSS, така че в комбинация с естествената гама стойност на изходното устройство, да се получава действаща гама стойност от 2.2. Приложение D обяснява по-подробно този въпрос. Нужно е да се отбележи, че единствено цветовете, зададени чрез CSS се влияят от това; например при изобаженията се очаква да притежават своя-собствена цветова информация.
Uniform Resource Locator(URL) се идентифицира чрез функционално обозначение:
BODY { background: url(http://www.bg.com/pinkish.gif) }
Форматът на стойността URL е 'url(последван от незадължителен символ за празно място и незадължителна единичен знак за кавички(') или такъв за двойни кавички("), последван от самия url адрес(така, както се дефинира в [11]) , който от своя страна е последван от незадължителен единичен знак за кавички(') или такъв за двойни кавички("), последван от незадължително празно място и символа ')'. Символите за кавички, които не са част от самия url адрес, трябва да бъдат с еднакъв брой.
Кръглите скоби, запетаите, символите за празно място, единичните кавички(') и двойните кавички("), които се срещат в url адреса трябва да бъдат затваряни чрез обратна наклонена черта(backslash, \): '\(', '\)', '\,'.
Частичните url адреси се интерпретират в зависимост от източника на стиловия лист, а не в зависимост от документа:
BODY { background: url(yellow) }
Браузър, който използват CSS1 при визуализирането на документи спазва CSS1 спецификацията, ако:
- се опитва да намери всички цитирани(споменати) стилови листа и да ги предаде според тази спецификация
- подрежда декларациите, в зависимост от каскадния им ред
- изпълнява CSS1 функционалността в рамките на презентационния посредник(вижте определението по-долу).
Браузър, който визуализира CSS1 стилови листа, спазва CSS1 спецификацията, ако:
- той визуализира валидни CSS1 стилови листа
Браузър, който използва CSS1, за да визуализира документи и CSS1 стилови листа, спазва CSS1 спецификацията, ако той задоволява и двата типа изисквания за спазване на CSS1.
Не е нужно браузъра да използва цялата функционалност на CSS1: той може да действа според CSS1, чрез употреба на основната функционалност. Тя се състои от цялата CSS1 спецификация, с изключение на тези части, които изрично са изключени.
В текста на тази спецификация, тези части са маркирани с
"CSS1 същина:", последвано от обяснение на това, което не попада в рамките на основната функционалност. Свойствата, които са изключени от основната функционалност на CSS1, се наричат CSS1 разширени свойства.
Тази глава дефинира единствено спазването на CSS1. Ще бъдат направени и други нива(версии) на CSS, които може да изискват от браузъра употреба на различни свойства, за да бъдат счетени за спазени.
Някои примери за ограничения на презентационния посредник са: ограничени ресурси(шрифтове, цвят) и ограничена разделителна способност(резолюция)(такава, че полетата да бъдат неточни). В тези случаи, браузъра може да постави нови, подобни на предишните стойности в стиловите листа. Също така, различните примери за потребителски интерфейси, могат да имат свой-собствени ограничения: например, VR браузър, може да премащабира документа, в зависимост на неговото "разстояние" от потребителя.
Браузърите могат да предлагат на читателите и допълнителни възможности за презентация. Например, браузъра може да предостави възможности за читателите с зрителни увреждания или може да предостави възможност за изключване на мигането.
Трябва да се отбележи, че CSS1 не задава всички аспекти на форматирането. Например, браузърът притежава свободата на избор върху алгоритъма на поставяне на разстояние между буквите.
Тази спецификация, също така препоръчва, но не изисква от браузъра да:
- да позволява на потребителя да задава лични стилови листа
- да позволява отделни стилови листа да бъдат включвани и изключвани
Горните правила за спазване описват единствено функционалността, но не и потребителския интерфейс.
Тази спецификация дефинира CSS, ниво(версия) 1. Очакват се по-високи нива(версии) на CSS, които ще притежават допълнителни възможности и ще бъдат дефинира в бъдеще. За да бъде гарантирано, че браузърите, поддържащи единствено CSS1, ще могат да четат стилови листа, съдържащи свойства от по-горни нива на CSS, тази глава дефинира какво прави браузъра, когато срещне определени конструкции, които не са валидни в CSS, ниво 1.
- декларация, която съдържа непознато свойство бива игнорирана. Например, ако стиловия лист е следния:
H1 { color: red; rotation: 70deg }
браузъра ще го третира сякаш стиловия лист е бил:
H1 { color: red; }
- невалидните стойности или тези, в които има невалидни части се третират сякаш въобще не са били декларирани:
IMG { float: left } /* CSS1 */
IMG { float: left top } /* "top" не е стойност на свойството 'float' */
IMG { background: "red" } /* ключовите думи в CSS1 не може да бъдат поставяни в кавички */
IMG { border-width: 3 } /* трябва да бъде зададена мярка за стойностите за дължина */
В горния пример, CSS1 парсера ще зачете първото правило и ще игнорира останалите, сякаш стиловия лист е бил следния:
IMG { float: left }
IMG { }
IMG { }
IMG { }
Браузърите, действащи в съответствие с бъдещите CSS спефицикации могат да приемат едно или повече от другите правила също така.
- невалидна @-ключова дума се игнорира, заедно с всичко, което следва след нея, до и включително следващия символ точка и запетая(;) или двойка фигурни скоби({...}), в зависимост от това, кое от двете се среща най-напред в кода. Нека вземем например следващия стилов лист:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 {color: blue}
'@three-dee' е невалидна декларация според CSS1. Следователно, цялото at-правило(до и включително с третата дясна(задваряща) фигурна скоба) се игнорира. Браузърът, спазващ CSS1 ще пропусне декларацията, като ще намали съдържанието на стиловия лист до:
H1 {color: blue}
По-подробно:
CSS стилов лист, за която и да е версия(ниво) на CSS, се състои от списък с
декларации. Съществуват два вида декларации:
at-правила и групи от правила. В декларациите може да присъстват и символи за празно място(интервали, табулации, нови редове).
CSS стиловите листа често се вмъкват в HTML документите и един от най-уместните начини те да бъдат скрити от по-старите браузъри е, като те бъдат поставени в HTML коментари. Знаците за коментар в HTML "<!--" и
"-->" може да се срещат преди, след и между декларациите. Около тях може да присъстват символи за празно място.
At-правилата започват с at-ключова дума, която представлява идентификатор, пред началото на който е поставен символа '@'(например: '@import', '@page'). Идентификаторът се състои от букви, числа, тирета и escaped символи(дефинирани по-долу).
At-правилото се състои от всичко до и включително следващия символ точка и запетая(;) или следващия блок(дефиниран накратко), в зависимост от това кое от двете се среща на по-предно място в кода. Браузър, спазващ CSS1, който срещне at-правило, което започва с at-ключова дума, различна от '@import' игнорира цялото правило и продължава предаването(парсирането) без него. Той също би игнорирал всяко at-правило, което започва с '@import', ако то не се среща в най-горната част на стиловия лист, т.е. ако е разположено след някакви правила, каквито и да са те(дори и игнорирани). Ето и пример.
Да предположим, че CSS1 парсера се сблъсква с този стилов лист:
@import "subs.css";
H1 { color: blue }
@import "list.css";
Според CSS1 втората декларация '@import' е невалидна. CSS1 парсера пропуска цялото at-правило, като съкратява стиловия лист и от него остава следното:
@import "subs.css";
H1 {color: blue}
Един блок започва с лява фигурна скоба({) и завършва със съответната дясна фигурна скоба(}). Между тях може се срещат всякакви символи, с изключение на това, че кръглите скоби(()), квадратните скоби([]) и кръглите скоби({}) трябва съответно да са групирани по двойки. Единичните(') и двойните(") кавички трябва също да са групирани по двойки и символите между тях се парсират като символен низ(стринг) (вижте т.н. tokenizer в приложение B за дефиниция на думата "стринг"). Ето и един примерен блок; трябва да се вземе в предвид, че дясната фигурна скоба между кавичките, не е от двойката, отговаряща на началната фигурна скоба на блока и, че втория единичен символен за кавички(') е затварящ символ и за това не попада в двойката на отварящия символ за кавички:
{ causta: "}" + ({7} * '\'') }
Една група от правила се състои от селектор, който представлява стринг, последван от блок с декларации. Стрингът-селектор се състои от всичко до(но не включително) първия символ фигурна скоба({). Ако групата от символи започва с стринг-селектор, който не е валиден CSS1, групата се пропуска.
Да вземем следния пример, при който CSS1 парсера се сблъсква със следния стилов лист:
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
Вторият ред съдържа стринг-селектор, който не е валиден спрямо CSS1. Браузъра, спазващ CSS1 ще пропусне групата от правила, съкратявайки стиловия лист на следното:
H1 { color: blue }
P EM { font-weight: bold }
Един блок от декларации започва с лява фигурна скоба({) и завършва със съответната дясна фигурна скоба(}). Между тях се намира поредица от нула или повече декларации, разделени със символ точка и запетая(;).
Една декларация се състои от свойство, символ за двуеточие(:) и стойност. Около всеки от тези може да бъдат поставени символи за празно място. Както беше дефинирано по-рано свойството представлява идентификатор. В стойността може да се среща всеки символ, но кръглите скоби(()), квадратните скоби([]), фигурните скоби({}), единичния символ за кавички(') и двойните кавички(") трябва да бъдат групирани съответно по двойки. Кръглите, квадратните и фигурните скоби трябва да бъдат поставени(ако се налага) едни в други. Символите, намиращи се в кавички се парсират(предават) като стрингове.
За да се гарантира, че новите свойства и новите стойности за съществуващите свойства могат да бъдат добавени в бъдеще, браузъра трябва да пропусне декларация с невалидно име на свойството или невалидна стойност. Всяко CSS1 свойство има свой синтактични и семантични особености относно стойностите, които може да приема.
Например, да предположим, че CSS1 парсера се сблъсква със следния стилов лист:
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any; font-variant: small-caps }
EM EM { font-style: normal }
На втората декларация на първия ред е зададена невалидна стойност - '12pt'. Втората декларация на втория ред съдържа недефинирано свойство - 'font-vendor'. CSS1 парсерът ще пропусне тези декларации и ще съкрати стиловия лист, така че да остане следното:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
Коментарите(вижте глава 1.7) могат да се срещат навсякъде, където може да се срещне символ за празно място и също се считат за символи за празно място. CSS1 дефинира допълнителни места, където може да се срещнат символи за празно място(като във вътрешни стойности) и употребата на коментари там също се разрешава.
Винаги са в сила следващите правила:
- всички CSS стилови листа не различават малки и големи букви(т.е. са case-insensitive), с изключение на тези в частите, които не се контролират от CSS. В CSS1, например, имената на шрифтовите семейства и URL адресите може да правят разлика между малки и големи букви(да са case-sensitive). Също така т.н. case-sensitivity за атрибутите class и id се контролира от HTML[2].
- в CSS1, селекторите(имената на елементите, класовете и ID-тата) могат да съдържат само символите a-z, 0-9 и Unicode символите от 161 до 255, включително и този за тире(-); те не могат да започват със символ за тире или цифра, те също така могат да съдържат затварящи символи и всякакви Unicode символи, представени като числов код(вижте следващия параграф).
- символа за обратна наклонена черта(\), последван от максимум четири шестнадесетични цифри(0..9, A..F), замества Unicode символа със съответния номер.
- всеки символ, с изключение на шестнадесетичните числа, може да бъде затварян, за да бъде премахнато неговото специално значение, чрез поставане на символа обратна наклонена черта(\) пред него. Например: "\"" е символен низ(стринг), съдържащ символ за двойни кавички(").
- двата предишни параграфа дефинират затварянето на символи чрез символа обратна наклонена черта(\).
Този тип затваряне винаги се счита за част от идентификатор, с изключение на вътрешните стрингове(например "\7B" не е пунктуация, въпреки, че "{" е, и употребата на "\32" в началото на името на клас се разрешава, въпреки, че употребата на цифрата "2" не се разрешева).
Забележка: Атрибутът class в HTML позволява употребата на повече символи в дадено име на клас, от колкото са позволени за селектори по-горе. В CSS1, тези символи трябва да бъдат затваряни или написани чрез Unicode числа:
"B&W?" може да бъде написано като "B\&W\?" или "B\26W\3F", "κουρος"
(от гр. "kouros") трябва да бъде написано по следния начин: "\3BA\3BF\3C5\3C1\3BF\3C2". Очаква се, че в по-късните версии на CSS, директно ще могат да бъдат въвеждани повече символи.
В приложение B е описана граматиката на CSS1.
[1] W3C W3C страница с ресурси с информация относно стиловите листа (http://www.w3.org/Style)
[2]
"HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs,
December 1997. Намира се на адрес: http://www.w3.org/TR/REC-html40/.
[3] T Berners-Lee, D Connolly: "Hypertext Markup
Language - 2.0", RFC
1866, MIT/W3C, November 1995. Тази спецификацията е също така достъпна и в хипертекстна форма (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)
[4] F Yergeau, G Nicol, G Adams, M Dьrst:
"Internationalization
of the Hypertext Markup Language"
(ftp://ds.internic.net/rfc/rfc2070.txt).
[5] ISO 8879:1986.
Information Processing - Text and Office Systems - Standard
Generalized Markup Language (SGML)
[6] ISO/IEC 10179:1996
Information technology -- Processing languages -- Document Style
Semantics and Specification Language (DSSSL).
[7] ISO/IEC 9899:1990
Programming languages -- C.
[8] The Unicode Consortium, "The Unicode
Standard -- Worldwide Character Encoding -- Version 1.0",
Addison-Wesley, Volume 1, 1991, Volume 2, 1992.
[9] "A Standard Default color
Space for the Internet", version 1.10, M. Stokes, M. Anderson,
S. Chandrasekar, and R. Motta, 5 November 1996.
[10] CIE Publication 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3
(http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform
Resource Locators (URL)", RFC
1738, CERN, Xerox Corporation, University of Minnesota, December 1994
[12] "PNG (Portable
Network Graphics) Specification, Version 1.0 specification"
(http://www.w3.org/TR/REC-png-multi.html)
[13] Charles A. Poynton: "Gamma
correction on the Macintosh Platform"
(ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "ICC Profile Format
Specification, version 3.2", 1995
(ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] S C Johnson: "YACC - Yet another compiler
compiler", Technical Report, Murray Hill, 1975
[16] "Flex: The Lexical Scanner Generator",
Version 2.3.7, ISBN 1882114213
По време на краткия живот на HTML са били създавани няколко плана за стиловите листа, на които тази спецификация е много задължена. Заслужават отбелязване тези, съставени от Роберт Раиш, Джо Инглиш и Пеи Уей, защото оказват голямо влияние върху текущата спецификация.
Множество хора са допринесли за развитието на CSS1. Бихме искали да отдадем своите специални благодарности на следните хора: Тери Алън, Мъри Алтаим, Глен Адамс, Валтер Бендер, Тим Бърнърс-Лий, Ивес Бертот, Скот Бигъм, Стив Бърн, Робърт Каиляу, Джеймс Кларк, Дениъл Конъли, Дона Конвърс, Адам Костело, Тод Фарнър, Тод Фрътър, Рой Филдинг, Нийл Галернау, Уейн Греймлих, Фил Халъм-Бейкър, Филип Хошка, Кевин Хюз, Скот Исаакс, Тони Джебсън, Уилям Джонстън, Джил Кан, Филип Каплън, Фил Карлтън, Евън Киршенбаум, Ивес Лафон, Мъри Малоуни, Лу Монтули, Колас Наябу, Хенрик Фристик Нилсен, Дейвид Перъл, Уилям Пери, Скот Прийс, Пол Прескот, Лиъм Куйн, Винсънт Куинт, Джени Реджит, Томас Риардън, Сесил Ройсин, Майкъл Сийтън, Дейвид Сийбърт, Дейвид Сийгъл, Дейвид Сингър, Бенджамин Ситлър, Джон Смърл, Чарлс Пейтън Тейлър, Айрин Вейтън, Дениъл Вейлърд, Мандира Вирмани, Грег Уоткинс, Майк Векслър, Лайджа Уилямс, Брайън Уилсън, Крис Уилсън, Лорън Ууд и Стивън Зайлъс.
Трима човека заслужават специално да бъдат споменати: Дейв Реджит(за неговия кураж и работа по HTML3), Крис Лили(за неговото продължително съдействие, особено в областта на цветовете и шрифтовете) и Стивън Пембертън(за неговите творчески и организационни умения).
(Това приложение е информативно, а не нормативно)
Следващия стилов лист е написан, според предложеното визуализиране в HTML 2.0[3] спецификацията. Някои стилове, като например цветовете, са добавени с цел завършеност. Предложено е стилов лист, подобен на този по-долу да бъде използван като такъв по подразбиране на браузърите.
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* стойността е относителна спрямо родителския елемент */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* сбито форматиране */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* може да бъде използвано и свойството 'border-bottom' */
A:link { color: blue } /* непосетена хипервръзки(линкове) */
A:visited { color: red } /* посетена хипервръзки(линкове) */
A:active { color: lime } /* активна хипервръзки(линкове) */
/* задаването на рамката около елементите img
изисква контекстни селектори */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
(това приложение е нормативно)
Минималната CSS(т.е., тази, която важи за всяка версия на CSS) граматика, която всички имплементации трябва да поддържат се дефинира в глава 7. Граматиката по-долу дефинира много по-малък език, такъв, който дефинира синтаксиса на CSS1.
До някаква степен, обаче, тя все още е superset на CSS1: съществуват допълнителни семантични ограничения, които не са описани в тази граматика. Браузър, спазващ CSS1 също така трябва да се придържа към forward-compatible parsing правилата(вижте глава 7.1), обозначенията на свойствата и стойностите(глава 5) и мерките(глава 6). Нещо повече, HTML налага ограничения, например на допустимите стойности на class атрибута.
Граматиката по-долу е LL(1)(трябва да се отбележи, че повечето от браузърите не трябва да я използват директно, тъй като тя не изразява parsing(парсинг) конвенциите, а само CSS1 синтаксиса). Форматът на продуктите е оптимизиран за човешка консумация и са използвани кратки обозначения от yacc[15]:
* : 0 или повече
+ : 1 или повече
? : 0 или 1
| : разделя алтернативите
[] : използва се за групиране
Продуктите са следните:
стилов лист
: [CDO|CDC]* [ import [CDO|CDC]* ]* [ група от правила [CDO|CDC]* ]*
;
import
: IMPORT_SYM [символен низ|URL] ';' /* например @import url(fun.css); */
;
числов_оператор
: '-' | '+'
;
оператор
: '/' | ',' | /* празен */
;
свойство
: IDENT
;
група от правила
: селектор[ '.' селектор ] *
'{' декларация [ ';' декларация ]* '}'
;
селектор
: прост_селектор+ [ псевдо_елемент | отделен_псевдо_елемент ]?
| отделен_псевдо_елемент
;
/* "id" е ID, което е прикачено към типа на
** вляво, както в: P#p007
** "отделно_id" е ID, което не е прикачено,
** както в: #p007
** аналогично за класовете и псевдо-класовете.
*/
прост_селектор
: име_на_елемента id? клас? псевдо_клас? /* например: H1.subject */
| отделен_id клас? псевдо_клас? /* например: #xyz33 */
| отделен_клас псевдо_клас? /* например: .author */
| отделен_псевдо_клас /* например: :link */
;
име_на_елемента
: IDENT
;
псевдо_клас /* както в: A:link */
: линк_псевдоклас_след_IDENT
| посетен_псевдоклас_след_IDENT
| активен_псевдоклас_след_IDENT
;
отделен_псевдо_клас /* както в: :link */
: псевдоклас_връзка
| посетен_псевдоклас
| активен_псевдоклас
;
клас /* както в: P.note */
: клас_след_IDENT
;
отделен_клас /* както в: .note */
: клас
;
псевдо_елемент /* както в: P:first-line */
: първата_буква_след_IDENT
| първия_ред_след_IDENT
;
отделен_псевдо_елемент /* както в: :first-line */
: първа_буква
| първи_ред
;
/* Съществува ограничение, според което id и отделно_id, според което
** частта след символа "#" трябва да е валидна HTML ID стойност;
** например, "#x77" е подходяща, докато "#77" не е.
*/
id
: HASH_след_IDENT
;
отделно_id
: HASH
;
декларация
: свойство ':' expr prio?
| /* празно */ /* Предотвратява синтактични грешки... */
;
prio
: важна_SYM /* !important */
;
израз
: термин [ оператор на термина ]*
;
термин
: числов_оператор?
[ число | символен низ | процентна стойност | мярка за дължина | EMS | EXS
| IDENT | шестнайсетичен цвят | URL адрес | RGB стойност ]
;
/* Съществува ограничение, свързано с цвета, според което цвета трябва
** има или 3, или 6 шестнадесетични цифри (т.е., [0-9 a-f A-F])
** след символа "#"; например, "#000" е подходящо, докато "#abcd" не е.
*/
шестнадесетичен цвят
: HASH | HASH_след_IDENT
;
Това, което следва е т.н. tokenizer, написан чрез flex[16] системата за обозначение. Трябва да се отбележи, че това предполага 8-битова имплементация на flex системата. Т.н. tokeniser не прави разлика между малки и големи букви(в командния ред на flex, option -i).
unicode \\[0-9a-f]{1,4}
latin1 [Ў-я]
escape(затварящи) {unicode}|\\[ -~Ў-я]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
name {nmchar}+
d [0-9]
notnm [^-a-z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(0);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import {BEGIN(0); return IMPORT_SYM;}
"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}
{ident} {BEGIN(AFTER_IDENT); return IDENT;}
{string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;}
{num}"%" {BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm} {BEGIN(0); return LENGTH;}
{num}mm/{notnm} {BEGIN(0); return LENGTH;}
{num}cm/{notnm} {BEGIN(0); return LENGTH;}
{num}pc/{notnm} {BEGIN(0); return LENGTH;}
{num}in/{notnm} {BEGIN(0); return LENGTH;}
{num}px/{notnm} {BEGIN(0); return LENGTH;}
{num}em/{notnm} {BEGIN(0); return EMS;}
{num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name} {BEGIN(AFTER_IDENT); return HASH;}
"."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\) |
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) {BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) {BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;}
[ \t]+ {BEGIN(0); /* ignore whitespace */}
\n {BEGIN(0); /* ignore whitespace */}
\<\!\-\- {BEGIN(0); return CDO;}
\-\-\> {BEGIN(0); return CDC;}
. {fprintf(stderr, "%d: Illegal character (%d)\n",
lineno, *yytext);}
(Това приложение е информативно, а не нормативно)
HTML документите могат да съдържат всеки от около 30,000 различни символа, дефинирани от Unicode. Множество документи биха се използвали само няколко стотици. Множество шрифтове също така само няколко стотици символи. Заедно с глава 5.2, това приложение обяснява начина, по който символите в документа и символите в шрифта биват подбирани.
Съдържанието на HTML документ представлява поредица от
символи и код. За да бъде изпратено "по жицата", то бива шифровано като поредица от байтове, чрез употреба на някои от възможните типове
шифроване. HTML документа трябва да бъде дешифрован, за да бъдат намерени символите. Например, в Западна Европа е обичайно да се използва байта 224, за поставяне на вид френско ударение, но в Иврит, е по-често срещана употребата на 224 за т.н. Алеф. В Япония, значението на байта зависи от байтовете, които се намират преди него. При някои типове шифроване, един символ е шифрован като два(или повече) байта.
Браузърът разбира кой метод за дешифриране на байтовете да използва чрез т.н. "charset" параметър в горната част на HTML документа. Най-често срещаните типове шифроване(charset стойности) са "ASCII"(за Англия), "ISO-8859-1"(за Западна Европа), "ISO-8859-8"(за Иврит), "Shift-JIS"(За Япония).
HTML [2][4] позволява употребата на до 30,000 различни символа, а именно тези дефинирани от Unicode. Не са много документите, които ще използват толкова много символи и избора на правилен тип шифроване обикновено ще гарантира, че документа ще се нуждае от само един байт за символ. Случайни символи, които се намират извън шифрования обхват могат да бъдат въвеждани чрез символни кодове: 'Π' винаги означава гръцката горна буква Pi, независимо от типа на шифроването, което е използвано. Нужно е да се отбележи, че това принуждава браузърите да бъдат подготвени за какъвто и да е Unicode символ, дори и ако те боравят само с няколко типа шифроване.
Шрифтовете не съдържат символи, а картинки на такива, наречени глифове(glyph)(или шрифтови символи). Шрифтовите символи, под формата на контури и растери, съставят даден тип репрезентация на символа. Дали изрично или не, но всеки шрифт притежава, свързана с него таблица, а именно таблица с шифрования шрифт, която определя това, на кой символ е репрезентация съответния глиф или шрифтов символ. При Type 1 шрифтовете, таблицата бива наричана и енкодиращ вектор.
Всъщност, множество шрифтове съдържат по повече глифове за един и същи символ. Това, кой от тези глифове трябва да бъде използван зависи или от правилата на езика или от предпочитанията на дизайнера.
В арабския, например, всички букви притежават четири различни форми, в зависимост от това дали буквата е използвана в началото, средата, края на думата или просто е изолирана. При всички положения, това ще е един и същи символ и така съществува само един символ в HTML документа, но когато бъде разпечатан изглежда различно всеки път.
Съществуват и шрифтове, които оставят на графичния дизайнер да избере, измежду алтернативните форми, които са достъпни. За нещастие, CSS1 все още не предоставя начин, чрез който да бъдат избирани тези алтернативни форми. Понастоящем, при такива шрифтове се избира винаги формата по подразбиране.
Един шрифт може и да не е достатъчен, за да бъдат показани всички символи в даден документ или дори единичен елемент. За да бъде решен този проблем, CSS1 позволява употребата на шрифтови групи.
Шрифтовите групи в CSS представляват списък от шрифтове с еднакъв размер и стил, които биват тествани един след друг с цел да се провери дали съдържат глиф за определен символ. Елемент, съдържащ текст на английски език и математически символи, може да се нуждае от група от два шрифта, единия от които съдържащ буквите и числата, а другия - математическите символи. Вижте глава 5.2
за подробно описание на механизма зад шрифтовите групи.
Ето и пример за шрифтова група, която е подходяща за текст, в който се очаква да се съдържат латински, японски и математически символи:
BODY { font-family: Baskerville, Mincho, Symbol, serif }
Символите, които са достъпни в шрифта Baskerville(шрифт, съдържащ единствено символи на латиница) ще бъдат взети от този шрифт, японските такива ще бъдат взети от шрифта Mincho, а математическите символи ще бъдат взети от Symbol. Каквито и да са други символи ще(дай боже) дойдат от основното шрифтово семейство на серифните шрифтове('serif'). Шрифтовото семейство 'serif' ще бъде използвано също така и, ако един или повече от останалите шрифтове не са достъпни.
(това приложение е информативно, а не нормативно)
Вижте обучителния материал за гама в PNG спецификацията[12], ако вече не сте запознати с тази тема.
При изчисленията, браузърите, които работят на CRT монитори, могат да предположат, че CRT е идеален и да игнорират каквито и да са ефекти, на очевидна гама, предизвикани от трептенията на екрана. Това означава, че минималното количество работа, което те ще трябва да свършат на съответните платформи е следното:
-
PC, използващ MS-Windows
-
никаква
-
Unix, използващ X11
-
никаква
-
Mac, използващ QuickDraw
-
трябва да бъде приложена гама стойност 1.39[13] (ColorSync-адаптираните приложения може просто да предадат sRGB ICC профила[14] на ColorSync, за да бъде изпълнена правилната цветова корекция)
-
SGI, използващ X
-
трябва да бъде приложена гама стойност от
/etc/config/system.glGammaVal (стойността по подразбиране е 1.70; приложенията, които са пуснати на Irix 6.2 или по-висока версия просто подават sRGB ICC профила на системата за работа с цветове)
-
NeXT, използващ NeXTStep
-
трябва да бъде приложена гама стойност от 2.22
"Прилагането на гама" означава, че всяка от трите стойности, R, G и B, трябва да бъде конвертирана на Rгама, G'=Gгама,
B'=Bгама, преди да бъде предадена на ОС.
Това може да бъде направено по бърз начин, чрез построяване на таблица с 256 елемента при всяко извикване на браузъра, по подобен на показания долу начин:
for i := 0 to 255 do
raw := i / 255;
corr := pow (raw, gamma);
table[i] := trunc (0.5 + corr * 255.0)
end
което избягва нуждата от от употреба на абстрактна математика за всеки цветови атрибут, още по-малко за пикселите.
(това приложение е информативно, а не нормативно)
Целта на работата на CSS1 е да бъде създаден прост механизъм за стилови листа за HTML документите. Настоящата спецификация осъществява баланс между нужната простота за реализирането на стиловите листа за уеб и натиска от авторите, за по-голяма възможност за визуален контрол. CSS1 предлага:
CSS1 не предлага:
-
контрол на отделните пиксели: CSS1 цени простотата на нивото на контрол и въпреки, че комбинацията от фонови изображения и стилизиран HTML е мощна, контрола на пикселно ниво не е възможен.
-
авторски контрол: автора не може да принуди читателя да използва определен стилов лист; може само да го предложи
-
език за оформление: CSS1 не предлага възможност за множество колони, в които да се подрежда текста, застъпващи се рамки и т.н.
-
богат език с заявки на парс дървото: CSS1 може да търси единствено предшестващи елементи в парс дървото, докато другите езици за стилови листа(например DSSSL([6])) предлагат пълен език за заявки.
Очакваме появата на разширения за CSS в няколко насоки:
-
хартия: по-добра поддръжка за принтиране(печатане) на HTML документи
-
поддръжка на невизуална медия: самата работа е по процеса на добавяне на списък от свойства и съответните им стойности, които да поддържат говор и браилови изходни устройства.
-
имена на цветовете: текущо поддържания списък от такива може да бъде разширен
-
шрифтове: очаква се по-прецизни системи за спецификация на шрифт да допълнят съществуващите CSS1 шрифтови свойства.
-
стойности, свойства: очакваме от фирмите-производителки да предлагат разширения за списъка със стойности и свойства на CSS1. Разширяването в тази насока ще бъде малко от гледна точка на спецификацията, но проблема с работата на различните браузъри е в сила.
-
език за оформление: поддръжка на двуизмерно оформление в традиционните desktop publishing пакети.
-
други DTD-та: CSS1 има някои части, които са специфични за HTML(например, специалния статут на 'class' и 'id' атрибутите), но би трябвало да бъде лесно разширен, така че да действа и според други DTD също така.
Не очакваме развитието на CSS да доведе до това той да стане:
(Това приложение е информативно, а не нормативно)
Този документ представлява преработена(подобрена) версия на CSS1 препоръката, която е публикувана за пръв път на 17 декември, 1996 г. и списъка по-долу описва всички промени, които са направени спрямо нея. Чрез избиране на алтернативен стилов лист "errata", всички промени биват маркирани.
Бихме искали да благодарим на Комачи Юши, Стийв Бърн, Лиъм Куйн, Кацутеру Окахаши, Сюзан Ленш и Тантек Селик, за тяхната помощ при подготовката на това ново издание.
Спелуване и типографски грешки
Грешки
Структура и Организация
- Добавено е приложение F, което изброява всички промени, направени спрямо версията от 17 Декември, 1996.
- Добавен е параграф в глава Статукво, чрез който се информират читателите относно това, че тази версия е подобрена.
- Стиловият лист е променен.
- Справочника за бъдещата HTML спецификация, поддържаща на стилови листа е променен, така че да сочи към HTML 4.0 справочника.
- URL адресите в раздела за допълнителна информация са обновени, а несъществуващите връзки са премахнати.
- Основния HTML код е преработен.