А.Мейер Эрик - CSS. Карманный справочник - 2016 PDF

ЧЕТВЕРТОЕ ИЗДАНИЕ
css
Карманный справочник
4ТН EDITION
css
Pocket Reference
Eric А. Meyer
o·REILLY"
Beijing Cambridge Farnham Koln Sebastopol Tokyo
· · · · ·
ЧЕТВЕРТОЕ ИЗДАНИЕ
css
Карманный справочник
Эрик А. Мейер
Москва · Санкт-Петербург· Киев

2016
ББК 32.973.26-018.2.75
М45
УДК 681.3.D?
Издательский дом "Вильяме"
Зав. редакцией С.Н. Триzуб

Перевод с английского и редакция И.В. Берштейна
По общим вопросам обращайтесь в Издательский дом "Вильяме" по адресу:
info@williamspuЬlishiпg.com,http://www.williamspuЬlishing.com
Мейер, Эрик А.
М45 CSS. Карманный справочник, 4-е изд. : Пер. с англ. - М. : ООО
"И.Д. Вильяме� 2016. - 288 с.: ил. - Парал. тит. англ.
ISBN 978-5-8459-2081-2 (рус.)

ББК 32.973.26-018.2.75
Все названия проrраммиых продуктов являются зарегистрированными торговыми марками соот
ветствующих фирм.
Никакая часть настоящего издания ни в каких целях не может быть воспроизведена в какой бы то
ни бы110 форме и какими бы то ни было средствами, будь то электронные или механические, включая
фотокопирование и запись на магнитный носитель, сели на это нет письменного разрешения �tздатель
ства O'Reilly & Associatcs.
Authorized Russian translation of the EngJish edition of CSS Pocket Reference, 4tJ1 ЕdШоп (ISBN 978-1-449-
3 9903-0) е 2011 O'Reiily Media, lnc.
This trans.lation is puЬlished алd sold Ьу permission of O'Reilly Media, Inc., which owns or controls all
righis to puЬlish алd seU the same.
All rights rescrved. No part of this book may Ье reproduced or traлsmitted in алу form or Ьу апу means,
electronic or mechanical, induding photocopying, recordiпg, or Ьу any information storage or retrievaJ system,
without the pr ior written permission of the copyright owner and the PuЬlisher.
Научно-популярное издание
Эрик А. Мейер
CSS. К арманный справ очник
4-е издание
Литературный редактор Л.Н. Красножон

Верстка М.А. Удалов
Художественный редактор В.[ Павлютин
Корректор Л.А. Гордиенко
Подписано в печать 10.02.2016. Формат 84х108/32.

Гарнитура Times.
Усл. печ. л. 15,21. Уч.-изд. л. 7,6.
Тираж 500 экз. Заказ 1'.� 1340
Отпечатано способом ролевой струйной печати

в АО «Первая Образцовая типография»
Филиал «Чеховский Печатный Двор•
142300,Московская область, г. Чехов, ул. Полиграфистов,д.1
ООО "И. Д. Вильяме",127055,г. Москва,ул. Лесная, д. 43,стр. 1
ISBN 978-5-8459-2081-2 (рус.) © 2016 Издательский дом "Вильяме"

ISBN 978-1-449-39903-0 (англ.) © 2011 O'Reilly Media, lnc. All rights reserved
Содержание
Предисловие .."...""....."."..."."".".."....".....".".."..."..."...... 13
Условные обозначения, принятые в книге 13
Использование примеров кода 13
От издательства 14
Глава 1. Основные понятия 17

Стилевое оформление HTML- и ХНТМL-документов 17
Встроенные стили 17
Встроенные таблицы стилей 18
Внешние таблицы стилей 18
Структура правил 22
Комментарии 23
Предшествование стилей 23
Вычисление специфичности 24
Наследование 25
Каскад 25
Классификация элементов 27
Незаменяемые элементы 27
Заменяемые элементы 27
Роли элементов в отображении 28
Отображение на уровне блока 28
Отображение на уровне строки 29
�rn ю
Основы визуальной разметки 31
Блочная разметка 31
Внутристрочная разметка 32
Свободное перемещение 35
Расположение элементов 37
Виды расположения 37
Содержащий блок 38
Разметка элементов с абсолютным расположением 39
Разметка таблиц 45
Правила расположения таблиц 46
Фиксированная разметка таблиц 47
Автоматическая разметка таблиц 48
Содержание 5
Сведение границ ячеек таблицы 50
ВЫравнивание содержимого ячеек по вертикали 53
Глава 2. Значения ss
Ключевые слова 55
Значения цвета 55
Числовые значения 58
Значения в процентах 59
Значения длины 59
Абсолютные единицы измерения длины 59
Относ ительные единицы измерения длины 61
URI 63
Углы 63
Время 63
Частоты 64
Символьные строки 64
Глава 3. Селекторы 65
Обычные селекторы 65
Универсальный селектор 65
Селектор по типу 65
Селектор порожденных элементов 66
Селектор потомков 66
Селектор смежных родственных элементов 67
Селектор следующих родственных элементов 67
Селектор по классу 68
Селектор по идент ификатору 69
Простой селектор по атрибутам 69
Селектор по точным значениям атрибутов 70
Селектор по частичным значениям атрибутов 70
Селектор по начальным подстрокам в значениях атрибутов 71
Селектор по конечным подстрокам в значениях атрибутов 71
Селектор по произвольным подстрокам в значениях атрибутов 72
Селектор по языковым атрибутам 72
Структурные псевдоклассы 72
:empty 73
: first-child 73
:first-of-type 74
:lanq 74
6 Содержание
: last-child 75
: last-of-type 75
: nth-child ( an+b) 76
: nth-last-child ( an+b) 77
: nth-last-of-type ( an+b) 77
:nth-of-type ( an+b) 78
: only-child 79
: only-of-type 80
:root 80
Псевдокла ссы отрицания 81
: not (е) 81
Псевдокла ссы взаимодейс твия 82
:active 83
:checked 83
: disaЫed 84
:enaЫed 84
:focus 85
: hover 85
: link 86
: tarqet 87
:visited 87
П севдоэлементы 88
: :after 88
: :before 88
: : first-letter 89
: :first-line 90
Мультимедий ные запросы 90
Основные понятия 90
Параметры мультимедий ных запросов 93
Свой с тва но сителей информации 94
Гnава 4. Справочник свойств """"""""""""""""""""""""" 99

Универсальные значения 99
Свой ства визуальных но сителей информации 100
animation 100
animation-delay 101
animation-direction 102
animation-duration 103
ani.mation-iteration-count 104
ani.mation-name 105
ani.mation-play-state 106
ani.mation-timinq-function 106
backface-visibility 107
backqround 108
backqround-attachment 110
backqround-clip 111
background-color 112
backqround-i.maqe 113
background-origin 114
backqround-position 115
backqround-repeat 117
backqround-size 118
border 119
border-bottom 120
border-bottom-color 120
border-bottom-left-radius 121
border-bottom-right-radius 122
border-bottom-style 123
border-bottom-width 123
border-collapse 124
border-color 125
border-i.maqe 126
border-i.maqe-outset 127
border-i.maqe-repeat 129
border-i.mage -slice 130
border-i.maqe- source 131
border-i.maqe-width 132
border-left 134
border-left-color 134
border-left-style 135
border-left-width 136
border-radius 137
border-right 139
border-riqht-color 140
border-riqht- style 141
border-right-width 141
border- spacinq 142
border-style 143
border-top 144
border-top-color 145
border-top-left-radius 145
border-top-riqht-radius 146
border-top-style 147
border-top-width 148
border-width 149
bottom 149
box-aliqn 151
box-decoration-break 152
box-direction 153
box-flex 154
box- lines 155
box-ordinal-qroup 156
box-orient 157
box-pack 158
box-shadow 159
box- sizinq 161
caption-side 162
clear 163
clip 164
color 165
colwnn-count 166
colwnn - f ill 167
colwnn -qap 168
colwnn - rule 169
colwnn - rule-color 170
colwnn - rule-style 170
column-rule-width 171
column-span 172
colwnn -width 173
columns 174
content 175
counter-increment 176
counter-re set 176
cursor 177
С9держанме 9
direction 179
display 180
empty-cells 181
float 182
font 183
font-family 184
font-size 186
font-size-adjust 187
font-style 189
font-variant 189
font-weiqht 190
heiqht 191
lef t 192
letter-spacinq 193
line-heiqht 195
list-style 196
list-style-imaqe 197
list-style-position 198
list·style- type 199
marqin 201
marqin-bottom 202
marqin-left 203
marqin-riqht 204
marqin-top 205
max-heiqht 206
max-width 207
min-heiqht 207
min-width 208
opacity 209
outline 210
outline-color 211
outline-offset 212
outline-style 213
outline-width 214
overflow 215
overflow-x 216
overflow-y 217
paddinq 217
paddinq-bottom 218
paddinq-left 219
paddinq-riqht 220
paddinq-top 221
perspective 222
perspective-oriqin 223
position 224
quotes 225
resize 226
riqht 227
ruЬy-aliqn 228
ruЬy-overhanq 229
ruЬy-position 230
ruЬy-span 231
taЫe-layout 231
text-aliqn 232
text-decoration 234
text-indent 235
text-overflow 236
text-shadow 237
text-transform 238
top 239
transform 240
transform-oriqin 241
transform-style 242
transition 243
transition-delay 244
transition-duration 245
transition-property 246
transition-timinq-function 247
unicode-Ьidi 248
vertical-aliqn 248
visiЬility 249
white- space 250
width 251
word-spacinq 252
word-wrap 253
z -index 254
Свой с тва печ атных носителей информации 255
break-after 255
break-before 256
break- inside 257
imaqe-orientation 258
marks 259
orphans 260
paqe 260
paqe-break-after 261
paqe-break-before 262
paqe-break-inside 263
paqe-policy 264
size 265
widows 267
Свойства а кустических носителей информации 267
cue 267
cue-after 268
cue-before 269
pause 270
pause-after 271
pause-before 272
phonemes 272
rest 273
rest-af ter 274
rest-before 275
speak 276
speakaЬility 277
voice-balance 278
voice-duration 279
voice-family 279
voice-pitch 280
voice-pitch-range 281
voice-rate 282
voice-stress 283
voice-volwne 284
Пре дме тный указатель ..........................................................

286
Предисловие
Каскадные таблицы стилей ( Cascading Styl e Sh eets - CSS)
являются стандартом консорциума W 3C на визуальное пред
ставление веб-страниц, хотя они могут быть использованы для
оформления и других документов. После краткого введения в
основные понятия CSS в этом карманном справочнике пред
ставлены в алфавитном порядке сначала селекторы, а затем
свойства каскадных таблиц стилей по стандарту CSS 3.
Усл овные о бо з начения , принятые в кни ге

В этой книге приняты следующие условные обозначения
Курсив и полужирный. Служат для обозначения новых
терминов и понятий в зависимости от контекста.
Моноширинный шрифт. Служит для обозначения URL, ад
ресов электронной почты, имен и расширений файлов,
листингов и таких элементов программ, как перемен
ные, имена функций, типы данных, операторы и ключе
вые слова.
Моношириннъ�й полужирнъ�й шрифт. Обозначает коман
ды или другой текст, который должен быть введен поль
зователем буквально.
Моноширинный наклонный шрифт. Обозначает текст, ко
торый должен быть заменен значениями, предоставляе
мыми пользователем или определяемыми по контексту.
Использ ование примеров кода

Эта книга служит справочным пособием, помогающим
читателю решать стоящие перед ним задачи разработки при
кладных программ . В общем, приведенные здесь примеры кода
Предисловие 13
можно использовать в своих программах и документации. Для
этого не нужно спрашивать разрешения у автора или издате
ля. Так, для применения в прикладной программе нескольких
фрагментов кода из примеров в этой книге специальное раз
решение не тре буется. Но для продажи или распространения
в иных целях на CD-ROM фрагментов кода из примеров о бя
зательно нужно получить разрешение от издательства O'Reilly.
Для цитирования текста и примеров кода из этой книги в отве
тах на вопросы специальное разрешение не тре буется. Но для
внедрения значительной части примеров кода в документацию
на со бственную продукцию о бязательно нео бходимо разреше
ние от издательства O'Reilly.
Ссылки на эту книгу как на первоисточник желательны,
но не о бязательны. В ссылке о бычно указываются название
книги, автор, издатель и ISBN, например CSS Pocket Reference
Ьу Eric А. Meyer (O'Reilly) . Copyright 2 011 Media, Inc., ISBN
978-1-449-39903-0.
Если читатель считает, что применение им примеров кода
из этой книги выходит за рамки правомерного использования
или упомянутых выше разрешений, он может связаться с изда
тельством O'Reilly по адресу permi s s i ons@ore i l l y . сот.
О т и здатель ства
Вы, ч итатель этой книги, и есть главный ее критик и ком
ментатор. Мы ценим ваше мнение и хотим знать, что было
сделано нами правильно, что можно было сделать лучше и что
еще вы хотели бы увидеть изданным нами. Нам интересно ус
лышать и лю бые другие замечания, которые вам хотелось бы
высказать в наш адрес.
Мы ждем ваших комментариев и надеемся на них. Вы мо
жете прислать нам бумажное или электронное письмо, ли бо
просто посетить наш ве б-сайт и оставить свои замечания там.
Одним словом, лю бым удо бным для вас спосо бом дайте нам
знать, нравится или нет вам эта книга, а также выскажите свое
14 П редисловие
мн ени е о том, как сд елать наши книги бол ее инт ер есными для
вас.
Посылая письмо или соо бщ ени е, н е за будьт е указать назва
ни е книги и ее авторов, а такж е ваш о братный адр ес. Мы вни
мат ельно ознакомимся с вашим мн ени ем и о бязат ельно учт ем
его при от бор е и подготовк е к изданию посл едующих книг.
Наши эл ектронны е адр еса:
E- mail: info@w i l l i amspuЫi shing . сот
VVvVVV: http : / /www.wi l l i amspuЬ l i shing . com
Наши почтовы е адр еса:
в России: 12 7055, г. Москва, ул. Л есная, д.4 3, стр. 1
в Украин е: 03150, Ки ев, а /я 152
Предисловие 1S
Глава 1
Основные понятия
Стилевое оформление НТМ L

и ХНТМ L-документов
Стили можно применять к документам тремя разными спо
собами, как поясняется в следующих разделах.
Встроенные стили
В разметке HTML- и ХНТМL -документов сведения о сти
левом оформлении отдельного элемента могут быть указаны с
помощью атри бута. В качестве значения атри бута указывается
блок объявлений без фигурных скобок (см. приведенный далее
раздел "Структура правил"), как показано ниже.
<р style� " color : red; background: уе l l оw ; " >Внимание!
Этот текст оформлен как nредупреждение!</р>
Следует иметь в виду, что на момент написания этой книги

таблицу стилей нельзя было полностью размещать в атри буте
style. В качестве значения этого а три бута можно было указы
вать лишь единственный блок о бъявлений. Например, в атри
буте style нельзя ни разместить стили наведения, используя
объявление : hove r, ни воспользоваться директивой @ import
в данном контексте.
Несмотря на то что атри бут s tyle поддерживается в
о бычных языках разметки ХМL-документов (например , в
XHTM L 1.0, XHTM L 1. 1 и SVG), такая возможность вряд ли
доступна во всех подобных языках. Вследствие этого исполь
зовать атрибут style о бычно не рекомендуется, поскольку это
считается ненадлежащей нормой практики авторской разра
ботки веб -страниц и аналогичных документов.
Встроенные таблицы стилей
Таблицу стилей можно встроить в начале HTML- или
ХНТМL-документа, используя элемент разметки style. Этот
элемент должен быть указан в элементе разметки head следу
ющим образом:
<html><head><t i t le>St yl i n ' !</title >
<style type;"text /css " >
h l { color : purple ; }
р { font-s i z e : sma l l e r ; colo r : gray ; }
</style>
</head>
</html>
Аналогичная возможность в одних языках разметки ХМL

документов может быть предоставлена, а в других - нет. Поэ
тому для полной уверенности всегда обращайтесь за справкой
к спецификации языка DTD (Определение типа документа).
Внешние таблицы стилей

Стили могут быть перечислены в отдельном файле. Глав
ное преимущество отдельного файла состоит в том, что в нем
можно собрать все наиболее употребительные стили, а для об
новления всех страниц, на которых используется находящаяся
в нем таблица стилей, достаточно отредактировать эту един
ственную таблицу. Еще одно преимущество заключается в том,
что внешние таблицы стилей кешируются, что способствует
эффективному использованию пропускной способности ка
налов связи. Обратиться к внешним таблицам стилей можно
одним из трех способов, рассматриваемых ниже.
Ди ректива @import
В начале любой таблицы стилей можно разместить одну
или больше директив @ import. Для стилевого оформления
HTML- и ХНТМL-документов это обычно делается во встро
енной таблице стилей следующим образом:
18 CSS. Карманный справочник, 4-е издание

<head><t i tle>My Docurnent< / t i t le >
<style type= " text/ c s s " >
@ irnport url ( s i te . cs s ) ;
@ irnport url ( navbar . cs s ) ;
@ irnport url ( footer . cs s ) ;
body (backg round: yellow; }
</style>
</head>
Следует иметь в виду, что директивы @ import могут рас

полагаться в начале (а согласно спецификации - только в на
чале) любой таблицы стилей. Таким образом, в одну таблицу
стилей можно импортировать другую таблицу, а в ту - третью
таблицу.
Элемент разметки link

Элемент разметки l ink может быть использован в НТМL
и ХНТМL-документах для связывания таблицы стилей с до
кументом. С этой целью допускается указывать несколько эле
ментов разметки l in k. Чтобы ограничить применение табли
цы стилей одним или более носителями информации, можно
указать атрибут medi a следующим образом:
<head>
<t it le>A Docurnent</title>
< link rel=" stylesheet " type= " text/c s s " href="bas ic . cs s "
media=" a l l " >
< l ink rel=" styleshee t " type= " text/cs s " href="web . c s s "
media= " s c reen " >
< l ink re l=" stylesheet " type= " text/cs s " href="paper . cs s "
media= "pr int " >
</head>
Имеется также возможность указать альтернативные та

блицы стилей. Если предоставляются альтернативные таблицы
стилей, то пользовательский агент (или автор документа) дол
жен предоставить средства для выбора пользователем одного
из вариантов таблиц стилей, как показано ниже.
<head>
<title>A Docurnent < / t i t l e >
<link rel=" sty leshe e t " type="text /cs s " href="bas i c . cs s " >
Гnава 1 . Основные понятия 19

< l in k r e l = " a lternate styleshee t " t it le= " Cla s s ic "
type= " text /cs s " href= " o ldschoo l . cs s " >
< l ink rel="a lternate stylesheet " t it le= " Futu r i s t i c "
type = " text/cs s " href= " З O O Oad . cs s " >
< / head>
На момент написания данной книги большинство извест

ных пользовательских агентов загружали все связанные та
блицы стилей, включая альтернативные, независимо от того,
реализовал ли их вообще пользователь. Это могло бы иметь
отрицательные последствия для пропускной способности и на
грузки на сервер.
И нструкция обработки xml-stylesheet

В ХМL-документах (например, в ХНТМL-документах, от
сылаемых с указанием типа MIME наподобие " text / xml ",
"appl ication/xml " или "app l i cation/xhtml+xml " в заго
ловке) можно воспользоваться инструкцией обработки xml
s tylesheet для связывания таблицы стилей с документом.
С этой целью любые инструкции обработки xml -stylesheet
должны быть расположены в прологе ХМL-документа. Допу
скается указывать несколько подобных инструкций. А для того
чтобы ограничить применение таблицы стилей одним или бо
лее носителями информац ии, можно указать псевдоатрибут
media следующим образом:
< ? xml - style sheet type=" text/cs s " href="ba s i c .cs s "
media= " al l " ? >
< ? xml - s t y lesheet type= " text / c s s " href= " web . cs s "
rnedi a:=='1screen11 ? >
< ? xml - s tylesheet type= " text/cs s " href= "pape r . c s s "
media= "print " ? >
С помощью инструкции обработки xml-stylesheet мож

но также связать альтернативные таблицы стилей, как показа
но ниже.
< ? xml - s tylesheet type= " text /cs s " href= "bas i c . cs s " ? >
< ? xml - s tylesheet a l ternate= " ye s " t i t l e = " C l a s s i c "
type= " text/c s s " href= "o ldschool . cs s " ? >

<?xml - s tylesheet a l te rnate= " yes " t i t le=" Futur i s t i c "
type= "text/css " hre f = " З O O Oad . cs s " ? >
Заrоnов ки НПР Link

Последний (и наименее распространенный) способ связы
вания внешней таблицы стилей со страницами состоит в при
менении заголовка НТТР Link. С точки зрения CSS этот способ
состоит в распространении действия элемента разметки link с
помощью НТТР-заголовков.
Если ввести строку, подобную следующей, в файл конфигу
рации htaccess на корневом уровне веб-сервера, то внешняя
.
таблица стилей будет связана со всеми страницами на сайте:

Header add Link
" < /style . cs s > ; rel=stylesheet ; type=text /cs s ; media=a l l "
В качестве альтернативы применению файла конфигура

ции htaccess, что, как известно, может привести к сниже
.
нию производительности, с той же самой целью можно отре

дактировать файл конфигурации httpd . conf, как показано
ниже, где путь к каталогу /usr/local /username /httpdocs за
меняется конкретным путем к начальному каталогу веб-сайта
в формате UNIX.
<Directory /usr/local/username /httpdocs>
Header add Link
"</ style . cs s > ; rel=stylesheet ; type=text /cs s ; media=a l l "
</Directory>
На момент написания данной книги НТТР-заголовки под

держивались не всеми пользовательскими агентами, среди
которых выделяются браузеры Inteгnet Explorer и Safari. Следо
вательно, применение данного способа, как правило, ограни
чивается рабочими средами, основанными на других пользова
тельских агентах и лишь изредка на встроенных скрытых воз
можностях, подобных так называемым "пасхальным яйцам"
для пользователей браузеров Firefox и Opera.
Гnава 1. Основные понятия 21

Структура правил
Таблица стилей состоит из одного или нескольких правил,
описывающих порядок визуального представления элементов
страниц. Каждое правило делится на следующие две основные
части: селектор и блок о бъявлений. Структура правила приве
дена на рис. 1. 1.
Блок
Селектор Объявление объявлений Объявление
� {color: red; background: yellow}
Свойство Значение Свойство Значение
Рис. 1 . 1 . Структура правила
В левой части правила находится селектор, предназначен

ный для выбора тех частей документа, к которым должно быть
применено данное правило. А в правой части правила нахо
дится блок объявлений, состоящий из одного или более объ
явлений. Каждое объявление, в свою очередь, состоит из свой
ства CSS и значения этого свойства.
Блок объявлений всегда заключается в фигурные скобки.
Он может состоять из нескольких объявлений, причем каждое
объявление завершается точкой с запятой (; ). Исключением из
этого правила является последнее объявление в блоке, где точ
ка с запятой необязательна.
Каждое свойство представляет отдельный параметр стиле
вого оформления и отделяется от своего значения двоеточи
ем ( : ). Имена свойств в CSS не зависят от регистра букв. До
пустимые значения свойств определяются в описании этих
свойств. Подробнее о допустимых значениях свойств CSS речь
пойдет в главе 4.

Комментарии
Снабдить таблицу CSS комментарием очень просто. Для
этого достаточно ввести комментарий между открывающими
знаками / * и закрывающими знаками * / следующим образом:
/ * Это комментарий! */
Комментарии могут быть многострочными:

/ * Это многострочной комментарий!
Он продолжается в этой строке
и завершается в данной строке . * /
Комментарии можно также вводить в любом месте табли

цы стилей, кроме середины обозначения (имени свойства или
значения), как показано ниже.
hl/* заголовок 1 - го уровня * / { co l o r / * цвет фона * / :
rgba ( 2 3 , 5 8 , 8 9 , 0 . 4 2 )
/ * цвет RGB + непрозрачность * / ; }
В таблицах стилей допускаются также комментарии к

НТМL-разметке, а точнее - к SGМL-разметке (например,
< !- -такой комментарий -->), чтобы скрыть стили от устарев
ших браузеров, которые уже не распознают разметку в версии
HTML 3.2. Они не служат в качестве комментариев CSS. Это
означает, что содержимое комментария в НТМL-разметке бу
дет распознано и интерпретировано синтаксическим анализа
тором CSS.
П редшествование сти n е й
Чтобы воспользоваться встроенными стилями, в один
HTML- или ХНТМL-документ можно импортировать и связать
с ним несколько внешних таблиц стилей, каждая из которых
состоит из одной или более встроенных таблиц стилей. В ходе
этого процесса одни правила могут вступить в противоречие
с другими. Для разрешения подобных противоречий и полу
чения окончательного ряда стилей, которые можно применить

к документу, в CSS применяется механизм под названием ка
скад.Двумя главными составляющими каскада являются спе
цифичность и наследование.
Вычисление специфичности
Специфичность описывает вес селектора и любые связан
ные с ним определения. В следующей таблице сведены слагае
мые специфичности.
Тип селектора Пример Специфичность

Универсальный селектор * 0,0,0,0
Комбинатор + 0,0,0,1
Идентификатор элемента div
Идентификатор nсевдоэлемента ::first-line

Идентификатор класса .warninq 0,0,1,0
Идентификатор nсевдокласса :hover
Идентификатор атрибута [type="checkЬox"]
Идентификатор 1О #content 0,1,0,0
Встроенный атрибут style style="color: red;" 1,0,0,0
Значения специфичности накапливаются. Это означает, что

селектор, содержащий два идентификатора элементов и один
идентификатор класса (например, di v . as ide р), имеет спец
ифичность О, О, 1, 2. Кроме того, значения специфичности со
ртируются с предшествованием слева направо. А это означа
ет, что селектор, содержащий 11 идентификаторов элементов
(О, О, О, 11), обладает меньшей специфичностью, чем селектор,
содержащий только один идентификатор класса (О, О, 1, О).
В директиве ! important указывается объявление больше
го веса, чем у неважных объявлений. Такое объявление сохра
няет специфичность своих селекторов и применяется только
в сравнении с другими важными объявлениями.

Наследование
Элементы располагаются в форме докум�нта в виде древо
видной иерархии, на самом верху которой находится корневой
элемент, а ниже него - вся остальная структура документа,
благодаря чему она становится похожей на древовидную си -
стему. Элемент разметки html располагается на вершине дере
ва в НТМL-документе, ниже него - элементы разметки head
и body, а еще ниже - остальная структура документа. В такой
структуре находящиеся ниже элементы являются порожденны
ми от расположенных выше по дереву родительских элементов.
Древовидная структура документа используется в CSS для
механизма наследования, в котором стиль, применяемый к эле
менту, наследуется порождаемыми от него элементами. Так,
если в атрибуте red элемента разметки body задан красный
цвет, значение этого цвета распространяется вниз по дереву
документа к элементам, порожденным от элемента разметки
body. Наследование прерывается только прqвилом стиля, при
меняемым непосредственно к элементу ра�метки. Наследуе
мые значения вообще не обладают никакой специфичностью,
хотя это совсем не одно и то же, что и обладание нулевой спе
цифичностью.
Следует, однако, иметь в виду, что некоторые элементы
вообще не наследуются. При определении свойства всегда
указывается, является ни оно наследуемым. К примерам не
наследуемых свойств относятся padding, border, ma rgin и
background.
Каскад
С помощью механизма каскада в CSS разрешаются кон
фликты между стилями. Иными словами, этот механизм дает
пользовательским агентам возможность выбрать, например,
цвет для элемента разметки, когда к нему применяются два
разных правила и каждое из них пытается задать свой цвет.
Действие каскада можно разделить на следующие стадии.
Гnава 1. Основнt�'е понятия 25

1. Найти все объявления, содержащие селектор, совпадаю
щий с заданным элементом разметки.
2. Рассортировать по явно заданным весам все объяв
ления, применяемые к заданному элементу разметки.
Правила, обозначенные в директиве ! important, полу
чают больший вес, чем остальные правила. Кроме того,
рассортировать по источнику все объявления, приме
няемые к элементу разметки. Объявления могут иметь
следующие источники: автор, ч итатель и пользователь
ский агент. Как правило, авторские стили одерживают
верх над читательскими стилями. Но читательские сти
ли типа ! important важнее любых других стилей, в том
числе авторских стилей типа ! important. Как автор
ские, так и читательские стили заменяют используемые
по умолчанию стили пользовательских агентов.
З. Рассортировать по специфичности все объявления,
применяемые к заданному элементу разметки. Элемен
ты с большей специфичностью обладают большим ве
сом, чем элементы с меньшей специфичностью.
4. Рассортировать по порядку все объявления, применяе
мые к заданному элементу разметки. Чем дальше объ
явление оказывается в таблице стилей или документе,
тем больший вес оно получает. Объявления из импорти
руемой таблицы стилей считаются предшествующими
тем объявлениям, которые находятся в импортирующей
их таблице стилей, и поэтому они обладают меньшим
весом, чем объявления из импортирующей их таблицы
стилей.
Любые указания по представлению, источники которых не
относятся к CSS (например, диалоговое окно глобальных пара
метров настройки), получают тот же самый вес, что и исполь
зуемые по умолчанию стили пользовательских агентов (см. п. 2
приведенной выше процедуры).

Кл ассификация элементов
Вообще говоря, группы элементов разметки CSS делятся на
следующие два типа: незаменяемые и заменяемые. И хотя типы
этих элементов могут быть довольно абстрактными, у них име
ются некоторые существенные различия. Эти различия под
робно рассматриваются в главе третьего издания книги CSS:
1he Definitive Gиide того же автора, вышедшей в издательстве
O'Reilly (в русском переводе эта книга вышла под названием
CSS - Каскадные таблицы стилей. Подробное руководство
в издательстве "Символ-плюс", Спб" 2008).
Незаменяемые элементы
Большинство элементов разметки HTML- и ХНТМL-доку
ментов являются незаменяемыми, а это означает, что их со
держимое представлено пользовательским агентом в блоке,
формируемом самим элементом. Например, элемент разметки
<span>hi there< / span> является незаменяемым, а размеча
емый им текст " hi ther e " отображается пользовательским
агентом. Абзацы, заголовки, ячейки таблиц, списки и практи
чески все содержимое HTML- и XHTML-документов относят
ся к незаменяемым элементам разметки.
Заменяемые элементы
С другой стороны, заменяемьtми называются такие эле
менты разметки, содержимое которых заменяется тем, что
непосредственно отсутствует в самом документе. Наиболее
характерным тому примером служит элемент разметки img,
заменяемый файлом изображения, являющимся внешним по
отношению к документу. В действительности сам элемент раз
метки img ничего не содержит, как следует из приведенного
ниже простого примера.
<img s rc= " howdy . gi f " a lt="Hi " >

Заменяемый элемент, по существу, состоит из своего имени
и атрибутов. И только заменив его содержимым, обнаружива
емым другими средствами (в данном случае - путем загруз
ки изображения из внешнего файла, указываемого в атрибуте
s rc), можно что-нибудь вообще представить с помощью та
кого элемента разметки. Еще одним характерным примером
служит элемент разметки input, который можно заменить
кнопкой-переключателем, флажком или полем ввода текста
в зависимости от типа этого элемента. Заменяемые элементы
разметки формируют также блоки в местах их отображения.
Рол и элементов в ото б ра жении

Помимо того что элементы разметки являются заменяемы
ми или незаменяемыми, они выполняют следующие основные
роли в отображении по стандарту CSSЗ: на уровне блока и на
уровне строки. Все значения свойства display по стандарту
CSSЗ относятся к одной из этих двух категорий. Очень важно
знать, к какой именно общей роли относится блок, поскольку
некоторые свойства применяются только для одной категории
ролей в отображении.
Отображение на уровне блока

На уровне блока (по умолчанию - структурного блока)
отображается такой блок элемента, который заполняет область
содержимого по всей ширине и не может иметь других эле
ментов по обеим своим сторонам. Иными словами, элементы
на уровне блоков формируют "разрывы" до и после блока эле
мента. Наиболее известными примерами блочных элементов
служат элементы р и di v разметки НТМL-документов. Заме
няемые элементы могут быть блочными, но, как правило, они
таковыми не бывают.
Элементы списка являются особым случаем блочных эле
ментов. Помимо того что они ведут себя так же, как и другие

блочные элементы, они формируют маркер (как правило, жир
ную точку в маркированных списках или номер по порядку в
нумерованных списках), который присоединяется к блоку эле
мента. Кроме маркера, элементы списка во всем остальном по
хожи на другие блочные элементы.
Для создания структурных блоков имеются следующие зна
чения свойства display: Ыосk, l i s t item, tаЫе, taЫe-row
group, taЫe-header-group, taЫefooter-group, taЫe
row, taЫe-column-group, taЬle-column, taЫe-cell,
taЫe-caption, а также все шаблоны CSS Advanced Layout для
усовершенствованной разметки средствами CSS (на момент
написания данной книги).
Отображение на уровне строки

На уровне строки отображается такой блок элемента, кото
рый формируется в текстовой строке, не разрывая последова
тельное расположение этой строки. К числу наиболее извест
ных внутристрочных элементов относится элемент а разметки
HTML- и ХНТМL-документов, а также элементы span и em.
Эти элементы разметки не образуют разрывы строки до и по
сле себя, а следовательно, могут присутствовать в содержимом
другого элемента, не нарушая его отображение.
Несмотря на то что блочные и внутристрочные элементы
CSS имеют немало общего с блочными и внутристрочными
элементами разметки HTML- и ХНТМL-документов, у них все
же имеется одно важное отличие. Блочные элементы разметки
HTML- и ХНТМL-документов не могут наследовать от внутри
строчных элементов разметки, тогда как в CSS не накладыва
ется никаких ограничений на порядок взаимного вложения
ролей элементов при отображении.
Для создания внутристрочных блоков имеются следующие
значения свойства display: inl ine, inlineЫock, inl ine
taЫe и ruby. На момент написания данной книги еще не было
ясно определено, что различные значения данного свойства,

имеющие отношение к оформлению идеографического текста
(например, значение ruby-text), также способны формиро
вать внутристрочные блоки элементов, хотя это, по-видимому,
наиболее вероятный результат их применения.
Вставка
Особый случай представляют собой вствляемые блоки, оп
ределяемые разметкой display : run- in, которая позволяет
сформировать структурный или внутристрочной блок в зави
симости от конкретной ситуации. Получаемый в итоге резуль
тат определяется следующими правилами.
1. Если сам вставляемый блок содержит структурный блок,
он формирует такой блок.
2. А если после вставляемого блока сразу же следует род
ственный структурный блок, который не перемещает
ся свободно и не имеет абсолютного расположения, то
вставляемый блок становится первым внутристрочным
блоком этого родственного блока.
3. Если же ни одно из упомянутых выше условий не вы
полняется, то вставляемый блок формирует структур
ный блок.
Если вставляемый блок вводится в виде первого внутри -
строчного блока его родственного структурного блока (см.
приведенное выше правило 2), то он наследует значения
свойств не из этого блока, а продолжает наследовать от своего
структурного родительского элемента. Так, если в структурном
родственном блоке применяется свойство color : green, то зе
леный цвет не будет непосредственно наследоваться встав
ляемым элементом, несмотря на то что он визуально является
частью этого блока.
30 CSS. Карманный справочник, 4·е издание

Основы визуально й ра з метки
Для разметки любого элемента документа в CSS опреде
ляются специальные алгоритмы. Они служат основанием для
визуального представления содержимого в CSS. Имеются сле
дующие две основные разновидности разметки, ведущие себя
по-разному: блочная и внутристрочная.
Блочная разметка
Структурный блок формирует в CSS прямоугольный уча
сток, называемый бло ком элемента и описывающий простран
ство, занимаемое этим элементом. Различные составляющие
блока элемента приведены на рис. 1.2. Блок элемента оформля
ется по следующим правилам.
Фон блока элемента простирается до внешнего края гра
ницы, тем самым заполняя участки содержимого, вну
треннего поля и границы. Если у границы имеются лю
бые прозрачные участки (например, пунктиры и штри
хи), фон на них будет просматриваться. Фон не прости
рается до участков отступов в блоке. Любые контуры,
рисуемые на участках отступов, не оказывают влияния
на разметку.
Значение auto может быть установлено в свойствах
height и width блока элемента только для отступов.
Отрицательные значения могут быть заданы только для

отступов.
Ширина внутреннего поля и границы в блоке элемента
по умолчанию равна нулю ( О) и none соответственно.
Если свойство box-s i z ing принимает (по умолчанию)
значение content-box, то свойство width определяет
ширину только участка содержимого, к которому добав
ляются любые внутренние поля, границы или отступы.
То же самое относится и к высоте участка содержимого,
определяемой свойством height.
Глава 1. Основные понятия 31

Если свойство box-si z i ng принимает звачение
border-box, то свойство width определяет общ у ю
ширин у участков содержимого, вну тренних r10лей и
границ, к которым добавляются любые отступы . То же
самое отно�ится и к высоте участка содержимого, опре
деляемой свойством height.
,
' верхний внешний край
'
' ,
' верхний отступ
' ,,
' -
верхняя граница '
' ,
' верхнее внутреннее поле ,
::s''
ii
" >::S верхний внутренний край
>::S
tl � � �. � -5
-5
�
� g. �
isi:
"' >::S
si:
g=
::s
::s �
•::S � ширина• ",
i� i� 'Ё�
- -
� �
::s
tl �mа·
;z: ;z: С>
;z:
", ;z:"'
э
"
()
>::S f::!' = � в
()
3 =
;z:
i ;z: 5! ;z:
;z:
" 2i � �
�
"'
•::S "
" " " " Е "' "' ",
;s < <
� >::S
;s ,
", "' 15 ::s �
gi
<
� �·
,
нижний внутренний край i �
r::.<",
ro
s:i
",
,
нижнее внутреннее поле '
'
'
'
, нижняя граница
'
,
'
, нижний отступ '
, '
'
, '
нижний внешний край
•Если свойство box-sizing принимает значение content-box. иначе ширина

равна расстоянию между внешними краями левой и правой рамок. а высо
та - расстоянию между внешними краями верхней и нижней рамок
Рис. 1.2. Блочная разметка
Внутристрочная разметка
Внутристрочной блок формирует в CSS один или более
прямоутольных участков, называемых строковыми блоками,
в зависимости от того, разбивается ли строковый блок на не
сколько строк. Строковый блок оформляется по следующим
правилам.
32 CSS. Карм�нный справочник, 4-е издание

Любое значение auto свойств le ft, right, top, bottom,
margin-le ft, margin- right, margin-top и margin
bottom преобразуется в нулевое ( О).
Свойства width и height не применимы к незаменяе
мым строковым блокам.
К заменяемым строковым блокам применяются следую
щие правила.
Если оба свойства, width и height, принимают зна
чение auto, а элементу (например, изображению)
свойственна ширина, то значение свойства width
становится равным ширине, свойственной данно
му элементу. То же самое относится и к свойству
he ight.
Если оба свойсtва, width и height, принимают зна
чение auto, а элементу не свойственна ширина, то
значение свойства width становится равным свой
ственной данному элементу высоте, умноженной на
пропорцию (т.е. соотношение ширины и высоты).
Если оба свойства, width и height, принимают зна
чение auto, а элементу не свойственна высота, но
свойственна ширина и пропорция разметки, то зна
чение свойства h e i ght становится равным свой
ственной данному элементу ширине, деленной на
пропорцию.
Имеется ряд других правил, менее ясных, чем перечислен
ные выше, но их пояснение слишком обширно, чтобы приве
сти его здесь. Подробнее об этих правилах читайте по адресу
http : / /w3 . org /TR/c s s 3 -box/#inline- replaced.
Все внутристрочные элементы обладают свойством l ine
heigh t, имеющим непосредственное отношение к отображае
мым элементам. В частности, высота текстовой строки опреде
ляется с учетом следующих факторов.
Анонимный текст - любая символьная строка, не вхо
дящая во внутристрочной элемент. Так, в разметке

<р> I'rn <ern>so</ern> happy1</p>
последовательности строк "I 'm" и " happy ! " образуют

анонимный текст. Следует иметь в виду, что пробелы
являются частью анонимного текста, поскольку про
бел - это такой же символ, как и любой другой.
Кегельный квадрат определяется в заданном шрифте, а
иначе называется знакоместом. Отдельные глифы (наи
меньшие единицы шрифта) могут быть длиннее или ко
роче, чем их кегельные квадраты, как поясняется в главе
5 упоминавшегося ранее третьего издания книги CSS:
Тhе Definitive Gиide. Значение свойства font - s i z e опре
деляется в CSS высотой каждого кегельного квадрата.
Облас ть содержимого в незаменяемых элементах может
быть блоком, описываемым связанными вместе кегель
ными квадратами каждого символа в данном элементе,
а иначе - блоком, описываемым глифами символов
в данном элементе. В спецификации CSS2. l пользова
тельским агентам разрешается выбирать любую из этих
разновидностей области содержимого. Ради простоты
здесь выбрана первая разновидность области содержи-
мого, описываемая кегельными квадратами. А в заме
няемых элементах область содержимого определяется
свойственной элементу высотой и любыми отступами,
границами или внутренними полями.
Интерл иньяж - это разность значений свойств
font s i z e и l i ne-height. Одна половина этой разно
сти приходится на верхнюю часть области содержимого,
а другая - на нижнюю часть данной области. Поэтому
и не удивительно, что подобные дополнения области
содержимого называются половинным интерлиньяжем.
Интерлиньяж применяется только к незаменяемым эле
ментам.
Строковый блок - это блок, описываемый добавле
нием интерлиньяжа к области содержимого. Для неза
меняемых элементов высота строкового блока элемента

оказывается равной значению свойства l ineheight, а
для заменяемых элементов - величине области содер
жимого, поскольку интерлиньяж не применяется к за
меняемым элементам.
П ос тро чный б лок - это самый короткий блок, огра
ничиваемый наивысшей и наинизшей точками строко
вых блоков, обнаруживаемых в строке. Иными словами,
верхний край построчного блока будет располагаться
вдоль верхнего края самого высокого строкового блока,
а нижний край - вдоль нижнего края самого низкого
строкового блока (рис. 1 .3).
область содержимоzо nолооинн �й интерлиньяж

ь
n р й л
�
W11iclili g1у emp6as�a_11d "Ц.i11 , h"l]
•• осm очнь� б ок
высотой
15 nикселей
о л т ержим
C=:::J б ас ь сод ого
стр овый лок
ок б
Рис. 1.3. Внутристрочная разметка
Сво б одное переме щение

Свободное перемещение (или т а к называемое "плавание")
позволяет разместить элемент слева или справа от блока, ко
торый его содержит и является ближайшим родственным эле
ментом на уровне блока, а последующее содержимое будет об
текать этот элемент. Любой свободно перемещаемый элемент
автоматически формирует структурный блок независимо от
типа блока, который был сформирован, если этот элемент не
был свободно перемещаемым. Свободно перемещаемый эле
мент размещается по следующим правилам.

Левый (или правый) внешний край свободно перемеща
емого элемента не должен совпадать с левым (или пра
вым) внутренним краем содержащего его блока.
Левый (или правый) внешний край свободно перемеща
емого элемента должен располагаться справа (или сле
ва) от правого (или левого) внешнего края левого (или
правого) левого (или правого) свободно перемещаемого
элемента, встречающегося раньше в исходном докумен
те, если только верхний край последнего элемента не
оказывается ниже нижнего края первого элемента.
Правый внешний край левого свободно перемещаемого
элемента не должен совпадать с правым внешним краем
любого элемента, свободно перемещающегося справа от
него. А левый внешний край правого свободно переме
щаемого элемента не должен совпадать с левым внеш -
ним краем любого элемента, свободно перемещающего
ся слева от него.
Верхний край свободно перемещаемого элемента не
должен быть выше верхнего внутреннего края содержа
щего его блока.
должен быть выше верхнего края любого расположен
ного прежде свободно перемещаемого или блочного
элемента.
должен быть выше верхнего края построчного элемента
с содержимым, предшествующим этому свободно пере
мещаемому элементу.
Правый (или левый) внешний край левого (или право
го) свободно перемещаемого элемента, слева (или спра
ва) от которого находится другой свободно перемещае
мый элемент, не должен располагаться справа (или сле
ва) от правого (или левого) края содержащего его блока.
Свободно перемещаемый элемент должен располагаться
как можно выше.

Левый свободно перемещаемый элемент должен быть
смещен как можно дальше влево, а правый свободно пе
ремещаемый элемент - как можно дальше вправо. Чем
дальше влево или вправо смещается элемент, чем выше
он должен располагаться.
Расположение элементов
Существует целый ряд специальных правил расположения
элементов. Эти правила определяют не только содержащий
блок элемента, но и порядок его разметки в данном элементе.
Виды расположения
Ниже перечислены виды расположения элементов.
С татическое расп оложение. Блок элемента формиру
ется как обычно. Блочные элементы образуют прямоу
гольный блок, являющийся частью потока документа, а
внутристрочные блоки - один или более построчных
блоков в их родительском элементе.
Относ и тельное расп оложение. Блок элемента смещает
ся на некоторое расстояние. Содержащий его блок мо
жет считаться областью, которую занял бы этот элемент,
если бы он не был расположен. Элемент сохраняет ту
форму, которую он имел бы, если бы не был расположен.
И за этим элементом сохраняется пространство, кото
рое он обычно занимал бы.
Абс ол ю тное расп оложение. Блок элемента полностью
удаляется из потока документа и располагается отно
сительно содержащего его блока, которым может быть
другой элемент документа или начальный содержащий
блок, рассматриваемый в следующем разделе. Какое
место ни занимал бы элемент в обычном потоке до
кумента, оно изымается, как будто элемент вообще не
Гnава 1. Основные nонятия 37

существовал. Расположенный таким образом элемент
формирует структурный блок независимо от типа бло
ка, который он сформировал бы, если бы находился
в обычном потоке документа.
Ф и кси рованное расп оложение. Блок элемента ведет себя
так, как будто он имеет абсолютное расположение, но со
держащий его блок сам является областью просмотра.
Содержащий блок
Содержащий блок расположенного элемента определяется
следующим образом.
1. Содержащий блок корневого элемента, иначе называе
мый начальным содержащим бло ком, устанавливается
пользовательским агентом. В НТМL-разметке корневым
является элемент разметки html, хотя в некоторых бра
узерах для этой цели может быть использован элемент
разметки body.
2. Если свойство pos i tion некорневого элемента прини
мает значение relative или s ta t i c, то содержащий
его блок образуется по краю содержимого ближайше
го структурного, табличного, клеточного или внутри
строчного родственного блока. Несмотря на это пра
вило, элементы с относительным расположением по
прежнему просто смещаются, а не располагаются отно
сительно рассматриваемого здесь содержащего блока, а
элементы со статическим расположением не смещаются
со своего места в обычном потоке документа.
3. Если свойство pos i t ion некорневого элемента прини
мает значение absolute, то в качестве содержащего бло
ка задается ближайший родительский элемент (любого
типа), свойство которого pos i t ion принимает значе
ние, отличающееся от static. Это происходит следую
щим образом.

а) Если родительский элемент является блочным, то со
держащий блок доходит до внешнего края внутренне
го поля этого элемента. Иными словами, это область,
ограниченная границей данного элемента.
б) Если родительский элемент является внутристроч
ным, то содержащий блок доходит до края содержи
мого данного элемента. В языках с правосторонним
письмом верхний и левый края содержащего блока
совпадают с верхним и левым краями первого блока
в родительском элементе, а нижний и правый края -
с нижним и правым краями содержимого последнего
блока. А в языках с левосторонним письмом правый
край содержащего блока совпадает с правым краем
содержимого первого блока, тогда как левый край
выбирается из последнего блока. Верхний и нижний
края остаются теми же самыми.
в) Если родительский блок, описанный в пп. 3, а и 3, б,
отсутствует, блок, содержащий элемент с абсолют
ным расположением, определяется как начальный.
Разметка элементов с абсолютным

ра сположением
В следующих разделах употребляются следующие термины.
Подгонка стран иц. Алгоритм, действующий подобно
вычислению ширины ячейки таблицы по алгоритму
автоматической разметки таблицы. В общем, пользова
тельский агент пытается найти минимальную ширину
элемента, чтобы его содержимое автоматически разби
валось на несколько строк только в том случае, если это
го нельзя избежать.
Статическое положение. Место, где мог бы находиться
край элемента, если бы его положение было статичес
ким.

Го ризо нтальная разметка элементов с абсолютным
расп оложением
Горизонтальная разметка подобных элементов осуществля
ется по следующей формуле:
ширина содержащего блока = left + margin- l e f t +
border-lef t-width +
padding- l e ft + width + padding- r ight + border-right-width +
margin-right + right + ширина вертикальной nолосы прокрутки

( если таковая имеется)
Ширина любой вертикальной полосы прокрутки определя

ется пользовательским агентом и не поддается воздействию со
стороны CSS.
Для определения горизонтальной разметки незаменяемых
элементов служит следующая процедура.
1. Если во всех свойствах l e ft, width и right установле
ны значения auto, то сначала сбросить в нуль (О) любые
значения auto свойств margin-left и margin-right.
И если в свойстве di rection установлено значение 1 tr,
задать статическое положение в свойстве left и при
менить правило, указанное выше, в п. 3, в. В противном
случае задать статическое положение в свойстве right и
применить правило, указанное выше, в п. 3, а.
2. Если ни в одном из свойств le ft, width и right не уста
новлены значения auto, то выбрать для применения
одно из следующих правил.
а) Если в обоих свойствах, margin- l e f t и margin
right, установлено значение auto, решить приве
денное выше уравнение с дополнительным ограни
чением на равные значения обоих отступов слева и
справа.
б) Если значение auto установлено только в свойстве
margin - l e ft или margin- right, решить приведен
ное выше уравнение для этого значения.
40 CSS. Карманный справочник, 4-е иэ11ание

в) Если значения свойств чрезмерно оrраничены (ни одно
из них не равно a uto), пренебречь значением свой
ства l e ft, если в свойстве di rect ion задано значение
rtl, или же значением свойства right, если в свой
стве di rection задано значение l t r, и тогда решить
приведенное выше уравнение для этого значения.
3. Если в одних из свойств l e ft, width и right установле
Jiо значение auto, а в других - нет, сбросить в нуль (О)
любые значения auto свойств margin-left и ma rgin
right. Выбрать для применения одно из следующих
правил.
а) Если значение auto установлено в свойствах l e ft и
width, а в свойстве right - нет, ширина определя
ется подгонкой страниц. Решить приведенное выше
уравнение для значения в свойстве l eft.
6) Если значение auto установлено в свойствах left и
right, тогда как в свойстве width -неt, задать ста
тическое положение в свойстве left, а иначе - в
свойстве right, если в свойстве dtrection установ
лено значение 1 t r. Решить приведенное выше урав
нение для значения в свойстве l e ft, если в свойстве
direction установлено значение rtl, или для значе
ния в свойстве right, если в свойстве di rection за
дано значение 1 t r.
в) Если значение auto установлено в свойствах width и
right, а в свойстве left нет, ширина определяется
-
подгонкой страниц. Решить приведенное выше урав

нение для значения в свойстве r ight.
г ) Если значение auto установлено в свойстве left, а в
свойствах width и right - нет, решить приведенное
выше уравнение для значения в свойстве l e ft.
д) Если значение auto установлено в свойстве width, а
в свойствах left и r ight нет, решить приведенное
-
выше уравнение для значения в свойстве width.
Гnава 1. Основн��е понятия 41

е) Если значение auto установлено в свойстве right, а
в свойствах left и width - нет, решить приведенное
выше уравнение для значения в свойстве right.
Для определения горизонтальной разметки заменяемых
1. Определить значение свойства width, как описано ранее
для внутристрочных заменяемых элементов в разделе
"Внутристрочная разметка".
2. Если значение auto установлено в обоих свойствах,
left и right, задать статическое левое положение в
свойстве left, если в свойстве d i rection установлено
значение l t r. А если в свойстве direction установле
но значение rtl, задать статическое правое положение
в свойстве right.
3. Если значение auto установлено в обоих свойствах,
l e ft и right, или в одном из них, сбросить в нуль (О)
любые значения auto свойств margin- left и margin
right.
4. Если значение auto не установлено ни в одном из
свойств left и right, а в свойствах margin-left и
margin-right установлено значение auto, решить при
веденное выше уравнение с дополнительным ограни
чением на равные значения обоих отступов слева и
справа.
5. Если значения свойств чрезмерно ограничены (ни одно
из них не равно auto ) , пренебречь значением свой
ства l eft, если в свойстве di rection задано значение
rtl, или же значением свойства right, если в свойстве
di rection задано значение l tr, и тогда решить приве
денное выше уравнение для этого значения.

Вертикальная разметка элемен тов с абсолютным
расположением
Вертикальная разметка подобных элементов осуществляет
ся по следующей формуле:
высота содержащего блока = top + margin-top +
borde r - top-width + padding-top +
height + padding-bottom + border-bottom-width +

margin-bottom + bottom + высота горизонтальной полосы
прокрутки
(если таковая имеется)
Высота любой горизонтальной полосы прокрутки опреде

ляется пользовательским агентом и не поддается воздействию
со стороны CSS.
Для определения вертикальной разметки незаменяемых
1. Если значение auto установлено во всех свойствах top,
height и bottom, задать статическое положение в свой
стве top и применить правило, указанное выше, в п. 3, в .
2. Если значение auto не установлено в свойствах top и
height, но установлено в свойстве bottom, выбрать для
применения одно из следующих правил.
а) Если значение auto установлено в обоих свойствах
margin-top и margin-bottom, решить приведенное
выше уравнение с дополнительным ограничением на
равные значения обоих отступов слева и справа.
б) Если значение auto установлено только в одном из
свойств margin-top и margin-bottom, решить при
веденное выше уравнение для данного значения.
в) Если значения свойств чрезмерно ограничены (ни
одно из них не равно auto ) , пренебречь значением
свойства bottom и решить приведенное выше уравне
ние для данного значения.
3. Если значение auto установлено в одних свойствах top,
he ight и bottom, а в других - не установлено, выбрать
для применения одно из следующих правил.

а) Если значение auto установлено в свойствах top
и height, а в свойстве bottom нет, высота опре
-
деляется, исходя из содержимого элемента, как это

обычно делается в статическом потоке. Сбросить в
нуль (О) любые значения auto свойств margin-top
и margin-bottom и решить приведенное выше урав
нение для значения свойства top.
б) Если значение auto установлено в свойствах top и
bottom, а в свойстве he ight нет, задать статиче
-
ское положение в свойстве top. Сбросить в нуль (О)

любые значения auto свойств margin-top и margin
bot tom и решить приведенное выше уравнение для
значения свойства bot tom.
в) Если значение auto установлено в свойствах height
и bottom, а в свойстве top нет, высота определяет
-
ся, исходя из содержимого элемента, как это обычно

делается в статическом потоке. Сбросить в нуль (О)
bottom и решить приведенное выше уравнение для
г) Если значение auto установлено в свойстве top, а в
свойствах height и bottom нет, сбросить в нуль
-
(О) любые значения auto свойств margin-top и

margin-bottom и решить приведенное выше уравне
ние для значения свойства top.
д) Если значение auto установлено в свойстве height, а
в свойствах top и bottom нет, сбросить в нуль (О)
-
любые значения auto свойств margin-top и ma rgin

bot tom и решить приведенное выше уравнение для
значения свойства height.
е) Если значение auto установлено в свойстве bottom, а
в свойствах top и height нет, сбросить в нуль (О)
-

bottom и решить приведенное выше уравнение для

Для определения вертикальной разметки заменяемых эле
ментов служит следующая процедура.
1. Определить значение свойства height, как описано для
внутристрочных заменяемых элементов ранее, в разделе
"Внутристрочная разметка".
2. Если значение auto установлено в обоих свойствах, top
и bottom, задать статическое верхнее положение в свой
стве top.
3. Если значения свойств чрезмерно ограничены, прене
бречь значением свойства bottom и решить приведен
ное выше уравнение для данного значения.
Ра з метка таблиц
Разметка таблиц может оказаться довольно сложной, осо
бенно потому что в CSS определяются два разных способа
вычисления ширины ячеек таблицы, а также два способа об
ращения с границами таблиц и их внутренними элементами.
Составляющие разметки таблиц приведены на рис. 1.4.
Рис. 1 . 4. Составляющие разметки таблиц

П равила расположения табnиц
В общем, таблица размечается в соответствии со следую-
щими правилами.
Каждый блок строки охватывает одну строку ячеек та
блицы. Все блоки строки в таблице заполняют ее сверху
вниз в том порядке, в каком они встречаются в исход
ном документе. Следовательно, таблица состоит из
стольких строк, сколько имеется элементов строк.
Блок группы строк охватывает те же самые ячейки та
блицы, что и блоки строк, которые он содержит.
Блок столбца охватывает один или более столбцов ячеек
таблицы. Блоки столбцов размещаются один за другим в
том порядке, в каком встречаются в исходном докумен
те. Первый блок столбца располагается слева для языков
с правосторонним письмом или справа для языков с ле
восторонним письмом.
Блок группы столбцов охватывает те же самые ячейки
таблицы, что и блоки столбцов, которые он содержит.
Несмотря на то что ячейки таблицы могут простираться
на несколько строк или столбцов, в CSS не определяет
ся, каким образом это происходит. Решение этой зада
чи оставляется языку определения документов. Каждая
расширенная ячейка представляет собой прямоуголь
ный блок шириной и высотой в одну или более ячеек
таблицы.
Верхней в этом прямоугольном блоке оказывается стро
ка, являющаяся родительской для данной ячейки. Пря
моугольный блок расширенной ячейки должен быть
смещен как можно дальше влево для языков с правосто
ронним письмом, но не должен перекрывать какой-ни
будь другой блок ячейки. Кроме того, он должен распо
лагаться справа от всех ячеек в той же самой строке, ко
торые следуют до него в исходном документе на языке с
правосторонним письмом. А в языках с левосторонним

письмом расширенная ячейка должна быть смещена как
можно дальше вправо, не перекрывая остальные ячейки,
и располагаться слева от всех ячеек в той же самой стро
ке, которые следуют после нее в исходном документе.
Блок ячейки не должен простираться за пределы по

следнего блока строки или группы строк таблицы. Если
структура таблицы является причиной такого состоя -
ния, ячейка должна быть сокращена до тех пор, пока не
впишется в таблицу или группу строк, которая ее охва
тывает.
Фиксированная разметка таблиц

Модель фиксированной разметки действует быстро, по
скольку не зависит от содержимого ячеек таблицы. Ее действие
определяется значениями свойства width таблицы, столбцов и
ячеек в первой строке таблицы. В модели фиксированной раз
метки таблиц применяется следующая простая процедура.
1. Любой элемент столбца, значение свойства width кото
рого отличается от auto, задает ширину этого столбца.
2. Если ширина столбца устанавливается автоматически,
а ширина ячейки первой строки таблицы в этом столб
це - не автоматически, именно эта ячейка и задает ши -
рину данного столбца. Если же ячейка простирается на
несколько столбцов, ее ширина равномерно распределя
ется среди этих столбцов.
3. Любые столбцы, ширина которых устанавливается ав
томатически, размечаются таким образом, чтобы иметь
как можно более одинаковую длину.
На данном этапе ширина таблицы задается значением свой
ства width таблицы или суммарной шириной столбцов в за
висимости от того, что больше. Если же таблица оказывается
шире, чем суммарная ширина столбцов, разница делится на
количество столбцов и прибавляется к ширине каждого из них.
Гn1ва 1. Основные понятия 47

Автоматическая разметка таблиц
Модель автоматической разметки таблиц действует не так
быстро, как модеJь фиксированной разметки таблиц, тем не
менее эта модель в большей степени известна авторам веб
страниц, поскольку она, по существу, аналогична модели
НТМL-разметки таблиц, которая применяется уже много лет.
Применение этой модели в последних пользовательских аген
тах можно задать, установив значение auto в свойстве width,
независимо от знаi.�ения свойства taЫe-layout, хотя ::это и не
гарантируется.
в модели автоматической разметки таблиц применяется
следующая процедура.
1. Вычисляет tя минимальная и максимальная ш ирина
каждой ячейки в столбце.
2. Определяется минимальная ширина, необходимая для
отображенJя содержимого. С этой целью содержимое
может быть разбито на любое количество строк, но не
должно выступать за пределы блока ячейки. Если значе
ние свойст.Sа width ячейки оказывается больше мини-
1
мально возможной ширины, в этом свойстве устанавли -

вается значение минимальной ширины ячейки. А если
значение св ойства width ячейки оказывается равным
auto, миниr.�альная ширина ячейки задается по мини-
1
мальной шJ.:!рине содержимого.
3. Определяетlя ширина, необходимая для отображения
содержимого без его разбиения на ряд строк, в отличие
от принудительного разбиения на ряд строк (например,
в силу дейсtвия элемента разметки <br>). Это значение
и определяет максимальную ширину ячейки.
4. Вычисляется минимальная и максимальная ширина
каждого стdлбца следующим образом.
а) Минимальная ширина столбца определяется наи
большей минимальной шириной всех ячеек в столб
це. Если в свойстве width столбца явно задано

значение, большее любой минимальной ширины яче
ек в этом столбце, его минимальная ширина задается
по значению свойства width.
б) Максимальная ширина столбца определяется наи
большей максимальной шириной всех ячеек в столб
це. Если в свойстве width столбца явно задано зна
чение, большее любой максимальной ширины ячеек
в этом столбце, его максимальная шири·на задается
по значению свойства width. Оба эти расчета ши
рины столбца воспроизводят традиционную НТМL
разметку таблиц, при которой любой столбец при
нудительно простирается на ширину самой широкой
его ячейки.
5. Если ячейка простирается на несколько столбцов, сум
марная м ин имальная ширина всех столбцов должна
быть равна минимальной ширине расширенной ячей
ки. Аналогично суммарная максимальная ширина всех
столбцов должна быть равна максимальной ширине
расширенной ячейки. Пользовательские агенты долж
ны равномерно распределять любые различия в шири
не столбцов среди всех охватываемых данной ячейкой
столбцов.
Кроме того, пользовательский агент должен принять во
внимание следующее: если ширина столбца содержит долю в
процентах от значения его свойства width, то такая доля вы
числяется относительно ширины таблицы, даже если эта ши
рина еще неизвестна. Пользовательский агент должен хранить
полученную долю в процентах, чтобы использовать ее в сле
дующей части алгоритма. Как только пользовательский агент
определит, насколько шире или уже должен быть каждый стол
бец, он сможет вычислить ширину таблицы. И делается это
следующим образом.
1. Если вычисленная ширина таблицы не равна значению
auto, то она сравнивается с суммарной шириной всех

столбцов, включая любые границы и промежутки меж
ду ячейками таблицы. (На данном этапе, скорее всего,
вычисляется доля в процентах от ширины столбцов.)
Большее из сравниваемых значений и определяет окон
чательную ширину таблицы. Так, если вычисленная ши -
рина таблицы оказывается больше суммарной ширины
всех столбцов, границ и промежутков между ячейками,
то ширина столбцов увеличивается на одинаковую ве
личину, чтобы заполнить таблицу по всей ее ширине.
2. Если вычисленная ширина таблицы равна значению
auto, то окончательная ширина таблицы определяется
суммированием ширины всех столбцов, границ и про
межутков между ячейками. Это означает, что таблица
будет широкой настолько, насколько потребуется для
отображения ее содержимого, как и при традиционной
НТМL-разметке таблиц. А любая доля в процентах от
ширины столбцов служит в качестве ограничения, на
кладываемого на их ширину, но пользовательскому аген
ту совсем не обязательно соблюдать это ограничение.
Когда завершится последний из приведенных выше этапов
вычисления ширины таблицы, тогда (и только тогда) пользова
тельский агент сможет фактически разметить таблицу.
Сведение границ ячеек таблицы

Модель сведения границ ячеек таблицы описывает, глав
ным образом, традиционную НТМL-разметку таблиц без про
межутков между ячейками (так называемого межклеточного
расстояния). Эта модель действует по следующим правилам.
Элементы таблицы не могут иметь никаких внутрен
них полей, хотя им разрешается иметь отступы. Это, по
существу, означает отсутствие разделения между гра
ницей, проходящей по ее внешнему краю, и крайними
ячейками.
50 CSS. Карманный справочник, 4-(! издание

Границы могут накладываться на ячейки, строки, груп
пы строк, столбцы и группы столбцов. И сам элемент
разметки tаЫе может, как обычно, иметь границу.
Разделение между границами ячеек отсутствует. В дей
ствительности границы сводятся одна в другую там,
где они соприкасаются, чтобы нарисованной оказалась
лишь одна из сведенных границ. Это сродни сведению
отступов, когда верх одерживает самый крупный от
ступ. А при сведении границ ячеек верх одерживает та
граница, которая представляет наибольший интерес.
Как только границы между ячейками будут свернуты,
они центруются по гипотетическим линиям сетки, ус
ловно проведенным между ячейками.
Сведение границ
Если рядом находятся две или более границ, они сводятся
одна в другую, как показано на рис. 1 .5. Какая именно грани
ца одерживает при этом верх, определяют следующие строгие
правила.
1. Если свойство border-style одной из сводимых гра
ниц принимает значение hidden, именно ей отдается
наибольший приоритет над всеми остальными своди
мыми границами, которые в данном месте скрываются.
2. Если свойство border-style одной из сводимых гра
ниц принимает значение none, ей отдается наименьший
приоритет. Никакой границы не рисуется, если свой
ство border-style всех границ, сходящихся в данном
месте, также принимает значение none. Следует иметь
в виду, что значение none устанавливается в свойстве
border-style по умолчанию.
3. Если свойство border-style хотя бы одной из своди
мых границ принимает значение none или hidden, уз
кие границы уступают место более широким. Если две
или более сводимых границ имеют одинаковую ширину,
стиль границы принимает следующий порядок, начиная
Гпава 1. Основные понятия 51

с наименее предпочтительного: douЫe, solid, dashed,
dotted, ridge, outs e t, groove, inset. Так, если две
сводимые границы имеют одинаковую длину, одна из
них - стиль dashed, а другая - стиль inset, то грани
ца в данном месте оформляется штрихом.
4. Если сводимые границы имеют одинаковые стиль и ши
рину, но различаются цветом, то цвет выбирается из
следующего списка, начиная с наиболее предпочтитель
ного элемента: ячейки, строки, группы строк, столбца,
группы столбцов, таблицы. Так, если границы ячейки и
столбца оказываются сходными, кроме цвета, они сво
дятся и выбирается цвет (стиль и ширина) границы
ячейки. А если сводимые границы происходят от эле
мента одного и того же типа (например, границы двух
строк одинакового стиля и ширины, но разного цвета),
то верх одерживает граница крайней слева и сверху
Ширина Ширина
ячейки ячейки
Ширина таблицы : Линия сетки
Рис. 1 . 5. Модель сведения границ ячеек

ячейки в языках с правосторонним письмом или грани
ца крайней справа и сверху ячейки в языках с левосто
ронним письмом.
Выравнивание содержимого я чеек по вертикали

Ниже подробно описан процесс выравнивания содержимо
го ячеек таблицы по вертикали в пределах строки таблицы.
l. Если любая из ячеек выравнивается по базовой линии,
то определяется базовая линия строки и размещается
содержимое ячеек, выравниваемых по базовой линии.
2. Размещается содержимое любой выравниваемой сверху
ячейки. Теперь у строки имеется ориентировочная вы
сота, которая определяется по нижнему краю самой
нижней ячейки, содержимое которой уже размещено.
3. Если любые из оставшихся ячеек выравниваются по
средине или снизу, а высота их содержимого оказывает
ся больше ориентировочной высоты строки, то высота
строки увеличивается опусканием базовой линии вниз с
целью охватить самые высокие ячейки.
4. Размещается содержимое всех остальных ячеек. Вну
тренне поле любой ячейки, содержимое которой оказы
вается более коротким, чем высота строки, увеличива
ется для совпадения со строкой по высоте.
Гпава 1. Основные понятия 53

Глава 2
Знач ения
В спецификации CSS определяются самые разные типы
значений, в большинстве из которых употребляются единицы
измерения. Сочетая основные типы значений (например, чис
ловых) с единицами измерения (например, пикселями), можно
добиться практически любых результатов привлекательного
оформления документов средствами CSS.
Ключевые сл ова
Ключевые слова определяются на основе свойств и имеют
назначение, характерное только для данного свойства. Напри
мер, ключевое слово normal имеет совершенно особое назна
чение в свойствах font-variant и l etter-spacing. Как и в
именах свойств, в ключевых словах регистр букв не учитыва
ется. Особое место принадлежит ключевому слову inheri t,
которое допускается во всех свойствах и всегда имеет одно и
то же назначение: получить связанное со свойством значение
из родительского элемента. Имеется еще одно ключевое слово
ini tial, которое специально предназначено для представ
ления исходного или устанавливаемого по умолчанию значе
ния данного свойства. Таким образом, в результате объявле
ния font-fami l y : initial возвращается гарнитура шрифта
(Times для большинства пользователей), устанавливаемая сре
ди глобальных параметров браузера по умолчанию. Состояние
и применение ключевого слова ini tial не были ясны на мо
мент написания этой книги, и поэтому могут быть ненадежны.
Значения цвета
Ниже перечислены формы обозначения значений цвета.
#RRGGBB
Это обозначение в виде пар шестнадцатеричных значений
хорошо известно тем, кто пользуется традиционной НТМL
разметкой в авторской разработке веб-страниц. В данной
форме записи первая пара цифр соответствует интенсивности
красного цвета, вторая пара - интенсивности зеленого цвета,
а третья - интенсивности синего цвета. В шестнадцатеричном
обозначении каждая пара цифр указывается в пределах 00-FF.
Таким образом, чистый синий цвет обозначается как #OOOOFF,
чистый красный цвет - как # FFOOOO и т.д.
#RGB
Это более краткая форма описанного выше обозначения

цвета шестью шестнадцатеричными цифрами. В этой форме
каждая цифра дублируется для получения в конечном ито
ге эквивалентного значения из шести цифр. Таким образом,
шестнадцатеричное значение цвета # F8C становится значени
ем цвета #FF88CC.
rgb (rrr, ggg, bbb)
В этой форме значения цвета допускается указывать в

пределах 0 -255, где разрешаются только целые числа. И со
всем не случайно, что эти пределы являются десятичным эк
вивалентом пределов 0 0 - FF в шестнадцатеричной форме.
Так, чистый зеленый цвет обозначается в данной форме как
rqb ( О , 255 , 0 ) , а белый цвет - как rqb ( 2 5 5 , 255 , 2 5 5 ) .
rgb (rrr . rr% , ggg. gg% , bbb . bb%)
В этой форме значения цвета RG B допускается указывать в

процентах от 0 % до 1 0 0%, где разрешаются десятичные числа
(например, 7 5 . 5%). Так, значение черного цвета обозначается
как rqb ( 0 % , 0% , 0 % ) , тогда как значение чистого синего цве
та - как rqb ( 0 % , 0% , 1 0 0 % ) .
hsl (hhh . hh , sss . ss % , lll . ll % )
В этой форме допускается обозначать цвет по его оттен

ку (углу цветового тона на цветовом круге), насыщенности и
яркости (т.е. по цветовой модели HSL - "оттенок- насыщен-

ность-я:ркость"). Оттенок всегда указывается безразмерным
числом в пределах от О до 3 6 0 , а насыщенность и яркость -
в процентах. Оттенки О и 3 6 0 равнозначны и оба относятся к
красному цвету. Допускается указывать оттенки свыше 3 6 0, но
они все равно приводятся к пределам 0-3 60. Таким образом,
обозначение оттенка 454 равнозначно установке оттенка 94.
Любое значение цвета HSL, независимо от его оттенка, будет
воспроизведено как оттенок серого, если значение насыщенно
сти равно 0 % . Конкретный оттенок серого зависит от значения
1
яркости. А любое значение цвета HSL, нечвисимо от его от-
тенка, будет воспроизведено сплошным черным цветом, если
значен11е яркости равно 0%, или сплошным белым цветом, если
значен11е яркости равно 1 0 0 % . Обычное для большинства цве
тов значение яркости составляет 5 0 % .
rgba (rrr, ggg,bbb , a . aa)
rgЬa (rrr . rr%, ggg . gg% , bbb . bb% , a . aa )
hsla (hhh . hh, sss . ss % , lll . ll % , a . aa)
Эта форма служит расширением предыдущих форм, вклю

чая в себя значение альфа-канала (т.е. непрозрачности цвета).
Значение непрозрачности должно быть указано вещественным
числом в пределах от О до 1 включительно, IfO только не в про
центах. Таким образом, обозначения rgQa ( 0 , О , 2 55 , О . 5 ) ,
rgba ( 0 , 0 , 1 0 0% , 0 . 5 ) и hsla ( 0 , 1 0 0 % , 5 0� , 0 . 5 ) равнознач
ны и определяют один и тот же полупрозрачJ:IыЙ красный цвет.
А шестнадцатеричное обозначение для цвета RGBA не предус
мотрено.
<l(ЛЮчевое слово>
На основании исходных цветов по стан�арту VG A в Win

dows для распознавания названий отдельны� цветов определе
ны 1 7 следующих ключевых слов: aqua, Ыасk, Ыuе, fuchs ia,
gray, green, l ime, maroon, navy, ol ive, orange, purple, red,
si lver, teal, white и yel low. Как правилр, цвета распозна
ются в браузерах и по другим ключевым :словам, например
цвета 1 47 Xl 1 , описанные в разделе 4.3 спе�ификации цвето -
.
Гnава �·
Значения 57
вого модуля WЗС CSSЗ Color Module ( по адресу http : / /www .
wЗ . org /TR/ css З-color). В этом цветовом модуле из списка
основных распознаваемых ключевых слов исключено слово
orange. Тем не менее оно присутствует в списке цветов X l 1 и
поддерживается во всех известных браузерах по исторически
сложившимся причинам.
currentColor
Этим специальным ключевым словом обозначается текущее

вычисляемое значение свойства color отдельного элемента.
Это означает, что с помощью объявления background-color :
currentColor можно задать такой же цвет заднего плана, как
и цвет переднего плана, что, в общем, не рекомендуется делать.
Применительно к свойству color это равнозначно объявлению
border : lpx sol id currentColor. Этим ключевым словом
удобно пользоваться для установки и отмены цвета границы,
составляя документы по модели DOM с помощью сценариев.
transparent
Это специальное ключевое слово служит сокращенной

формой для обозначения прозрачного цвета rgba ( 0 , О , О , О ) ,
которое автоматически вычисляется всякий раз, когда употре
бляется ключевое слово transparent.
Ч и сл овые значения
Числовое значение обозначается как положительное или
отрицательное, если это разрешается. Числа могут быть веще
ственными и представленными типом данных <nurnЬer> или
целыми и представленными типом данных <integer>. Они
могут также иметь ограниченный диапазон допустимых зна
чений, как, например, значения цвета в пределах 0-255. Чаще
всего диапазон чисел ограничивается только неотрицательны
ми числами, но иногда такие числа могут быть представлены
как <non-negative numЬer> или <non-negative integer>,
т.е. как неотрицательное вещественное или целое число.

Значения в процентах
Значение в процентах обозначается как число типа <nurnЬer>
со знаком процента (%). Между числом и знаком процента не
должно быть никаких пробелов. Значение в процентах всегда
вычисляется относительно какого-то другого значения. На
пример, в объявлении font- s i z e : 1 2 0 % ; для элемента задает
ся шрифт размером 120% от вычисляемого значения свойства
font- s i ze в его родительском элементе. В некоторых свой
ствах может допускаться употребление только неотрицатель
ных значений.
Значения длин ы
Значение длины обозначается как положительное или отри
цательное число, если это разрешено, после которого сразу же
следует двухбуквенное сокращение, обозначающее используе
мые единицы измерения длины. Между числом и обозначени
ем единицы измерения не должно быть никаких пробелов. При
обозначении нулевого (О) значения длины указывать единицы
измерения не нужно. Единицы измерения длины разделяются
на следующие два вида: абсолютные единицы измерения, которые
теоретически измеряются одинаково, и относительные единицы
измерения, которые измеряются относительно чего-то другого.
Абсол ютные единицы измерения длины

Ниже перечислены абсолютные единицы измерения дли
ны, употребляемые в CSS.
Дюйюr (in)
Это типичные единицы измерения длины, указываемые на

измерительных линейках в США. Преобразование дюймов в
единицы, применяемые для измерения длины на экранах мони
торов и прочих устройств отображения, обычно выполняется в
Гnau 2. Значения 59
лучшем случае приблизительно, поскольку отображение инфор
мации на рабочих участках экранов во многих системах никак не
связано с такими "настоящими" единицами измерения, как дюй
мы. Поэтому пользоваться дюймами следует крайне осторожно,
разрабатывая документы, предназначенные для вывода на экран.
Сантине'l'р11 ( cm)
Сантиметры обычно указываются на измерительных линей

ках в большинстве стран мира. В каждом дюйме насчитывается
2 , 54 сантиметра, а 1 сантиметр равен О , 3 94 дюйма. В отно
шении применения сантиметров в качестве единиц измерения
длины отдельных элементов документов на экранах мониторов
действуют те же самые предостережения, что и для дюймов.
М:иллине'l'р11 (mm)
В одном сантиметре насчитывается 10 миллиметров, а в

дюйме - 25 , 4 миллиметра, и 1 миллиметр равен О , 0394 дюй
ма. Но в отношении миллиметров следует иметь в виду упо
мянутые выше предупреждения по поводу измерения длины
отдельных элементов документов на экранах мониторов.
Пунж'1'11 (pt)
Пункты являются стандартными в полиграфии единицами

измерения длины на печатных и наборных машинах и в про
граммах обработки и верстки документов. В соответствии с
современным определением в одном дюйме насчитывается 72
пункта. Следовательно, заглавные буквы текста, набранные ке
глем (т.е. размером шрифта) 12 пунктов, должны быть высотой
в одну шестую дюйма. Например, объявление р ( font - s i ze :
lBpt ; } равнозначно объявлению р { font s i ze : О . 2 5 in ; } при
надлежащем преобразовании единиц измерения длины в среде
отображения информации, как пояснялось выше.
Цжцеро (ре)
Это еще одна единица измерения, применяемая в полигра

фии. Один цицеро равнозначно 12 пунктам, т.е. в одном дюйме
насчитывается 6 цицеро. Заглавные буквы текста, набранные

кеглем в 1 цицеро, должны быть высотой в одну шестую дюй
ма. Например, в объявлении р { font- s i z e : 1 . 5рс ; } задается
такой же размер шрифта для набора текста, как и в объявлени
ях, приведенных выше при пояснении пунктов. Применяя ци
церо, следует также принимать во внимание упомянутые выше
предостережения.
Относительные единицы измерения длины

Ниже перечислены относительные единицы измерения
длины, используемые в CSS.
&lco!l'a шр11ф2'а ( em)
Эта единица измерения обозначает высоту кегельной пло

щадки заданного шрифта. Высота шрифта в CSS равнозначна
знакоместу для заданного шрифта, а, по существу, - вычис
ляемому значению свойства font-size. В единицах измере
ния высоты шрифта можно указывать относительные размеры
шрифтов. Например, 1 . 2em означает то же самое, что и 120%
при указании шрифта.
Вllco!l'a шр11ф2'а жорнеаоrо элемента (rem)
Эта единица измерения обозначает высоту шрифта кор

невого элемента (т.е. элемента разметки html в HTML- и
ХНТМL-документах). А в остальном она подобна единице из
мерения em.
X-height (ех)
Эта единица измерения обозначает х-высоту (т.е. размер

строчных букв) шрифта. Но в определение подавляющего боль
шинства шрифтов х-высота не входит, и поэтому во многих
браузерах применяется следующее весьма приблизительное
соотношение единиц измерения высоты шрифта: lex равно
О . Sem. Исключением из этого правила является версия 5 бра
узера Internet Explorer для компьютеров Macintosh, в которой
предпринимается попытка определить фактическую х-высо-
Глава 2. Значения 61
ту шрифта путем внутреннего растрирования очень большой
буквы х и подсчета пикселей!
ШиpliUfa НУЛЯ (ch)
Эта единица измерения обозначает ширину одного нуля

(Unicode +0300) в текущей гарнитуре шрифта и в его размере.
ЛJ!жсели (рх)
Пиксель представляет собой, как правило, прямоугольный и

реже квадратный элемент изображения на экране, но в CSS пик
сели определяются более абстрактно. В точки зрения CSS раз
мер пикселя определяется таким образом, чтобы на один дюйм
приходилось 96 пикселей. Многие пользовательские агенты
пренебрегают этим определением в пользу простого обращения
к пикселям на экране монитора. При увеличении, уменьшении
изображения или печати страниц в силу вступают масштабные
коэффициенты, где элемент шириной lOOpx может быть вос
произведен на устройстве вывода больше 1 00 точек по ширине.
Еджюща Jll3HepeIOUl иrирюw области лросно'l'ра (vw)
Эта единица измерения вычисляется относительно шири

ны области просмотра, которая делится на 1 0 0 . Так, если ши
рина области просмотра составляет 937 пикселей, то lvw рав
но 9 . 3 7рх. Если же ширина области просмотра изменяется,
например, в результате того, что окно браузера делается шире
или уже, то вместе с ней изменяется и величина vw.
ЕдlUfица и3нерения .EWCO'l'll области лросно'l'ра (vh)
Эта единица измерения вычисляется относительно высоты
области просмотра, которая делится на 100. Так, если шири
на области просмотра составляет 650 пикселей, то lvh равно
6 . Spx. Если же высота области просмотра изменяется, напри
мер, в результате того, что окно браузера делается длиннее или
короче, то вместе с ней изменяется и величина vh.
Мининалъная eдlUU(цa и3нереюиr области лросно'l'ра (vm)
Эта единица измерения составляет 1/100 часть ширины или

высоты области просмотра в зависимости от того, какая из этих
62 CSS. Карманный справочник, 4-е иэД11ние

величин меньше. Так, если имеется область просмотра шириной
937 пикселей и высотой 650 пикселей, то lvm равно 6 . Spx.
URI
Значение URI типа <uri> является ссылкой н а файл, со
держащий, например, графическое изображение или друrую
таблицу стилей. URI определяется в CSS относительно табли
цы стилей, которая его содержит. Сокращение "URI" означает
"Uniform Resource Identifier" (Универсальный идентификатор
ресурса) и в последнее время чаще употребляется вместо URL.
(Формально URL являются подмножеством URI.) Тем не менее
в спецификации CSS, которая была впервые определена, когда
URI еще обозначались как URL, это означает, что ссылки на URI
будут фактически появляться в форме url ( <uri> ) . Забавно!
Угл ы
Углы выражаются в форме <angle>, где после числа типа
<numЬer> сразу же следует единица измерения угла. Существу
ют следующие разновидности единиц измерения углов: градусы
(deg), грады (grad), радианы ( rad) и обороты (turn). Напри
мер, прямой угол можно объявить одним из следующих спосо
бов: 90deq, lOOgrad, 1 , 57 1rad или О , 2 5 turn, и в каждом слу
чае указанные значения прямого угла преобразуются в градусы
в пределах от О до 360. То же самое относится и к отрицатель
ным значениям углов, которые вполне допустимы. Так, величи
ны - 90deg и 2 70deg обозначают один и тот же прямой угол.
В ремя
Величина времени типа <time> выражается в виде неотрица
тельного числа типа <numЬer>, после которого сразу же следует
Глава 2. Значения 63
единица измеренщ времени. Существуют следующие разновид
ности единиц измерения времени: секунды (s) и миллисекунды
(ms ) . Величины времени употребляются в акустических стилях,
которые не нашли широкого признания, а также в намного луч
ше поддерживаемых монтажных переходах и в анимации.
Ч астоты
Величина частЬты типа <frequency> выражается в виде
неотрицательного числа типа <numЬer>, за которым сразу же
следует единица �змерения частоты. Существуют следующие
разновидности едИниц измерения частоты: герцы (Hz) и кило
герцы (kНz). Они обозначаются без учета регистра букв, и по
этому величины бkHz и бkhz равнозначны. На момент написа
ния данной книги величины частоты использовались в акусти
ческих стилях, которые не нашли широкой поддержки.
Символ ьн ы е строки
Символьная строка типа <st ring> состоит из последова
тельности символов, заключаемых в одинарные или двойные
кавычки. Если в состав символьной строки входит та же самая
кавычка, в которую она заключается, то такая кавычка долж
на быть экранирована, как, например, в следующих строках:
' That \ ' s ama z ing ! ' или 11 Deploy the \ 11 scare quot�s \ 11 at
once ! 11• Если же в символьной строке необходимо указать знак
новой строки, его следует обозначить как \А, что в Уникоде оз
начает кодовую точку для знака новой строки. Любой символ в
Уникоде может быть представлен с помощью экранированной
ссылки на кодовую точку. Так, левая закругленная двой:ная ка
вычка (") может бьпь представлена в Уникоде как \2 01с. Если
символьная строка все же содержит знак перевода строки из
соображений удобочитаемости, этот знак должен быть экра
нирован, а при обработке строки - удален.
64 CSS. КармJнный справочник. 4-е издание

Глава 3
Селекторы
Об ычные селекторы
Ниже перечислены обычные селекторы и коротко описано
их назначение.
Универсальный селектор
Образец:
*
Описание:
Этот селектор обеспечивает совпадение с именем любого
элемента на языке документа. Если правило не предусматри -
вает явного указания селектора, то автоматически выводится
универсальный селектор.
Примеры:
* { color : red ; }
div * р { color : Ыuе ; }
Селектор по типу
Образец:
elementl
Описание:
Этот селектор обеспечивает совпадение с именем указанно
го элемента на языке документа. Совпадение происходит с каж
дым экземпляром имени искомого элемента. (В специфика
ции CSSl такие селекторы назывались селекторами элементов.)
П римеры:
body ( ba c kground : # FFF; )
р ( font-s i z e : lern; }
Селектор порожденных э лементов
Образец:
elernentl elernent2
Описание:
Этот селектор позволяет выбрать элемент по его состоянию
как порожденного от другого элемента. Совпавший элемент
может быть потомком, внуком, правнуком и так далее роди
тельского элемента. (В спецификации CSSl такие селекторы
назывались контекстными селекторами).
П римеры:
body h l { font- s i ze : 2 0 0 % ; )
tаЫе t r td div ul l i { color : purple ; }
Селектор потомков
Образец:
elernent l > elernent2

Оп исан и е:
Этот тип селектора служит для совпадения с элементом по
его состоянию как потомка другого элемента. Он более стро
гий, чем селектор порожденных элементов, поскольку обеспе
чивает совпадение только с потомком.
П ри меры:
div > р { color : cyan; )
ul > li { font-weight : bold ; )
Селектор смежных родственных э лементов
Образец:
elementl + element2
Оп и сан и е:
Этот селектор позволяет выбрать следующий смежный
элемент, родственный другому элементу. (У родственных эле
ментов, как подразумевает их название, имеется общий роди
тельский элемент.) Любой текст, расположенный между двумя
родственными элементами, игнорируется, а во внимание при
нимаются только сами элементы и их положение в дереве до
кумента.
Пр имеры:
tаЫе + р { margin-top : 2 . 5em; )
hl + * { margin-top : О ; )
Селектор следующих родственн ы х э лементов
Образец:
elementl - e lement2
Гnава 3. Селекторы 67
Описание:
Этот селектор позволяет выбрать элемент, родственный
другому элементу и следующий после него в дереве докумен
та. Любой текст, расположенный между двумя родственными
элементами, игнорируется, а во внимание принимаются только
сами элементы и их положение в дереве документа.
П римеры:
hl - h2 { margin-top : 2 . 5em ; }
div#navlinks - div { margin-top : О ; }
Селектор по классу
Образец:
element l . classname
e lement l . clas sname l . c lassname2
Описание:
В тех языках, в которых допускается запись через точку (на
пример, в HTML, XHTML, SVG и MathML), селектор по классу
позволяет выбрать элементы с атрибутом класса, содержащим
конкретные значения. Наименование значения класса должно
быть указано сразу же после точки. Несколько значений клас
са можно связывать в цепочку, хотя поддержка такой возмож
ности вызывает затруднения в браузере lnternet Explorer до
версии 7. Если же имя перед точкой отсутствует, селектор по
классу обеспечивает совпадение со всеми элементами, содер
жащими значения данного класса.
П римеры:
p . urgent { co lor : red; }
a . external { font -styl e : ital i c ; )
. example { background : o l ive ; )
. note . caution { background : yellow ; )

Примечание:
В браузере Internet Explorer до версии 7 не поддерживает
ся синтаксис связывания в цепочку значений, указываемых в
селекторе по классу, хотя при разметке допускается указывать
несколько слов в значениях класса.
Селектор по идентификатору
Образец:
element l # idname
Описание:
В тех языках, в которых допускается запись через знак ре
шетки (например, в HTML или XHTML), селектор по иденти
фикатору позволяет выбрать элементы, содержащие иденти
фикатор с конкретными значениями. Наименование значения
идентификатора должно быть указано сразу же после знака ре
шетки (#). Если же имя элемента перед знаком решетки отсут
ствует, селектор по идентификатору обеспечивает совпадение
со всеми элементами, содержащими значение этого идентифи
катора.
Примеры:
hl #page-t i t l e { font-s i ze : 2 5 0% ; )
body# home { background : s i lve r ; }
#example { background : l ime ; }
Простой селектор по атрибутам
Образец:
elementl [ at t r ]
Описание:
Этот селектор позволяет выбрать любой элемент по нали
чию в нем заданного атрибута, независимо от значения этого
атрибута.
П римеры:
a [ re l ] { b o rder-bottom : Зрх douЫe gray; }
p [ c l as s ] { borde r : lpx dotted s i lver ; }
Селектор по точным значениям атрибутов
Образец:
e l ement l [ at t r= " va l ue " ]
Описание:
Этот селектор позволяет выбрать любой элемент по точно
му и полному значению атрибута.
П римеры:
а [ rel=" Start " ] { font-we i ght : bold; }
p [ c l a s s = " urgent " ] { co lo r : red ; }
Селектор по частичным значениям атрибутов
Образец:
e l ement l [ at t r - = " value " ]
Описание:
Этот селектор позволяет выбрать любой элемент по части
значения атрибута, разделяемой пробелами. Следует, однако,
иметь в виду, что выражения [ clas s-="value " ) и value .
равнозначны, как пояснялось выше.
70 CSS. Карманный справочник, 4-е ИЗАание

Примеры:
a [ re l -=" f r iend " J { text-transform : uppe rcase ; }
р [ class -="warning " ] { ba c kground : yel l ow ; }
Селектор по начальным подстрокам

в значениях атрибутов
Образец:
element l ( at t r A = " s uЬstring " ]
Описание:
Этот селектор позволяет выбрать любой элемент по любой
подстроке в самом начале значения атрибута.
Примеры:
a ( hre f A = " /Ьlog " ] { text-t rans f orm : upperca se ; }
p ( cla s s A = " t es t - " ] { ba c kground : yel low; }
Селектор по конечным подстрокам в значениях

атрибутов
Образец:
element l ( at t r $ = " suЬ s t r i ng " ]
Описание:
подстроке в самом конце значения атрибута.
П ример:
a ( hre f$=" . pdf" ] { fo nt - style : i t a l ic ; }
Селектор по произвольным подстрокам
в значениях атрибутов
Образец:
e l ement l [ at t r * = " s uЬ s t r i ng " )
Описание:
подстроке, обнаруживаемой на любом месте в значении атри
бута.
П римеры:
а [ hre f * = " o re i l l y . сот" ] { font-weight : bold; )
div [ class * = "port " ) { borde r : lpx s o l i d red; )
Селектор по языковым атрибутам
Образец:
e l ement l [ lang l = " lc " )
Описание:
Этот селектор позволяет выбрать любой элемент по атри
буту lang, значением которого является разделяемый дефиса
ми список, начиная со значения, указанного в селекторе.
П ример:
html [ lang l = " tr " J { color : red ; )
Структурные псевдокn а ссы

Строго говоря, все псевдоклассы, как и все селекторы, яв
ляются структурными. В конечном счете все они так или иначе
зависят от структуры документа. Рассматриваемые здесь псев
доклассы отличаются тем, что они, по существу, действуют по

шаблонам, обнаруживаемым в структуре д�кумента, выбирая,
например, текст через абзац или элементь, , являющиеся по
следними потомками своего родительского элемента.
: empty
П римен яется:
К любому элементу.
Описание :
Этот псевдокласс обеспечивает совпаденrе с элементами, у
которых отсутствуют порожденные узлы, т.е. отсутствуют по
рожден:ные элементы или узлы содержимог<), которые опреде
ляются как любой текст, пробелы, ссылка на объект или узлы
CDATA. Так, элемент <р> < /р> не является пустым и не окажется
таковым, даже если заменить в нем пробел знаком новой строки.
Следует, однако, иметь в виду, что этот псевдокласс не применя
ется к п устым элементам наподобие br, img, �nput и т.д.
П римеры:
p : empt y { padding : l em ; background: red ; }
l i : empty { display : none ; )
: first-child
П рименяется:
Описание :
Этот псевдокласс обеспечивает совпадение с элементом,
если о :н оказывается первым потомком другого элемента.
Так, выражение div : f i rst-child позволяет выбрать любой
Гnава 3. �еnекторы 73
элемент di v, который оказывается первым потомком другого
элемента, но не первым потомком любого элемента di v.
П римеры:
td : f irst-child { borde r - l e f t : lpx s o l i d ; J
p : f i rs t - child { text-indent : О ; margin-top : 2em; )
: firs t-of- type

Описание:
если он оказывается первым потомком другого элемента для
своего типа. Так, объявление div : fi rst-of-type позволяет
выбрать любой элемент di v, который оказывается первым по
томком типа di v другого элемента.
П римеры:
td : f irst-of-type { border- left : lpx dotted ; }
h2 : f i rst-of-type { color : fuchs ia ; )
: lang
К любому элементу с соответствующей информацией о язы
ковой кодировке.
Описание:
Этот псевдокласс обеспечивает совпадение с элементами по
их языковой кодировке. Подобная информация должна нахо
диться в самих элементах или быть иным образом связанной с
документом, поскольку ее нельзя назначить из CSS. Обработка

псевдокласса : lang выполняется таким же образом, как и
селекторов по языковым атрибутам 1 Например, в НТМL =.
документе язык элемента определяется его атрибутом lang.

Если такой атрибут отсутствует в документе, то язык элемента
определяется атрибутом l ang его ближайшего родственного
элемента, а если и у него такой атрибут отсутствует, то полем
ответного НТТР-заголовка Content-Language (или соответ
ствующим атрибутом meta http-equiv) для документа.
Примеры:
html : lang (en) ( ba c kground : s i lver ; }
* : lang ( f r ) ( quotes : ' &# 1 7 1 ; ' ' &#187 ; ' ; }
: last-child
Применяется:
Описание:
если он оказывается последним потомком другого элемента.
Так, объявление div : last-child позволяет выбрать любой
элемент div, который оказывается последним потомком друго
го элемента, но не последним потомком любого элемента di v.
Примеры:
td : last-child ( border- right : lpx s o l i d ; }
p : last-child { margin-bottom : 2em; }
: las t-of - type

Гnава 3. Сеnекторы 75
Описание:
если он оказывается последним потомком другого элемента
для своего типа. Так, объявление div : last-of-type позволя
ет выбрать любой элемент di v, который оказывается послед
ним потомком типа di v другого элемента.
Примеры:
td : last-of -type { bo rde r- right : lpx dotted ; }
h2 : last-of- type { color : fuchsia ; }
: nth - child ( an+b )

Описание:
Этот псевдокласс обеспечивает совпадение с каждым п-м
потомком по шаблону выбора, определяемому по формуле
an+b, где а и Ь - целые числа типа < integer>, а n - беско
нечный ряд целых чисел, отсчитываемый вперед от первого по
томка. Следовательно, чтобы был выбран каждый четвертый
потомок элемента разметки body, начиная с первого потомка,
достаточно составить следующий селектор: body > * : nth
child ( 4n+ l ) . В итоге будут выбраны первый, пятый, девятый,
четырнадцатый и так далее потомки элемента разметки body.
Если же требуется выбрать четвертый, восьмой, двенадцатый
и так далее потомки этого элемента, то достаточно составить
такой селектор: body > * : nthchi ld ( 4 n ) . Имеется также воз
можность указывать отрицательное значение параметра Ь, и
тогда селектор body > * : nth-child ( 4n- l ) выберет третий,
седьмой, одиннадцатый, пятнадцатый и так далее потомки эле
мента разметки body.
76 Селекторы
Вместо формулы аn+Ь допускается употреблять ключевые
слова even и odd. Эти ключевые слова равнозначны 2n и 2n+l
соответственно.
Примеры:
* : nth-ch ild ( 4 n+ l ) { font-we ight : bold; }
tbody tr : nth-chi ld ( odd) { bac kground-color : #EEF; }
: nth- las t - child ( an+b )

Описание:
потомком по шаблону выбора, определяемому по формуле
аn+Ь, где а и Ь - целые числа типа <integer>, а n - бесконеч
ный ряд целых чисел, отсчитываемый назад от последнего по
томка. Следовательно, чтобы был выбран каждый четвертый
потомок элемента разметки body, начиная с последнего потом
ка, достаточно составить следующий селектор: body > * : nth
last-ch i l d ( 4 n+l ) . Этот псевдокласс, по существу, является
зеркальным отражением псевдокласса : nth-chi ld.
Вместо формулы аn+Ь допускается употреблять ключевые
Примеры:
* : nth- l a s t - chi ld ( 4 n+ l } { font-weight : bold; }
tbody t r : nth- last-chi l d ( odd) { ba c kground-co lor : #EEF; }
: nth- las t- o f - type ( an+b )

Описание:
потомком того же самого типа, что и указанный элемент, по
шаблону выбора, определяемому по формуле аn+Ь, где а и Ь -
целые числа типа <integer>, а n бесконечный ряд целых чи

-
сел, отсчитываемый назад от последнего элемента такого типа.

Следовательно, чтобы выбрать каждый третий от конца абзац
(р), являющийся потомком элемента разметки body, начиная
с первого такого абзаца, достаточно составить следующий се
лектор: body > p : nth-last-of-type ( Зn+l ) . Этот критерий
выбора остается в силе даже в том случае, если между различ -
ными абзацами встречаются другие элементы, в том числе спи
ски, таблицы и пр.
Вместо формулы аn+Ь допускается использовать ключевые
Примеры:
t d : nth- last-o f-type (even ) { background- color : # FCC ; }
img : nth- last-of-type ( Зn ) { float : l e f t ; border : 2рх s o l id ; }
: nth- o f - type ( an+b )

Описание:
потомком того же самого типа, что и указанный элемент, по
шаблону выбора, определяемому по формуле аn+Ь, где а и
Ь целые числа типа <integer>, а n
- бесконечный ряд це
-
лых чисел, отсчитываемый вперед от первого элемента такого

т ипа. Следовательно, чтобы выбрать каждый третий абзац

(р), являющийся потомком элемента разметки body, начиная
с первого такого абзаца, достаточно составить следующий се
лектор: body > р : nth-oftype ( Зn+l ) . В итоге будут выбраны
первый, четвертый, седьмой, десятый и так далее абзацы, яв
ляющиеся потомками элемента разметки body. Этот критерий
выбора остается в силе даже в том случае, если между различ -
ными абзацами встречаются другие элементы, в том числе спи
ски, таблицы и пр.
Вместо формулы an+b допускается использовать ключевые
Примеры:
t d : nth-o f-type ( even) { background-color : # FCC ; )
img : nth-of- type ( Зn ) { float : right ; margin-left : lem ; }
: only- chi ld
Описание:
Этот псевдокласс обеспечивает совпадение с элементом, яв
ляющимся единственным потомком своего родительского эле
мента. Такой псевдокласс чаще всего применяется для удале
ния границы из любого привязываемого по ссылке изображе
ния при условии, что оно является единственным элементом в
ссылке. Следует иметь в виду, что элемент может быть выбран
с помощью псевдокласса : only-child даже в том случае, если
у него имеются свои потомки. Но сам элемент должен быть
единственным потомком своего родительского элемента.
Примеры:
а img : only-chi ld ( borde r : О ; }
tаЫе div : only-chi ld ( margin : 5рх ; }
: only- o f - type
Описание:
Этот псевдокласс обеспечивает совпадение с элементом
того же самого типа, являющимся единственным потомком
своего родительскЬго элемента. Следует иметь в виду, что эле
мент может быть выбран с помощью псевдокласса : onl y-of
type даже в том случае, если у него имеются свои потомки (на
пример, элементы div внутри элемента разметки div). Но сам
элемент должен бl/IТЬ единственным потомком того же самого
типа для своего рdдительского элемента.
Примеры:
р em : only-of- type { font-weight : bo l d ; }
section a rt i c l e : only-of -type ( margin : 2em О Зеm; }
: root
К любому элем�нту.
Описание:
Этот псевдокласс обеспечивает совпадение с корнев ым эле
ментом документе!, которым в HTML- и ХНТМL-документах
всегда является эАемент разметки html. А в форматах ХМL
разметки корневой элемент может иметь любое имя, и поэтому
80 CSS. Карманный справочник. 4-е издание

для его выбора требуется обобщенный селектор корневых эле
ментов.
Примеры:
: root { font : medium seri f ; }
: root > * { margin : 1 . 5em О ; }
П севдокn ассы отрицания

Имеется лишь один псевдокласс, предназначенный для от
рицания. Но он настолько особенный, что заслуживает выде
ления в отдельную категорию.
: not ( e )
Описание:
Этот псевдокласс обеспечивает совпадение с каждым эле
ментом, который не описывается простым селектором е. Это
дает возможность выбрать, например, каждый элемент, кото
рый не является абзацем, с помощью следующего селектора:
* : not ( р ) . Более полезное применение отрицание может най
ти в контексте селекторов порожденных элементов. Примером
тому может служить выбор из таблицы каждого элемента, ко
торый не является ячейкой данных, с помощью такого селек
тора: * : not ( td) . Еще одним примером отрицания может слу
жить выбор каждого элемента без идентификатора " sea rch" с
помощью следующего селектора: [ id] : not ( [ id=" search " ] } .
Из приведенного выше простого определения простого се
лектора е имеется следующее исключение: он не может быть
псевдоклассом отрицания. Это означает, что нельзя составить
Глава 3. Селекторы 81
следующий селектор: : not ( : not ( di v) ) . Но это не такая уж и
большая потеря, поскольку такое двойное отрицание равно
значно выбору элемента di v.
В связи с тем что выражение : not ( ) является псевдоклас
сом, его можно связывать в цепочку с другими псевдоклас
сами, а также с его собственными экземплярами. Например,
чтобы выбрать любой элемент, на котором установлен фокус
ввода и который не является элементом разметки а, достаточ
но воспользоваться следующим селектором: * : focus : not ( а ) .
А для того чтобы выбрать любой элемент, который не является
ни абзацем, ни элементом разметки di v, можно составить та
кой селектор: * : not ( р ) : not (di v ) .
На момент написания данной книги ограничение на про
стой селектор означало, что в выражениях : not ( ) не допуска
лось употреблять селекторы групп и порожденных элементов.
Это ограничение, вероятнее всего, будет послаблено в последу
ющих версиях модуля CSS Selectors.
Примеры:
ul * : not ( l i ) { text- indent : 2 em ; }
f i e ldset * : not ( [ type="checkЬox " ] ) : not ( [ type=" radio " ] )
{ margin : О lem; }
П севдоклассы взаимоде й ствия

Все перечисленные ниже псевдоклассы имеют отношение
к взаимодействию пользователя с документом. Такое взаимо
действие происходит независимо от стилевого оформления
разных состояний ссылок, выделения элемента, являющего
ся целевым для идентификатора фрагмента, или от стилевого
оформления элементов формы по состоянию их доступности
или недоступности.

: active
К активизируемому элементу.
Описание:
Этот псевдокласс применяется к элементу во время его
активизации. Наиболее характерным примером тому служит
щелчок кнопкой мыши на гиперссылке в НТМL-документе.
Эта ссылка остается активной до тех пор, пока кнопка мыши
нажата. Имеются и другие способы активизации элементов.
И хотя теоретически активизированы могут быть и другие эле
менты, в CSS они не определены.
Примеры:
a : act ive { colo r : red; )
* : active { bac kground : Ы uе ; )
: checked
Описание:
Этот псевдокласс обеспечивает совпадение с любым эле
ментом пользовательского интерфейса, который не "включен",
например, с установленным флажком или выбранной кноп
кой-переключателем.
Примеры:
input : checked { out l ine : Зрх s o l id rgba ( 1 2 7 , l 2 7 , l 2 7 , 0 . 5 ) ; )
input [ type= " checkЬox " ] : checked { box- shadow : red О О 5рх ; )
: di saЬled
Описани е:
Этот псевдокласс обеспечивает совпадение с элемента
ми пользовательского интерфейса, которые не в состоянии
принять вводимые пользователем данные из-за языковых
атрибутов или других непредставительных средств, например
разметки <input type=" text " disaЫed> недоступного поля
ввода текста в HTMLS. Следует, однако, иметь в виду, что псев
докласс : disaЫed не применяется, если элемент разметки
input просто удален из области просмотра с помощью таких
свойств, как pos i tion и display.
Пример:
input : di s aЫed { opac i t y : 0 . 5 ; }
: enaЬled
Описание:
Этот псевдокласс обеспечивает совпадение с элементами
пользовательского интерфейса, которые способны принимать
вводимые пользователем данные и могут быть установлены в
активное или неактивное состояние средствами самого языка
разметки. К их числу относятся любые формы элементов раз
метки ввода пользовательских данных в (X)HTML, кроме ги
перссылок.
84 CSS. К11рманный справочник, 4-е издание

Пример:
input : enaЬled { background : # FCC ; }
: focus
К элементу, находящемуся в фокусе ввода.
Описание:
Этот псевдокласс применяется к элементу в тот момент,
когда он находится в фокусе ввода. Примером тому служит
поле ввода текста в HTML- документе, на котором находит
ся указатель, и когда пользователь начинает набирать текст,
он вводится в этом поле. В фокусе ввода могут находиться и
другие элементы (например, гиперссылки), но в CSS точно не
определено, какие именно элементы могут иметь фокус ввода.
Примеры:
a : focus { outl ine : lpx dotted red ; }
input : focus { background : ye l low ; }
Поддержка псевдокласса : focus в браузере Internet Explorer
распространяется только на гиперссылки, но не на элементы
управления в формах.
: hover
К элементу, находящемуся в состоянии, когда на него наве
ден курсор.
Описание:
Этот псевдокласс применяется к элементу в тот момент,
когда на него наведен курсор, т.е. пользователь указывает на
элемент, но не активизирует его. Наиболее характерным тому
примером служит перемещение указателя мыши по гиперс
сылке в НТМL-документе. Теоретически указатель может быть
наведен и на другие элементы, хотя в CSS они точно не опреде
лены.
Примеры:
a [ hre f ] : hover { text-deco rat ion : underline ; )
p : hover { background : yellow ; }
Поддержка псевдокласса : hover в браузере Internet Exp
lorer до версии 7 распространяется только на rиперссылки.
: l ink
К гиперссылке или другому не посещенному ресурсу.
Описание:
Этот псевдокласс применяется к ссылке на URI не посещен
ного ресурса, т.е. к ссылке на такой URI, который отсутствует
в предыстории посещений пользовательского агента. Такое со
стояние совершенно противоположно состоянию для приме
нения псевдокласса : v i s i ted.
Примеры:
a : link { co lo r : Ы uе ; )
* : link { text-decoration : unde r l i ne ; )

: targe t
Описание:
Этот псевдокласс обеспеч ивает совпадение с элементом,
который сам сопоставлен с частью идентификатора фрагмен
та URI, используемого для доступа к веб-странице. Следо
вательно, ссылка http : / /www . wЗ . org/TR/cssЗ-se lectors /
#target-pseudo будет сопоставлена по шаблону : ta rget,
чтобы применить объявленные селекторы к любому элементу
с идентификатором target-pseudo. Если бы этот элемент был
абзацем, он был бы сопоставлен также по шаблону р : target.
Пример:
: target { background : # ЕЕ О ; }
: vi s i ted
К гиперссылке или другому посещенному ресурсу.
Описание:
Этот псевдокласс применяется к ссылке на URI посещенно
го ресурса, т.е. к ссылке на такой URI, который присутствует
в предыстории посещений пользовательского агента. Такое со
стояние совершенно противоположно состоянию для приме
нения псевдокласса : l ink.
Примеры:
a : vis ited { color : purple ; }
* : vis ited { color : gray; }
Псевдоэлементы
В спецификациях CSS l и CSS2 имена псевдоэлементов
предварялись одним двоеточием, как, впрочем, и имена псев
доклассов. А в спецификации CSSЗ имена псевдоэлементов
предваряются двумя двоеточиями, чтобы как-то отличать
их от псевдоклассов. По причинам исторического характера
в браузерах поддерживаются псевдоэлементы как с одним, так
и с двумя двоеточиями, хотя все же рекомендуется использо
вать два двоеточия.
: : after
Формирует:
Псевдоэлемент, содержащий сформированное содержимое,
размещаемое после содержимого элемента разметки.
Описание:
Этот псевдоэлемент позволяет ввести сформированное со
держимое в конце содержимого элемента разметки. По умол
чанию этот псевдоэлемент является внутристрочным, но мо
жет быть изменен с помощью свойства di splay.
Примеры:
a . externa l : a fter { content : " " url { / icons /globe . g i f ) ; }
p : after { content : " 1 " ; }
: : be fore
Формирует:
Псевдоэлемент, содержащий сформированное содержимое,
размещаемое до содержимого элемента разметки.

Описание :
Этот псевдоэлемент позволяет ввести сформированное со
держимое в начале содержимого элемента разметки. По умол
чанию этот псевдоэлемент является внутрцстрочным, но мо
жет быть изменен с помощью свойства di splay.
Примеры:
a [ hre f ] : be fore { content : " [ LINK J ";)
p : be fore { content : attr ( c l as s ) ; )
a [ re l J �"met " ] : a fter { content : n * " ; }
: : first-letter
Форми рует:
Псевдоэлемент, содержащий первую букву элемента.
Описание:
Это т псевдоэлемент служит для стилевого оформления
первой буквы элемента. Вместе с первой буквой соответству
ющим стилем должен быть оформлен и любой начальный знак
препинания. В некоторых языках имеются Фчетания букв, ко
торые должны интерпретироваться как OДJll H символ, и поль
зовател ьский агент может применить к об�им буквам стиль,
заданный для оформления первой буквы. До версии CSS2 . l
псевдоэлемент : : f i rst-letter можно было присоединять
только к блочным элементам. А начиная с �ерсии CSS2 . l , об
ласть действия этого псевдоэлемента расширена и включает
блоки, элементы списков, ячейки таблицы, надписи на табли
цах и внутристрочные элементы. К первой букве элемента мо
жет быть применен ограниченный ряд свойств.
Примеры:
hl : first- letter { font - s i z e : 1 6 6 % ; )
p : first-letter { text-decoration : unde r l ine ; )
Гnава 3. �еnекторы 89
: : firs t- l ine
Формирует:
Псевдоэлемент, содержащий первую отформатированную
строку элемента.
Описание:
Этот псевдоэлемент служит для стилевого оформления
первой текстовой строки в элементе, независимо от количества
слов в этой строке. Псевдоэлемент : : f i rs t - l ine можно при
соединять только к блочным элементам. К первой строке эле
мента может быть применен ограниченный ряд свойств.
Пример:
p . lead : f i r s t - l ine { font-weight : bold; )
Мультимед ий ные запросы

С помощью мультимедийных запросов можно определить
среду распространения информации, в которой браузер при
меняет заданную таблицу стилей. В прошлом для этой цели
служили типы носителя информации, которые задавались в
атрибуте media элементов разметки l ink или в дескрипторе
носителя информации в объявлениях @ import. Мультимедий
ные запросы расширяют этот принцип, позволяя выбирать
таблицы стилей, исходя из возможностей конкретного типа
носителя информации.
Основн ы е понятия
Размещение мультимедийных запросов окажется очень
знакомым для тех, кому приходилось раньше задавать тип но
сителя информации. Ниже демонстрируются два способа при
менения внешней таблицы стилей для воспроизведения доку
мента на цветном печатающем устройстве.

< l ink href="print-color . cs s " type= "text / c s s "
media= "print a n d ( colo r ) " r e l = " s tyle sheet " >
@ import u r l (print-colo r . cs s ) pr int and ( color ) ;
Мультимедийный запрос можно применять везде, где допу

скается задавать тип носителя информации. Это означает, что
несколько подобных запросов можно перечислить в списке че
рез запятую следующим образом:
<link href="print-co l o r . cs s " type= "text / cs s "
media= "print and ( color ) , proj ection and ( color ) "
rel= " s tylesheet " >
@ impo rt url (print-color . cs s ) p r i nt a n d ( co l or ) ,

pro j ection and ( color) ;
Соответствующая таблица стилей применяется всякий раз,

когда один из мультимедийных запросов вычисляется как "ис
тинный': Так, в приведенном выше объявлении @ import та
блица стилей p r i n t - co l o r . c s s применяется в том случае,
если документ нужно воспроизвести на цветном печатающем
устройстве или в среде проецирования цветных изображений.
А если предполагается печать на черно-белом печатающем
устройстве, то оба запроса вычисляются как "ложные': и поэ
тому таблица стилей print - color . css не применяется в доку
менте. То же самое относится и к любому экранному носителю
информации, среде проецирования полутоновых изображе
ний, среде акустического воспроизведения информации и т.д.
Каждый мультимедийный запрос состоит из типа носителя
информации и одного или более перечисляемых свойств этого
носителя. Каждое свойство носителя информации заключает
ся в крутлые скобки, а несколько таких свойств связываются
вместе с помощью ключевого слова and. В мультимедийных за
просах применяются следующие логические ключевые слова.
anci
Связывает два или более свойства носителя информа

ции таким образом, чтобы сам запрос оказался истинным,
если истинны все перечисленные свойства. Например, запрос
( color ) and ( o rientation : landscape ) and ( min-device
width : 8 0 0рх ) означает, что для применения заданной табли
цы стилей должны быть удовлетворены все следующие усло
вия: среда должна воспроизводить информацию в цвете, но
ситель должен иметь альбомную ориентацию, а устройство
вывода должно быть в состоянии отображать информацию
шириной не меньше 800 пикселей.
not
Отрицает весь запрос таким образом, чтобы таблица сти

лей не применялась, если истинны все условия запроса. Напри
мер, запрос not ( color) and ( orientation : landscape ) and
(min-devi cewidth : 800рх ) означает, что если удовлетворя
ются все три условия, то запрос отклоняется. Так, если среда
способна воспроизводить информацию в цвете, носитель име
ет альбомную ориентацию, а устройство вывода в состоянии
отображать информацию шириной не меньше 800 пикселей, то
заданная таблица стилей не применяется. А во всех остальных
случаях она будет применяться. Следует, однако, иметь в виду,
что ключевое слово not должно быть указано только в начале
мультимедийного запроса, а запросы наподобие ( color) and
not ( mid-device-width : 8 0 0рх ) недопустимы. В таких случа
ях запрос будет проигнорирован. Следует также иметь в виду,
что устарелые браузеры, не воспринимающие мультимедийные
запросы, будут всегда пропускать таблицу стилей, в которой
дескриптор носителя информации начинается с ключевого
слова not.
Для указания условий в мультимедийных запросах не пре
дусмотрено ключевое слово or. Его функцию выполняют за
пятые, через которые перечисляются условия запроса. Так, за
прос screen , print означает, что таблица стилей применяется
в том случае, если документ выводится на экран или печать.
Следовательно, вместо недостоверного и поэтому игнорируе
мого запроса screen and ( max-color : 2 ) or (mono chrome )
нужно составить такой запрос: s c reen and ( max-color : 2 ) ,
screen and (monochrome ) .

Имеется еще одно ключевое слово only, предназначенное
для целей обратной совместимости. Ниже приведено его кра
ткое описание.
only
Служит для сокрытия таблицы стилей от тех браузеров, ко

торые слишком устарели, чтобы воспринимать мультимедий
ные запросы. Например, чтобы применить таблицу стилей на
всех носителях информации, но только в тех браузерах, кото
рые способны воспринимать мультимедийные запросы, доста
точно составить следующий запрос: @ import url ( new . css )
only all. В тех браузерах, которые способны воспринимать
мультимедийные запросы, ключевое слово only игнорирует
ся. Следует, однако, иметь в виду, что ключевое слово only
можно указывать только в начале мультимедийного запроса.
П араметры мул ьтимедийных запросов

В качестве параметров мультимедийных запросов внедре
ны два новых типа значений, которые не применяются в ка
ком-либо другом контексте. Эти значения описаны ниже.
<ra tio>
Значение параметра пропорций состоит из двух положи

тельных целочисленных значений типа < intege r>, разделя
емых знаком косой черты (/) и необязательными пробелами.
Первое значение обозначает ширину, а второе - высоту. Сле
довательно, чтобы выразить пропорции 1 6:9 в виде соотноше
ния ширины и высоты, в запросе достаточно указать 1 6 / 9 или
16 / 9.
<rвsolution>
Значение параметра разрешения состоит из положитель

ного целочисленного значения типа <integer> и обозначе
ния единицы измерения dpi или dpcm заданного разрешения.
Как правило, пробелы между целочисленным значением типа
< integer> и обозначением единицы измерения заданного раз
решения не допускаются.
Свойства носителей информации

Ниже перечислены свойства носителей информации, ко
торые можно указывать в мультимедийных запросах. Следует,
однако, иметь в виду, что значения всех этих свойств не долж
ны быть отрицательными.
width , min-width , max-width
Значения : <length>
Обозначают ширину области отображения для пользова

тельского агента. Для веб-браузера, рассчитанного на экран
ные носители информации, это ширина области просмотра,
включая любые полосы прокрутки. А для печатного носителя
информации это ширина страничного блока. Следовательно,
свойство ( min-width : 8 50рх ) применяется в том случае, если
область просмотра оказывается шире 8 5 0 пикселей.
device-width , min-device-width , max-device-width
Значения : <length>
Обозначают ширину всей области воспроизведения на уст

ройстве вывода. Для экранных носителей информации это ши
рина экрана, а для печатных носителей информации - шири -
на страницы. Следовательно, свойство (max-device-width :
1 2 0 0рх ) применяется в том случае, если область вывода на
устройстве оказывается меньше 1200 пикселей в ширину.
height, min-height , max-height
Значеюvс : <length>
Обозначают высоту области отображения для пользова

тельского агента. Для веб-браузера, рассчитанного на экран
ные носители информации, это высота области просмотра,
включая любые полосы прокрутки. А для печатного носителя
информации это высота страничного блока. Следовательно,

свойство ( height : 5 67 рх ) применяется в том случае, если вы
сота области просмотра оказывается равной 567 пикселям.
device-height , min-device-height , mAX-device-height
ЗначеНIVr : <length>
Обозначают высоту всей области воспроизведения на уст

ройстве вывода. Для экранных носителей информации это вы
сота экрана, а для печатных носителей информации - высо
та страницы. Следовательно, свойство (max-device-height :
4 0 0рх ) применяется в том случае, если область вывода на
устройстве оказывается меньше 4 0 0 пикселей в высоту.
aspect-ratio , min-aspect-ratio, mAX-aspect-ratio
ЗначеНIVr : <ra tio>
Обозначают пропорции, получаемые в результате сравне

ния свойств width и height носителя информации (см. приве
денное выше описание значения типа <ratio> ). Следователь
но, свойство (min-aspect-rat i o : 2 / 1 ) применяется к любой
области просмотра, в которой соотношение ширины и высоты
составляет хотя бы 2 : 1.
device-aspect-ratio , min-device-aspect-ratio ,
max-deviceaspect-ratio
ЗначеНIVr : <ratio>
Обозначают пропорции, получаемые в результате срав

нения свойств devi ce-width и device-height носителя ин
формации (см. приведенное выше описание значения типа
<ratio>). Следовательно, свойство devi c e - a spe c t - ra t i o :
1 6 / 9 ) применяется к любому устройству вывода, в котором
соотношение ширины и высоты в области отображения точно
равно 1 6 : 9.
color , min-color , mAX-color
Значениs� : <integer>
Обозначают наличие возможности воспроизводить инфор

мацию в цвете на устройстве вывода, причем необязатель
ное целое число представляет количество битов, используе
мых в каждой составляющей цвета. Следовательно, свойство
( color ) применяется к любому устройству с какой угодно глу
биной цвета, тогд� как свойство (min-colo r : 4 ) означает, что
на каждую составляющую цвета должно приходиться не мень
ше 4 бит. Любое устройство, не поддерживающее воспроизве
дение информации в цвете, возвратит нулевое значение (О).
color-index , min-color-index , max-color-index
Значен11Jl : <integer>
Обозначают общее количество цветов, доступных в спра

вочной таблице цветов на устройстве вывода. Любое устрой
ство, на котором справочная таблица цветов не применяет
ся, возвратит нулевое значение (О). Следовательно, сJЗойство
(min-color- index : 2 5 6 ) применяется к любому устройству
вывода, в котором доступно для воспроизведения не меньше
2 5 6 цветов.
monochrome , min-monochrome , max-monochrome
Значен11Jl : <integer>
Обозначают наличие возможности воспроизводить инфор

мацию в монохромном виде, причем необязательное целое чис
ло представляет количество битов, приходящихся на каждый
пиксель в буфере кадров устройства вывода. Следовательно,
свойство (monochrome ) применяется к любому монохромному
устройству вывода, тогда как свойство ( min-monochrome : 2 )
означает любое монохромное устройство вывода, в котором на
каждый пиксель в буфере кадров приходится не меньше 2 бит.
resolution , min-resolution , max-resolution
Значен11Jl : <resolution>
Обозначают разрешение устройства вывода, выражаемое

как плотность пикселей и измеряемое в точках на дюйм (dpi)
или в точках на сантиметр (dpcm). (См. приведенное выше
описание значения типа <resolution>.) Если пиксели на
устройстве вывода не оказываются квадратными, то для обо
значения требуемого разрешения используется наименьшая из
осей плотности. Тhк, если плотность по одной оси на устрой
стве вывода состаhляет lOOdpcm, а по другой оси 1 2 0dpcm,
-

то возвращается значение 1 0 0 . Кроме того, запрос не будет
удовлетворен, если в нем просто указать свойство resolution,
хотя он будет удовлетворен, если указать свойства min
resolution и max-resolut ion.
Orientation
Значения : portrait 1 landscape
Обозначает общую область вывода на устройстве, которое

возвратит значение portrai t (книжная ориентация), если
значение свойства height носителя информации окажется
больше, чем значение свойства width этого же носителя.
В противном случае возвратится значение landscape (аль
бомная ориентация).
scan
Значения : progressive 1 interlace
Обозначает процесс (построчной или чересстрочной) раз

вертки, применяемый на устройстве вывода с типом носителя
информации tv.
Grid
Значения : О 1 1
Обозначает наличие (или отсутствие) сеточного устройства

вывода, например терминала типа t t у. Сеточное устройство
вывода возвратит значение l, а иначе - нулевое значение (О).
Глава 4
С право чни к сво й ств
Универсальные з на ч ения
Любой пользовательский агент, полностью реализовавший
модуль, действующий по принципу каскадирования и наследо
вания, будет учитывать значения inheri t и ini tial во всех
свойствах. На практике поддержка значения inheri t нашла
более широкое распространение, чем поддержка значения
initial.
inherit
Вынуждает наследовать значение свойства от родитель

ского элемента данного элемента, даже если рассматриваемое
свойство не наследуется (например, свойство background
image). Такое наследование можно рассматривать и как копи
рование значений из родительского элемента.
initial
Вынуждает интерпретировать значение свойства как ис

ходное, определяемое в соответствующем модуле CSS. Напри
мер, в объявлении font-style : ini tial устанавливается зна
чение normal свойства font-style независимо от того, было
ли унаследовано значение этого свойства от родительского
элемента. В тех случаях, когда исходное значение определяется
как задаваемое пользовательским агентом, например значение
свойства font - s i ze, оно устанавливается как определяемое по
умолчанию среди глобальных параметров пользовательского
агента.
Сво й ства ви зуал ьны х носителе й
информации
Ниже перечислены все свойства визуальных носителей ин
формации с кратким пояснением их назначения.
animation
Значения:
[< animat ion-parameters >] [, [ <animation-parameters > ] ] *
Расширения:
< anima tion-parameters>
< ' animat ion-name ' > 1 1 < ' animation-durat ion ' > 1 1
< ' animat ion-timing-func t i on ' > 1 1 < ' animation-delay ' > 11
< ' animat ion-iterat ion-count ' > 11 < ' animation-direct ion ' >
Исходное значение:
См. ниже описание отдельных свойств.
К блочным и внутристрочным элементам.
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Это сокращенная форма свойства, охватывающая все ос
тальные свойства видов СSS-анимации, указываемых спи
ском через запятую. Отдельные части значения этого свой
ства могут быть указаны в любом порядке, поэтому следует
избегать возможной неоднозначности значений задержки и
1 00 CSS. Карманный справочник, 4-е издание

продолжительности анимации. На момент написания данной
книги первой обычно указывалась продолжительность анима
ции, а второй - ее задержка, хотя это и нельзя гарантировать.
Примеры:
div# s l ide { anima t i o n : ' s lide ' 2 . S s l inear О 1 norma l ; }
hl { animation : ' bounce ' O . S s О . З З s
ease-in-out infinite a l ternate ; }
animation- delay
Значения:
<time> [ , < t ime> ] *
Оmз
Нет.
Описание:
Определяет период времени, в течение которого пользова
тельский агент ожидает начала заданных видов СSS-анимации.
Таймер запускается, когда пользовательский агент приме
няет СSS-анимацию. Для неинтерактивного элемента это,
скорее всего, должно произойти по окончании загрузки веб
страницы, хотя и не гарантируется.
Примеры:
body { animat ion-delay : l s , 2 0 0 0ms , 4s; }
a : hover { animation-delay : 4 0 0ms ; }
Гnава 4. Справочник свойав 101

Согласно спецификации, на момент написания данной кни
ги конкретное значение этого свойства по умолчанию было
равно нулю (О). Но ради ясности оно указано как Oms, посколь
ку в качестве безразмерных нулевых значений разрешается
указывать только числовые значения длины.
animation - di rection
Значения:
normal 1 alternate [ , normal 1 alternate ] *
normal
Нет.
Описание:
Обозначает, должна ли многоцикловая СSS-анимация (см.
ниже описание свойства animation-i teration-count) всегда
воспроизводиться в одном и том же направлении или же она
должна менять его на обратное через цикл. Так, если задать
значение alternate данного свойства, то в ходе анимации
элемент переместится на 3 0 0 пикселей вправо в одном цикле и
на 300 пикселей влево в другом цикле, по существу, возвратив
шись в исходное положение. А если задать значение nonnal
данного свойства, то в ходе анимации элемент переместится
на 300 пикселей вправо, затем возвратится в исходное положе
ние и снова переместится на 3 0 0 пикселей вправо, и так будет
1 02 CSS. Карманный сnравочнмк, 4-е издание

продолжаться до завершения анимации, если это вообще пред
полагается.
Примеры:
body { animat ion-direct ion : alternate , norma l , norma l ; J
# s canner { animation-di rect ion : norma l ; )
animation- durati on
Значения:
<t ime> [ , <time> ] *
Oms
Нет.
Описание:
Определяет продолжительность каждого цикла СSS-анима
ции от начала и до конца ее выполнения. Следовательно,
для видов одноцикловой анимации это свойство определяет
общую их продолжительность. Устанавливаемое по умолча
нию значение Oms данного свойства означает, что анимация
элемента ограничивается только его переходом из начального
состояния в конечное. Отрицательные значения данного свой
ства автоматически приводятся к значению Oms.
Примеры:
hl { animation-duration : l O s , 5s , 2 . 5 s , 1 2 50ms ; }
. z ip { anima t ion-duration : 9 0ms ; }
Гnава 4. Справочник свойств 1 03

Согласно спецификации, на момент написания данной кни
ги конкретное значение этого свойства по умолчанию было
равно нулю (О). Но ради ясности оно указано как Oms, посколь
ку в качестве безразмерных нулевых значений разрешается
указывать только числовые значения длины.
animation- i teration- count

Значения:
infinite J <nшnЬer> [ , infinite J <nшnЬer> ] *
1
Нет.
Описание:
Определяет количество циклов в анимации. Исходное зна
чение 1 этого свойства означает, что анимация будет выпол
нена только один раз с переходом из начального состояния
в конечное; дробное значение ( например, 2 . 75) означает, что
анимация будет остановлена посредине своего завершающего
цикла; а нулевое значение (О) означает, что анимация вообще
не состоится. Отрицательные значения данного свойства ав
томатически приводятся к нулевому значению (О). И наконец,
значение infini te данного свойства означает, что анимация
никогда не завершится, поэтому пользоваться этим значением
следует осторожно.

Пример ы:
body ( animat ion-iterat ion-count : 2, 1, 7 . 5 87 5 ; }
ol . dance ( animation-iteration-count : infinite ; }
animation- name
Значения:
none 1 IDENТ [ , none 1 IDENТ ] *
none
Нет.
Описа ние:
Определяет объявляемые имена видов СSS-анимации. Каж
дое имя IDENТ обозначает @-правило анимации по ключевым
кадрам. Если имя IDENТ не объявлено или если указано клю
чевое CJioвo none, то анимация не выполняется независимо от
значеюtй любых других ее свойств. Так, ес11и задать свойство
animat ion-name : ' bounce ' , none, ' j umper ' ; , но не опреде
лить имя анимации j umper, то первая анищщия будет выпол
нена, а lJторая и третья - нет.
Пример ы:
html ( animat ion-name : ' turn ' , ' s lide ' , none ; )
h2 ( animation- name : ' f l ip ' ; )

animation-play - s tate
Значения:
runninq 1 paused (, runninq 1 paused] *
runnin9
Нет.
Описание:
Определяет состояние выполнения одного или более ви
дов СSS-анимации. Устанавливаемое по умолчанию состояние
runninq оказывается самым полезным в статических средах
CSS, но им можно воспользоваться, чтобы легко останавливать
или начинать анимацию, изменяя модель DOM с помощью
сценариев или применяя интерактивные средства CSS (напри
мер, псевдокласс : hove r).
Примеры:
pre { animat ion-play-state : running, paused, running ; )
tаЫе { animation-play- state : running ; )
На момент написания данной книги это свойство предпо
лагалось удалить из модуля CSS Animations.
animation- timing- function

Значения:
< t iming-function> ( , < t iming-function > ] *

< timing-function>
ease 1 linear 1 ease-in 1 ease-out 1 ease-in-out 1

cuЬicЬezier ( < numЬer > , <numЬe r > , <numЬer > , <numЬer > )
ease
Нет.
Описание:
Определяет порядок выполнения анимации в полном ее
цикле или в отдельном ключевом кадре в зависимости от того,
где именно применяется данное свойство. У всех определенных
выше ключевых слов должны быть свои эквиваленты в вызове
функции cuЬicbe z i e r ( ) . Например, эквивалентом ключевого
слова l inear служит вызов функции cuЬicbez ie r ( 0 , О , 1 , 1 ) .
Следовательно, они должны иметь согласованные анимацион
ные эффекты среди всех пользовательских агентов, хотя на та
кую согласованность не следует особенно полагаться.
Примеры:
hl { animat ion-timing-funct ion :
ease , eas e - i n , cubic-be z ier ( 0 . 1 3 , 0 . 4 2 , 0 . 67 , 0 . 7 5 ) }
р { animat ion- t iming-function : l i near ; )
backface -vi s ib i l i ty
Значения:
visiЫe 1 hidden
Г1111ва 4. С:nравочник свойств 1 07

visiЫe
Нет.
Описание:
Определяет, будет ли видна обратная сторона элемента,
если повернуть его в имитируемом трехмерном простран
стве лицевой стороной от наблюдателя. Если задано значение
hidden данного свойства, элемент будет, по существу, не виден
до тех пор, пока снова не будет повернут лицевой стороной
к наблюдателю.
Примеры:
d i v . card { backface-vi s i Ы l i t y : hidden ; )
span . cuЬes ide { backface-vi s iЫ l it y : v i s iЬ le ; )
background
Значения:
[ <bg-layer> , ] * < f i na l -bg-layer>
<bg-layer>
<bg-image> 1 1 <bg-posi t ion> [ / <bg- s i ze> ] ? 1 1 <bg-repeat>

1 1 <bgattachment ' > 1 1 < bg-box> { l , 2 )
< final-bg-layer>
<bg-image> 1 1 <bg-po s i t ion> [ / <bg- s i ze> ] ? 1 1 <bg-repeat>

1 1 <bgattachment ' > 1 1 < bg-box> { 1, 2 ) 1 1 <bg-color>

Ко всем элементам.
Нет.
Задание в процентах:
Допускается для значения <bg-po s i tion> (см. ниже опи
сание свойства background-pos i t ion) и обозначения обоих
измерений участка заднего плана элемента, а также измерений
исходного изображения.
Описание:
Определяет краткий способ выражения различных свойств
одного или более задних планов (или фонов) элемента в од
ном объявлении. Как и во всех остальных сокращенных фор
мах свойств, все допустимые значения (например, повторение,
расположение заднего плана и т.д.) устанавливаются в данном
свойстве по умолчанию, если они не заданы явно. Следова
тельно, оба следующих объявления обусловят одинаковый
внешний вид заднего плана:
backgrouпd : yel low ;
backgrouпd : yel low попе top l e ft repeat ;
Более того, эти значения по умолчанию могут отменять

предыдущие объявления, сделанные с помощью более кон
кретных свойств заднего плана. Например, в объявлениях
hl { backgrouпd-repeat : repeat-x ; }
h l , h2 { bac kgrouпd : ye l low url ( headЬack . gi f ) ; }
устанавливается по умолчанию значение repea t для повторе

ния заднего плана обоих элементов, hl и h2, отменяя тем са
мым объявленное ранее значение repeat-x.

Если объявлено несколько задних планов, то цвет будет
иметь только последний задний план. В тех случаях, когда изо
бражения нескольких задних планов перекрываются, они на
кладываются одно на друтое, причем первое изображение -
наверху, а последнее - внизу. Такой порядок совершенно про
тивоположен перекрытию при расположении изображений
в CSS, и поэтому он может показаться нелогичным.
Примеры:
body { ba c kground : white url (bg4 1 . gi f )
fixed center repeat-x ; )
р ( background :
url ( /pix/water . png ) center repeat - x ,
t o p left url ( /p ix/stone . png) # 5 55 ; )
pre { background : y e l l ow ; )
background-attachment
Значения:
<Ьg-attachment > [ , <bg-attachment> ] *
<bg-attachment>
scroll 1 fixed 1 local
scroll
Нет.
1 1О CSS. Карманный справочник, 4-е издание

Описание:
Определяет, следует ли п рокручивать изображения за
днего плана вместе с элементом при просмотре документа.
С помощью этого свойства можно создавать "выравниваемые"
задние планы. Подробнее об этом читайте в главе 9 упоминав
шегося ранее третьего издания книги CSS: Тhе Definitive Guide
(издательство O'Reilly).
П римеры:
body { background-attachmen t : scro l l , scro l l , f ixed; )
div . fixЬg { background-attachment : f ixed; )
П римечание:
В браузере Internet Explorer до версии 7 это свойство под
держивается только для элемента разметки body.
background- clip
Значения:
<bg-box> [ , <bg-box> ]*
<Ьg-Ьох>
Ьorder-box 1 padding-Ьox 1 content-box
border-box
Нет.
Гnава 4. Справочник свойств 111

Описание:
Определяет в блоке элемента границу, по которой обреза
ется задний план, т.е. дальше он не воспроизводится. Истори
чески сложилось так, что это было равнозначно установке по
умолчанию значения border-box, при котором задний план
доходит до внешнего края области границы. Это свойство до
пускает плотную обрезку блоков по внешнему краю области
внутреннего поля и по краю самого содержимого.
Примеры:
body { background- c l ip : content-box ; )
. ca l lout {
background-clip : content-box, border-box,
padding-bo x ; )
background-color
Значения:
<co lor>
transparent
Нет.
Вычисляемое зна4 ение:

Описание:
Определяет сплошной цвет заднего плана элемента. Этим
цветом заполняется блок, определяемый по умолчанию зна
чением свойства background-cl ip, а также области содержи
мого, внутреннего поля и границ элемента, доходя до внешнего

края границы элемента. На прозрачных участках границ (на
пример, пунктирных или штриховых) цвет заднего плана про
является сквозь эти участки в тех случаях, когда заполнение
цветом заднего плана простирается на область границы.
Примеры:
h4 { background-colo r : white ; )
р { background- colo r : rgba ( 5 0 % , 5 0% , 5 0 % , 0 . 3 3 ) ; )
pre { background- color : # F F9 ; }
background- image
Значения:
<bg - irnage> [ , <bg-irnage> ] *
<bg-i.magв>
<image> 1 none
none
Приме н яется:
Нет.
Абсолютный URI.
Описание:
Размещает одно или более изображений на заднем плане
элемента. В зависимости от значения свойства background
repeat изображение может бесконечно располагаться мозаи
кой по одной оси или вообще не повторяться. Первоначальное
Глава 4. Справочник свойств 113

(т.е. исходное) изображение заднего плана размещается в соот
ветствии со значением свойства backg round-pos i t ion.
Примеры:
body {
bac kground- image : url (bg 4 1 . g i f ) , url (bg4 3 . png ) ,
url (bg5 1 . jpg ) ; }
h2 ( ba c kground- image : url ( http : //www . p i x . org/dot s . png } ; )
background-origin
Значения:
<bg-box> [ , <bg-box> ] *
<bg-box>
Ьorder-Ьox 1 padding-box 1 content-box
padding-box
Нет.
Описание:
Определяет в блоке элемента границу, относительно кото
рой вычисляется расположение изображения заднего плана.
Исторически сложилось так, что это было равнозначно уста
новке по умолчанию значения padding-box. А это свойство
допускает разные контексты расположения. Следует, однако,

иметь в виду, что если значение свойства background-origin
позволяет изображению заднего плана простираться еще даль
ше, чем допускает значение свойства backgroundcl ip, то изо
бражение располагается по краю, а часть его обрезается, как
демонстрируется в следующем примере:
div#example { background-origin : border-box;
background- c l i p : content-box;
background-posi t ion : 1 0 0 % 1 0 0 % ; )
В данном примере изображение будет размещаться таким

образом, чтобы его правый нижний угол оказался вровень с
правым нижним углом внешнего края границы. Но видны бу
дут только те части изображения, которые приходятся на об
ласть содержимого.
Примеры:
htm l , body { background-origin : border-bo x ; )
hl { background-origin : content-box, padding-box ; )
background-po s i ti on
Значения:
<bg-po s i t ion> [ , <bg-po s i t ion> ] *
<bg-position>
[ [ top 1 Ьottom ] 1 [ <percentage> / < length> 1 left 1

center / right ] [ <percentage> 1 < length> 1 top 1 center
1 bottom ] ? 1 [ center 1 [ left 1 right ] [ <percentage> 1
<length> ] ? ] && [ center / [ top 1 Ьcttom ] [ <percentage>
<length> ] ? ] ]
0% 0%
Гпава 4. Справочник свойств 11S

Нет.
По соответствующей точке как на элементе, так и на исход
ном изображении.
Смещения по абсолютной длине, если объявлено значение
типа <length>, а иначе - значения, задаваемые в процентах.
Описание:
Определяет положение одного или более исходных изо
бражений задних планов, как задано в свойстве background
image. Это точка, с которой начнется повторение или мозаич
ное расположение любого изображения заднего плана. Значе
ния, задаваемые в процентах, определяют не только эту точку
внутри элемента, но и ту же самую точку в самом исходном
изображении. Благодаря этому изображение можно, например,
отцентровать, объявив его расположение равным 50% 50%.
Если используются значения, задаваемые в процентах или по
длине, то первое значение всегда обозначает расположение по
горизонтали, а второе - по вертикали. А если задается только
одно значение, то оно обозначает расположение по горизонта
ли, тогда как отсутствующее значение предполагается равным
center или 50%. Допускается указывать отрицательные значе
ния, при которых изображение может оказаться расположен
ным за пределами области содержимого элемента, и тогда оно
фактически не будет воспроизведено. На контекст, в котором
размещается исходное изображение, может оказывать влияние
значение свойства background-origin.
Примеры:
body { ba c kground-po s i tion : top center ; )
div# navbar { ba c kground-pos i t ion : r ight , 5 0 % 7 5 % , О 40рх ; )
pre { background-po s ition : l Opx 50 % ; )

background- repea t
Значения:
<bg-repeat- style> [ , <bg-repe a t - s tyle> ]*
<bg-repeat-style>
repeat-x 1 repeat-y [repeat 1 space 1 round 1 no-repeat ] { 1 , 2 ]
repeat
Нет.
Описание:
Определяет мозаичный рисунок расположения одного или
более изображений заднего плана. Повторение нач и нается
с исходного изображения, которое определяется значением
свойства background-image и размещается в соответствии
со значением свойства background-po s i t i on, а возможно, и
свойства background-origin. Если указаны ключевые сло
ва space и round, то изображение располагается мозаикой
столько раз, сколько оно помещается в области заднего плана
без обрезки, а затем первое и последнее изображения разме
щаются относительно краев соответствующих задних планов.
Различие этих ключевых слов заключается в том, что ключе
вое слово space обусловливает расположение перемежаю
щихся изображений с равномерными промежутками, тогда
как ключевое слово round их растягивание до взаимного
-
соприкосновения. Следует также иметь в виду, что значение

repeat-x равнозначно значениям repeat no-repeat, а зна
чение repeat-y - значениям no-repeat repeat.
Примеры:
body ( background-repeat : no-repeat ; }
h2 ( background-repeat : repeat - x , repeat-y , space ; }
ul { background-repeat : repeat - y , round space , repea t ; }
background- s i z e
Значения:
<bg- s ize> [ , <bg-s i z e > ] *
<bg-repeat-style>
[ <length> 1 <percentage> 1 auto ] { 1 , 2 ) 1 cover 1 contain
auto
Нет.
См. приведенное ниже описание.
Описание:
Определяет размеры одного или более изображений заднего
плана. Если указаны два значения данного свойства (например,
50рх 25%), то первое из них определяет размер изображения по
горизонтали, а второе - по вертикали. Исходное изображение
может быть деформировано таким образом, чтобы полностью
покрыть задний план по размерам 1 0 0 % 100%. С другой сторо
ны, значение cover обозначает масштабирование изображения
1 18 CSS; Карманный справочник, 4-е издание

с целью полностью покрыть задний план, даже если его часть
простирается за пределы области заднего плана, и тогда оно
обрезается. А значение contain обозначает масштабирование
исходного изображения таким образом, чтобы заполнить им
область заднего плана хотя бы по одному размеру.
Примеры:
body { background- s i ze : 1 0 0 % 9 0 % ; }
div. photo { background- s i ze : cover ; }
border
Значения:
< ' border-width ' > 1 1 < ' border-style ' > 11 <color>
Исходное зн ачение:
Нет.
Вычисляемое зна чение:

Описание:
Это сокращенная форма свойства, определяющая ширину,
цвет и стиль границ элемента. Несмотря на то что ни одно из
значений данного свойства фактически указывать не нужно,
следует все же иметь в виду, что если опустить стиль границы,
то обрамление элемента будет отсутствовать, поскольку стиль
границы по умолчанию выбирается равным none.
Примеры:
hl { borde r : 2рх dashed o l i ve ; }
a : link { border : Ыuе s o l i d lpx ; )
p . warning { borde r : douЫe 5рх red; }
Гnau 4. Справочник свойств 119

border-bottom
Значения:
< ' border-width ' > 1 1 < ' bo rde r-style ' > 11 <color>
Не определено для сокращенных форм свойств.
Нет.
Описание:
цвет и стиль нижней границы элемента. Если опустить стиль
границы, как и в свойстве border, то обрамление элемента бу
дет отсутствовать.
Примеры:
ul { border-bottom : O . Sin groove green ; )
a : act ive { border-bottom : purple 2рх dashed ; )
border-bo ttom- color

Значения:
<co lor>
Значение свойства color, задаваемое для элемента.

Насnедуется:
Нет.
Есл 11 ни одно из значений на объявлено, используется вы
числяемое значение свойства color, задава(!мое для аналогич
ного элемента, а иначе - такое же, как и объявляемое значение.
Описание :
Опр еделяет цвет видимых участков нижней границы эле
мента. Стиль этой границы должен отличаться от задаваемого
значением none или hidden, чтобы она стал.а видимой.
Пример ы:
ul { borcter-bot tom-color : green ; )
a : active { border-bottom-color : purple ; )
border-bottom- left- r�dius

Значения:
[ <length> 1 <percentage> ] [ < length> 1 <percentage> ]?
о
Нет.
По размерам блока границы элемента.

Описание:
Определяет радиус скрутления левого нижнего утла грани
цы элемента. Если заданы два значения данного свойства, то
первое из них обозначает горизонтальный радиус, а второе -
вертикальный радиус. Порядок создания формы скрутления
приведен ниже, в описании свойства border-radius.
Примеры:
hl { bo rder-bottom- left- radius : 1 0 % ; }
h2 { border-bottom- l e f t - radius : lem l Opx ; }
border-bottom-right- radius
Значения:
[ <length> 1 <percentage> ) [ <length> 1 <percentage> ) ?
о
Нет.
Описание:
Определяет радиус скрутления правого нижнего утла гра
ницы элемента. Если заданы два значения данного свойства, то
вертикальный радиус. Порядок создания формы скрутления
приведен ниже, в описании свойства border-radius .

Примеры:
hl { border-bottom- right-radius : 10% ; )
h2 { border-bottom- right-radius : lem l Opx; }
Ьorder -Ьo ttom- s tyle

Значения:
none 1 hidden dotted 1 dashed 1 solid 1 douЫe 1 qroove 1
ridqe 1 inset outset
none
Нет.
Описание:
Определяет стиль нижней границы элемента. Значение дан
ного свойства должно отличаться от none, чтобы эта граница
стала видимой.
Примеры:
ul { border-bottom-style : groove ; )
a : active { border-bottom- style : dashed ; }
border-bottom-width
Значения:
thin 1 medium 1 thick 1 <length>

mediwn
Нет.
Абсолютная длина. Нулевое значение (О), если задан стиль
границы none или hidden.
Описание:
Определяет ширину нижней границы элемента, что возы
меет действие только в том случае, если задан любой стиль
границы, кроме none. Если же задан стиль границы none, то
ее ширина, по существу, становится равной нулю (О). Отрица
тельные значения длины в данном свойстве не допускаются.
Примеры:
ul { border-bottom-widt h : O . S i n ; }
a : active { border-bottom-width : 2рх ; }
border- collapse
Значения:
collapse 1 separate
separate
К элементам со значением taЬle или inline-taЬle свой
ства display.

Да.
Описание:
Определяет модель разметки, применяемую для расположе
ния в таблице границ вокруг ячеек, строк и т.д. И хотя данное
свойство применяется только к таблицам, оно наследуется все
ми элементами в таблице, в которой оно, по существу, и при
меняется.
Пример:
tаЫе { border-co l lapse : sepa rate; border-spacing : Зрх 5рх; }
В спецификации CSS2.0 по умолчанию устанавливалось
значение collapse данного свойства.
border- color
Значения:
<color> { l , 4 }
Нет.
Глава 4. Справочник свойств 1 25

Описание:
Это сокращенная форма свойства, задающая цвет видимых
участков общей границы элемента или разный цвет границы
по каждой из четырех сторон. Не следует, однако, забывать,
что стиль границы должен отличаться от none или hidden,
чтобы она стала видимой.
Примеры:
h l { border-color : purpl e ; }
a : v i s i ted { border-color : maroon ; )
border- image
Значения:
< ' border-image-source ' > 1 1 < ' border- image- s l i ce ' >
[ / < ' borderimage-width ' > ? [ / < ' border- image-outset ' > ] ? ] ? 11
< ' border- imagerepeat ' >
Ко всем элементам, кроме табличных элементов, в которых
свойство border-col lapse принимает значение collapse.
Нет.
Описание:
Это сокращенная форма свойства, определяющая источ
ник, образец нарезки, ширину и повторение границы, фор
мируемой на основе изображения. Синтаксис этого свойства
не совсем обычен по сравнению с остальной частью CSS и

поэтому требует дополнительного времени на изучение. На
пример, три из пяти возможных значений данного свойства
разделяются знаком косой черты и должны быть перечислены
в определенном порядке.
Следует, однако, иметь в виду, что организовать повторение
простого изображения (например, звезды) по краям элемента
практически невозможно. Чтобы добиться такого эффекта,
придется составить одно изображение из девяти копий того
изображения, которое требуется повторить, в виде сетки З х З .
Возможно, также придется задать достаточно большим значе
ние border-width (но не значение border-image-width), что
бы изображение было видимым, хотя это зависит от значения
border-image-outset.
Примеры:
div . starry { border- image : url ( stargrid . png) 5рх repeat ; )
as ide {
border- image : url ( a s ides . png) 1 0 0 50 1 5 0 / 8 З 13 /
2 stretch round ; )
На момент написания данной книги поддержка свойства
border- image в браузерах была неполной и несогласован
ной, тогда как ни одно из связанных с ним свойств (например,
border-image-source) вообще не поддерживалось. Тем не ме
нее описание этих свойств было включено в книгу, поскольку
в дальнейшем предполагалось согласовать их поддержку в бра
узерах.
Ьorder- image- ou tset

Значения:
[ <length> 1 <nwnЬer> ] ( 1 , 4 )
о

Ко всем элеме.fтам, кроме табличных элементов, в которых
свойство border-col l apse принимает значение collapse.
Нет.
Вычисляемое знач ение:

Такое же, как и объявляемое значение, тем не менее ч итайте
приведенное ниже описание.
Описание:
Определяет расстояние, на которое изображение границы
может простираться за пределы области границы элемента.
Значения этого свойства определяют расстояние от верхне
го, правого, нижнего и левого краев изображения границы
(именно в таком порядке) . Числовые значения вычисляются
относительно внутренней системы координат изображения.
Следовательно, для растрового изображения числовое значе
ние 7 означает расстояние в семь пикселей. А изображения в
других форматах, например SVG, могут иметь другую систему
координат. Отрицательные значения в данном свойстве не до
пускаются.
Примеры:
as ide { border- image-out set : 2 ; }
div#pow { border- image-outset : 1 0 1 7 13 5 ; )
border- image-outset в браузерах отсутствовала. Тем не
менее его описание включено в эту книгу, поскольк у свой
ство border- image, охватывающее свойство border- image
outset, уже поддерживалось в браузерах, а в даль!iейшем
предполагалась также поддержка свойства border- image
outset.
1 28 CSS. Карм�нный справочник, 4-е изАание

border- image- repeat
Значения:
[ stretch 1 repeat 1 round ) {1,2}
stretch
свойство border-col l apse принимает значение collapse.
Нет.
Описание:
Определяет образец повторения (или его отсутствие) по сто
ронам изображения границы. В частности, значение stretch
обусловливает растягивание одной копии изображения по
всему участку (верхней, правой, нижней или левой стороне)
границы. Значение repeat обусловливает мозаичное распо
ложение изображения границы аналогично изображению за
днего плана, хотя изображения границ могут располагаться
мозаикой только по одной оси. А значение round обусловли
вает мозаичное расположение изображения границы столько
раз, сколько оно может уместиться без обрезки, после чего все
расположенные мозаикой изображения масштабируются, если
нужно, чтобы они точно поместились на участке границы.
Примеры:
div . starry { borde r - irnage-repeat : repeat ; }
aside { border-irnage-repeat : s t retch round ; )
Гnава 4. Справочнмк свойств 1 29

borde r- image-repeat в браузерах отсутствовала. Тем не
менее его описание включено в эту книгу, поскольку свой
ство border- image, охватывающее свойство border- image
repea t, уже поддерживалось в браузерах, а в дальнейшем
предполагалась также поддержка свойства border- image
repeat.
border- image- s l i ce
Значения:
[ <numЬer> 1 <percentage> ] { l , 4 ) && f i l l ?
100%
свойство borde r-col lapse принимает значение collapse.
Нет.
По размерам изображения границы.
Описание:
Определяет "расстояния нарезки", т.е. смещения от верх
него, правого, нижнего и левого краев изображения границы.
Совместно эти расстояния делят изображение на девять обла
стей, которые соответствуют восьми участкам (четырем углам
и четырем сторонам) границы элемента и области заднего пла
на элемента.
1 30 CSS. Карманный справочник, 4-е ИЗАаНИе

В тех случаях, когда две противоположные области нарез
ки объединяются и превышают общий для них размер, они
обе становятся совершенно прозрачными. Так, если значение
смещения нарезки по верхнему краю составляет 10, а значе
ние смещения нарезки по нижнему краю 20, но исходное
-
изображение оказывается высотой лишь 25 пикселей, то обе

нарезки превышают высоту изображения. Следовательно,
верхний и нижний участки границы окажутся совершенно
прозрачными. То же самое относится и к нарезкам по левому и
правому краям границы. Но углы изображения не становятся
прозрачными, даже если их нарезки перекрываются в исход
ном изображении.
Примеры:
div . starry { border- image - s l i c e : 5рх ; }
aside { border-image - s l i ce : 1 0 0 50 1 5 0 ; }
border- image- s l ice в браузерах отсутствовала. Тем не ме
нее его описание включено в эту книгу, поскольку свойство
borde r- image, охватывающее свойство border-image - s lice,
уже поддерживалось в браузерах, а в дальнейшем предполага
лась также поддержка свойства border- image-s l i ce.
border- image- source

Значения:
none 1 <uri >
none
свойство border-collapse принимает значение collapзe.

Нет.
По размерам изображения границы.
Описание:
Предоставляет местоположение изображения, применяе
мого в качестве изображения границы элемента.
Примеры:
div . starry { border- image-source : url ( stargrid . png) ; )
as ide { border-image- source : url (as ides . png) ; )
borde r- image-source в браузерах отсутствовала. Тем не
менее его описание включено в эту книгу, поскольку свой
ство border-image, охватывающее свойство borde r- image
s ou rce, уже поддерживалось в браузерах, а в дальнейшем
предполагалась также поддержка свойства border-image
source.
border- image-width
Значения:
( <length> 1 <percentage> 1 <numЬer> 1 auto ] {1,4)
1
свойство border-collapse принимает значение collapse.

Нет.
По размерам области изображения границы.
Такое же, как и объявляемое значение, тем не менее читайте
приведенное ниже описание.
Опи сани е:
Определяет ширину изображения границы по каждой из
его четырех сторон. Нарезки изображения границы, отличаю
щиеся по ширине от самого изображения границы, масштаби
руются, чтобы вписаться в пределы границы, что может ловли -
ять на порядок их повторения. Так, если правый край изобра
жения границы составляет 10 пикселей в ширину, а ширина
изображения границы объявлена как border- image-width :
Зрх ; , то изображения границы по правому краю будут умень
шены до трех пикселей в ширину.
Следует, однако, иметь в виду, что свойство border-image
width отличается от свойства border-width тем, что ширина
изображения границы может быть иной, чем ширина обла
сти границы. В тех случаях, когда изображение оказывается
шире или выше области границы, оно обрезается по умолча
нию, хотя этому может воспрепятствовать установка свойства
border- image-outset. А если изображение оказывается уже
или короче области границы, его масштаб не увеличивается.
Примеры:
as ide { border-irnage-width : 8 3 1 3 ; }
div#pow { border-image-width : 2 5рх 3 5 ; }
Примечание :
border- image-width в браузерах отсутствовала. Тем не ме
нее его описание включено в эту книгу, поскольку свойство
Гnава 4. Справочник свойав 133

border-image, охватывающее свойство border- image-width,
уже поддерживалось в браузерах, а в дальнейшем предполага
лась также поддержка свойства border- image-width.
border - left
Значения:
< ' border-width ' > 11 < ' border-style ' > 11 <color>
Нет.
Описание:
цвет и стиль левой границы элемента. Если опустить стиль
Примеры:
р { border - le ft : Зеm solid gray; )
pre { border-le f t : douЫe Ы а с k 4рх ; )
border - left- color

Значения:
<color>

Нет.
Если ни одно из значений не объявлено, используется вы
числяемое значение свойства color, задаваемое для аналогич
Описание:
Определяет цвет видимых участков левой границы элемен
та. Стиль этой границы должен отличаться от задаваемого зна
чением none или hidden, чтобы она стала видимой.
Примеры:
р ( borde r - l e ft-color : gray; }
pre ( border- left-colo r : Ыасk ; }
border- left- s tyle

Значения:
none 1 hidden dotted 1 dAshed 1 solid 1 douЬle 1 qroove 1
none
Нет.

Описание:
Определяет стиль левой границы элемента. Значение дан -
Примеры:
р { border - le ft - s t yle : s o l i d ; )
pre { border- l e f t - style : douЬ le ; )
border- left-width
Значения:
mediwn
Нет.
Описание:
Определяет ширину левой границы элемента, что возымеет
действие только в том случае, если задан любой стиль грани
цы, кроме none. Если же задан стиль границы none, то ее ши
рина, по существу, становится равной нулю (О). Отрицатель
ные значения длины в данном свойстве не допускаются.

Примеры:
р { border- left-widt h : Зеm; }
pre { border-left-width : 4рх ; }
border- radius
Значения:
[ <length> 1 <percentage> ] { 1 , 4 } [ / [ <length> 1
<percentage> ] { 1 , 4 }
Исходн ое значение:
о
свойство border-co l l apse принимает значение collapse.
Нет.
По размерам блока границы элемента (см. приведенное
ниже оrrисание) .
Вычисnяемое значение:
Описание:
Это сокращенная форма свойства, определяющая радиус
скругления правого нижнего угла границы элемента. Конкрет
ные углы объявляются в нем по высоте и ширине. Рассмотрим
в качестве примера следующее объявление:
. callout { border-radius : lOpx ; }
Каждый угол элемента с выноской, определяемой селек

тором t<ласса в этом объявлении, будет скруглен на 10 пик
селей п о ширине, если отсчитывать от начала скругления до
Гnава 4. Справочник свойав 1 37

внешнего края элемента, и точно так же по высоте. Это все
равно как если бы по углам элемента были нарисованы окруж
ности радиусом 10 пикселей, т.е. диаметром 2 0 пикселей, а его
граница была затем изогнута по краям этих окружностей.
Следует заметить, что если при таком синтаксисе задаются
два значения, то первое из них относится к левому верхнему и
правому нижнему углам, а второе - к правому верхнему и ле
вому нижнему углам. Чтобы создать овальное скругление, за
дав одно значение для горизонтального радиуса каждого угла,
а другое значение для вертикального радиуса, следует разде
лить эти значения знаком косой черты, как показано ниже:
. ca l lout { b o rder-radius : l Opx / 2 0рх ; }
В итоге все четыре угла будут скруглены на 10 пикселей по

горизонтали и на 2 0 пикселей по вертикали. А задать скругле
ние каждого из четырех углов по отдельности можно следую
щим образом:
. ca l lout { border-radius : l Opx 2 0рх З Орх 40рх / l em 2em Зеm 4em; )
И это равнозначно следующему объявлению:

. cal lout { border-top- left- radius : l Opx lern;
border-top - r ight-radius : 2 0рх 2ern;
border-bottorn- right- radius : З О рх Зеm;
border-bot torn- l e ft - radius : 4 0рх 4ern; )
Если задать меньше четырех значений, то указанные значе

ния будут повторяться в известном (для отступов, внутренних
полей и т.д.) порядке, но с некоторым смещением. Порядок
следования значений свойств для скругления углов должен
быть таким: левый верхний, правый верхний, правый нижний,
левый нижний угол. В противном случае образец повторения
останется тем же самым, т.е. значение lem будет аналогично
последовательности значений lem lem lem lem, а значения lem
2em последовательности значений lem 2em lem 2em и т.д.
-
Таким образом, значения, указываемые по разные стороны от

знака косой черты, могут быть разными. Так, оба следующие
объявления равнозначны:

. callout { border-radius : 2 ет Зет 4ет / 5 % ; }
. callout { border-radius : 2ет Зет 4 ет Зет / 5 % 5 % 5% 5 % ; }
Если значения данного свойства указываются в процен

тах, то они вычисляются относительно размера блока границы
элемента, определяемого внешними краями области границы
элемента, по соответствующей оси. Следовательно, в приве
денных выше объявлениях значения 5% вычисляются как со
ставляющие 5% от высоты блока границы элемента, посколь
ку значения, указанные после знака косой черты, определяют
вертикальные радиусы скругления углов. А любые значения,
указываемые в процентах до знака косой черты, вычисляются
в процентах от ширины блока границы элемента.
Примеры:
a [ hre f ] { border-radius : О . 5ет 5 0 % ; }
. callout {
border-radius : l Opx 20рх З Орх 4 0рх /
lет 2ет Зет 4ет; }
border-right
Значения:
< ' border-width ' > 11 < ' border-style ' > 11 <color>
Нет.
Гnава 4. Сnравочник свойств 1 39

Описание:
цвет и стиль правой границы элемента. Если опустить стиль
Примеры:
img { borde r - r ight : ЗОрх dotted Ыuе ; }
hЗ { border-r ight : cyan lem inset ; }
border - right- color

Значения:
<co lor>
Нет.
Если ни одно из значений на объявлено, используется вы
Описание:
Определяет цвет видимых участков правой границы эле
значением none или hidden, чтобы она стала видимой.
Примеры:
img { border-right-co l o r : Ы uе ; }
hЗ { border-right-colo r : cyan ; }

border- right- s tyle
Значения:
none 1 hidden dotted 1 dashed 1 solid 1 douЫe 1 groove 1
ridge 1 inset outset
none
Нет.
Описание:
Определяет стиль правой границы элемента. Значение дан
Примеры:
img { border-right - s t yle : dotted ; }
hЗ { border-right - s tyle : inset ; }
border-right-width
Значения:
medium

Нет.
Описание:
Определяет ширину правой границы элемента, что возы
ее ширина, по существу, становится равной нулю (О). Отри
цательные значения длины в данном свойстве не допускаются.
Примеры:
img ( borde r - r i ght-widt h : ЗОрх ; }
hЗ { borde r-right-widt h : lem; }
border- spacing
Значения:
<length> <length>?
о
К элементам со значением tаЫе или inline-taЫe свой
ства display.
Насn едуется:
Да.
Две абсолютные длины.

Описание:
Определяет расстояние между границами ячеек таблицы в
модели разметки разделяемых границ таблицы. Первое из двух
значений длины обозначает разделение по горизонтали, а вто
рое - по вертикали. Это свойство принимается во внимание
лишь в том случае, если задано значение separate свойства
border-col lapse, а иначе оно игнорируется. И хотя данное
свойство применяется только к таблицам, оно наследуется все
ми элементами в таблице, в которой оно, по существу, и при
меняется.
Примеры:
tаЫе { border-co l l aps e : separat e ; border-spacing : О ; )
tаЫе { border-co l lapse : separat e ;
border-spac ing : З р х 5рх ; )
border- s tyle
Значения:
[ none 1 hidden / dotted 1 dashed / solid / douЬle / qroove 1
ridqe 1 inset 1 outset ) { 1 , 4 )
Нет.
Описание:
Это сокращенная форма свойства, определяющая стили об
щей границы элемента или каждой его стороны в отдельности.

Значение данного свойства для любой границы должно от
личаться от none, чтобы эта граница стала видимой. Следу
ет, однако, иметь в виду, что если установить значение none
свойства border- style, что делается по умолчанию, то любое
значение свойства border-width будет проигнорировано, а
ширина границы станет равной нулю (О). Любое нерасnознан
ное значение из списка заданных значений должно быть по
новому интерпретировано как solid.
Примеры:
hl { border- style : s o l id ; }
img { border-style : inset ; }
border- top
Значения :
< ' border-width ' > 1 1 < ' borde r - s t yle ' > 1 1 <co lor>
Нет.
Вычисляемое зна� ение:

Описание:
Это сокращен �ая форма свойства, определяющая �uирину,
цвет и стиль верхней границы элемента. Если опустить стиль

Примеры:
ul { border- top : 0 . 5in s o l i d Ы а сk ; )
hl { border-top : dashed lpx gray ; )
Ьorder - top- color

Значения:
<color>
Нет.
Если ни одно из значений на объявлено, используется вы
Описание:
Определяет цвет видимых участков верхней границы эле
значением none или hidden, чтобы она стала видимой.
Примеры:
ul { border-top-colo r : Ыасk; )
hl { border-top-co lor : gray; )
Ьorder- top - left- radius

Значения:
[ <length> 1 <percentage> ] [ < length> 1 <percentage> ] ?

о
Нет.
Описание:
Определяет радиус скругления левого верхнего угла грани
цы элемента. Если заданы два значения данного свойства, то
вертикальный радиус. Порядок создания формы скругления
приведен выше, в описании свойства border-radius.
Примеры:
hl { border-top - l e f t -radius : 1 0% ; }
h2 { border-top - l e f t -radius : lem 1 0 рх ; }
border- top- right-radius

Значения:
[ <length> 1 <percentage> ] [ < length> 1 <percentage> ] ?
о

Нет.
Описание:
Определяет радиус скругления правого верхнего угла гра
ницы элемента. Если заданы два значения данного свойства, то
вертикальный радиус. Порядок создания формы скругления
приведен выше, в описании свойства border-radius.
Примеры:
h l { border-top-right- radius : 1 0 % ; )
h2 ( border-top-right-radius : lem l Opx ; )
border - top - s tyle

Значения:
none 1 hidden 1 dotted 1 dashed 1 solid 1 douЫe 1 qroove 1
ridqe 1 inset 1 outset
none
Нет.

Описание:
Определяет стиль верхней границы элемента. Значение
данного свойства должно отличаться от none, чтобы эта гра
ница стала видимой.
Примеры:
ul { border-top-style : s o l id ; )
hl { border-top-style : dashed ; )
border- top -width

Значения:
thin 1 medium 1 thiclt 1 < l ength>
mediwn
Нет.
Описание:
Определяет ширину верхней границы элемента, что возы
ее ширина, по существу, становится равной нулю (О). Отрица
тельные значения длины в данном свойстве не допускаются.
Примеры:
ul { bo rder-top-widt h : 0 . 5 i n ; )
hl { border- top-widt h : lpx; }

border -width
Значения:
[ thin 1 medium 1 thick 1 < length> ] { 1 , 4 )
Нет.
Описание:
Это сокращенная форма свойства, определяющая ширину
общей границы элемента или каждой его стороны в отдельно
сти. Ширина заданной границы вступит в действие только в
том случае, если задан любой стиль границы, кроме none. Если
же задан стиль границы none, то ее ширина, по существу, ста
новится равной нулю (О). Отрицательные значения в данном
свойстве не допускаются.
Примеры:
hl { border-widt h : 2 е х ; }
img { border-width : 5рх thick thin lem; }
bottom
Значения:
<length> 1 <percentage> 1 auto
auto

К размещаемым элементам, т.е. к таким элементам, для ко
торых задано значение свойства posi t i on, отличающееся от
static.
Нет.
По высоте содержащего блока.
Для относительно размещаемых элементов читайте приве
денное ниже описание; для статически размещаемых элемен
тов (т.е. таких элементов, для которых задано значение static
свойства pos i tion) вычисляемое значение равно auto; для
значений длины оно равно соответствующей абсолютной дли
не; для значений в процентах - объявляемому значению, а
иначе au to.
-
Описание:
Определяет смещение внешнего края нижнего отступа раз
мещаемого элемента относительно нижнего края содержащего
его блока. Если для относительно размещаемых элементов за
дано значение auto обоих свойств, bottom и top, то их вычис
ляемые значения равны нулю (О). Если же только одно из этих
свойств принимает значение auto, то его вычисляемое значе
ние становится отрицательным значением другого свойства.
А если ни одно из этих свойств не принимает значение auto,
то вычисляемое значение свойства bot tom становится отрица
тельным значением свойства top.
Примеры:
div# footer { po s i t ion : fixed; bottorn : О ; )
sup { po s i t ion : relative; bottorn : O . Sern;
vert ical-al ign : bas e l i ne ; }

box-al ign
Значения:
stretch 1 start 1 end 1 cent.er 1 baseline
stretch
Ко всем элементам со значением Ьох или inline-box
свойства display.
Нет.
Описание :
Определяет порядок размещения гибких блоков по оси,
перпендикулярной оси ориентации (см. ниже описание свой
ства box-orient). Устанавливаемое по умолчанию значение
stretch этого свойства означает, что блоки, порожденные
данным блоком (т.е. его потомки), растягиваются по его вы
соте, если задано значение horizontal его свойства box
orient, или же по его ширине, если задано значение vertical
того же свойства. Значения start и end данного свойства обо
значают верхние и нижние края горизонтальных блоков, и то
же самое, вероятнее всего, произойдет с их левыми и правыми
краями в языках с правосторонним письмом, хотя такое по
ведение не определено. Если же задано значение center
данного свойства, то центр гибких блоков выравнивается по
центральной линии оси ориентации.
Примеры:
div# layout { box-align : s tretch ; }
. i cicle { box-a l i gn : s ta rt ; }
Гnава 4. Справочник свойств 1 S1

Примечание
Это свойство определено в спецификации модуля FlexiЬle
Вох 2009 года. В новой версии этой спецификации предполага
ется сделать данное свойство не рекомендованным к примене
нию, после чего поддержка в браузерах будет, вероятнее всего,
прекращена.
box- decoration -break

Значения:
slice 1 clone
clone
Нет.
Описание:
Определяет, применяются ли во�производимые многими
частями элементы оформления блока, включая задний план,
внутреннее поле, границы, скругленные углы, изображение за
днего плана и тень от блока, к каждой части или ко всему блоку
в целом, прежде чем разделять его.
Наиболее характерным примером применения данного
свойства служит внутристрочной элемент, охватывающий
один или более разрывов строк. При стандартном поведении,
когда задано значение slice данного свойства, отдельные ча
сти внутристрочного элемента воспроизводятся так, как буд
то единый элемент сначала размещен в одной строке, а затем

разбит по каждому разрыву строки. А еСЛf1 задано значение
clone данного свойства, то каждая часть элемента оформляет
ся так, как будто отдельные элементы разделяют одни и те же
общие стили. Свойство box-decoration-break применяется
также I< структурным блокам, разделяемым по столбцам или
страницам.
Пример ы:
span { box-decoration-bre a k : clone ; }
а { box-decoration-bre a k : s l ice ; )
box- direction
Значения:
normal 1 reverse
nortnal
Ко :всем элементам со значением Ьох или inline-box
свойства display.
Нет.
Вычис11яемое значение:
Описани е:
Опр еделяет направление, в котором размещаются потомки
блока. Если задано значение reverse данного свойства, по
томки блока размещаются справа налево в горизонтальном
блоке и снизу вверх в вертикальном блоке.
Пример :
*tower { box-direct ion : revers e ; )

box- flex
Значения:
<nшnЬer>
о
К потомкам элемента из обычного потока со значением Ьох
или inline-box свойства di splay.
Нет.
Описание:
Определяет "гибкость" элемента, являющегося потомком
блока. Значения свойства box- flex всех гибких блоков в груп
пе сначала складываются, а затем каждое из них делится на
общую сумму, чтобы получить степень гибкости элемента. Так,
если все три гибких блока в группе имеют значение 1 данно
го свойства, то степень гибкости каждого из этих блоков со
ставит О , 33. Если же значение свойства box- flex одного из
блоков изменится на 2, то степень его гибкости составит О , 5,
а двух других блоков О , 2 5 . А нулевое значение (О) данного
-

свойства, устанавливаемое по умолчанию, обозначает, что блок
является негибким.
После того как гибкие блоки будут размещены обычным
образом, любое лишнее пространство, оставшееся в родитель
ском блоке, распределяется по гибким блокам в соответствии
со степенью его гибкости. Так, если в предыдущем примере
останется 100 пикселей лишнего пространства, то при значе
нии 2 свойства flex-box один элемент будет расширен на 50
пикселей, а два других - на 2 5 пикселей каждый. А если гиб
кие блоки переполняют родительский блок, их размеры про
порционально сокращаются.
Пример:
#nav l i { box- f l ex : 1; )
box - l ines
Значения:
single 1 multiple
sin9le
К элементам со значением Ьох или inline-box свойства
display.
Нет.

Описание:
Определяет порядок размещения гибких блоков, если они
оказываются слишком широкими в горизонтальном блоке (см.
ниже описание свойства box-orient). Если задано значение
mul tiple данного свойства, гибкие блоки будут размещены
в стольких "строках': сколько потребуется для отображения
всех этих блоков. И это напоминает плавающую разметку, ког
да свободно перемещаемые (т.е. плавающие) блоки не могут
располагаться рядом, хотя механизм в данном случае несколь
ко иной.
Пример:
#nav li ( box- f lex : 1; )
Вох 2009 года. В новой версии этой спецификации предпола
гается сделать данное свойство не рекомендованным к приме
нению, после чего поддержка в браузерах будет, вероятнее все
го, прекращена.
box- ordina l - group

Значения:
<integer>
1
К потомкам элемента из обычного потока со значением Ьох
или inline-box свойства display.

Нет.
Описание:
Определяет порядковую группу, к которой относятся гибкие
блоки. Гибким блокам можно присваивать произвольные номе
ра групп. При разметке блоков группы располагаются по поряд
ку номеров, причем гибкие блоки в каждой группе размещаются
в их исходном порядке и в соответствии со значением свойства
box-di rect ion. Это дает возможность располагать гибкие бло
ки совершенно независимо от их исходного порядка.
Примеры:
. st i cky { box-ordinal-group : 1 ; )
. footer { box-ordinal-group : 1 3 ; )
Примечание
Вох 2009 года. В новой версии этой спецификации предпола
гается сделать данное свойство не рекомендованным к упо
треблению, после чего поддержка в браузерах будет, вероятнее
всего, прекращена.
box- orient
Значения:
horizontal 1 vertical 1 inline-axis 1 Ыock-axis
inline-axis
display.

Нет.
Описание:
О пределяет направление, в котором гибкие блоки раз
мещаются в их родительском блоке. Если задано значение
horizontal данного свойства, гибкие блоки располагаются
слева направо, а если задано значение vertical, то сверху
вниз. Установка значений inline-axis и Ыock-axis имеет
последствия, зависящие от конкретного языка. Так, в языке
с правосторонним письмом, например в английском, эти зна
чения равнозначны значениям horizontal и vertical.
Примеры:
#nav { box-orient : hori zonta l ; )
# s idebar { box-orient : ve rt ical ; )
box-pack
Значения:
start 1 end 1 center 1 justify
start

display.
Нет.
Описание:
Определяет порядок размещения гибких блоков, если их
суммарные размеры по оси ориентации (см. приведенное
выше описание свойства box-orient) оказываются меньше
общей величины доступного пространства.
Примеры :
#ga l lery { box-pack : center ; )
. suЬcolurnns { box-pack : l e ft ; )
box-shadow
Значения:
none 1 <shadow> [ , <shadow> ] *
<shadow>
inse t? & & [ < l ength > { 2 , 4 } & & <color>? ]

none
Нет.
Вычисляемое зна 4 ение:

Такое же, как и объявляемое значение, но с абсолютными
длинами и вычисляемыми цветами.
Описание:
Определяет одн у или более несколько, отбрасыnаемых
формой блока элемента. Данное свойство позволяет опреде
лить внешнюю (т.е. падающую) или внутреннюю тень, причем
последнюю с помощью ключевого слова inset. Если же это
ключевое слово не указано, тень оказывается внешней.
Четыре значения длины моrут быть объявлены для данно
го свойства в следующем порядке: смещение по горизонтали,
смещение по вертикали, расстояние размытия и расстояние
распространения тени. При положительных значениях обоих
видов смещения тень отбрасывается вниз и вправо, а при от
рицательных значениях - вверх и влево. При положительных
значениях расстояния распространения тени ее размеры уве
личиваются, а при отрицательных значениях - уменьwаются.
И наконец расстояние размытия не может иметь отрицатель
ных значений.
Следует, однако, иметь в виду, что тени ограничиваются
краями границ элемента. Следовательно, внешняя тень вос
производится только до внешнего края границы. На полупро
зрачном или полностью прозрачном фоне элемента внешняя
тень от него не проявляется. А внутренняя тень видна только
на самом краю границы и вообще не выходит за его пределы.

Примеры:
hl { box- shadow : 5рх l Opx gray ; }
tаЫе th {
box-shadow : inset 0 . 5em 0 . 7 5em 5рх -2рх
rgba ( 2 5 5, О , О, О . 5 ) ; }
box- s i z ing
Значения:
content-box 1 Ьorder-Ьox
content-box
Ко всем элементам со свойствами width и he ight.
Нет.
Описание:
Определяет, должны ли свойства height и width элемен
та задавать размеры (высоту и ширину) блока содержимого
(исторически сложившееся поведение) или блока границы.
Если речь идет о блоке границы, то значение свойства width
определяет расстояние от левого внешнего края границы до
ее правого внешнего края. Аналогично свойство height опре
деляет расстояние от верхнего внешнего края границы до ее
нижнего внешнего края. Ширина любого внутреннего поля
или границы "вычитается" из этих размеров, а не "прибавля
ется" к ним согласно исторически сложившемуся поведению.
Так, если имеется объявление
Гпава 4. Справочн11к свойств 1 б1

body { box- s i z ing : border-box; width : 8 8 0рх;
padding : О 2 0рх ; }
то ширина области содержимого составит 8 4 0 пикселей (880

- 20 - 20).
Пример:
body { box-s i zing : border-box ; }
caption - s ide
Значения:
top 1 bottom
top
К элементам со значением taЬle-caption свойства di splay.
Нет.
Описание:
Определяет расположение заголовка таблицы относитель
но блока таблицы. Заголовок воспроизводится так, как будто
он является блочным элементом, расположенным непосред
ственно перед таблицей или после нее.
Пример:
caption { capt ion-s ide : top ; }
Значения left и right данного свойства появились в спец
ификации CSS2, но были исключены из спецификации CSS2. l
1 62 CSS. Карманный справочник, 4-е 11здан11е

из-за отсутствия их широкой поддержки (хотя в некоторых
версиях браузера Firefox значения l e ft и right данного свой
ства все еще поддерживаются).
clear
Значения:
left 1 right 1 both 1 none
none
К блочным элементам.
Нет.
Описание:
Определяет, на какой именно стороне (или сторонах) эле
мента нельзя располагать свободно перемещаемый элемент.
При обычной разметке очищаемого элемента свободно пере
мещаемый элемент появляется у очищенной стороны, а очи
щаемый элемент смещается вниз до тех пор, пока не располо
жится ниже свободно перемещаемого элемента (т.е. очистит
ся). В спецификациях CSSl и CSS2 это делалось автоматически
благодаря увеличению верхнего отступа очищаемого элемента.
А в спецификации CSS2. l добавлялся просвет над верхним от
ступом элемента, тогда как сам отступ не изменялся. Но в лю
бом случае верхний внешний край границы элемента оказыва
ется сразу же под внешним краем нижнего отступа свободно
перемещаемого элемента на объявленной стороне.

Примеры:
h l { clear : both; )
р + hЗ { clear : right ; )
clip
Значения:
rec t ( t op, righ t , bo t t om, left ) 1 auto
auto
К абсолютно располагаемым элементам (в спецификации
CSS2 свойство clip применяется к блочным и заменяемым
элементам).
Нет.
Вычисляемая длина четырех сторон, представляющих края
отсекающего прямоугольника, а иначе - такое же, как и объ
являемое значение.
Описание:
Определяет отсекающий прямоугольник, внутри которого
отображается содержимое абсолютно располагаемого элемента.
А содержимое за пределами области отсечения интерпретиру
ется в соответствии со значением свойства ove rf low. Область
отсечения может быть меньше или больше области содержимо
го элемента. В последнем случае она определяется отрицатель
ными значениями длины сторон отсекающего прямоугольника.
В современных браузерах область отсечения определя
ется значением функции rect ( ) , обозначающим смещение
верхнего, правого, нижнего и левого краев областей отсечения

относительно левого верхнего угла элемента. Следовательно,
значение функции rect ( 5рх , 1 Орх , 4 Орх , 5рх ) обозначает
расположение верхнего края области отсечения на 5 пикселей
ниже верхнего края элемента, правого края области отсече
ния - на 10 пикселей правее левого края элемента, нижнего
края области отсечения - на 40 пикселей ниже верхнего края
элемента, а левого края области отсечения - на 5 пикселей
правее левого края элемента.
Примеры:
div . s idebar { overflow : scro l l ; clip : О О Sem l Oem; )
img . tiny { overflow : hidden ; c l ip : Spx Spx 2 0рх 2 0 рх ; )
color
Значения:
<color>
Зависит от конкретного пользовательского агента.
Да.
Описание:
Определяет цвет переднего плана элемента, что в НТМL
разметке означает текст элемента. Свойство color не оказы
вает влияния на растровые изображения. Оно задает также
цвет любых границ элемента, если только оно не замещается

свойством border-color или одним из свойств цвета краев
границы (border-top-color и т.д.).
Если цвет обозначается ключевыми словами (например,
navy) или шестнадцатеричными значениями RGB (например,
#008800 или #080), то вычисляемое значение данного свой
ства равно эквивалентному значению функции rgb ( ) . Если
же задано значение transparent, то вычисляемое значение
данного свойства равно значению функции rgba ( О , О , О , О ) .
А если задано значение currentColor, то вычисляемое значе
ние данного свойства равно inheri t. Для всех остальных зна
чений цвета вычисляемое значение данного свойства остается
таким же, как и объявляемое.
Примеры:
s t rong ( colo r : rgb ( 2 5 5 , 1 2 8 , 1 2 8 ) ; )
hЗ ( color : navy ; )
p . warning ( colo r : # f f O O O O ; )
pre . pas toral { color : rgba ( 0 % , 1 0 0 % , 0 % , 0 . 33 3 3 4 ) ; )
column- count
Значения:
<integer> 1 auto
auto
К незаменяемым блочным элементам, кроме табличных
элементов, к ячейкам таблицы и внутристрочным блочным
элементам.
Нет.

Описание:
Определяет количество столбцов, используемых в много
столбцовой разметке элемента. Помимо исходного значения
auto, устанавливаемого по умолчанию, допускаются только
положительные ненулевые целочисленные значения данного
свойства.
Пример:
body { column-count : 2 ; }
column - f i l l
Значения:
auto 1 balance
balance
К элементам, размещаемым с помощью нескольких столбцов.
Нет.
Описание:
Определяет, следует ли уравновешивать (или не уравнове
шивать) столбцы по высоте при разметке элемента с помощью
нескольких столбцов. Значение этого свойства удерживается в
тех случаях, когда столбцы каким-то образом ограничены по

длине. Очевидным тому примером служит высота элемента,
явно задаваемая с помощью свойства height. Значение auto
данного свойства означает, что столбцы заполняются после
довательно, т.е. каждый столбец заполняется по всей высоте
до конца (недостаточно заполняется или перезаполняется по
мере надобности).
Пример:
body { height : SOem; column- f i l l : auto ; )
column- gap
Значения:
<length> 1 normal
normal
Нет.
Описание:
Определяет ширину промежутка между соседними столб
цами в элементе, размечаемом с помощью нескольких столб
цов. Любая линейка для разделения столбцов (см. ниже опи
сание свойства column- rul e ) центруется в пределах каждого
промежутка между столбцами. Длина промежутка между
столбцами не может быть отрицательной.

Пример:
body { colшnn-gap : 2em; }
column - rule
Значения:
<' co lшnn- rule-width ' > 1 1 < ' border-st yle ' > 1 1 [ <color>
Нет.
Описа ние:
стиль и цвет так называемых линеек (т.е. вертикальных линий),
воспроизводимых между столбцами в элеме�те, размечаемом с
1
помощью нескольких столбцов. Любое про�ущенное значение

устанавливается равным значению по умолчанию соответству
ющего свойства. Следует, однако, иметь в виду, что если стиль
границы не определяется, то по умолчанию рн принимает зна
чение none и линейка для разделения столрцов не воспроиз
водится .
Примеры:
#dOl { colшnn- rule : 5рх solid red ; )
#d02 { colшnn- rule : 2em dashed green ; )

column - rule- color
Значения:
<color>
Нет.
Описание:
Определяет цвет так называемых линеек (т.е. вертикальных
линий), воспроизводимых между столбцами в элементе, разме
чаемом с помощью нескольких столбцов.
Примеры:
# d O l { column-rule-co l o r : red; }
#d02 { column-rule-color : green ; }
column-rul e - s tyle
Значения:
< ' border-style ' >
none

Нет.
Описание:
Определяет стиль так называемых линеек (т.е. вертикаль
ных линий), отображаемых между столбцами в элементе, раз
мечаемом с помощью нескольких столбцов. Значения этого
свойства являются такими же, как и у свойства border-style.
Любое из значений none (по умолчанию) или hidden означает,
что линейки для разделения столбцов не отображаются.
Примеры:
#dOl { column- rule - s t yle : s o l i d ; }
#d02 { column- rule-style : dashed ; }
column- rule-width
Значения:
medium
Нет.

Описание:
Определяет ширину так называемых линеек ( т.е. вертикаль
ных линий), отображаемых между столбцами в элементе, раз
мечаемом с помощью нескольких столбцов.
Примеры:
#dOl { column-rule-widt h : 5рх ; )
#d02 { column-rule-width : 2em; )
column- span
Значения:
none 1 all
none
К статически размещаемым, не свободно перемещаемым эле
ментам.
Нет.
Описание:
Определяет количество столбцов, на которое простира
ется элемент, размечаемый с помощью нескольких столбцов.
Для этого имеются только две возможности: вообще не про
стирать элемент ни на один из столбцов (значение none) или
же простирать его на все столбцы (значение all). Если элемент
простирается на несколько столбцов, то содержимое, которое
находится перед этим элементом, равномерно распределяет
ся по столбцам над ним. А содержимое, которое следует после

данного элемента, равномерно распределяется по столбцам под
ним.
Пример:
h2 { column-span : a l l ; )
column-width
Значения:
<integer> 1 auto
&uto
элементам.
Нет.
Абсолютная длина.
Описание:
Определяет абсолютную ширину столбцов в элементе, раз
мечаемом с помощью нескольких столбцов. Это означает оп
тимальную ширину столбцов, а следовательно, пользователь
ские агенты могут видоизменить ее значение или пренебречь
ею, если сочтут нужным. Очевидным тому примером служит
несоответствие общей ширины столбов и промежутков между
ними ширине многостолбцового элемента. И это в какой-то
степени похоже на изменение ширины ячеек таблицы с целью
подогнать столбцы по общей ширине таблицы.

Значения абсолютной длины должны быть больше нуля.
Но по какой-то непонятной причине указывать эти значения в
процентах не разрешается.
Пример:
body { column-width : 2 З еm ; }
columns
Значения:
< ' column-width ' > 1 1 < ' co lumn-count ' >
элементам.
Нет.
Описание:
Это сокращенная форма свойства, определяющего количе
ство и ширину столбцов в элементе, размечаемом с помощью
несколько столбцов. Пропущенные значения устанавливаются
равными значениям по умолчанию соответствующих свойств.
Примеры:
body { columns : З 2 3em; }
div { co lumns : 2 0 0рх 5 ; }

content
Значения:
normal 1 none 1 [ < s t r ing> 1 <ur i > 1 <counter> 1
attr ( < ident i f ie r > ) 1 open-quote 1 close-quote 1 no-open-quote
1 no-close-quote ] +
nortnAl
К псевдоэлементам : : before и : : a fter.
Нет.
Абсолютный URI для значений <uri> или результирующая
символьная строка для ссылок на атрибуты, а иначе - такое
же, как и объявляемое значение.
Описание:
Определяет расположение генерируемого содержимого до
или после элемента. По умолчанию это, скорее всего, внутри
строчное содержимое, но тип блока, создаваемого для содер
жимого, определяется с помощью свойства di splay.
Примеры:
р: : before ( content : " Paragraph . . . "; )
a [ href ] : : after ( content : " ( " a t t r ( hr e f ) ") ";
font - s i ze : sma l le r ; )

counter-increment
Значения:
[ < i dent i f ier> <integer>? ] + 1 none
none
Нет.
Вычисляемое зна� ение:

Описание:
С помощью этого свойства счетчики могут инкрементиро
ваться (или декрементироваться) на любое значение: положи
тельное, отрицательное или нулевое (О). Если тип <integer>
значения не указан, то по умолчанию устанавливает значение 1
данного свойства.
Примеры:
hl ( counter - i ncrement : section ; }
* . backward li ( counter-increment : counter - 1 ; }
counter -teset
Значения:
[ <ident i f i e r> <int'eger>? ] + 1 none
none
1 76 CSS. Карм�нный справочник. 4-е ИЗАiНИе

Нет.
Описание:
С помощью этого свойства счетчики могут сбрасываться
(или устанавливаться в первый раз), принимая любое значе
ние: положительное или отрицательное. Если тип <integer>
значения не указан, то по умолчанию устанавливает нулевое
значение (О) данного свойства.
Примеры:
hl { counter-reset : section ; }
h2 { counter-reset : suЬsec 1 ; }
cursor
Значения:
[ <uri> [ <numЬer> <numЬer > ] ? , ] * [ auto 1 default 1 auto 1
defaul t 1 none 1 context-menu 1 help 1 pointer 1 proqress
wait 1 cell 1 cross hair 1 text 1 vertical-text 1 alias 1
сору 1 move 1 no-drop 1 notallowed 1 e-resize 1 n-resize 1
ne-resize 1 nw-resize 1 s-resize 1 se-resize 1 sw-resize 1
w-resize 1 ew-resize 1 ns-resize 1 nesw-resize 1 nwse-resize
col-resize 1 row-resize 1 all-scroll ]
auto

Да.
Единственный абсолютный URI с дополнительными, хотя
и не обязательными, координатами Х, У для значений <uri>, если
эти значения приводятся к поддерживаемому типу файлов, а ина
че - такое же значение, как и объявляемое ключевым словом.
Описание:
Определяет форму курсора, появляющегося на экране при
размещении указателя мыши на границе элемента, хотя в спе
цификации CSS2. l край этой границы не определяется. Не сле
дует, однако, забывать, что пользователи обычно привыкают к
форме курсора, и поэтому ее неоправданное изменение может
легко привести их в замешательство. Такое может, например,
произойти, если изменить состояние курсора на pointer, когда
пользователь наведет его на неинтерактивный элемент.
Следует также иметь в виду, что синтаксис значений дан
ного свойства допускает указание необязательных значений
URI, хотя ключевое слово должно быть указано обязательно.
Следовательно, можно указать любое количество URI внешних
ресурсов для курсора, но соответствующее значение должно
непременно оканчиваться ключевым словом. В отсутствие клю
чевого слова пользовательские агенты, поддерживающие дан
ное свойство, полностью опустят его объявление.
В спецификации CSS3 допускается снабжать значение <uri>
двумя дополнительными, хотя и не обязательными числами.
Эти числа обозначают координаты Х, У "активной точки" кур
сора, т.е. такой точки расположения курсора, которая служит
для определения состояний наведения, активных действий и
т.п. Если эти числа не предоставляются, а изображение кур
сора не содержит "внутренней активной точки", как сказано
в спецификации, то в качестве такой точки выбирается левый
верхний утол изображения, что равнозначно обозначению О О.

Следует также иметь в виду, что эти числа обозначают безраз
мерные величины и интерпретируются относительно "системы
координат курсора': как, опять же, сказано в спецификации.
Примеры:
a . moreinfo { cursor : help ; )
a [ href ] . external { cursor : u r l { globe . png ) , auto ; )
directi on
Значения:
ltr 1 rtl
ltr
Да.
Описание:
Определяет базовое направление записи блоков, а также
направление встраивания и замещения текста для двунаправ
ленного алгоритма в Уникоде. Кроме того, данное свойство
изменяет способ интерпретации целого ряда свойств и реше
ний, принимаемых при разметке, в ключая размещение ячеек
в строке таблицы и выбор алгоритмов разметки структурных
блоков, но не ограничиваясь только этим.
По самым разным причинам вместо свойства direction
настоятельно рекомендуется использовать атрибут dir раз
метки НТМL-документов. Пользовательским агентам, не
Гnава 4. Сnравочнмк свойств 1 79

поддерживающим двунаправленный текст, разрешается пре
небрегать этим свойством.
Примеры:
* : lang ( e n ) { di rection : l t r ; }
* : lang ( a r ) { di rection : rt l ; }
di splay
Значения в CSS2.1 :
none 1 inline 1 Ыосk 1 inline-Ыock 1 list-item 1 taЬle
inlinetaЬle 1 taЬle-row-group 1 taЬle-header-group 1
taЬle-footergroup 1 taЬle-row 1 taЬle-column-group 1
taЬle-column 1 taЬlecell 1 taЬle-caption
Значения в CSSЗ:
none 1 inline 1 Ыосk 1 inline-Ыock 1 list-item 1 run-in
сошрасt 1 taЬle 1 inline-taЬle 1 taЬle-row-group 1
taЬle-header-group 1 taЬle-footer-group 1 taЬle-row
taЬle-column-group 1 taЬlecolumn 1 taЬle-cell 1
taЬle-caption 1 ruЬy 1 ruЬy-base 1 ruЬy-text 1
ruЬy-base-container 1 ruЬy-text-container
inline
Нет.
Отличается для свободно перемещаемых, располагаемых
и корневых элементов (см. раздел 9.7 спецификации CSS2 . l ) , а
иначе - такое же, как и объявляемое значение.
1 80 CSS. Карманный справочник, 4-е мзданме

Описание:
Определяет вид блока отображения, формируемого во
время разметки элемента. Использование свойства display
в НТМL-документах не всегда оправдано, поскольку это на
рушает иерархию отображения, уже определенную в НТМL
разметке, хотя данное свойство может быть очень полезным.
Что же касается ХМL-документов, в которых подобная встро
енная иерархия отсутствует, то для них свойство display про
сто незаменимо.
Значение none данного свойства нередко служит для со
крытия элементов, поскольку оно удаляет элемент и все произ
водные от него элементы из представления. И это справедливо
не только для визуальных, но и для всех остальных носителей
информации. Следовательно, объявление display : none в
разметке элемента не даст возможности озвучить этот элемент
в озвучивающем браузере.
Значение run-in данного свойства долго входило в спец
ификацию CSS2. l , но в начале 20 1 1 года было исключено из-за
несогласованностей в разных браузерах. Тем не менее оно по
прежнему входит в спецификацию CSSЗ. А значения compact
и marker появились в спецификации CSS2, но были исключе
ны из спецификации CSS2 . l из-за отсутствия широкой под
держки.
Примеры:
hl { display : Ы о с k ; }
li { display : l i s t - item ; )
img { display : iпliпe ; )
. hide { display : попе ; }
tr { display : taЫ e - row ; )
empty- cel l s
Значения:
show 1 hide

show
К элементам со значением taЫe-cell свойства display.
Да.
Описание:
Определяет представление ячеек таблицы без содержимого.
Если такие ячейки отображаются, то воспроизводятся их гра
ницы и задний план. Это свойство принимается во внимание
лишь в том случае, если задано значение separate свойства
border-collapse, а иначе оно просто игнорируется.
Пример:
th, td { empty-cel l s : show ; )
float
Значения:
left 1 riqht 1 none
none
Нет.

Описание:
Определяет направление, в котором свободно перемеща
ется элемент. По традиции это свойство применялось к изо
бражениям, чтобы текст облекал их, но в CSS свободно пере
мещаться разрешается любому элементу. Свободно перемеща
емый элемент будет формировать структурный блок независи
мо от типа элемента, для которого он предназначен. Для сво
бодно перемещаемых незаменяемых элементов должна быть
явно задана их ширина, иначе они станут максимально узки
ми. Свободное перемещение элементов обычно в достаточной
степени поддерживается во всех браузерах, но сам характер
таких элементов может привести к неожиданным результатам,
когда они применяются в качестве механизма разметки стра
ниц. И это объясняется, главным образом, незначительными
отличиями в интерпретации определений наподобие "элемен
ты станут максимально узкими':
Примеры:
img . figure { float : left; }
p . s idebar { f loat : r i ght ; widt h : 1 5em; }
font
Значения:
[ [ < ' font-s tyle ' > 1 1 < ' font-variant ' > 1 1 < ' font-weight ' >
? < ' font- fami l y ' > ] 1
] ? < ' font s i z e ' > [ / < ' l i ne-height ' > ]
caption 1 icon 1 menu 1 message-Ьox 1 small-caption 1 status-bar

Да.
Вычисляется относительно родительского элемента для
размера шрифта <font-s i ze> и относительно размера шриф
та < font-s ize> элемента для в ысоты строки <l ine-height>.
См. ниже описание отдельных св ойств.
Описание:
Это сокращенная форма свойства, предназначенная для
установки сразу всех свойств шрифта размечаемого элемента.
Может также использов аться для установки шрифта размеча
емого элемента с учетом вычислительной среды пользо вателя,
для чего служит ключев ое слов о icon. Если ключевые слова
отсутствуют в объявлении этого свойства, то в качестве мини
мальных типографских параметров должны быть непременно
заданы размер и гарнитура шрифта (именно в таком порядке),
а любой типографский параметр, не обозначаемый ключевым
словом, должен оканчиваться гарнитурой шрифта. В против
ном случае объя в ление шрифта будет проигнорировано.
Примеры:
р { font : sma l l - caps italic bold sma l l /
l . 2 5em Helvetica , sans -ser i f ; }
p . example { font : 1 4рх Ar i a l ; ) / * технически правильно,
хотя общая форма font- fami l ies зарезервирована
для дальнейшего использов ания */
. f igure span { font : icon ; }
font- family
Значения:
[ <family-name> 1 <generic- fami ly> ] [ , <family-name> 1
<genericfamily> ] *

Расши рения
<generic-Eamily>
serif 1 sans-serif monospace 1 cursive fantasy
1
Зав исит от конкретного пользовательского агента.
Ко в сем элементам.
Да.
Описание:
Определяет гарнитуру шрифта, применяеf"lую для отображе
ния текста элемента. Следует, однако, иметь в виду, что приме
нение конкретной гарнитуры шрифта (например, Geneva) пол
ностью зависит от ее наличия в системе пользователя или в виде
загружаемого файла, а также от присутствия в ней глифов, не
обходимых для отображения содержимого. Поэтому в качестве
запасного варианта настоятельно рекомендуется указывать наи
менования типичных гарнитур шрифтов. Наименования шриф
тов, содержащие пробелы или небуквенные символы, должны
быть заключены в кавычки, чтобы свести к минимуму возмож
ные недоразумения. В то же время наименования запасных ти
пичных: гарнитур вообще не следует заключать в кавычки.
Пример ы:
р { font- fami ly : Helvet i c a , Aria l , sans-seri f ; )
li { font- fami ly : Time s , TimesNR, "New Century Schoolboo k " ,
seri f ; )
pre { font - fami l y : Courier, "Courier New " , "Anda le Mono " ,
Monaco, monospace ; )

font- s i z e
Значения:
xx-small 1 x-small 1 small 1 medium large 1 x-large 1 xx
large 1 smaller 1 larger 1 <length> <percentage>
medium
Да.
По размеру шрифта родительского элемента.
Абсолютная длина.
Описание:
Определяет размер шрифта как абсолютный или относи
тельный размер, а также в виде длины, вычисляемой как абсо
лютно, так и в процентах. Указывать отрицательные значения
абсолютной длины и в процентах не разрешается. В присва
ивании размера шрифта скрывается немало разных опасно
стей. Так, в неб-разработке не рекомендуется указывать размер
шрифта в пунктах из-за отсутствия определенной взаимосвязи
между пунктами и пикселями на экране монитора.
Исторически сложившиеся недоразумени:Я заключались
в том, что установка значения medium в свойстве font- s i z e
приводила к разным результатам в первых версиях браузеров
Internet Explorer и Navigator 4.х. Некоторые из этих недораз
умений подробно рассматриваются в главе 5 упоминавшейся
ранее книги CSS: Тhе Definitive Guide, третье издание (издатель
ство O'Reilly), а дополнительные сведения по данному вопросу

приведены по адресу http : / /style . cleverchimp . com/. Для
достижения наилучших результатов рекомендуется указывать
размер шрифта в процентах или кегельных шпациях, а в край
нем случае - в пикселях, хотя такой подход накладывает се
рьезные ограничения на специальные возможности, поскольку
это препятствует пользователям изменять размер текста в бра
узере Internet Explorer под управлением Windows, даже в том
случае, если этот текст слишком мелкий, чтобы быть удобо
читаемым. А в большинстве других браузеров пользователям
разрешается изменять размер текста независимо от его исход
ного размера.
Примеры:
h2 { font- s i ze : 2 0 0 % ; }
code { font - s i ze : 0 . 9em; }
p . caption { font - s i z e : 9рх ; }
font- s i ze - adj us t
Значения:
<numЬer> 1 none
none
Да.

Описание:
Определяет аспект шрифта элемента, употребляемый для
масштабирования шрифтов таким образом, чтобы они точнее
соответствовали друг другу в тех случаях, когда применяются
запасные шрифты. Аспект шрифта определяется путем деле
ния х-высоты шрифта на его размер.
С помощью свойства font-s i ze-adj ust размер шриф
та корректируется по х-высоте, т.е. по высоте строчных букв
шрифта. Рассмотрим в качестве примера гипотетический
шрифт (назовем его, скажем, CSSType) размером 100 пикселей
и х-высотой 60 пикселей, которая означает, что высота строч
ной буквы х составляет 60 пикселей. Соответствующее значе
ние свойства font - s i z e-adj ust для шрифта CSSType будет
равно О , 6 ( 60 / 100). Так, объявление
р { font : 2 0рх "CSSType " , sans - s e r i f ;
font - s i z e-adj ust : 0 . 6 ; }
означает, что размер текста в абзаце должен быть таким, что

бы строчные буквы оказались высотой 12 пикселей (2 0 х О , 6 =
= 12) независимо от применяемой гарнитуры шрифта. Если
же шрифт CSSType отсутствует, а пользовательский агент об

ращается к запасному шрифту, например Helvetica, то размер
текста, набранного шрифтом Helvetica, также приводится к
высоте строчных букв 12 пикселей, тогда как высота пропис
ных букв будет соответствовать заданному размеру шрифта.
Аспект шрифта Helvetica составляет О , 53, и поэтому высота
строчных букв этого шрифта будет равна 22 , 6 пикселя (или
округленной величине, если пользовательский агент не в со
стоянии обращаться с дробными пикселями). Если же приме
няется какой-нибудь другой шрифт без засечек с аспектом О , 7,
то высота прописных букв составит 1 7 , 1 пикселя, а высота
строчных букв - 12 пикселей.
Примеры:
body { font- family : Helveti c a , sans - s er i f ;
font - s ize-adj ust : 0 . 5 3 ; }

font- s tyle
Значения:
italic 1 oЫique 1 normal
normal
Да.
Описание:
Определяет вид начертания шрифта: курсивное, наклонное
или обычное. Набранный курсивом текст обычно определяет
ся как отдельное начертание в гарнитуре шрифта. Теоретиче
ски пользовательский агент может вычислить наклонное на
чертание шрифта из его обычного начертания. Но на практике
пользовательские агенты редко отличают курсивный текст от
наклонного, если они вообще на это способны, и почти всегда
воспроизводят оба вида текста одинаково.
Примеры:
em { font -style : oЫique ; }
i { font- style : i t a l i c ; }
font-variant
Значения:
small-caps 1 normal

normal
Да.
Описание:
Определяет, задается ли для текста стиль малых прописных
букв. Теоретически пользовательский агент может вычислить
начертание шрифта малыми прописными буквами из обычно
го начертания.
Примеры:
hЗ ( font-variant : sma l l -caps ; )
р ( font-var iant : normal ; )
font-weight
Значения:
normal 1 Ьold 1 Ьolder 1 liqhter 1 100 1 200 1 300 1 400 1
500 1 600 1 700 1 800 1 900
normal
Да.

Одно из абсолютных числовых значений ( 1 0 0 и т.д.) или же
абсолютных числовых значений плюс относительные значения
(bolder или liqhter).
Описание:
Определяет вес шрифта, употребляемый при воспроизве
дении текста элемента. Числовое значение 4 0 0 этого свойства
равнозначно ключевому слову normal, а числовое значение
700 - ключевому слову bold. Если же у шрифта имеются
только два веса (обычный и полужирный), то в пределах от
100 до 500 своего веса шрифт будет обычным, а в пределах от
600 до 900 -полужирным. В общем, чем меньше числовое
значение веса, тем светлее оказывается шрифт, а чем оно боль
ше, тем шрифт темнее.
Примеры :
Ь { font-weight : 7 0 0 ; )
strong { font-weight : bold; )
. de l i cate { font-weight : l i ghter ; )
height
Значения:
<length> 1 <percentage> 1 &uto
auto
Ко всем элементам, кроме незаменяемых внутристрочных
элементов, отдельных столбцов и групп столбцов таблицы.
Нет.

Задание в проценtах:
Вычисляемое зна 4 ение:

Для исходных значений auto и в процентах такое же, как
объявляемое значение, а иначе - абсолютная длина, если толь
ко данное свойство не применяется к элементу, и тогда оно
равно auto.
Описание:
Определяет высоту области содержимого элемеf!та или
блока его границы в зависимости от значения свойства box
s i z ing. Указывать отрицательные значения абсолютной дли
ны и в процентах не разрешается.
Примеры:
img . icon { height : 5 0рх ; }
hl { height : 1 . 7 5em; }
lef t
Значения:
< length> 1 <percentage> 1 auto
auto
торых задано значение свойства pos i t ion, отличающееся от
static.
Нет.
1 92 CSS. Карм�нный справочник, 4-е издание

По ширине содержащего блока.
Для относительно размещаемых элементов вычисляемое зна
чение свойства left всегда равно значению свойства right;
для статически размещаемых элементов (т.е. таких элементов,
для которых задано значение static свойства pos i tion) вы
числяемое значение равно auto; для значений длины оно равно
соответствующей абсолютной длине; для значений в процен
тах - объявляемому значению, а иначе au to. -
Описание:
Определяет смещение внешнего края левого отступа раз
мещаемого элемента относительно левого края содержа
щего его блока, а для относительно размещаемых элемен
тов - расстояние, на которое элемент смещается вправо от
своего исходного положения.
Примеры:
div#footer { po s i t ion : f i xed; left : О ; }
* . hanger { po s i t ion : relat ive ; l e ft : - 2 5рх ; }
letter- spacing
Значения:
[ norrnal 1 <length> <percentage> ] { 1 , З }
normal
Да.

По ширине глифа пробела в Уникоде (U+0020) для начерта
ния шрифта элемента.
Для значений длины вычисляемое значение равно соответ
ствующей абсолютной длине, а иначе norma.l. -
Описание:
Определяет величину пробела, вставляемого между блока
ми символов текста. Как правило, глифы символов оказывают
ся более узкими, чем их блоки, а благодаря указываемым значе
ниям длины можно изменять обычное расстояние между бук
вами. Таким образом, значение normal зачастую оказывается
равнозначным нулевому значению (О). Разрешается указывать
отрицательные значения абсолютной длины и в процентах.
В таком случае буквы располагаются ближе одна к другой.
Три возможных значения данного свойства соответствуют
минимальному, максимальному и оптимальному расстояниям
между буквами. Если указаны два значения данного свойства,
то первое из них соответствует минимальному и оптимально
му расстояниям между буквами, а второе - максимальному
расстоянию. Если же указано единственное значение данного
свойства, то оно применяется для обозначения всех трех упо
мянутых выше расстояний между буквами. А если текст вы
равнивается, то пользовательский агент может при необходи
мости превысить максимальное расстояние между буквами,
хотя оно и не должно быть меньше минимального расстояния.
И наконец, если текст не выравнивается, то всегда применяет
ся оптимальное расстояние между буквами.
Примеры:
p . spacious { letter- spacing : брх ; }
em { letter- spacing : 0 . 2em; }
p . cramped { letter- spacing : - 0 . 5em; }

В спецификации CSS2 . l свойство letter-spacing прини
мает только одно значение: абсолютную длину или normal.
line -height
Значения:
<length> 1 <percentage> 1 <numЬer> 1 no%111al 1 none
normal
Ко всем элементам, тем не менее читайте в приведенном
ниже описании пояснения, касающиеся заменяемых и блочных
элементов.
Да.
По размеру шрифта элемента.
Для значений длины и значений в процентах вычисляемое
значение равно соответствующей абсолютной длине, а ина
че - такое же, как и объявляемое значение.
Описание:
Это свойство оказывает влияние на разметку построчных
блоков. Если это свойство применяется к блочному элементу,
оно определяет минимальное, а не максимальное расстояние
между базовыми линиями текста в данном элементе. А если это
свойство применяется к внутристрочному элементу, оно служит
для определения интерлиньяжа в тексте данного элемента.
Гnава 4. Справочник свойсп 1 95

Разность вычисляемых значений свойств l ine-height и
font - s i ze, называемая в CSS интерлиньяжем, делится надвое
и прибавляется к верхнему и нижнему краям каждого фраг
мента содержимого в текстовой строке. Самым коротким бло
ком, в который можно заключить все подобные фрагменты со
держимого, является построчный блок.
Исходное числовое значение определяет масштабный коэф
фициент, который наследуется вместо вычисляемого значения.
Отрицательные значения в данном свойстве не допускаются.
Примеры:
р { l ine-height : l . Sem ; )
h2 { l ine-he ight : 2 0 0 % ; )
u l { l ine-he ight : 1 . 2 ; )
pre { l ine-height : 0 . 7 5em; }
Ключевое слово none было внедрено в спецификации CSSЗ,
а его поддержка зависит от конкретного пользовательского
агента.
l i s t - s tyle
Значения:
< l i s t - s tyle- type> 1 1 < l i s t - s t y l e - image> 1 1 < l i s t - style
p o s i t ion>
К элементам со значением list-i tem свойства display.
Да.

Описание:
Это сокращенная форма свойства, определяющая тип мар
кера списка в виде знака или изображения, а также его при
близительное расположение. Данное свойство применяется к
любому элементу со значением list-item свойства display
и к наследующим от него элементам с аналогичным значением,
и поэтому действие этого свойства распространяется только на
элементы разметки li обычных HTML- и ХНТМL-документов.
Примеры:
ul { l ist-s tyle : square url (bulletЗ . g i f ) oute r ; )
/* значения наследуются элементами разметки li * /
o l { l i s t - style : upper- roma n ; )
list- s tyle - image

Значения:
<ur i > 1 none
none
Да.
Абсолютный URI для значений <uri>, а иначе - none.
Описание:
Определяет изображение, используемое в качестве марке
ра элемента маркированного или немаркированного списка.

Расположением изображения относительно содержимого эле
мента списка можно приблизительно управлять с помощью
рассматриваемого далее свойства l ist- style-posi tion.
Примеры:
ul { l i s t - s tyle- image : url (bulletЗ . g i f ) ; }
ul l i { l i st-style-image : url (http : / /example . org/pix/
checkma rk . png) ; }
l i s t - s tyle -po s i tion

Значения:
inside 1 outside
outside
К элементам со значением list-item свойства di splay.
Да.
Описание:
Определяет расположение маркера списка относительно
содержимого элемента списка. Внешние маркеры размещают
ся на некотором расстоянии от края границы элемента списка,
хотя это расстояние в CSS не определено. А внутренние марке
ры интерпретируются как внутристрочные элементы, вставля
емые в начале содержимого элемента списка.

Примеры:
li { l ist-st yle-po s i t ion : out s i de ; )
ol li { l i s t - s t yle-pos i tion : inside ; )
list- s tyle - type

disc 1 circle 1 square 1 decimal 1 decimal-leadinq-zero
upperalpha 1 lower-alpha 1 upper-latin 1 lower-latin 1
upper-roman 1 lower-roman 1 lower-qreek 1 qeorqian 1
armenian 1 none
<glyph> 1 <algor i thmic> 1 <numeric> 1 <alphabetic>
<symЬol i c > 1 <non-repeating > 1 normal 1 none
<glyph>
Ьох 1 check 1 circle 1 diamond 1 disc 1 hyphen 1 square

<algori thmic>
armenian 1 cjk-ideoqraphic 1 ethiopic-numeric 1 qeorqian

heЬrew 1 j apanese-formal 1 japanese-informal 1 lower-armenian
1 lowerroman 1 simp-chinese-formal 1 simp-chinese-informal 1
syriac 1 tamil 1 trad-chinese-formal 1 trad-chinese-informal
1 upperarmenian 1 upper-roman
<numвric>
araЬic-indic 1 binary 1 Ьenqali 1 camЬodian 1 decimal 1

decimal-leadinq-zero 1 devanaqari 1 qujarati 1 qurmukhi
kannada 1 khmer 1 lao 1 lower-hexadecimal 1 malayalam 1
monqolian 1 myanmar 1 octal 1 oriya 1 persian 1 teluqu 1
tiЬetan 1 thai 1 upper-hexadecimal 1 urdu
<alphaЬe tic>
afar 1 amharic 1 amharic-aЬegede 1 cjk-earthly-branch

cjkheavenly-stem 1 ethiopic 1 ethiopic-aЬeqede 1
ethiopic-aЬeqedeam-et 1 ethiopic-aЬeqede-qez 1
ethiopic-aЬeqede-ti-er 1 ethiopicaЬeqede-ti-et

ethiopic-halehame-aa-er 1 ethiopic-halehame-aaet 1
ethiopic-halehame-am-et 1 ethiopic-halehame-gez 1
ethiopichalehame-om-et 1 ethiopic-halehame-sid-et 1
ethiopic-halehameso-et 1 ethiopic-halehame-ti-er 1
ethiopic-halehame-ti-et 1 ethiopic-halehame-tig 1
hangul 1 hangul-consonant 1 hiragana 1 hiragana-iroha
katakana 1 katakana-iroha 1 lower-alpha 1 lower-greek
lower-norwegian 1 lower-latin 1 oromo 1 sidama 1 somali 1
tigre 1 tigrinya-er 1 tigrinya-er-aЬegede 1 tigrinya-et 1
tigrinya-et-aЬegede 1 upper-alpha 1 upper-greek 1
upper-norwegian 1 upper-latin
< symЬolic>
asterisks 1 footnotes
<non-repea ting>
circled-decimal 1 circled-lower-latin 1 circled-upper-latin 1
dotted-decimal 1 douЬle-circled-decimal 1 filled-circleddecimal 1
paren thesised-decimal 1 parenthesised-lower-latin
disc
Да.
Вычисn яемое значение:

Описание:
Определяет тип маркерной системы, применяемой в пред
ставлении списка. В спецификации CSSЗ предоставляется зна
чительно расширенный ряд типов списков, хотя новые типы
списков поддерживаются по-разному. Поэтому особого внима
ния требуют те типы списков, которые выходят за рамки спец
ификации CSS2. l .
Поведение, когда список, маркируемый в алфавитном по
рядке, исчерпывает буквы алфавита, не определено. Так, если

значенце upper-latin данного свойства достигнет буквы Z,
то в спецификации ничего сказано, каким должен быть следу
ющий маркер списка. Это может быть маркер АА или ZA. И это
может Ilроизойти независимо от применяемого алфавита. Сле
довател ьно, нет IJикакой гарантии, что разные пользовательские
агенты будут действовать в подобных случаях согласованно.
Примеры:
ul { l ist-s tyle - t ype : square ; }
ol { l i s t - s tyle- type : lower-roman; }
На момент написания данной книги широкой поддержкой
пользовались только следующие значения данного свойства,
определенные в спецификации CSS2 . l : disc, circle, square,
decimal, upper-alpha, lower-alpha, upperlatin, upper
roman и lower-roman.
margin
Значени я:
[ <length> 1 <percentage> 1 auto ] {1,4)
Не определено.
Нет.

Описание:
общего отступа для элемента или задающая ширину отступа
по отдельным его сторонам. Соседние по вертикали отступы
блочных элементов сводятся, тогда как отступы сверху и снизу у
внутристрочных элементов, по существу, отсутствуют. А отсту
пы слева и справа внутристрочных элементов не сводятся, как,
впрочем, и отступы свободно перемещаемых элементов. Разре
шается указывать отрицательные значения отступов, но делать
это следует осторожно, поскольку отрицательные значения ста
новятся причиной наложения одних элементов на другие или
появления более широких элементов, чем родительские.
Примеры:
hl { margin : 2 е х ; )
р {margin : auto ; )
img { margin : l Opx ; )
margin-bottom
Значения:
< length> 1 <percentage> 1 auto
о
Нет.

Для значений в процентах вычисляемое значение оказыва
ется таким же, как и объявляемое, а для значений длины оно
равно соответствующей абсолютной длине.
Описание:
Определяет ширину нижнего отступа для элемента. Раз
решается указывать отрицательные значения, хотя делать это
следует осторожно (см. выше описание свойства margin).
Примеры:
ul { rnargin-bottorn : 0 . S i n ; )
hl { rnargin-bottorn : 2 % ; )
margin-left
Значения:
о
Нет.

Описание:
Определяет ширину левого отступа для элемента. Разреша
ется указывать отрицательные значения, хотя делать это следу
ет осторожно (см. выше описание свойства margin).
Примеры:
р { margin- left : 5 % ; )
pre ( margin- left : Зеm; )
margin - right
Значения:
о
Нет.
Описание:
Определяет ширину правого отступа для элемента. Раз

Примеры:
img {margin-right : ЗОрх ; )
ol { margin-right : Sem; )
margin- top
Значения:
о
Нет.
Описание:
Определяет ширину верхнего отступа для элемента. Раз
Примеры:
ul { margin-top : O . S in; )
hЗ { ma rgin- top : 1 . S em ; )

max-height
Значения:
<length> 1 <percentage> 1 none
none
Ко всем элементам, кроме внутристрочных незаменяемых
и табличных элементов.
Нет.
Для значений в процентах вычисляемое значение оказы
вается таким же, как и объявляемое; для значений длины оно
равно соответствующей абсолютной длине, а иначе none. -
Описание:
Определяет максимальное ограничение, накладываемое на
высоту элемента, хотя конкретная его высота зависит от зна
чения свойства box - s i z ing. Следовательно, высота элемента
может быть меньше объявленного значения, но не больше его.
Пример:
div# footer {max-height : Зеm; )

max-width
Значения:
<length> 1 <percentage> 1 none
none
Нет.
равно соответствующей абсолютной длине, а иначе none. -
Описание:
Определяет максимальное ограничение, накладываемое на
ширину элемента, хотя конкретная его ширина зависит от зна
чения свойства box-s i z ing. Следовательно, ширина элемента
может быть меньше объявленного значения, но не больше его.
Пример:
# s i debar img { width : 50рх ; max-widt h : 1 0 0 % ; )
min -height
Значения:
<length> 1 <percentage>

о
Ко всем элементам, кроме внутристрочных незаме няемых
Наследуется :
Нет.
Для значений в процентах вычисляемое значение 01<азыва
ется таким же, как и объявляемое, а для значений дли ны оно
Описан ие:
Определяет минимальное ограничение, накладываемое на
высоту элемента, хотя конкретная его высота зависит от зна
чения свойства box-s i z ing. Следовательно, высота Э!Jемента
может быть больше объявленного значения, но не меньше ero.
Пример:
div# footer { min-height : lem; )
min -width
Значения:
о
208 CSS. Карм�нный справочник, 4-е ИЗАаНИе

Нет.
Вычисляемое значени е:
равно соответствующей абсолютной длине; а иначе none. -
Описание:
Определяет минимальное ограничение, накладываемое на
ширину элемента, хотя конкретная его ширина зависит от зна
чения свойства box-si zing. Следовательно, ширина элемента
может быть больше объявленного значения, но не меньше его.
Пример:
div . as ide { float : r ight ; width : 1 3em; max-width : 3 3 % ; }
opaci ty
Значения:
<nшnЬe r>
1

Нет.
Такое же, как и объявляемое значение (или ограниченное
значение, если объявляемое значение должно быть ограничено).
Описание:
Определяет степень непрозрачности элемента по числу в
пределах от О до 1 включительно. Любые значения вне этих
пределов ограничиваются до ближайшего предела (О или 1).
Это свойство оказывает влияние на каждую видимую часть
элемента. Если же требуется сделать полупрозрачным содер
жимое элемента, но не задний план, или наоборот, то лучше
воспользоваться функцией rgba ( ) , чтобы задать цвета с аль
фа-каналом, определяющим степень непрозрачности цвета.
Если для элемента задано нулевое (О) значение свойства
opacity, он, по существу, становится невидимым и может во
обще не реагировать на события от мыши или друтие события,
наступающие в объектной модели документа (DOM). В связи
с особенностями воспроизведения полупрозрачных элементов
каждый элемент со значением свойства opac i ty меньше 1 , О
создает свой контекст наложения, даже если его размещение не
предполагается. По аналогичным причинам в абсолютно раз
мещаемом элементе со значением свойства opaci ty меньше
1 , О и значением au to свойства z - i ndex принудительно уста
навливается нулевое (О) значение свойства z - index.
Примеры:
h2 { opacity : 0 . 8 ; )
. hideme { opac i ty : О ; }
outl ine
Значения:
< ' outl ine-colo r ' > 11 < ' out line-style ' > 11 < ' outl ine-width ' >

Нет.
Описан ие:
Это сокращенная форма свойства, определяющая общий
контур элемента. Чаще всего контуры служат для обозначе
ния элементов формы или гиперссылок, находящихся в фокусе
ввода, т.е. готовых принять вводимые пользователем данные.
Контуры могут иметь неправильную форму, и независимо от
своей толщины они не изменяют и не оказывают иного воздей
ствия на размещение элементов.
Примеры:
* [ href ] : focus { out line : 2рх dashed invert ; )
form : focus { outl ine : out set cyan 0 . 2 5em; )
outl ine - color

Значения:
<color> 1 invert
invert

Нет.
Описание:
Определяет цвет видимых участков общего контура эле
мента. Не следует, однако, забывать, что значение свойства
outl ine-style должно отличаться от none, чтобы появилась
любая видимая граница. Пользовательским агентам разреша
ется игнорировать значение invert данного свойства на тех
платформах, на которых инверсия цвета не поддерживается.
В таком случае цвет контура элемента по умолчанию принима
ет значение свойства color.
Примеры:
* [ hre f ] : focus { outl ine-colo r : invert ; }
f o rm : focus { outl ine-co lo r : cyan ; }
outline - o f f s e t
Значения:
< length>
о
Нет.
Абсолютное значение длины.

Описание:
Определяет смещение относительно внешнего края грани
цы и внутреннего края контура. Это свойство может прини
мать только одно значение длины. Оно применяется в равной
степени ко всем сторонам контура. Допускается указывать от
рицательные значения данного свойства. В этом случае контур
сокращается вовнутрь к центру элемента. Следует, однако,
иметь в виду, что свойство outline-offset нельзя устанавли
вать посредством сокращенной формы свойства outl ine.
Примеры:
* [ hre f ] : focus { outline-offset : 0 . З Зеm; }
form : focus { outl ine- o f f set : - lpx ; }
outl ine - s tyle

Значения:
none 1 dotted dashed 1 solid 1 douЫe 1 groove 1
none
Нет.
Описание:
Определяет стиль общей границы элемента. Задаваемый
в этом свойстве стиль должен отличаться от none, чтобы по
явился какой-нибудь контур.

Примеры:
* [ hr e f ] : focus { out line-style : dashed ; )
form : focus { outl ine-s t yl e : outset ; )
outl ine -width

Значения:
thin 1 medium 1 thick 1 < length>
medium
Нет.
Описание:
Определяет толщину общего контура элемента. Указанная
толщина окажет воздействие на заданный контур только в том
случае, если значение свойства out l ine- style отличается от
none. Если же оно принимает значение none, то толщина кон
тура, по существу, устанавливается равной нулю (О). Отрица
тельные значения в данном свойстве не допускаются.
Примеры:
* [ hre f ] : focus { outl ine-width : 2рх; )
form : focus { outline-width : 0 . 2 5em; )
214 CSS. Карм11нный справочник, 4-е издание

overf low
Значения:
[ visiЫe 1 hidden 1 scroll 1 auto 1 no-d.isplay 1 no-content ] { 1, 2 }
Не определено для сокращенных форм свойств (visiЫe в
спецификации CSS2. l ).
К незаменяемым элементам со значением Ыосk или
inline-Ыock свойства di splay.
Нет.
Описание:
Это сокращенная форма свойства, определяющая происхо
дящее с содержимым при переполнении области содержимо
го элемента. Так, если установлено значение scroll данного
свойства, пользовательские агенты должны предоставить ме
ханизм прокрутки независимо от того, требуется ли он. В част
ности, полосы прокрутки будут появляться даже в том случае,
если все содержимое может поместиться в блоке элемента. Если
же указываются два значения данного свойства, то первое из
них определяет значение свойства overflow-x, а второе - зна
чение свойства over f l ow-y. В противном случае оба эти значе
ния определяются одним и тем же значением данного свойства.
Примеры:
#masthead { ove r f low : hidden ; }
object { ove r flow : vis iЫe scrol l ; }

В спецификации CSS2 . l свойство overflow определено как
автономная, а не сокращенная форма свойства. Поддержка
значений no-display и no-content данного свойства в совре
менных браузерах отсутствует.
overf low-x
Значения:
visiЫe 1 hidden 1 scroll 1 auto 1 no-display 1 no-content
visiЫe
inline-Ыock свойства display.
Нет.
Описание:
Определяет поведение при переполнении по горизонталь
ной оси (Х) элемента, т.е. от левого до правого края элемента.
Примеры:
#masthead { over f low-x : hidden ; }
ob j ect { over flow- x : v i s iЬle ; }
На момент написания данной книги поддержка значений
no-display и no-content данного свойства в основных бра
узерах отсутствовала.

overf low-y
Значен ия:
visiЬle 1 hidden 1 scroll 1 auto 1 no-displfY 1 no-content
visiЫe
inline -Ыock свойства display.
Нет.
Описан ие:
Опр еделяет поведение при переполнении по вертикальной
оси (У) элемента, т.е. от верхнего до нижнего края элемента.
Примеры:
#masthead { overflow- y : hidden ; }
object { overflow-y : scrol l ; }
Примечан ие:
На момент написания данной книги поддержка значений
no-display и no-content данного свойства в основных бра
узерах отсутствовала.
padding
Значен ия:
[ <length> 1 <percentage> ] { 1 , 4 )

Нет.
Описание:
общего внутреннего поля элемента или задающая ширину вну
треннего поля по каждой из сторон элемента в отдельности.
Внутреннее поле, задаваемое для внутристрочных незаменяе
мых элементов, не оказывает никакого влияния на вычисление
высоты строки. Следовательно, такой элемент с внутренним
полем и задним планом может явно простираться на другие
строки, а возможно, и перекрывать другое содержимое. Отри
цательные значения в данном свойстве не допускаются.
Примеры:
img { padding : l Opx ; }
hl { padding : 2ех О . З Зеm; }
pre { padding : 0 . 7 5em O . Sem lem O . Sem ; }
padding-Ьo ttom
Значения:
< length> 1 <percentage>

о
Нет.
Описание:
Определяет ширину нижнего внутреннего поля элемента.
Нижнее внутреннее поле, задаваемое для внутристрочных неза
меняемых элементов, не оказывает никакого влияния на вычис
ление высоты строки. Следовательно, такой элемент с нижним
внутренним полем и задним планом может явно простираться
на другие строки, а возможно, и перекрывать другое содержимое.
Примеры:
ul ( padding-bottom: 0 . 5in; }
hl ( padding-bot tom : 2 % ; }
padding- left
Значения:
о

Нет.
Описание:
Определяет ширину левого внутреннего поля элемента. Ле
вое внутреннее поле, задаваемое для внутристрочного элемен
та, появится только на левом краю первого строкового блока,
сформированного элементом. Отрицательные значения в дан -
ном свойстве не допускаются.
Примеры:
р { padding- l e f t : 5 % ; )
pre { padding- left : Зеm ; )
padding-right
Значения:
о

Нет.
Описание:
Определяет ширину правого внутреннего поля элемента.
Правое внутреннее поле, задаваемое для внутристрочного эле
мента, появится только на правом краю первого строкового
блока, сформированного элементом. Отрицательные значения
в данном свойстве не допускаются.
Примеры:
img { padding-r ight : З Орх ; )
ol { padding-r ight : 5em; )
padding- top
Значения:
о
Нет.

Описание:
Определяет ширину верхнего внутреннего поля элемен
та. Верхнее внутреннее поле, задаваемое для внутристрочных
незаменяемых элементов, не оказывает никакого влияния на
вычисление высоты строки. Следовательно, такой элемент с
верхним внутренним полем и задним планом может явно про
стираться на другие строки, а возможно, и перекрывать другое
содержимое. Отрицательные значения в данном свойстве не
допускаются.
Примеры:
ul { padding-top : 0 . 5 i n ; }
hЗ { padding-top : 1 . 5em; }
perspective
Значения:
none 1 <nwnЬer>
none
Нет.

Описание:
Определяет величину видимой трехмерной перспективы
преобразуемых потомков, а не самого элемента. Указываемые
числовые значения данного свойства определяют глубину со
кращения перспективы в пикселях. Чем меньше эти числовые
значения, тем сильнее искажается перспектива. Отрицатель
ные значения данного свойства интерпретируются таким же
образом, как и значение none.
Примеры:
body { perspect ive : 2 50 ; } / * средняя перспектива ' */
#wrapper { perspective : 1 0 ; } / * крайняя перспектива ' * /
На момент написания данной книги это свойство поддер
живалось в префиксной форме только в WebKit.
perspective - origin
Значения:
[ [ <percentage> 1 <length> 1 le!t 1 center 1 right ]
[ <percentage> 1 <length> 1 top 1 center 1 bottom ] ? ]
[ [ left 1 center 1 right ] 1 1 [ top 1 center 1 bottom
50% 50%
Нет.

По размеру блdка элемента.
Описание:
Определяет исходную точку видимой трехмерной перспек
тивы в элементе. По существу, данное свойство определяет
в элементе точку, которая появляется непосредственно перед
наблюдателем.
Примеры:
body { pe r spec t ive- orig i n : bottom right ; J
#wrapper div { perspective-origin : О 5 0 % ; )
На момент написания данной книги это свойство n оддер
живалось в префиксной форме только в WebКit.
pos i tion
Значения:
static 1 relative 1 aЬsolute 1 fixed
static
Нет.
224 CSS. Карманный справочник, 4-е мзданме

Описание:
Определяет схему расположен ия, применяемую при раз
метке элемента. Расположить можно любой элемент, хотя эле
мент, размещаемый при значении aЬsolute или fixed дан
ного свойства, сформирует структурный блок независимо от
разновидности этого элемента. Элемент с относительным рас
положением смещается относительно своего исходного распо
ложения в обычном потоке.
Примеры:
# footer { po s i t ion : f ixed; bottom: О ; )
* . of fset { po s i tion : relative ; top : O . S em ; }
Абсолютное расположение поддерживается в браузере
Internet Explorer только начиная с версии 7.
quo tes
Значения:
[ <st ring> < s t r ing> ] + 1 none
Ко всем элементам в CSS2, а в CSSЗ ко всем элементам,
-
nсевдоэлементам : : be fore, : : a fter, : : alternate, : : marker,

: : l ine-marker, областям отступов и нижних колонтитулов в
блоках @ footnote.
Нет.

Описа ние:
Определяет образец цитирования, применяемый для обыч -
ных и вложенных кавычек. Открывающие и закрывающие ка
вычки вставляются по значениям openquote и close-quote
свойства content соответственно. Следует, однако, иметь в
виду, что некоторые псевдоэлементы, к которым применяют
ся кавычки, в том числе : : al t e rnate, : : ma r ke r и : : l ine
marke r, являются относительно новыми в CSSЗ и могут под
держиваться не во всех браузерах.
Пример:
q { quotes : ' \2 0 1 С ' ' \2 0 1 0 ' ' \2 0 1 8 ' ' \2 0 1 9 ' ; }
res 1 z e
Значения:
none 1 Ьoth 1 horizontal 1 vertical
none
Ко всем элементам, значение свойства overflow которых
не равно v i s iЫe.
Нет.
Описание:
Определяет порядок (или возможность) изменения разме
ров элемента пользователем. Конкретный внешний вид и дей
ствие механизма изменения размеров элемента оставляется на

усмотрение пользовательского агента и, вероятнее всего, зави
сит от направления письма.
Примеры:
textarea { re s i ze : vertica l ; }
i frame ( resize : both; }
right
Значения:
auto
торых задано значение свойства pos i t i on, отличающееся от
static.
Нет.
Для относительно размещаемых элементов читайте при
веденное ниже примечание; для статически размещаемых
элементов (т.е. таких элементов, для которых задано значе
ние static свойства pos i t ion) вычисляемое значение равно
auto; для значений длины оно равно соответствующей абсо
лютной длине; для значений в процентах - объявляемому зна
чению, а иначе auto.
-

Описание:
Определяет смещение внешнего края правого отступа раз
мещаемого элемента относительно правого края содержащего
его блока.
Примеры:
div#footer { po s i t i o n : f ixed ; right : О ; )
* . overlapper { po s i t io n : relative ; right : - 2 5рх ; )
Для относительно размещаемых элементов вычисляемое
значение свойства left всегда равно значению свойства right.
ruЬy-al ign
Значения:
auto 1 start 1 left 1 center 1 end 1 right 1
distriЬute-letter 1 distriЬute-space 1 line-edge
auto
Ко всем элементам и формируемому их содержимому.
Да.
Описание:
Определяет выравнивание идеографического текста отно
сительно содержимого идеографической основы.

Примеры:
rиЬу { ruЬy-a l ign : s tart ; )
rubytext { ruby-al ign : di s t r ibute-space ; )
Идеографическим называется такой текст, который распо
лагается над основным текстом, что характерно для письма
восточно-азиатских языков. На момент написания данной
книги это свойство поддерживалось только в браузере Internet
Explorer.
ruЬy- overhang
Значения:
auto 1 start 1 end 1 none
none
К родительским элементам тех элементов, значение свой
ства display которых равно ruЬy- text.
Да.
Описание:
Определяет, с какой стороны базового текста идеографиче
скому тексту разрешается выступать над его идеографической
основой, если он оказывается шире базового текста.
Пример:
ruЬytext { ruЬy-overhang : none ; )

Идеографическим называется такой текст, который располага
ется над основным текстом, что характерно для письма восточно
азиатских языков. На момент написания данной книги это свой
ство поддерживалось только в браузере Internet Explorer.
ruЬy-po s i tion
Значения:
Ьefore 1 after 1 riqht
before
К родительским элементам тех элементов, значение свой
ства display которых равно ruЬy-text.
Да.
Описание:
Определяет положение идеографического текста относи
тельно его базового текста.
Пример:
ruЬytext ( ruЬy-po s i t i o n : before ; )
Идеографическим называется такой текст, который располага
ется над основным текстом, что характерно для письма восточно
азиатских языков. На момент написания данной книги это свой
ство поддерживалось только в браузере Internet Explorer.

ruЬy- span
Значения:
attr (х) 1 none
none
К элементам со значением ruЬy- text свойства display.
Нет.
Число.
Описание:
Определяет количество элементов базового текста, которые
может охватывать идеографический текст. Значение данного
свойство должно быть числовым и вычисляться как таковое.
А значения О и none равнозначны значению 1 и обозначают
отсутствие такого охвата.
Пример:
rubytext { ruby-span : attr ( span) ; }
Идеографическим называется такой текст, который распола
гается над основным текстом, что характерно для письма вос
точно-азиатских языков. На момент написания данной книги это
свойство поддерживалось только в браузере Internet Explorer.
taЬle- layout
Значения:
auto 1 fixed

auto
К элементам со значением tаЫе или inline-taЫe свой
ства display.
Нет.
Описание:
Определяет, следует ли размечать табличный элемент по
алгоритму автоматической или фиксированной разметки. Пре
имущество алгоритма автоматической разметки заключается в
том, что он чаще всего применяется в веб-разработке, и за бо
лее чем десятилетнее существование браузеров разработчики
к нему уже привыкли, хотя теоретически алгоритм фиксиро
ванной разметки действует быстрее и более предсказуемо.
Примеры:
taЫe . data { taЬle-display : f i xed ; )
taЫe . directory { taЫe-display : auto ; )
text-align
Значения в CSS2:
left 1 center / riqht / justify 1 <st ring>
left / center / riqht 1 justify
[ start 1 end 1 left 1 center 1 riqht 1 justify 1
match-parent ] 1 1 <s t r ing>

Зависит от конкретного пользовательскрго агента, а зача
стую - от направления письма (в CSS2 . l ); start (в CSSЗ).
К бл очным элементам.
Да.
Описан ие:
Опр еделяет выравнивание текста по горизонтали в преде
лах бло'Чного элемента путем определения rочки, по которой
должны выравниваться построчные блоки. · Поддержка значе
ния ju stify данного свойства дает пользовательским агентам
возможность выравнивать программным способом рассто
яние между словами, а не буквами в содержимом текстовых
строк, хотя достигаемый результат может различаться для
пользовательских агентов.
Пример ы:
р ( text-align : j u s t i fy ; )
h4 ( text-al ign : cente r ; )
В сnецификацию CSS2 включено значение <string>, ис
ключенное из спецификации CSS2. l из-за отсутствия должной
поддержки, хотя оно снова возвращено в спецификацию CSSЗ.
На момент написания данной книги ему все еще недоставало
поддержки в браузерах.

text-decorati on
Значения:
none 1 [ underline 1 1 overline 1 1 line-through 1 1 Ьlink ]
none
Нет.
Описание:
Определяет эффекты художественного оформления текста,
например подчеркивание. Подобными эффектами охватыва
ются и порожденные элементы, у которых отсутствует соб
ственное художественное оформление. Допускается указывать
значения данного свойства в разных сочетаниях. Но всякий
раз, когда два объявления свойства text-decoration приме
няются к одному и тому же элементу, объявляемые значения не
сочетаются вместе. Рассмотрим в качестве примера следующие
объявления:
hl { text-decorat ion : ove r l i ne ; }
hl , h2 { text-decorat ion : unde r l i ne ; }
Благодаря объявленным здесь стилям содержимое элемен

тов hl не будет надчеркнуто, поскольку значение overline
полностью замещается значением underline. Если же необ
ходимо надчекнуть и подчеркнуть содержимое элементов hl,
то после объявления hl, h2 следует ввести еще одно объявле
ние hl со значениями overline underline свойства text
decorat ion или расширить селектор в объявлении hl, h2,

чтобы конкретизировать его назначение. Поддержка значения
Ыink данного свойства для пользовательских агентов необя
зательна.
Примеры:
и { text -decorat ion : unde r l i ne ; }
. old { text-decoration : l ine-through; J
u . old { text -deco rat ion : l i ne-through unde r l ine ; }
text- indent
Значения в CSS2 :
[ <length> 1 <percentage> ] && [ hanqing 1 1 each-line ]?
о
Да.
Описание:
Определяет отступ первой строки содержимого в блочном
элементе. Чаще всего служит для создания эффекта табуляции.

Разрешается указывать отрицательные значения данного свой
ства, которые вызывают эффекты выступа (или обратного от
ступа), т.е. смещения текста влево. В спецификации CSSЗ зна
чение each-line данного свойства вызывает отступ любой
новой, а не только первой строки. А значение hanqinq обра
щает заданный образец отступа, что дает возможность созда
вать эффект выступа, не прибегая к отрицательным значениям
длины.
Примеры:
р ( text- indent : Sem; }
h2 ( text- indent : - 2 5рх ; )
text- overf low

Значения:
clip 1 ellipsis
clip
Нет.
Описание:
Определяет поведение при переполнении блока родитель
ского элемента содержимым внутристрочного элемента в тех
случаях, когда для родительского элемента не задано значе
ние visiЫe свойства over f l ow. Устанавливаемое по умол
чанию значение данного свойства соответствует исторически

сложившемуся поведению, когда содержимое просто отсе
кается по краям блока родительского элемента. А значение
ellipsis данного свойства означает, что содержимое должно
быть усечено, но в конце элемента вводится многоточие ( . . . ) .
В языках с правосторонним письмом, например в английском,
многоточие размещается в правом нижнем углу элемента.
Примеры:
pre { text-ove r f l ow : c l ip ; )
article { text-overf low : e l l ips is ; )
text- shadow
Значения:
none 1 [ <length> { 2 , 4 ) <colo r> ? , ] * < length> { 2 , 4 ) <co lor>?
none
Наследуется :
Да.
Один или более наборов цветов плюс три абсолютные длины.
Описание:
Определяет одну или более теней, отбрасываемых тексто
вым содержимым элемента. Тени всегда воспроизводятся по
зади текста в элементе, но впереди его переднего плана, границ
и контура. Кроме того, тени воспроизводятся от первой сверху
и до последней снизу.
Четыре значения длины теней могут быть объявлены в
следующем порядке: смещение по горизонтали, смещение

по вертикали, расстояние размытия и расстояние залегания
тени. Если указаны положительные значения смещения, тени
отбрасываются вниз и вправо. А если указаны отрицательные
значения смещения, тени отбрасываются назад и влево. При
положительных значениях залегания тени расширяются, а при
отрицательных значениях - сокращаются. Значения размытия
теней не могут быть отрицательными.
Примеры:
h l { text- shadow : O . Sem О . З Зеm 4рх 2рх gray; )
h2 { text-shadow : О -Зрх O . Sem Ы uе ; )
text- trans form

Значения:
uppercase 1 lowercase / capitalize 1 none
none
Да.
Описание:
Определяет образец для изменения регистра букв в элемен
те независимо от регистра букв текста в исходном документе.
Какие именно буквы следует сделать заглавными по значению
capi talize данного свойства, явно не определено, поскольку
это зависит от способности пользовательских агентов распоз
навать отдельные слова в тексте.

Примеры:
hl { text -tran s fo rm : upperca s e ; )
. t itle { text- t rans form : capital i ze ; )
top
Значения:
auto
торых задано значение свойства pos i t i on, отличающееся от
static.
Нет.
Для относительно размещаемых элементов ч итайте при
веденное ниже примечание; для статически размещаемых
элементов (т.е. таких элементов, для которых задано значе
ние sta tic свойства pos i t ion) вычисляемое значение равно
auto; для значений длины оно равно соответствующей абсо
лютной длине; для значений в процентах - объявляемому зна
чению, а иначе auto.
-
Описание:
Определяет смещение внешнего края верхнего отступа раз
мещаемого элемента относительно верхнего края содержащего
его блока.

Если для относИ:тельно размещаемых элементов задано зна
чение auto обоих· свойств, bottom и top, то их вычисляемые
значения равны нулю ( О). Если же только одно из этих свойств
принимает значен�е auto, то его вычисляемое значение стано
вится отрицательным значением другого свойства. А если ни
одно из этих свойtтв не принимает значение auto, то вычис
ляемое значение свойства bottom становится отрицательным
значением свойстn а top.
Примеры:
#masthead { po s it ion : f i xed; top : О ; }
suЬ ( po s i t ion : relative; top : 0 . 5em;
vertical-al ign : bas e l ine ; )
transform
Значения:
< none 1 <trans fo rm-function> [ <transform-function> ] *
< transform-function>
none
Нет.

Описание:
Определяет одно или более преобразований элемента. Та
кие преобразования могут происходить как в двухмерном, так
и в имитируемом трехмерном пространстве в зависимости от
того, каким образом они объявлены.
Допустимые значения для расширения < trans:form-:func
tion> слишком сложны и пространны. А полный их перечень
и краткое описание можно найти по адресу http : / /wЗ . org/
TR/css3- 3d-trans forms / # t rans f orm- funct i on s .
Примеры:
tаЫе th { t ransform : rotate ( 4 5deg ) ; )
l i { transform : scaleЗ d ( l . 2 , 1 . 7 , 0 . 8 5 ) ; )
trans form- origin

Зна чения:
[ [ [ <percentage> 1 <length> 1 left 1 center 1 right ]
[ <percentage> 1 <length> 1 top 1 center 1 Ьottom ] ? ]
<length>? ] 1 [ [ [ left 1 center 1 right ] 1 1
[ top 1 center 1 Ьottom ] ] <length>? ]
Исходное зна ч ение:

50% 50% о
Нет.
По размеру блока элемента.
Вычисляемое знач ение:

Абсолютная длина для значения <length>, а иначе - в про
центах.

Описание:
Определяет исходную точку для преобразований элемента
как в двухмерном, так и в имитируемом трехмерном простран
стве. Значения <length>, отмеченные как необязательные,
определяют исходную точку преобразований в имитируемом
трехмерном пространстве. Если они не указаны, то данная точ
ка относится к двухмерному пространству.
Примеры:
tаЫе th { t ransform-o rigin : bot tom left ; )
l i { t ransform-orig i n : 1 0 % l Opx l Oem; )
На момент написания данной книги существовали два раз
ных рабочих варианта для преобразований в двух- и трехмер
ном пространстве, и каждый из них предлагал свой синтаксис
для определения свойства t rans form-origin. Здесь же пред
принята попытка согласовать оба варианта, не прибегая к двум
разным, но почти одинаковым синтаксисам определения дан
ного свойства.
trans form- s tyle

Значения:
[ flat 1 preserve-Зd
flat
Нет.
Вычисnяем ое значение:

Описание:
Определяет, должен ли элемент, преобразуемый в имитиру
емом трехмерном пространстве, иметь потомков, воспроизво
димых в той же самой двухмерной плоскости, что и родитель
ский элемент, или же следует попытаться создать трехмерный
эффект, когда потомки с положительным или отрицательным
значением свойства z -index воспроизводятся впереди или
позади плоскости своего родительского элемента при его вра
щении. Элементы со значением hidden свойства overflow не
могут сохранять трехмерные эффекты и поэтому интерпрети
руются так, как будто значение их свойства t rans form-style
равно flat.
П риме р:
li { t ransform- style : preserve- Зd; }
transition
Значения:
[ < ' t ransit ion-property ' > 11 < ' trans i t ion-durat ion ' > 1 1
< ' trans i t iontirning-func t i on ' > 11 < ' transit ion-delay ' >
[ , [ < ' trans i t ion-property ' > 1 1 < ' trans i t ion-durat ion ' > 1 1
< ' trans i t ion- t irning-function ' > 1 1 < ' trans i t ion-delay ' > ] ) *
Ко всем элементам, а также к псевдоэлементам : : before и
: : after.
Нет.

Опис ание:
Это сокращенная форма свойства, определяющая особен
ности переходов одного или более элементов из одного со
стояния в другое. И хотя на момент написания данной книги
синтаксис объявления значений этого свойства еще не был
окончательно определен, в спецификации поясняется, что если
объявлены два значения <time>, то первое из них обознача
ет продолжительность перехода, а второе - задержку. Если
же объявлено лишь одно значение <time>, то оно обозначает
только продолжительность перехода.
Примеры:
a [ hre f ] : hover { t ransit ion : color l s 0 . 2 5s ease-in-out ; )
h l { trans i t ion : l inear a l l l O s ; )
trans i tion - delay

Значения:
< t irne> [ , <t irne> J *
о
: : a fter.
Нет.
Описан ие:
Определяет задержку от теоретически возможного на
чала перехода и до его фактического начала. Так, если начало

перехода определяется при наведении курсора на элемент, но
с задержкой на О 5 с, то сам переход фактически начнется че
,
рез полсекунды после наведения курсора на элемент в первый

раз. Разрешается указывать и отрицательные значения данного
свойства, но они приводят лишь к тому, что переход перено
сится к тому моменту, которого он достиг бы, если бы пере
ход начинался в определенное время, отодвинутое в прошлое.
Иными словами, процесс отчасти начнется в течение самого
перехода и дойдет до своего логического завершения.
П римеры:
a [ hre f ] : hover { t rans i t ion-delay : 0 . 2 5 ; )
hl { t ransit ion-delay : О ; )
transition-duration
Значения:
<time> [ , < t ime> ] *
о
: : after.
Нет.
Описание:
Определяет продолжительность перехода от начала и
до конца. Устанавливаемое по умолчанию нулевое значение
(О) означает, что переход происходит мгновенно и без всякой

анимации. Отрицательные значения данного свойства интер
претируются как нулевые ( О ) .
Примеры:
a [ hre f ] : hover ( tran s i t ion-duration : ls ; }
h l ( t rans i t ion-durat ion : l O s ; }
transi tion -property

Значения:
none 1 all 1 [ <IDENT> ] [ ' , ' < I DENТ> ] *
all
: : afte r.
Нет.
Описание:
Определяет одно или более свойств, которые должны пере
ходить из одного состояния в другое. Например, для свойства
color это означает переход цвета переднего плана от началь
ного оттенка к конечному оттенку этого цвета. Если объявлена
сокращенная форма свойства, то действие параметров перехо
да этого свойства распространяется и на все остальные свой
ства, представленные в сокращенной форме.
Ключевое слово all означает, что переходу подлежат все
свойства. А ключевое слово none препятствует переходу лю
бых свойств, по существу, отменяя их переход из одного состо
яния в другое.

Примеры:
a [ hre f ] : hover { trans i t ion-property : color ; )
hl { t ransit ion-prope rt y : a l l ; )
transition- timing- function

Значения:
<trans i t ion-timing> [ , <trans i t ion-t iming > ] *
< transi tion- timing>
ease 1 linear 1 ease-in 1 ease-out 1 ease-in-out 1

cuЬicЬezier ( <nшnЬe r > , <nшnЬe r > , <nшnЬe r > , <nшnЬe r > )
ease
Ко всем элементам, а также к псевдоэлементам : : before
и : : a fter.
Нет.
Описание:
Определяет порядок вычисления промежуточных состоя
ний при переходе. Ключевые слова (ease, linear т.д.), указы
ваемые в качестве значений данного свойства, служат сокра
щенной формой обозначения конкретных значений функции
cubic-be z ier ( ) , определяемых в спецификации. Следова
тельно, все значения данного свойства, по существу, являются
значениями функции cuЬic-be z i er ( ) .
Глава 4. Справочник свойав 247

Примеры:
a [ hre f ] : hover { t ran s i t ion-t iming-funct ion : ease- in-out ; )
h l [ t ransition-timing-function : l inea r ; }
uni code -Ьidi

Значения:
normAl 1 emЬed 1 bidi-override
normal
Нет.
Описание:
Позволяет формировать уровни вложения в алгоритме дву
направленного форматирования символов в Уникоде. Пользо
вательским агентам, не поддерживающим двунаправленный
текст, разрешается игнорировать данное свойство.
Пример:
span . name { direct ion : rt l ; unicode-b idi : emЬed ; )
vertical - align
Значения:
baseline 1 suЬ 1 super 1 top 1 text-top 1 middle 1 bottom 1
textЬottom 1 <percentage> 1 < length>

Исходное знач ение:
baseline
К В!iутристрочным элементам и ячейкам таблицы.
Нет.
По з начению <l ine-height> элемента.
Выч исляемое знач ение:

Для значений в процентах и значений длины вычисляемое
значение равно соответствующей абсолютJiОЙ длине, а иначе
оно оказывается таким же, как и объявляемQе значение.
Описание:
Оп ределяет вертикальное выравнивание базовой линии
внутристрочного элемента относительно базовой линии той
строки, в которой находится этот элемент. Разрешается указы -
вать отрицательные значения длины и значения в процентах,
причем они опускают элемент, а не поднимают его.
В ячейках таблицы данное свойство задает выравнивание
содержимого ячейки в пределах ее блока. f:сли данное свой
ство п рименяется к ячейкам таблицы, то д<;>пускаются только
следующие его значения: baseline, top, middle и bottom.
Пример ы:
sup { vert ical-al ign : super ; }
. fnote { vertical-al ign : 5 0 % ; }
vi s iЬi l i ty
Зна ч ен ия:
visiЫe 1 hidden 1 collapse

visiЫe
Нет.
В ычисляемое значение:
Описание:
Определяет, следует ли воспроизводить блок элемента,
сформированн ы й самим элементом. Это означает, что эле
мент может занять то место, которое он обычно занимает, а
все остальное останется совершенно невидимым. Значение
collapse данного свойства применяется в таблицах: для уда
ления столбцов и строк из разметки таблицы.
Примеры:
ul . s uЬmenu { vi s ib i l i t y : hidden ; )
t r . hide { vi s ib i l i t y : col lapse ; )
whi te- space

Значения:
normal 1 nowrap 1 pre 1 pre-wrap 1 pre-line
normal
Ко всем элементам (в CSS2 . l ); к блочным элементам (в CSS2).
Нет.

Описание:
Определяет порядок обработки пробелов в элементе при
его разметке. Значение normal данного свойства означает тра
диционную для браузеров обработку текста, при которой лю
бая последовательность пробелов сводится к одному пробелу.
Префикс pre в некоторых значениях данного свойства означа
ет, что пробелы будут обрабатываться таким же образом, как и
в элементе pre разметки НТМL-документов, когда пробелы и
разрывы строк полностью сохраняются. Значение nowrap дан
ного свойств препятствует разбиению элемента на строки, как
и аналогичный атрибут элементов разметки td и th в HTML4.
А значения pre-wrap и pre- line были внедрены в специфи
кации CSS2 . l . Первое из них обозначает сохранение пробелов
пользовательским агентом наряду с автоматическим перено
сом текстовых строк, а второе - учет знаков новой строки в
тесте наряду со сведением всех лишних пробелов в один, как
при значении normal.
Примеры:
td { white-space : nowrap ; )
tt { white- space : pre ; )
width
Значения:
auto
К блочным и заменяемым элементам.

Нет.
Для исходных значений auto и в процентах такое же, как
объявляемое значение, а иначе - абсолютная длина, если толь
ко данное свойство не применяется к элементу, и тогда оно
равно auto.
Описание:
Определяет ширину области содержимого элемента, к ко
торой снаружи добавляются внутренние поля, границы и от
ступы. Данное свойство игнорируется при разметке внутри
строчных незаменяемых элементов. Указывать отрицательные
значения абсолютной длины и в процентах не разрешается.
Примеры:
tаЫе { width : 80 % ; )
# s idebar { w idth : 2 0 % ; )
. figure img { width : 2 0 0рх; )
word- spacing
Значения:
[ norm&l 1 <length> <percentage> ] { 1 , З )
normal
Да.

По ширине глифа пробела в Уникоде (U+0020) для начерта
ния шрифта элемента.
Для значений длины вычисляемое значение равно соответ
ствующей абсолютной длине, а иначе nonnal. -
Описание:
Определяет величину пробела, вставляемого между слова
ми. Следует, однако, иметь в виду, что в спецификации поня
тие слово не определено. Поэтому на практике пользователь
ские агенты будут, как правило, применять данное свойство
к сворачиваемым пробелам между строками непробельных
символов. Разрешается указывать отрицательные значения аб
солютной длины и в процентах. В таком случае слова распола
гаются ближе одно к другому.
Примеры:
p . spacious { letter-spacing : брх ; )
em { letter-spacing : 0 . 2em; )
p . cramped { letter-spacing : - 0 . Sem; }
В спецификации CSS2. l свойство word- spacing принимает
единственное значение: <length> или nonnal.
word-wrap
Значения:
normal 1 break-word
nonnal

Да.
Описание:
Определяет порядок автоматического переноса текста в тех
случаях, когда он не переносится обычным образом. Приме
ром тому служит перенос очень длинной строки чисел без про
белов подобно первой тысяче цифр после десятичной точки
в числе 7t. Значение break-word данного свойства разрешает
пользовательским агентам разбивать слово на произвольные
части, если им не удается найти обычные точки разбиения в
том, что они распознают как слово (т.е. текстовую строку).
Примеры:
td { word-wrap : break-word; )
р { word-wrap : norma l ; }
z - index
Значения:
< integer> 1 auto
auto
К размещаемым элементам.
Нет.
Вычисn яемое значение:

254 CSS. Карманный справочник. 4-е издание

Описание:
Определяет расположение размещаемого элемента по оси z,
которая проводится перпендикулярно области отображения.
При положительных значениях данного свойства элемент раз
мещается ближе к наблюдателю, а при отрицательных значени
ях - дальше от него.
Пример:
#masthead { po s it ion : relative; z - index : 1 0 0 0 0 ; )
Сво йства печатных носителе й информации

Ниже перечислены все свойства печатных носителей ин
формации с кратким пояснением их назначения.
break-after
Значения:
auto 1 always 1 avoid 1 left 1 right 1 page 1 column 1
avoid-page 1 avoid-column
auto
Нет.
Вычисляем ое значение:
Описание:
Определяет, следует ли размещать разрыв столбца или
страницы после элемента. И хотя при значении always дан-

ного свойства теоретически возможно принудительное разме
щение разрывов, гарантировать запрет их появления нельзя.
Самое лучшее, что можно сделать, - указать значение avoid,
чтобы пользовательский агент не вставлял разрыв столбца или
страницы после элемента. Ключевые слова avoid-colwnn и
avoid-page препятствуют вставке разрыва столбца ип:и стра
ницы соответственно после элемента. Ключевое слово left
служит для вставки достаточного количества разрывов после
элемента, чтобы следующая страница располагалась слеза. Ана
логично ключевое слово right служит дп:я размещения следую
щей страницы справа. А ключевые слова page и always служат
дп:я вставки разрыва страницы после элемента, тогда как клю
чевые слова colwnn и always дп:я вставки разрыва столбца.
-
Примеры:
hЗ { break-a fte r : avoid ; }
div . col { break-afte r : column ; )
break-be f ore
Значения:
auto 1 always 1 avoid 1 left 1 right 1 page 1 column 1
avoid-page 1 avoid-column
Исходное значение :
auto
Нет.
Вычисляемое зна � ение:


Описание:
Определяет, следует ли размещать разрыв столбца или
страницы перед элементом. И хотя при значении always дан
Самое лучшее, что можно сделать, - указать значение avoid,
чтобы пользовательский агент не вставлял разрыв столбца или
страницы перед элементом. Ключевые слова avoid-column и
avoid-pa9e препятствуют вставке разрыва столбца или стра
ницы соответственно перед элементом. Ключевое слово left
служит для вставки достаточного количества разрывов перед
элементом, чтобы страница располагалась слева. Аналогич
но ключевое слово ri9ht служит для размещения страницы
справа. А ключевые слова ра9е и always служат для вставки
разрыва страницы перед элементом, тогда как ключевые слова
colwnn и always для вставки разрыва столбца.
-
Примеры:
h2 { break-before : always ; }
hЗ { break-before : avoid ; }
break- ins ide

Значения:
auto 1 avoid 1 avoid-page 1 avoid-column
auto
Нет.

Описание:
Определяет, следует ли исключить поя в ление разрыва
столб ц а или страни ц ы в самом элементе. Следует, однако,
иметь в виду, что избежать появления таких разрывов нельзя.
Так, если сделать объявление
body { break- inside : avoid-page ; )
в длинном документе не удастся избежать вставки разрывов

страниц пользовательским агентом.
Примеры:
tаЫе { break- i ns ide : avo i d ; )
ul { break- inside : avoid-column ; }
image - orien ta ti on
Значения:
auto 1 <angle>
auto
К элементам изображений.
Нет данных.
Вычисляем ое значение:
Описание:
Определяет угол поворота изображений по часовой стрел
ке, когда они воспроизводятся на печатных носителях ин
формации. Это дает возможность поворачивать изображе
ния, поступающие из мобильных устройств, где они не были

повернуты после съемки "боком". Пользовательские агенты
должны поддерживать следующие вычисляемые в градусах
значения углов поворота: Odeg, 90deg, 1 80deg и 2 7 0deg, а
остальные значения могут игнорироваться. Следует, однако,
иметь в виду, что данное свойство не требуется для вращения
изображений при переходе от книжной ориентации к альбом
ной и обратно, поскольку такое вращение должно выполнять
ся пользовательским агентом автоматически.
Пример:
img . oldphone { image-orientat ion : 9 0 deg ; )
marks
Значения:
[ crop 11 cross ] 1 none
none
К содержимому страницы.
Нет.
Описание:
Определяет, следует ли добавить крестообразные приво
дочные .метки или метки обрезки при воспроизведении стра
ницы.
Пример:
@page {marks : cross crop ; )

orphans
Значения:
< i nteger>
2
Да.
Такое же, как и объявляемое значение .
Описание:
Определяет минимальное количество текстовых строк в эле
менте, которые можно оставить внизу страницы. Это может
оказать влияние на расположение разрывов страниц в элементе.
Примеры:
р { orphans : 4 ; )
ul { orphans : 2 ; )
page
Значения:
auto 1 <ident i fier>
auto

Да.
Описание:
Определяет тип страницы, которая должна быть использо
вана при воспроизведении элемента. Слово должна намеренно
выделено не только здесь, но и в спецификации, чтобы обра
тить особое внимание на данное обстоятельство.
Так, если значение данного свойства для текущего элемента
отличается от его значения для предыдущего элемента, то перед
этим элементом вставляется хотя бы один разрыв страницы,
а новая страница начинается с типа страницы, объявленного в
свойстве page. (Если же в друrих стилях требуется разделять
страницы на левые и правые, когда начинается новая страница,
то может быть вставлено несколько разрывов страниц.)
Примеры:
@page wide { s i z e : landscape ; }
taЫe . summa ry { page : wide ; }
page -break-after
Значения:
auto 1 always 1 avoid 1 left 1 riqht
auto
Нет.

Описание:
Определяет, следует ли вставить один или более разрывов
страниц после элемента. И хотя при значении always данного
свойства теоретически возможно принудительное размещение
разрывов, гарантировать запрет их появления нельзя. Клю
чевое слово avoid служит для того, чтобы пользовательский
агент не вставлял, если это возможно, разрыв страницы после
элемента. Ключевое слово left служит для вставки достаточ
ного количества разрывов после элемента, чтобы страница
располагалась слева. Аналогично ключевое слово riqht слу
жит для размещения страницы справа. Свойство page-break
a fter, по существу, заменяется свойством break-a fter, хотя
поддержка первого в браузерах может оказаться более проч
ной, чем поддержка последнего.
Примеры:
sect ion { page-break-afte r : always ; )
hl { page-break-afte r : avoi d ; )
page -break-before
Значения:
auto 1 always 1 avoid 1 left 1 right
auto
Нет.

Описание:
Определяет, следует ли вставить один или более разрывов
страниц перед элементом. И хотя при значении always дан
Ключевое слово avoid служит для того, чтобы пользователь
ский агент не вставлял, если это возможно, разрыв страницы
перед элементом. Ключевое слово left служит для вставки до
статочного количества разрывов перед элементом, чтобы стра
ница располагалась слева. Аналогично ключевое слово riqht
служит для размещения страницы справа. Свойство page
break-before, по существу, заменяется свойством break
before, хотя поддержка первого в браузерах может оказаться
более прочной, чем поддержка последнего.
Примеры:
section { page-break-be fore : always ; )
h2 { page-break-be fore : avoid; )
page-break- inside
Значения:
auto 1 avoid
auto
Нет.

Описание:
Определяет, следует ли исключить появление разрыва стра
ницы в самом элементе. Необходимо, однако, иметь в виду, что
избежать появления таких разрывов нельзя. Так, если сделать
объявление
{ page-break- ins ide : avoid; }
в длинном документе не удастся избежать вставки разрывов

страниц пользовательским агентом. Свойство page-break
ins ide, по существу, заменяется свойством break-inside,
хотя поддержка первого в браузерах может оказаться более
прочной, чем поддержка последнего.
Пример:
tаЫе { page-brea k- ins ide : avoid; }
page -policy
Значения:
start 1 first 1 last
start
К блокам @ counter и @ s t r ing.
Вы ч исляемое значение:

Описани е:
Определяет порядок указания значений счетчиков или
строковых значений относительно страничного элемента. На
пример, сначала может возникнуть потребность определить
счетчик CSS для подсчета количества разделов, а затем вклю
чить в заголовок каждой страницы номер первого обнаружи
ваемого на ней раздела. Это можно сделать в объявлении
@counter secnum ( page-po l icy : f i r s t ; }
а также объявить таблицу стилей CSS, которая необходима для

создания образца счетчика. Если же потребуется последний
экземпляр счетчика на странице, то в приведенном выше объ
явлении следует указать page-policy : last.
Значение start данного свойства означает, что использу
ется прежнее значение, установленное до обработки текущей
страницы. Так, если вернуться к предыдущему примеру, то бу
дет использован номер счетчика, взятый из предыдущей стра
ницы, а не первый экземпляр счетчика на текущей странице.
Пример ы:
@counter chapter ( page-po l icy : f i r s t ; }
@string section- t i t l e ( page-pol icy : start ; )
s 1 ze
Значения:
auto 1 <length> { l , 2 } 1 [ <page - s i z e > 1 1 [ portrait 1
landscat>e ] ]
<page-size>
А5 1 А4 1 АЗ 1 BS 1 В4 1 letter 1 leqal 1 ledger
auto

Приме няется:
В контексте страницы.
Описание:
Определяет размеры и ориентацию страничного блока.
Ключевые слова auto, portrait и landscape приводят к
тому, что страничный блок заполняет пространство, доступ
ное для воспроизведения на странице. Содержимое странич
ных блоков со значением portrai t данного свойства печа
тается таким образом, чтобы более длинные стороны стра
ничного блока располагались слева и справа. А содержимое
страничных блоков со значением landscape данного свойства
печатается таким образом, чтобы более длинные стороны
страничного блока располагались вверху и внизу.
Если размеры страничного блока указываются с помощью
значений длины или какого-нибудь ключевого слова из рас
ширения <page-size>, обозначающего формат страницы (на
пример, А4 ), а сам страничный блок не вписывается в размеры
страницы для его воспроизведения, то размеры страничного
блока и его содержимого могут быть уменьшены, чтобы по
догнать его по странице. Если же указано лишь одно значе
ние длины, то оно означает оба размера, тем самым определяя
квадратный страничный блок. Значения длины, указанные в
единицах измерения em или ех, рассчитываются относитель
но вычисляемого размера шрифта, выбираемого из контекста
страницы.
Пример:
body ( page- s i z e : lands cape ; }

widows
Значения:
<integer>
2
Да.
Описание:
Определяет минимальное количество текстовых строк в эле
менте, которые можно оставить вверху страницы. Это может
оказать влияние на расположение разрывов страниц в. элементе.
Примеры:
р { widows : 4 ; )
ul { widows : 2 ; )
Сво й ства акустически х носителе й

информации
Ниже перечислены все свойства акустических носителей
информации с кратким пояснением их назначения.
cue
Значения:
< ' cue-before ' > 11 < ' cue-after ' >

Нет.
Применяется к наследуемому значению свойства voice
volume.
См. ниже описание отдельных свойств (cue-before и пр. ) .
Описание:
Это сокращенная форма свойства, определяющая звуковые
сигналы, которые следуют до и после озвучивания содержимо
го элемента. Звуковой сигнал можно рассматривать как аку
стический аналог пиктограммы.
Примеры:
taЫe . layout
cue : url ( shatte red-g lass . ogg) url ( sad-t romЬone . wav) ; }
pre { cue : u r l ( raygun . mp З ) ; }
cue- af ter
Значения:
none 1 <uri> [ <numЬe r> 1 <percentage> 1 silent 1 x-soft 1
soft 1 medium 1 loud 1 x-loud ]
none

Нет.
Задан и е в процентах:
volume.
Выч исn яемое значение:

Оп исание:
Определяет звуковой сигнал, который следует после озву
чивания содержимого элемента.
Пр имеры:
taЫe . layout { cue-afte r : url ( s ad-tromЬone . wav) ; }
pre { cue-after : url ( raygun . mpЗ ) ; }
cue-bef ore
Значения:
none <uri> [ <numЬer> 1 <percentage> 1 silent 1 x-soft 1
soft medium 1 loud 1 x-loud ]
Исходное значен ие:

none
Нет.
Задан и е в процентах:
volume.

Описание:
Определяет звуковой сигнал, который предшествует озву
чиванию содержимого элемента.
Примеры:
t aЫ e . layout { cue-before : url ( shattered-glass . ogg) ; )
pre { cue-be fore : url ( raygun . rnp З ) ; )
pause
Значения:
< ' pause-before ' > 1 1 < ' pause-after ' >
Нет.
Описание:
Это сокращенная форма свойства, определяющая паузы,
которые следуют до и после озвучивания содержимого элемен -
та. Пауза это промежуток, в течение которого содержимое
-
вообще не озвучивается, хотя фоновые звуки могут быть все

еще слышны. Подробнее о размещении пауз читайте ниже, в
описании свойств pause-before и pause-after.

Примеры:
hl { paus e : ls 5 0 0ms ; }
ul { pause : 2 5 0ms ; }
pause -af ter

Значения:
none 1 x-weak 1 weak 1 medium 1 strong 1 x-strong 1 <t ime>
Нет.
Абсолютное значение времени.
Описание:
Определяет продолжительность паузы, которая следует по
сле озвучивания содержимого элемента. Пауза - это проме
жуток, в течение которого содержимое вообще не озвучивает
ся, хотя фоновые звуки могут быть все еще слышны. Эта пауза
воспроизводится после любого звукового сигнала, который
следует после озвучиваемого элемента. (См. также описание
свойства cue-after и других соответствующих свойств.)
Примеры:
hl { pause-a fte r : 5 0 0ms ; }
ul { pause-a fter : 2 5 0ms ; }

pause -be f ore
Значения:
none 1 x-weak 1 weak 1 medium 1 stronq 1 x-stronq 1 <t ime>
Зависит от конkретного пользовательского агента.
Нет.
Вычисляемое зна �ение:

Абсолютное значение времени.
Опис ание:
Определяет продолж ительность паузы, которая предше
ствует озвучиванию содерж имого элемента. Пауза - это про
меж уток, в течение которого содерж имое вообще не озвучи -
вается, хотя фоновые звуки могут быть все еще слыш1-1ы. Эта
пауза воспроизводится до любого звукового сигнала, который
предшествует озвучиваемому элементу. (См. также оп исание
свойства cue-before и других соответствующих свойсrв.)
Примеры:
hl { pause-before : l s ; }
ul { pause-before : 2 5 0ms ; }
phonemes
Значения:
< s t r ing>

Нет.
Не определено, но, вероятнее всего, такое же, как и объяв
ляемое значение.
Описание:
Определяет фонетическое произношение содержимого эле
мента. При указании значения <st r i ng> используется Между
народный фонетический алфавит, обозначаемый экранируе
мыми кодовыми точками в Уникоде.
Пример:
#tomato { phonemes : " t \ 0 2 5 2 m\02 5 1 t o \ 0 2 8 a " ; )
res t
Значения:
< ' rest-before ' > 11 < ' rest-after ' >
Нет.
Не определено, но, вероятнее всего, соответствует паре аб
солютных значений времени.

Описание:
Это сокращенная форма свойства, определяющая переры
вы, следующие до и после озвучивания содержимого элемента.
Перерыв это промежуток, в течение которого содержимое
-
вообще не озвучивается, хотя фоновые звуки могут быть все

еще слышны. Подробнее о размещении перерывов читайте
ниже, в описании свойств rest-before и rest-a fter.
Примеры:
th { res t: О . 5s ; }
s t rong { rest : З З Зms 2 50ms ; }
res t-after
Значения:
none 1 x-weak 1 weak 1 medium 1 strong 1 x-strong 1 <t ime>
Нет.
Не определено, но, вероятнее всего, соответствует абсолют
ному значению времени.
Описание:
Определяет продолжительность перерыва, который следует
после озвучивания содержимого элемента. Перерыв - это про
межуток, в течение которого содержимое вообще не озвучива
ется, хотя фоновые звуки могут быть все еще слышны. Этот
перерыв воспроизводится после озвучивания содержимого

элемента, но перед любым звуковым сигналом, который следу
ет после озвучиваемого элемента. (См. также описание свой
ства cue-after и других соответствующих свойств.)
Примеры:
th { rest-after : 0 . S s ; )
strong { rest-after : 2 5 0ms ; )
rest-before
Значения:
none 1 x-weak 1 weak 1 mediшn 1 strong 1 x-strong 1 <t ime>
Нет.
ному значению времени.
Описание:
Определяет продолжительность перерыва, который пред
шествует озвучиванию содержимого элемента. Перерыв - это
промежуток, в течение которого содержимое вообще не оз
вучивается, хотя фоновые звуки могут быть все еще слышны.
Этот перерыв воспроизводится перед озвучиванием содержи -
мого элемента, но после любого звукового сигнала, который
предшествует озвучиваемому элементу. (См. также описание
свойства cue-be fore и других соответствующих свойств.)

Примеры:
th { re s t -before : 0 . 5s ; )
s t rong { re s t -before : З З Зms ; }
speak
Значения:
normal 1 spell-out 1 digits 1 literal-punctuation 1 no
punctuation
normal
Да.
В ычисляемое значение:
Описание:
Определяет порядок озвучивания содержимого элемента.
Значение spell-out данного свойства, как правило, служит
для озвучивания таких сокращений, как, например, WЗС или
CSS. Указание значения diqi ts данного свойства означает, что
числа озвучиваются отдельными цифрами. Например, число
13 произносится как "one three" (один три). А указание зна
чения literal-punctuation данного свойства приводит к
тому, что знаки препинания произносятся буквально так, как
слова "period" (точка) и "semicolon" (точка с запятой). И нако
нец значение no-punctuation означает, что озвучивание зна
ков препинания пропускается, а на их месте никаких пауз не
воспроизводится.

Примеры:
abbr { spea k : spell-out ; }
* . te l { spea k : digits ; }
speakaЬi l i ty
Значения:
auto 1 none 1 normal
auto
Да.
Описание:
Определяет, будет ли озвучено содержимое элемента. Если
указано значение normal данного свойства, элемент озвучи -
вается независимо от значения свойства display. Если же
указано значение none данного свойства, то элемент и все со
путствующие ему звуковые сигналы, паузы и перерывы про
пускаются, т.е. для их озвучивания не выделяется времени. Но
это значение может быть переопределено в порожденных эле
ментах, что приведет к их озвучиванию. И наконец значение
auto данного свойства приводится к значению none, если за
дано значение none свойства displa y. В противном случае оно
приводится к значению normal.
Примеры:
abbr { spea k : spe l l - out ; }
* . te l { spea k : digits ; }

voice-balance
Значения:
<numЬer> 1 left 1 center 1 right 1 leftwards 1 rightwards
center
Да.
ному числовому значению.
Описание:
Определяет стереобалансировку озвучивающего голоса.
Это дает возможность перемещать звучание голоса из одно
го стереоканала в другой, а при заданном числовом значении
<nurnЬer> -смешивать звучание голоса в обоих стереокана
лах:. Например, при значении -50 голос звучит так, как будто
он исходит из положения слева от центра. Числовые значения
<nurnЬer> указываются в пределах: от - 1 0 0 до 100 включитель
но. Ключевое слово left равнозначно числовому значению
-100, а ключевое слово right ч исловому значению 100.
-
Если указано ключевое слово leftwards, то из наследуемого

значения свойства voice-balance вычитается числовое зна
чение 20. А если указано ключевое слово rightwards, то к на
следуемому значению свойства voice-ba l ance прибавляется
числовое значение 2 0 . Данное свойство применяется к звуко
вым сигналам (см. также описание свойства сие и других соот
ветствующих свойств.)

Примеры:
. beck { voice-balance : right ; )
. moore { vo i ce-balance : l e f t ; J
voice-duration
Значения:
<time>
Нет.
Оп и сание:
Определяет продолжительность времени, необходимого
для озвучивания содержимого элемента. В конечном итоге за
мещает значение свойства voice- rate. Допускаются только
положительные значения <time> данного свойства.
Примеры:
. tel ( voice-durat i o n : З s ; }
big { vo ice-durat ion : l O s ; }
voice- fami ly
Значения:
<voice> [ , <voice> ]*

<voice>
<spec i f ic-vo ice> 1 [ <age > ? <generic-voice> <non-negative
numЬe r>? ]
< a ge >
child 1 young 1 old
<generic-voice>
male 1 female 1 neutral
Да.
Описание:
Определяет одно или более семейств голосов, которые
можно использовать для озвучивания содержимого элемента.
Сравнимо со свойством font- fami ly в том отношении, что
может быть использовано для предоставления списка семейств
голосов, включая типичные альтернативы.
Примеры:
body ( voice-fam i l y :
" Karla " , "Jenny " , young fema l e , fema le , neutral ; }
sma l l { vo ice- fami ly : male child, child; }
voice-pi tch
Значения:
<numЬer> 1 <percentage> 1 x-low 1 low 1 medium 1 high 1 x-high

mediwn
Примен яется:
Ко в сем элементам.
Да.
По liаследуемому значению.
Описан ие:
Определяет среднюю частоту основного тона голоса, озву
чивающего содержимое элемента. Средняя частота основного
тона озвучивающего голоса будет зависеть, главным образом,
от выбранного семейства голосов. Значения <numЬer> данно
го свойства указываются в герцах, определяя частоту основ
ного тона.
Пример ы:
big ( voice-pitch : 1 0 0 ; )
sma l l ( voice-pitch : high ; )
voi ce-pi tch- range

Значен ия:
<nwnЬer> 1 <percentage> 1 x-low 1 low 1 medium 1 hiqh 1 x-hiqh

Да.
Задание в про центах:

По наследуемому значению.
Описание:
Определяет отклонение средней частоты основного тона
голоса, озвучивающего содержимое элемента. Чем больше
это отклонение, тем более оживленно звучит голос. Значения
<numЬer> данного свойства указываются в герцах, определяя
диапазон частот основного тона.
Примеры:
em { voice-pi tch-range : high ; )
code ( vo i ce-pitch- range : 5 0 ; }
voice- rate
Значения:
<percentage> 1 x-low 1 low 1 medium 1 fast 1 x-fast
mediшn
Да.

По исходному значению, устанавливаемому по умолчанию.
Не определено, но в предыдущем воплощении в виде свой
ства speech- rate соответствовало абсолютному числовому
значению.
Описание:
Определяет среднюю частоту произношения слов при озву
чивании содержимого элемента.
Примеры:
hl { voice- rate : 3 3 % ; )
. legalese { vo i ce- rate : x-fast ; )
voice- s tre s s
Значения:
strong 1 moderate 1 reduced 1 none
moderate
Да.
Не определено, но, вероятнее всего, соответствует объявля
емому значению.
Описание:
Оказывает влияние на высоту тона в интонации озвучива
ющего голоса, которая обычно повышается по знакам ударе
ния, принятым в конкретном языке.

Примеры:
strong { voice-stres s : s t rong ; )
footer { voice-stres s : reduced ; )
voice-volume
Значения:
<numЬer >1 <percentage> 1 silent 1 x-soft 1 soft 1 medium 1
loud 1 x-loud
medium
Да.
По наследуемому значению.
Не определено, но в предыдущем воплощении в виде свойст
ва volume соответствовало абсолютному числовому значению.
Описание:
Определяет средний уровень громкости для формы звуко
вых колебаний при озвучивании содержимого элемента. Сле
довательно, форма звуковых колебаний с крупными всплеска
ми и впадинами может значительно подниматься выше или
опускаться ниже среднего уровня громкости, устанавливае
мого с помощью данного свойства. Значения <numЬer> дан
ного свойства указываются в пределах от О до 100 включи
тельно. Следует также иметь в виду, что нулевое значение ( О )
284 CSS. Карманный справочник, 4-е ИЭАание

равнозначно ключевому слову silent, а значение 100 - клю
чевому слову x-loud.
Приме ры:
b i g { voice-volume : x- loud; }
footer { voice-volume : 1 5 ; }
Гпава 4. Справочник свойств 285

Предм етны й указатель
А уrлов, разновидности 63
частоты, разновидности 64
Аспект шрифта,
назначение 1 88
3
Б Звуковые сигналы,
назначение 268
Блоки
Знакоместо, определение 34
внутристрочные, созда
ние 29
и
вставляемые, правила оформ-
ления 30 Идеографический текст,
гибкие, размещение 151 определение 229
объявлен и й , структура 22 Интерлиньяж
построчные, назначение 35 половинный, определение 34
содержащие элементы, прави- применение 34
ла расположения 38
строковые к
определение 32 Каскады
правила оформления 32
механизм действия 25
структурные, создание 29
элементов
наследование, механизм 25
определение 3 1
специфичность, вычисле-
отображение 2 8
ние 24
правила оформления 31
Ключевые слова
в мультимедийных запросах,
д применение 91
Директивы для обозначения цвета 57
! important, назначение 24 назначение 55
@import, назначение 18
м
Е Мультимедийные запросы
Единицы измерения ключевые слова, примене-
времени, разновидности б4 ние 91
длины назначение 90
абсолютные 59 параметры 93
относительные 61 применение 91
п универсальные значения 99
Селекторы
Пауза, определение 270
Перерыв, определение 274
по атрибутам, назначение 70
Подгонка страниц,
по значениям атрибутов
определение 39
точным, назначение 70
Псевдоклассы
частичным, назначение 70
взаимодействия, разновидно
по идентификатору, назначе
сти 82; 87
ние 69
отрицания, назначение 81
по классу, назначение 68
структурные, разновидно
по подстрокам
сти 72; 80
конечным в значениях атри
Псевдоэлементы, бутов, назначение 7 1
разновидности 88; 90 начальным в значениях
атрибутов, назначение 7 1
р произвольным в значениях
атрибутов, назначение 72
Разметка
блочная, особенности З1 порожденных элементов, на-
внутристрочная, особенно значение 66
сти 32 по типу, назначение 66

потомков, назначение 67
таблиц
автоматическая, модель 48 по языковым атрибутам, на-
правила 46 значение 72
составляющие 45 родственных элементов
фиксированная, модель 47 следующих, назначение 68
элементов с абсолютным рас смежных, назначение 67
положением универсальные, назначе
вертикальная 43 ние 65
горизонтальная 40 Статическое положение,
Расположение, виды 37 определение 39
Стили
с внешние, применение 18
встроенные, применение 17
Свойства
наследование 25
т
носителей информации Таблицы стилей
акустических 267; 284 альтернативные, примене
визуальных 1 00; 255 ние 19
в мультимедийных запро внешние, применение 18
сах 94; 97 встроенные, применение 18
печатных 255; 267
Предметный указатеnь 287

каскадирование ,23 горизонтальная размет
комментарии 2J ка 40
связывание, спосЬбы 20 назначение 27
структура правил 22 расположение, виды 37
Типы значений роли
URI, обозначение 63 на уровне блока 28
в процентах, обозначение 59 на уровне строки 29
времени, обозначение 64 свободно перемещаемъ1е, пра
длины вила размещения 35
единицы измерения 59
обозначение 59 я
ключевые слова, назначе Ячейки таблицы
ние 55 выравнивание содержимого,
параметров мультимедийных правила 53
запросов 93 сведение границ
сочетание 55 модель 50
строковые, обозначение 64 правила 51
углов, обозначение 63
цвета, формы обозначе-
ния 55
частоты, обозначение 64
числовые, обозначение 58
э
Элементы
CSS, блочные и внутристроч
ные, отличия 29
блочные, назначение 28
внутристрочные
назначение 29,
'
определение высоты строки,

факторы 33
заменяемые
вертикальная разметка 45
горизонтальная размет-
ка 42
незаменяемые
вертикальная разметка 43
288 Предметный указатель

CSS . Карманный справочник
Работая с каскадными таблицами стилей (CSS), читатель может быстро
найти нужный ответ в этом удобном кратком справочн ике, в котором
предоставляются все основные сведения, необходимые для оперативной
реализации CSS. Этот карма н н ы й справоч н и к идеально подходит для веб
разработчиков от промежуточного до продвинутого уровня квалификации,
а его четвертое изда ние дополнено согласно спецификации CSSЗ. Помимо
полного перечня в алфавитном порядке селекторов и свойств CSSЗ, вы
найдете в этом издании краткое введение в основные понятия CSS.
В основу этого справочника положен материал книги CSS. Каскадные

таблицы стилей. Подробное руководство того же автора. Он служит
удобной памяткой по спецификациям CSS при решении текущих задач веб
разработки.
Эта книга поможет вам:
• быстро найти и адаптировать нужные элементы стилевого оформления;

• узнать, каким образом средства CSSЗ дополняют и расширяют ваши
практические навыки применения CSS;
• обнаружить новые типы значений и новые СSS-селекторы;
• реализовать падающие тени, несколько задних планов, скругленные
углы и изображения границ элементов разметки веб-страниц;
• получить новые сведения о преобразованиях и переходах.
Эрик А. Мейер считается признанным во всем мире специалистом, автором

и пропагандистом HTML, CSS и прочих веб-стандартов. Он является основателем
компании Complex Spiral Coпsultiпg и соучредителем конферен ции An Event Арагt,
а также автором многочисленных книг по CSS и координатором работ по созданию
официального тестового набора CSS Test Suite от консорциума WЗС.
14 SCAN IT!
http://www.williamspuЬlishing.com
www.oreilly.com 1 1 1// l lllllllllll lll l lll
1 068897751
ISBN 978-5-8459-208 1 -2
, �!("ll �lt�!I,� �1�11 1�

А.Мейер Эрик - CSS. Карманный справочник - 2016 PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

А.Мейер Эрик - CSS. Карманный справочник - 2016 PDF

Загружено:

Авторское право:

Доступные форматы

ЧЕТВЕРТОЕ ИЗДАНИЕ

Москва · Санкт-Петербург· Киев

Зав. редакцией С.Н. Триzуб

ISBN 978-5-8459-2081-2 (рус.)

Литературный редактор Л.Н. Красножон

Подписано в печать 10.02.2016. Формат 84х108/32.

Отпечатано способом ролевой струйной печати

ООО "И. Д. Вильяме",127055,г. Москва,ул. Лесная, д. 43,стр. 1

ISBN 978-5-8459-2081-2 (рус.) © 2016 Издательский дом "Вильяме"

Глава 1. Основные понятия 17

Гnава 4. Справочник свойств """"""""""""""""""""""""" 99

Пре дме тный указатель ..........................................................

Усл овные о бо з начения , принятые в кни ге

Использ ование примеров кода

Стилевое оформление НТМ L­

Следует иметь в виду, что на момент написания этой книги

Аналогичная возможность в одних языках разметки ХМL­

Внешние таблицы стилей

18 CSS. Карманный справочник, 4-е издание

Следует иметь в виду, что директивы @ import могут рас­

Элемент разметки link

Имеется также возможность указать альтернативные та­

Гnава 1 . Основные понятия 19

На момент написания данной книги большинство извест­

И нструкция обработки xml-stylesheet

С помощью инструкции обработки xml-stylesheet мож­

20 CSS. Карманный справочник, 4-е издание

Заrоnов ки НПР Link

таблица стилей будет связана со всеми страницами на сайте:

В качестве альтернативы применению файла конфигура­

нию производительности, с той же самой целью можно отре­

На момент написания данной книги НТТР-заголовки под­

Гnава 1. Основные понятия 21

� {color: red; background: yellow}

Свойство Значение Свойство Значение

Рис. 1 . 1 . Структура правила

В левой части правила находится селектор, предназначен­

22 CSS. Карманный справочник, 4-е издание

Комментарии могут быть многострочными:

Комментарии можно также вводить в любом месте табли­

В таблицах стилей допускаются также комментарии к

Гnава 1. Основные понятия 23

Тип селектора Пример Специфичность

Идентификатор nсевдоэлемента ::first-line

Встроенный атрибут style style="color: red;" 1,0,0,0

Значения специфичности накапливаются. Это означает, что

24 CSS. Карманный справочник, 4-е издание

Гnава 1. Основнt�'е понятия 25

26 CSS. Карманный справочник, 4-е издание

Гnава 1 . Основные понятия 27

Рол и элементов в ото б ра жении

Отображение на уровне блока

28 CSS. Карманный справочник, 4-е издание

Отображение на уровне строки

Гnава 1. Основные понятия 29

30 CSS. Карманный справочник, 4·е издание

Отрицательные значения могут быть заданы только для

Глава 1. Основные понятия 31

•Если свойство box-sizing принимает значение content-box. иначе ширина

Рис. 1.2. Блочная разметка

32 CSS. Карм�нный справочник, 4-е издание

Гnава 1. Основные понятия 33

последовательности строк "I 'm" и " happy ! " образуют

Стилевое оформление НТМ L

Аналогичная возможность в одних языках разметки ХМL

Следует иметь в виду, что директивы @ import могут рас

Имеется также возможность указать альтернативные та

На момент написания данной книги большинство извест

С помощью инструкции обработки xml-stylesheet мож

В качестве альтернативы применению файла конфигура

нию производительности, с той же самой целью можно отре

На момент написания данной книги НТТР-заголовки под

В левой части правила находится селектор, предназначен

Комментарии можно также вводить в любом месте табли

Ширина любой вертикальной полосы прокрутки определя

подгонкой страниц. Решить приведенное выше урав

Гnава 1. Основн��е понятия 41

Высота любой горизонтальной полосы прокрутки опреде

любые значения auto свойств margin-top и ma rgin

любые значения auto свойств margin-top и margin

Блок ячейки не должен простираться за пределы по

В этой форме допускается обозначать цвет по его оттен

Эта форма служит расширением предыдущих форм, вклю

На основании исходных цветов по стан�арту VG A в Win

Сантиметры обычно указываются на измерительных линей

Это еще одна единица измерения, применяемая в полигра

Эта единица измерения обозначает высоту кегельной пло

Эта единица измерения обозначает высоту шрифта кор

Эта единица измерения вычисляется относительно шири