Вы находитесь на странице: 1из 290

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

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

Содержание 7
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

8 Содержание
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

10 Содержание
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

Содержание 11
Свой с тва печ атных носителей информации 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

12 Содержание
Предисловие
Каскадные таблицы стилей ( 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 " ? >

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


<?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.

22 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-документ можно импортировать и связать
с ним несколько внешних таблиц стилей, каждая из которых
состоит из одной или более встроенных таблиц стилей. В ходе
этого процесса одни правила могут вступить в противоречие
с другими. Для разрешения подобных противоречий и полу­
чения окончательного ряда стилей, которые можно применить

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


к документу, в 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 указывается объявление больше­
го веса, чем у неважных объявлений. Такое объявление сохра­
няет специфичность своих селекторов и применяется только
в сравнении с другими важными объявлениями.

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


Наследование
Элементы располагаются в форме докум�нта в виде древо­
видной иерархии, на самом верху которой находится корневой
элемент, а ниже него - вся остальная структура документа,
благодаря чему она становится похожей на древовидную си -
стему. Элемент разметки 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
приведенной выше процедуры).

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


Кл ассификация элементов
Вообще говоря, группы элементов разметки 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 " >

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


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

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


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

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


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

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


блочные элементы, они формируют маркер (как правило, жир­
ную точку в маркированных списках или номер по порядку в
нумерованных списках), который присоединяется к блоку эле­
мента. Кроме маркера, элементы списка во всем остальном по­
хожи на другие блочные элементы.
Для создания структурных блоков имеются следующие зна­
чения свойства 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. На момент написания данной книги еще не было
ясно определено, что различные значения данного свойства,

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


имеющие отношение к оформлению идеографического текста
(например, значение 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, имеющим непосредственное отношение к отображае­
мым элементам. В частности, высота текстовой строки опреде­
ляется с учетом следующих факторов.
Анонимный текст - любая символьная строка, не вхо­
дящая во внутристрочной элемент. Так, в разметке

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


<р> 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. Одна половина этой разно­
сти приходится на верхнюю часть области содержимого,
а другая - на нижнюю часть данной области. Поэтому
и не удивительно, что подобные дополнения области
содержимого называются половинным интерлиньяжем.
Интерлиньяж применяется только к незаменяемым эле­
ментам.
Строковый блок - это блок, описываемый добавле­
нием интерлиньяжа к области содержимого. Для неза­
меняемых элементов высота строкового блока элемента

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


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

область содержимоzо nолооинн �й интерлиньяж


ь

n р й л

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

Рис. 1.3. Внутристрочная разметка

Сво б одное переме щение


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

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


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

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


Левый свободно перемещаемый элемент должен быть
смещен как можно дальше влево, а правый свободно пе­
ремещаемый элемент - как можно дальше вправо. Чем
дальше влево или вправо смещается элемент, чем выше
он должен располагаться.

Расположение элементов
Существует целый ряд специальных правил расположения
элементов. Эти правила определяют не только содержащий
блок элемента, но и порядок его разметки в данном элементе.

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

Г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. Это происходит следую­
щим образом.

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


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

Разметка элементов с абсолютным


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

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


Го ризо нтальная разметка элементов с абсолютным
расп оложением
Горизонтальная разметка подобных элементов осуществля­
ется по следующей формуле:
ширина содержащего блока = 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, и тогда решить приве­
денное выше уравнение для этого значения.

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


Вертикальная разметка элемен тов с абсолютным
расположением
Вертикальная разметка подобных элементов осуществляет­
ся по следующей формуле:
высота содержащего блока = 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, а в других - не установлено, выбрать
для применения одно из следующих правил.

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


а) Если значение 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 нет, высота определяет­
-

ся, исходя из содержимого элемента, как это обычно


делается в статическом потоке. Сбросить в нуль (О)
любые значения auto свойств margin-top и margin­
bottom и решить приведенное выше уравнение для
значения свойства bot tom.
г) Если значение 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 нет, сбросить в нуль (О)
-

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


bottom и решить приведенное выше уравнение для
значения свойства bot tom.

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


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

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

Рис. 1 . 4. Составляющие разметки таблиц

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


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

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


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

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


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

Фиксированная разметка таблиц


Модель фиксированной разметки действует быстро, по­
скольку не зависит от содержимого ячеек таблицы. Ее действие
определяется значениями свойства 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 столбца явно задано

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


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

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


столбцов, включая любые границы и промежутки меж­
ду ячейками таблицы. (На данном этапе, скорее всего,
вычисляется доля в процентах от ширины столбцов.)
Большее из сравниваемых значений и определяет окон­
чательную ширину таблицы. Так, если вычисленная ши -
рина таблицы оказывается больше суммарной ширины
всех столбцов, границ и промежутков между ячейками,
то ширина столбцов увеличивается на одинаковую ве­
личину, чтобы заполнить таблицу по всей ее ширине.
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. Модель сведения границ ячеек

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


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

Выравнивание содержимого я чеек по вертикали


Ниже подробно описан процесс выравнивания содержимо­
го ячеек таблицы по вертикали в пределах строки таблицы.
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 - "оттенок- насыщен-

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


ность-я:ркость"). Оттенок всегда указывается безразмерным
числом в пределах от О до 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>,
т.е. как неотрицательное вещественное или целое число.

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


Значения в процентах
Значение в процентах обозначается как число типа <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 цицеро. Заглавные буквы текста, набранные

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


кеглем в 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

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


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

П ри меры:
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 ; )

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


Примечание:
В браузере 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 ]

Гnава 3. Селекторы 69
Описание:
Этот селектор позволяет выбрать любой элемент по нали­
чию в нем заданного атрибута, независимо от значения этого
атрибута.

П римеры:
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 ; }

Гnава 3. Селекторы 71
Селектор по произвольным подстрокам
в значениях атрибутов

Образец:
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 а ссы


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

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


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

: 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. Обработка

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


псевдокласса : 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+Ь допускается употреблять ключевые
слова even и odd. Эти ключевые слова равнозначны 2n и 2n+l
соответственно.

Примеры:
* : 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ава 3. Сеnекторы 77
Описание:
Этот псевдокласс обеспечивает совпадение с каждым п-м
потомком того же самого типа, что и указанный элемент, по
шаблону выбора, определяемому по формуле аn+Ь, где а и Ь -

целые числа типа <integer>, а n бесконечный ряд целых чи­


-

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


Следовательно, чтобы выбрать каждый третий от конца абзац
(р), являющийся потомком элемента разметки body, начиная
с первого такого абзаца, достаточно составить следующий се­
лектор: body > p : nth-last-of-type ( Зn+l ) . Этот критерий
выбора остается в силе даже в том случае, если между различ -
ными абзацами встречаются другие элементы, в том числе спи­
ски, таблицы и пр.
Вместо формулы аn+Ь допускается использовать ключевые
слова even и odd. Эти ключевые слова равнозначны 2n и 2n+l
соответственно.

Примеры:
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
- бесконечный ряд це­
-

лых чисел, отсчитываемый вперед от первого элемента такого


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

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


(р), являющийся потомком элемента разметки body, начиная
с первого такого абзаца, достаточно составить следующий се­
лектор: body > р : nth-oftype ( Зn+l ) . В итоге будут выбраны
первый, четвертый, седьмой, десятый и так далее абзацы, яв­
ляющиеся потомками элемента разметки body. Этот критерий
выбора остается в силе даже в том случае, если между различ -
ными абзацами встречаются другие элементы, в том числе спи­
ски, таблицы и пр.
Вместо формулы an+b допускается использовать ключевые
слова even и odd. Эти ключевые слова равнозначны 2n и 2n+l
соответственно.

Примеры:
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 даже в том случае, если
у него имеются свои потомки. Но сам элемент должен быть
единственным потомком своего родительского элемента.

Гnава 3. Сеnекторы 79
Примеры:
а 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; }

П севдоклассы взаимоде й ствия


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

82 CSS. Карманный справочник, 4-е ИЗАание


: 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рх ; )

Гnава 3. Сеnекторы 83
: 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
Применяется:
К элементу, находящемуся в состоянии, когда на него наве­
ден курсор.

Гnава 3. Сеnекторы 85
Описание:
Этот псевдокласс применяется к элементу в тот момент,
когда на него наведен курсор, т.е. пользователь указывает на
элемент, но не активизирует его. Наиболее характерным тому
примером служит перемещение указателя мыши по гиперс­
сылке в НТМ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 ; )

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


: 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; }

Гnава 3. Сеnекторы 87
Псевдоэлементы
В спецификациях 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
Формирует:
Псевдоэлемент, содержащий сформированное содержимое,
размещаемое до содержимого элемента разметки.

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


Описание :
Этот псевдоэлемент позволяет ввести сформированное со­
держимое в начале содержимого элемента разметки. По умол­
чанию этот псевдоэлемент является внутрцстрочным, но мо­
жет быть изменен с помощью свойства 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. Мультимедий­
ные запросы расширяют этот принцип, позволяя выбирать
таблицы стилей, исходя из возможностей конкретного типа
носителя информации.

Основн ы е понятия
Размещение мультимедийных запросов окажется очень
знакомым для тех, кому приходилось раньше задавать тип но­
сителя информации. Ниже демонстрируются два способа при­
менения внешней таблицы стилей для воспроизведения доку­
мента на цветном печатающем устройстве.

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


< 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

Связывает два или более свойства носителя информа­


ции таким образом, чтобы сам запрос оказался истинным,
если истинны все перечисленные свойства. Например, запрос

Гnава 3. Селекторы 91
( 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 ) .

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


Имеется еще одно ключевое слово 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 заданного разрешения.
Как правило, пробелы между целочисленным значением типа

Гnава 3. Селекторы 93
< 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>

Обозначают высоту области отображения для пользова­


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

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


свойство ( 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>

Обозначают наличие возможности воспроизводить инфор­


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

Гnава 3. Селекторы 95
( 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,
-

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


то возвращается значение 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, а иначе - нулевое значение (О).

Гnава 3. Селекторы 97
Глава 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 данного свойства означает, что анимация
никогда не завершится, поэтому пользоваться этим значением
следует осторожно.

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


Пример ы:
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 ' ; )

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


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 > ] *

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


Расширения:
< 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>

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


Исходное значение:
См. ниже описание отдельных свойств.

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
Допускается для значения <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.

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


Если объявлено несколько задних планов, то цвет будет
иметь только последний задний план. В тех случаях, когда изо­
бражения нескольких задних планов перекрываются, они на­
кладываются одно на друтое, причем первое изображение -
наверху, а последнее - внизу. Такой порядок совершенно про­
тивоположен перекрытию при расположении изображений
в 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, а также области содержи­
мого, внутреннего поля и границ элемента, доходя до внешнего

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


края границы элемента. На прозрачных участках границ (на­
пример, пунктирных или штриховых) цвет заднего плана про­
является сквозь эти участки в тех случаях, когда заполнение
цветом заднего плана простирается на область границы.

Примеры:
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. А это свойство
допускает разные контексты расположения. Следует, однако,

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


иметь в виду, что если значение свойства 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 % ; )

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


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 их растягивание до взаимного
-

соприкосновения. Следует также иметь в виду, что значение

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


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, задаваемое для элемента.

Применяется:
Ко всем элементам.

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


Нас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> ]?

Исходное значение:
о

Применяется:
Ко всем элементам.

Насnедуется:
Нет.

Задание в процентах:
По размерам блока границы элемента.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Глава 4. Справочник свойств 121


Описание:
Определяет радиус скрутления левого нижнего утла грани­
цы элемента. Если заданы два значения данного свойства, то
первое из них обозначает горизонтальный радиус, а второе -
вертикальный радиус. Порядок создания формы скрутления
приведен ниже, в описании свойства 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 .

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


Примеры:
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>

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


Исходное значение:
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.

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


Наследуется:
Да.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет модель разметки, применяемую для расположе­
ния в таблице границ вокруг ячеек, строк и т.д. И хотя данное
свойство применяется только к таблицам, оно наследуется все­
ми элементами в таблице, в которой оно, по существу, и при­
меняется.

Пример:
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 и

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


поэтому требует дополнительного времени на изучение. На­
пример, три из пяти возможных значений данного свойства
разделяются знаком косой черты и должны быть перечислены
в определенном порядке.
Следует, однако, иметь в виду, что организовать повторение
простого изображения (например, звезды) по краям элемента
практически невозможно. Чтобы добиться такого эффекта,
придется составить одно изображение из девяти копий того
изображения, которое требуется повторить, в виде сетки З х З .
Возможно, также придется задать достаточно большим значе­
ние 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 )

Исходное значение:
о

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


Применяется:
Ко всем элеме.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.

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


Наследуется:
Нет.

Задание в процентах:
По размерам изображения границы.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Предоставляет местоположение изображения, применяе­
мого в качестве изображения границы элемента.

Примеры:
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.

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


Наследуется:
Нет.

Задание в процентах:
По размерам области изображения границы.

Вычисляемое значение:
Такое же, как и объявляемое значение, тем не менее читайте
приведенное ниже описание.

Опи сани е:
Определяет ширину изображения границы по каждой из
его четырех сторон. Нарезки изображения границы, отличаю­
щиеся по ширине от самого изображения границы, масштаби­
руются, чтобы вписаться в пределы границы, что может ловли -
ять на порядок их повторения. Так, если правый край изобра­
жения границы составляет 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, то обрамление элемента бу­
дет отсутствовать.

Примеры:
р { border - le ft : Зеm solid gray; )
pre { border-le f t : douЫe Ы а с k 4рх ; )

border - left- color


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

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


Исходное значение:
Значение свойства 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
ridqe 1 inset outset

Исходное значение:
none

Применяется:
Ко всем элементам.

Наследуется:
Нет.

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


Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет стиль левой границы элемента. Значение дан -
ного свойства должно отличаться от none, чтобы эта граница
стала видимой.

Примеры:
р { border - le ft - s t yle : s o l i d ; )
pre { border- l e f t - style : douЬ le ; )

border- left-width
Значения:
thin 1 medium 1 thick 1 <length>

Исходное значение:
mediwn

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Абсолютная длина. Нулевое значение (О), если задан стиль
границы none или hidden.

Описание:
Определяет ширину левой границы элемента, что возымеет
действие только в том случае, если задан любой стиль грани­
цы, кроме none. Если же задан стиль границы none, то ее ши­
рина, по существу, становится равной нулю (О). Отрицатель­
ные значения длины в данном свойстве не допускаются.

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


Примеры:
р { 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 и т.д.
-

Таким образом, значения, указываемые по разные стороны от


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

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


. 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


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

Примеры:
img { borde r - r ight : ЗОрх dotted Ыuе ; }
hЗ { border-r ight : cyan lem inset ; }

border - right- color


Значения:
<co lor>

Исходное значение:
Значение свойства color, задаваемое для элемента.

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Если ни одно из значений на объявлено, используется вы­
числяемое значение свойства color, задаваемое для аналогич­
ного элемента, а иначе - такое же, как и объявляемое значение.

Описание:
Определяет цвет видимых участков правой границы эле­
мента. Стиль этой границы должен отличаться от задаваемого
значением none или hidden, чтобы она стала видимой.

Примеры:
img { border-right-co l o r : Ы uе ; }
hЗ { border-right-colo r : cyan ; }

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


border- right- s tyle
Значения:
none 1 hidden dotted 1 dashed 1 solid 1 douЫe 1 groove 1
ridge 1 inset outset

Исходное значение:
none

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет стиль правой границы элемента. Значение дан­
ного свойства должно отличаться от none, чтобы эта граница
стала видимой.

Примеры:
img { border-right - s t yle : dotted ; }
hЗ { border-right - s tyle : inset ; }

border-right-width
Значения:
thin 1 medium 1 thick 1 <length>

Исходное значение:
medium

Применяется:
Ко всем элементам.

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


Насnедуется:
Нет.

Вычисnяемое значение:
Абсолютная длина. Нулевое значение (О), если задан стиль
границы none или hidden.

Описание:
Определяет ширину правой границы элемента, что возы­
меет действие только в том случае, если задан любой стиль
границы, кроме none. Если же задан стиль границы none, то
ее ширина, по существу, становится равной нулю (О). Отри­
цательные значения длины в данном свойстве не допускаются.

Примеры:
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 едуется:
Да.

Вычисляемое значение:
Две абсолютные длины.

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


Описание:
Определяет расстояние между границами ячеек таблицы в
модели разметки разделяемых границ таблицы. Первое из двух
значений длины обозначает разделение по горизонтали, а вто­
рое - по вертикали. Это свойство принимается во внимание
лишь в том случае, если задано значение 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 )

Исходное значение:
Не определено для сокращенных форм свойств.

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
См. ниже описание отдельных свойств.

Описание:
Это сокращенная форма свойства, определяющая стили об­
щей границы элемента или каждой его стороны в отдельности.

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


Значение данного свойства для любой границы должно от­
личаться от 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ирину,
цвет и стиль верхней границы элемента. Если опустить стиль
границы, как и в свойстве border, то обрамление элемента бу­
дет отсутствовать.

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


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

Ьorder - top- color


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

Исходное значение:
Значение свойства 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> ] ?

Глава 4. Справочник свойств 1 45


Исходное значение:
о

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
По размерам блока границы элемента.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет радиус скругления левого верхнего угла грани­
цы элемента. Если заданы два значения данного свойства, то
первое из них обозначает горизонтальный радиус, а второе -
вертикальный радиус. Порядок создания формы скругления
приведен выше, в описании свойства 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> ] ?

Исходное значение:
о

Применяется:
Ко всем элементам.

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


Наследуется:
Нет.

Задание в процентах:
По размерам блока границы элемента.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет радиус скругления правого верхнего угла гра­
ницы элемента. Если заданы два значения данного свойства, то
первое из них обозначает горизонтальный радиус, а второе -
вертикальный радиус. Порядок создания формы скругления
приведен выше, в описании свойства 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

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

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


Описание:
Определяет стиль верхней границы элемента. Значение
данного свойства должно отличаться от 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

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Абсолютная длина. Нулевое значение (О), если задан стиль
границы none или hidden.

Описание:
Определяет ширину верхней границы элемента, что возы­
меет действие только в том случае, если задан любой стиль
границы, кроме none. Если же задан стиль границы none, то
ее ширина, по существу, становится равной нулю (О). Отрица­
тельные значения длины в данном свойстве не допускаются.

Примеры:
ul { bo rder-top-widt h : 0 . 5 i n ; )
hl { border- top-widt h : lpx; }

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


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

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


Применяется:
К размещаемым элементам, т.е. к таким элементам, для ко­
торых задано значение свойства posi t i on, отличающееся от
static.

Насnедуется:
Нет.

Задание в процентах:
По высоте содержащего блока.

Вычисnяемое значение:
Для относительно размещаемых элементов читайте приве­
денное ниже описание; для статически размещаемых элемен­
тов (т.е. таких элементов, для которых задано значение 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 ; }

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


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 данного свойства, отдельные ча­
сти внутристрочного элемента воспроизводятся так, как буд­
то единый элемент сначала размещен в одной строке, а затем

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


разбит по каждому разрыву строки. А еСЛ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 ; )

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


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

box- flex
Значения:
<nшnЬer>

Исходное значение:
о

Применяется:
К потомкам элемента из обычного потока со значением Ьох
или inline-box свойства di splay.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет "гибкость" элемента, являющегося потомком
блока. Значения свойства box- flex всех гибких блоков в груп­
пе сначала складываются, а затем каждое из них делится на
общую сумму, чтобы получить степень гибкости элемента. Так,
если все три гибких блока в группе имеют значение 1 данно­
го свойства, то степень гибкости каждого из этих блоков со­
ставит О , 33. Если же значение свойства box- flex одного из
блоков изменится на 2, то степень его гибкости составит О , 5,
а двух других блоков О , 2 5 . А нулевое значение (О) данного
-

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


свойства, устанавливаемое по умолчанию, обозначает, что блок
является негибким.
После того как гибкие блоки будут размещены обычным
образом, любое лишнее пространство, оставшееся в родитель­
ском блоке, распределяется по гибким блокам в соответствии
со степенью его гибкости. Так, если в предыдущем примере
останется 100 пикселей лишнего пространства, то при значе­
нии 2 свойства flex-box один элемент будет расширен на 50
пикселей, а два других - на 2 5 пикселей каждый. А если гиб­
кие блоки переполняют родительский блок, их размеры про­
порционально сокращаются.

Пример:
#nav l i { box- f l ex : 1; )

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

box - l ines
Значения:
single 1 multiple

Исходное значение:
sin9le

Применяется:
К элементам со значением Ьох или inline-box свойства
display.

Наследуется:
Нет.

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


Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет порядок размещения гибких блоков, если они
оказываются слишком широкими в горизонтальном блоке (см.
ниже описание свойства box-orient). Если задано значение
mul tiple данного свойства, гибкие блоки будут размещены
в стольких "строках': сколько потребуется для отображения
всех этих блоков. И это напоминает плавающую разметку, ког­
да свободно перемещаемые (т.е. плавающие) блоки не могут
располагаться рядом, хотя механизм в данном случае несколь­
ко иной.

Пример:
#nav li ( box- f lex : 1; )

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

box- ordina l - group


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

Исходное значение:
1

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

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


Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет порядковую группу, к которой относятся гибкие
блоки. Гибким блокам можно присваивать произвольные номе­
ра групп. При разметке блоков группы располагаются по поряд­
ку номеров, причем гибкие блоки в каждой группе размещаются
в их исходном порядке и в соответствии со значением свойства
box-di rect ion. Это дает возможность располагать гибкие бло­
ки совершенно независимо от их исходного порядка.

Примеры:
. st i cky { box-ordinal-group : 1 ; )
. footer { box-ordinal-group : 1 3 ; )

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

box- orient
Значения:
horizontal 1 vertical 1 inline-axis 1 Ыock-axis

Исходное значение:
inline-axis

Применяется:
К элементам со значением Ьох или inline-box свойства
display.

Глава 4. Справочник свойств 1 57


Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
О пределяет направление, в котором гибкие блоки раз­
мещаются в их родительском блоке. Если задано значение
horizontal данного свойства, гибкие блоки располагаются
слева направо, а если задано значение vertical, то сверху
вниз. Установка значений inline-axis и Ыock-axis имеет
последствия, зависящие от конкретного языка. Так, в языке
с правосторонним письмом, например в английском, эти зна­
чения равнозначны значениям horizontal и vertical.

Примеры:
#nav { box-orient : hori zonta l ; )
# s idebar { box-orient : ve rt ical ; )

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

box-pack
Значения:
start 1 end 1 center 1 justify

Исходное значение:
start

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


Применяется:
К элементам со значением Ьох или inline-box свойства
display.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет порядок размещения гибких блоков, если их
суммарные размеры по оси ориентации (см. приведенное
выше описание свойства box-orient) оказываются меньше
общей величины доступного пространства.

Примеры :
#ga l lery { box-pack : center ; )
. suЬcolurnns { box-pack : l e ft ; )

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

box-shadow
Значения:
none 1 <shadow> [ , <shadow> ] *

Расширения:
<shadow>

inse t? & & [ < l ength > { 2 , 4 } & & <color>? ]

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


Исходное значение:
none

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое зна 4 ение:


Такое же, как и объявляемое значение, но с абсолютными
длинами и вычисляемыми цветами.

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

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


Примеры:
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 добавлялся просвет над верхним от­
ступом элемента, тогда как сам отступ не изменялся. Но в лю­
бом случае верхний внешний край границы элемента оказыва­
ется сразу же под внешним краем нижнего отступа свободно
перемещаемого элемента на объявленной стороне.

Глава 4. Справочник свойств 1 63


Примеры:
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 ( ) , обозначающим смещение
верхнего, правого, нижнего и левого краев областей отсечения

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


относительно левого верхнего угла элемента. Следовательно,
значение функции 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>

Исходное значение:
Зависит от конкретного пользовательского агента.

Применяется:
Ко всем элементам.

Насnедуется:
Да.

Вычисnяемое значение:
См. приведенное ниже описание.

Описание:
Определяет цвет переднего плана элемента, что в НТМL­
разметке означает текст элемента. Свойство color не оказы­
вает влияния на растровые изображения. Оно задает также
цвет любых границ элемента, если только оно не замещается

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


свойством 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

Применяется:
К незаменяемым блочным элементам, кроме табличных
элементов, к ячейкам таблицы и внутристрочным блочным
элементам.

Наследуется:
Нет.

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


Вычисляемое значение:
Такое же, как и объявляемое значение.

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

Пример:
body { column-count : 2 ; }

column - f i l l
Значения:
auto 1 balance

Исходное значение:
balance

Применяется:
К элементам, размещаемым с помощью нескольких столбцов.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет, следует ли уравновешивать (или не уравнове­
шивать) столбцы по высоте при разметке элемента с помощью
нескольких столбцов. Значение этого свойства удерживается в
тех случаях, когда столбцы каким-то образом ограничены по

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


длине. Очевидным тому примером служит высота элемента,
явно задаваемая с помощью свойства height. Значение auto
данного свойства означает, что столбцы заполняются после­
довательно, т.е. каждый столбец заполняется по всей высоте
до конца (недостаточно заполняется или перезаполняется по
мере надобности).

Пример:
body { height : SOem; column- f i l l : auto ; )

column- gap
Значения:
<length> 1 normal

Исходное значение:
normal

Применяется:
К элементам, размещаемым с помощью нескольких столбцов.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет ширину промежутка между соседними столб­
цами в элементе, размечаемом с помощью нескольких столб­
цов. Любая линейка для разделения столбцов (см. ниже опи­
сание свойства column- rul e ) центруется в пределах каждого
промежутка между столбцами. Длина промежутка между
столбцами не может быть отрицательной.

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


Пример:
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 ; )

Глава 4. Справочник свойств 1 69


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

Применяется:
К элементам, размещаемым с помощью нескольких столбцов.

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


Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет стиль так называемых линеек (т.е. вертикаль­
ных линий), отображаемых между столбцами в элементе, раз­
мечаемом с помощью нескольких столбцов. Значения этого
свойства являются такими же, как и у свойства border-style.
Любое из значений none (по умолчанию) или hidden означает,
что линейки для разделения столбцов не отображаются.

Примеры:
#dOl { column- rule - s t yle : s o l i d ; }
#d02 { column- rule-style : dashed ; }

column- rule-width
Значения:
thin 1 medium 1 thick 1 <length>

Исходное значение:
medium

Применяется:
К элементам, размещаемым с помощью нескольких столбцов.

Наследуется:
Нет.

Вычисляемое значение:
Абсолютная длина. Нулевое значение (О), если задан стиль
границы none или hidden.

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


Описание:
Определяет ширину так называемых линеек ( т.е. вертикаль­
ных линий), отображаемых между столбцами в элементе, раз­
мечаемом с помощью нескольких столбцов.

Примеры:
#dOl { column-rule-widt h : 5рх ; )
#d02 { column-rule-width : 2em; )

column- span
Значения:
none 1 all

Исходное значение:
none

Применяется:
К статически размещаемым, не свободно перемещаемым эле­
ментам.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет количество столбцов, на которое простира­
ется элемент, размечаемый с помощью нескольких столбцов.
Для этого имеются только две возможности: вообще не про­
стирать элемент ни на один из столбцов (значение none) или
же простирать его на все столбцы (значение all). Если элемент
простирается на несколько столбцов, то содержимое, которое
находится перед этим элементом, равномерно распределяет­
ся по столбцам над ним. А содержимое, которое следует после

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


данного элемента, равномерно распределяется по столбцам под
ним.

Пример:
h2 { column-span : a l l ; )

column-width
Значения:
<integer> 1 auto

Исходное значение:
&uto

Применяется:
К незаменяемым блочным элементам, кроме табличных
элементов, к ячейкам таблицы и внутристрочным блочным
элементам.

Наследуется:
Нет.

Вычисляемое значение:
Абсолютная длина.

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

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


Значения абсолютной длины должны быть больше нуля.
Но по какой-то непонятной причине указывать эти значения в
процентах не разрешается.

Пример:
body { column-width : 2 З еm ; }

columns
Значения:
< ' column-width ' > 1 1 < ' co lumn-count ' >

Исходное значение:
См. ниже описание отдельных свойств.

Применяется:
К незаменяемым блочным элементам, кроме табличных
элементов, к ячейкам таблицы и внутристрочным блочным
элементам.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

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

Примеры:
body { columns : З 2 3em; }
div { co lumns : 2 0 0рх 5 ; }

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


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 ; )

Глава 4. Справочник свойств 1 75


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

Применяется:
Ко всем элементам.

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


Наследуется:
Да.

Вычисляемое значение:
Единственный абсолютный URI с дополнительными, хотя
и не обязательными, координатами Х, У для значений <uri>, если
эти значения приводятся к поддерживаемому типу файлов, а ина­
че - такое же значение, как и объявляемое ключевым словом.

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

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


Следует также иметь в виду, что эти числа обозначают безраз­
мерные величины и интерпретируются относительно "системы
координат курсора': как, опять же, сказано в спецификации.

Примеры:
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

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


Исходное значение:
show

Применяется:
К элементам со значением taЫe-cell свойства display.

Наследуется:
Да.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет представление ячеек таблицы без содержимого.
Если такие ячейки отображаются, то воспроизводятся их гра­
ницы и задний план. Это свойство принимается во внимание
лишь в том случае, если задано значение separate свойства
border-collapse, а иначе оно просто игнорируется.

Пример:
th, td { empty-cel l s : show ; )

float
Значения:
left 1 riqht 1 none

Исходное значение:
none

Применяется:
Ко всем элементам.

Наследуется:
Нет.

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


Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет направление, в котором свободно перемеща­
ется элемент. По традиции это свойство применялось к изо­
бражениям, чтобы текст облекал их, но в 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

Исходное значение:
См. ниже описание отдельных свойств.

Применяется:
Ко всем элементам.

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


Наследуется:
Да.

Задание в процентах:
Вычисляется относительно родительского элемента для
размера шрифта <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> ] *

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


Расши рения
<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 ; )

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


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), а дополнительные сведения по данному вопросу

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


приведены по адресу 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

Применяется:
Ко всем элементам.

Наследуется:
Да.

Вычисляемое значение:
Такое же, как и объявляемое значение.

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


Описание:
Определяет аспект шрифта элемента, употребляемый для
масштабирования шрифтов таким образом, чтобы они точнее
соответствовали друг другу в тех случаях, когда применяются
запасные шрифты. Аспект шрифта определяется путем деле­
ния х-высоты шрифта на его размер.
С помощью свойства 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 ; }

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


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

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


Исходное значение:
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 90 CSS. Карманный справочник, 4-е издание


Вычисляемое значение:
Одно из абсолютных числовых значений ( 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

Применяется:
Ко всем элементам, кроме незаменяемых внутристрочных
элементов, отдельных столбцов и групп столбцов таблицы.

Наследуется:
Нет.

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


Задание в процен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

Применяется:
Ко всем элементам.

Наследуется:
Да.

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


Задание в процентах:
По ширине глифа пробела в Уникоде (U+0020) для начерта­
ния шрифта элемента.

Вычисляемое значение:
Для значений длины вычисляемое значение равно соответ­
ствующей абсолютной длине, а иначе norma.l. -

Описание:
Определяет величину пробела, вставляемого между блока­
ми символов текста. Как правило, глифы символов оказывают­
ся более узкими, чем их блоки, а благодаря указываемым значе­
ниям длины можно изменять обычное расстояние между бук­
вами. Таким образом, значение normal зачастую оказывается
равнозначным нулевому значению (О). Разрешается указывать
отрицательные значения абсолютной длины и в процентах.
В таком случае буквы располагаются ближе одна к другой.
Три возможных значения данного свойства соответствуют
минимальному, максимальному и оптимальному расстояниям
между буквами. Если указаны два значения данного свойства,
то первое из них соответствует минимальному и оптимально­
му расстояниям между буквами, а второе - максимальному
расстоянию. Если же указано единственное значение данного
свойства, то оно применяется для обозначения всех трех упо ­
мянутых выше расстояний между буквами. А если текст вы­
равнивается, то пользовательский агент может при необходи­
мости превысить максимальное расстояние между буквами,
хотя оно и не должно быть меньше минимального расстояния.
И наконец, если текст не выравнивается, то всегда применяет­
ся оптимальное расстояние между буквами.

Примеры:
p . spacious { letter- spacing : брх ; }
em { letter- spacing : 0 . 2em; }
p . cramped { letter- spacing : - 0 . 5em; }

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


Примечание:
В спецификации 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.

Наследуется:
Да.

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


Вычисляемое значение:
См. ниже описание отдельных свойств.

Описание:
Это сокращенная форма свойства, определяющая тип мар­
кера списка в виде знака или изображения, а также его при­
близительное расположение. Данное свойство применяется к
любому элементу со значением 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

Применяется:
К элементам со значением list-i tem свойства display.

Наследуется:
Да.

Вычисляемое значение:
Абсолютный URI для значений <uri>, а иначе - none.

Описание:
Определяет изображение, используемое в качестве марке­
ра элемента маркированного или немаркированного списка.

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


Расположением изображения относительно содержимого эле­
мента списка можно приблизительно управлять с помощью
рассматриваемого далее свойства 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 не определено. А внутренние марке­
ры интерпретируются как внутристрочные элементы, вставля­
емые в начале содержимого элемента списка.

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


Примеры:
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


Значения в CSS2.1 :
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

Значения в CSSЗ:
<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

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


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

Применяется:
К элементам со значением list-i tem свойства display.

Насnедуется:
Да.

Вычисn яемое значение:


Такое же, как и объявляемое значение.

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

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


значенце 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)

Исходное значение:
Не определено.

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

Вычисляемое значение:
См. ниже описание отдельных свойств.

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


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

Примеры:
hl { margin : 2 е х ; )
р {margin : auto ; )
img { margin : l Opx ; )

margin-bottom
Значения:
< length> 1 <percentage> 1 auto

Исходное значение:
о

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

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


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

Описание:
Определяет ширину нижнего отступа для элемента. Раз­
решается указывать отрицательные значения, хотя делать это
следует осторожно (см. выше описание свойства margin).

Примеры:
ul { rnargin-bottorn : 0 . S i n ; )
hl { rnargin-bottorn : 2 % ; )

margin-left
Значения:
<length> 1 <percentage> 1 auto

Исходное значение:
о

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

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

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


Описание:
Определяет ширину левого отступа для элемента. Разреша­
ется указывать отрицательные значения, хотя делать это следу­
ет осторожно (см. выше описание свойства margin).

Примеры:
р { margin- left : 5 % ; )
pre ( margin- left : Зеm; )

margin - right
Значения:
<length> 1 <percentage> 1 auto

Исходное значение:
о

Применяется:
Ко всем элементам.

Насnедуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

Вычисnяемое значение:
Для значений в процентах вычисляемое значение оказыва­
ется таким же, как и объявляемое, а для значений длины оно
равно соответствующей абсолютной длине.

Описание:
Определяет ширину правого отступа для элемента. Раз­
решается указывать отрицательные значения, хотя делать это
следует осторожно (см. выше описание свойства margin).

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


Примеры:
img {margin-right : ЗОрх ; )
ol { margin-right : Sem; )

margin- top
Значения:
<length> 1 <percentage> 1 auto

Исходное значение:
о

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

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

Описание:
Определяет ширину верхнего отступа для элемента. Раз­
решается указывать отрицательные значения, хотя делать это
следует осторожно (см. выше описание свойства margin).

Примеры:
ul { margin-top : O . S in; )
hЗ { ma rgin- top : 1 . S em ; )

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


max-height
Значения:
<length> 1 <percentage> 1 none

Исходное значение:
none

Применяется:
Ко всем элементам, кроме внутристрочных незаменяемых
и табличных элементов.

Наследуется:
Нет.

Задание в процентах:
По высоте содержащего блока.

Вычисляемое значение:
Для значений в процентах вычисляемое значение оказы­
вается таким же, как и объявляемое; для значений длины оно
равно соответствующей абсолютной длине, а иначе none. -

Описание:
Определяет максимальное ограничение, накладываемое на
высоту элемента, хотя конкретная его высота зависит от зна­
чения свойства box - s i z ing. Следовательно, высота элемента
может быть меньше объявленного значения, но не больше его.
Отрицательные значения в данном свойстве не допускаются.

Пример:
div# footer {max-height : Зеm; )

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


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>

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


Исходное значение:
о

Применяется:
Ко всем элементам, кроме внутристрочных незаме няемых
и табличных элементов.

Наследуется :
Нет.

Задание в процентах:
По высоте содержащего блока.

Вычисляемое значение:
Для значений в процентах вычисляемое значение 01<азыва­
ется таким же, как и объявляемое, а для значений дли ны оно
равно соответствующей абсолютной длине.

Описан ие:
Определяет минимальное ограничение, накладываемое на
высоту элемента, хотя конкретная его высота зависит от зна­
чения свойства box-s i z ing. Следовательно, высота Э!Jемента
может быть больше объявленного значения, но не меньше ero.
Отрицательные значения в данном свойстве не допускаются.

Пример:
div# footer { min-height : lem; )

min -width
Значения:
<length> 1 <percentage>

Исходное значение:
о

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

Применяется:
Ко всем элементам.

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


Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение (или ограниченное
значение, если объявляемое значение должно быть ограничено).

Описание:
Определяет степень непрозрачности элемента по числу в
пределах от О до 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 ' >

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


Исходное значение:
Не определено для сокращенных форм свойств.

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
См. ниже описание отдельных свойств.

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

Примеры:
* [ href ] : focus { out line : 2рх dashed invert ; )
form : focus { outl ine : out set cyan 0 . 2 5em; )

outl ine - color


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

Исходное значение:
invert

Применяется:
Ко всем элементам.

Глава 4. Справочник свойств 21 1


Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет цвет видимых участков общего контура эле­
мента. Не следует, однако, забывать, что значение свойства
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>

Исходное значение:
о

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Абсолютное значение длины.

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


Описание:
Определяет смещение относительно внешнего края грани­
цы и внутреннего края контура. Это свойство может прини­
мать только одно значение длины. Оно применяется в равной
степени ко всем сторонам контура. Допускается указывать от­
рицательные значения данного свойства. В этом случае контур
сокращается вовнутрь к центру элемента. Следует, однако,
иметь в виду, что свойство 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
ridqe 1 inset outset

Исходное значение:
none

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет стиль общей границы элемента. Задаваемый
в этом свойстве стиль должен отличаться от none, чтобы по­
явился какой-нибудь контур.

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


Примеры:
* [ 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

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Абсолютная длина. Нулевое значение (О), если задан стиль
границы none или hidden.

Описание:
Определяет толщину общего контура элемента. Указанная
толщина окажет воздействие на заданный контур только в том
случае, если значение свойства 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 ; }

Глава 4. Справочник свойств 21 5


Примечание:
В спецификации 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

Применяется:
К незаменяемым элементам со значением Ыосk или
inline-Ыock свойства display.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет поведение при переполнении по горизонталь­
ной оси (Х) элемента, т.е. от левого до правого края элемента.

Примеры:
#masthead { over f low-x : hidden ; }
ob j ect { over flow- x : v i s iЬle ; }

Примечание:
На момент написания данной книги поддержка значений
no-display и no-content данного свойства в основных бра­
узерах отсутствовала.

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


overf low-y
Значен ия:
visiЬle 1 hidden 1 scroll 1 auto 1 no-displfY 1 no-content

Исходное значение:
visiЫe

Применяется:
К незаменяемым элементам со значением Ыосk или
inline -Ыock свойства display.

Наследуется:
Нет.

Вычисnяемое значение:
Такое же, как и объявляемое значение.

Описан ие:
Опр еделяет поведение при переполнении по вертикальной
оси (У) элемента, т.е. от верхнего до нижнего края элемента.

Примеры:
#masthead { overflow- y : hidden ; }
object { overflow-y : scrol l ; }

Примечан ие:
На момент написания данной книги поддержка значений
no-display и no-content данного свойства в основных бра­
узерах отсутствовала.

padding
Значен ия:
[ <length> 1 <percentage> ] { 1 , 4 )

Глава 4. Справочник свойств 217


Исходное значение:
Не определено для сокращенных форм свойств.

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

Вычисляемое значение:
См. ниже описание отдельных свойств.

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

Примеры:
img { padding : l Opx ; }
hl { padding : 2ех О . З Зеm; }
pre { padding : 0 . 7 5em O . Sem lem O . Sem ; }

padding-Ьo ttom
Значения:
< length> 1 <percentage>

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


Исходное значение:
о

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

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

Описание:
Определяет ширину нижнего внутреннего поля элемента.
Нижнее внутреннее поле, задаваемое для внутристрочных неза­
меняемых элементов, не оказывает никакого влияния на вычис­
ление высоты строки. Следовательно, такой элемент с нижним
внутренним полем и задним планом может явно простираться
на другие строки, а возможно, и перекрывать другое содержимое.
Отрицательные значения в данном свойстве не допускаются.

Примеры:
ul ( padding-bottom: 0 . 5in; }
hl ( padding-bot tom : 2 % ; }

padding- left
Значения:
<length> 1 <percentage>

Исходное значение:
о

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


Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

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

Описание:
Определяет ширину левого внутреннего поля элемента. Ле­
вое внутреннее поле, задаваемое для внутристрочного элемен­
та, появится только на левом краю первого строкового блока,
сформированного элементом. Отрицательные значения в дан -
ном свойстве не допускаются.

Примеры:
р { padding- l e f t : 5 % ; )
pre { padding- left : Зеm ; )

padding-right
Значения:
<length> 1 <percentage>

Исходное значение:
о

Применяется:
Ко всем элементам.

220 CSS. Карманный справочник, 4-е ИЗАание


Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

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

Описание:
Определяет ширину правого внутреннего поля элемента.
Правое внутреннее поле, задаваемое для внутристрочного эле­
мента, появится только на правом краю первого строкового
блока, сформированного элементом. Отрицательные значения
в данном свойстве не допускаются.

Примеры:
img { padding-r ight : З Орх ; )
ol { padding-r ight : 5em; )

padding- top
Значения:
<length> 1 <percentage>

Исходное значение:
о

Применяется:
Ко всем элементам.

Наследуется:
Нет.

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


Задание в процентах:
По ширине содержащего блока.

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

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

Примеры:
ul { padding-top : 0 . 5 i n ; }
hЗ { padding-top : 1 . 5em; }

perspective
Значения:
none 1 <nwnЬer>

Исходное значение:
none

Применяется:
К блочным и внутристрочным элементам.

Наследуется:
Нет.

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


Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет величину видимой трехмерной перспективы
преобразуемых потомков, а не самого элемента. Указываемые
числовые значения данного свойства определяют глубину со­
кращения перспективы в пикселях. Чем меньше эти числовые
значения, тем сильнее искажается перспектива. Отрицатель­
ные значения данного свойства интерпретируются таким же
образом, как и значение 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%

Применяется:
К блочным и внутристрочным элементам.

Наследуется:
Нет.

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


Задание в процентах:
По размеру бл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.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

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


Описа ние:
Определяет образец цитирования, применяемый для обыч -
ных и вложенных кавычек. Открывающие и закрывающие ка­
вычки вставляются по значениям 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.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет порядок (или возможность) изменения разме­
ров элемента пользователем. Конкретный внешний вид и дей­
ствие механизма изменения размеров элемента оставляется на

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


усмотрение пользовательского агента и, вероятнее всего, зави­
сит от направления письма.

Примеры:
textarea { re s i ze : vertica l ; }
i frame ( resize : both; }

right
Значения:
<length> 1 <percentage> 1 auto

Исходное значение:
auto

Применяется:
К размещаемым элементам, т.е. к таким элементам, для ко­
торых задано значение свойства pos i t i on, отличающееся от
static.

Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

Вычисляемое значение:
Для относительно размещаемых элементов читайте при­
веденное ниже примечание; для статически размещаемых
элементов (т.е. таких элементов, для которых задано значе­
ние static свойства pos i t ion) вычисляемое значение равно
auto; для значений длины оно равно соответствующей абсо­
лютной длине; для значений в процентах - объявляемому зна­
чению, а иначе auto.
-

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


Описание:
Определяет смещение внешнего края правого отступа раз­
мещаемого элемента относительно правого края содержащего
его блока.

Примеры:
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

Применяется:
Ко всем элементам и формируемому их содержимому.

Наследуется:
Да.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет выравнивание идеографического текста отно­
сительно содержимого идеографической основы.

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


Примеры:
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 ; )

Глава 4. Справочник свойств 229


Примечание:
Идеографическим называется такой текст, который располага­
ется над основным текстом, что характерно для письма восточно­
азиатских языков. На момент написания данной книги это свой­
ство поддерживалось только в браузере 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.

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


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

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


Исходное значение:
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>

Значения в CSS2.1 :
left / center / riqht 1 justify

Значения в CSSЗ:
[ start 1 end 1 left 1 center 1 riqht 1 justify 1
match-parent ] 1 1 <s t r ing>

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


Исходное значение:
Зависит от конкретного пользовательскрго агента, а зача­
стую - от направления письма (в 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З.
На момент написания данной книги ему все еще недоставало
поддержки в браузерах.

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


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,

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


чтобы конкретизировать его назначение. Поддержка значения
Ы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>

Значения в CSSЗ:
[ <length> 1 <percentage> ] && [ hanqing 1 1 each-line ]?

Исходное значение:
о

Применяется:
К блочным элементам.

Наследуется:
Да.

Задание в процентах:
По ширине содержащего блока.

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

Описание:
Определяет отступ первой строки содержимого в блочном
элементе. Чаще всего служит для создания эффекта табуляции.

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


Разрешается указывать отрицательные значения данного свой­
ства, которые вызывают эффекты выступа (или обратного от­
ступа), т.е. смещения текста влево. В спецификации 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. Устанавливаемое по умол­
чанию значение данного свойства соответствует исторически

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


сложившемуся поведению, когда содержимое просто отсе­
кается по краям блока родительского элемента. А значение
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

Применяется:
Ко всем элементам.

Наследуется :
Да.

Вычисляемое значение:
Один или более наборов цветов плюс три абсолютные длины.

Описание:
Определяет одну или более теней, отбрасываемых тексто­
вым содержимым элемента. Тени всегда воспроизводятся по­
зади текста в элементе, но впереди его переднего плана, границ
и контура. Кроме того, тени воспроизводятся от первой сверху
и до последней снизу.
Четыре значения длины теней могут быть объявлены в
следующем порядке: смещение по горизонтали, смещение

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


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

Примеры:
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 данного свойства, явно не определено, поскольку
это зависит от способности пользовательских агентов распоз­
навать отдельные слова в тексте.

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


Примеры:
hl { text -tran s fo rm : upperca s e ; )
. t itle { text- t rans form : capital i ze ; )

top
Значения:
<length> 1 <percentage> 1 auto

Исходное значение:
auto

Применяется:
К размещаемым элементам, т.е. к таким элементам, для ко­
торых задано значение свойства pos i t i on, отличающееся от
static.

Наследуется:
Нет.

Задание в процентах:
По высоте содержащего блока.

Вычисляемое значение:
Для относительно размещаемых элементов ч итайте при­
веденное ниже примечание; для статически размещаемых
элементов (т.е. таких элементов, для которых задано значе ­
ние sta tic свойства pos i t ion) вычисляемое значение равно
auto; для значений длины оно равно соответствующей абсо ­
лютной длине; для значений в процентах - объявляемому зна­
чению, а иначе auto.
-

Описание:
Определяет смещение внешнего края верхнего отступа раз­
мещаемого элемента относительно верхнего края содержащего
его блока.

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


Примечание:
Если для относИ:тельно размещаемых элементов задано зна­
чение 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

Применяется:
К блочным и внутристрочным элементам.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

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


Описание:
Определяет одно или более преобразований элемента. Та­
кие преобразования могут происходить как в двухмерном, так
и в имитируемом трехмерном пространстве в зависимости от
того, каким образом они объявлены.
Допустимые значения для расширения < 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>, а иначе - в про­
центах.

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


Описание:
Определяет исходную точку для преобразований элемента
как в двухмерном, так и в имитируемом трехмерном простран­
стве. Значения <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едуется:
Нет.

Вычисnяем ое значение:
Такое же, как и объявляемое значение.

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


Описание:
Определяет, должен ли элемент, преобразуемый в имитиру­
емом трехмерном пространстве, иметь потомков, воспроизво­
димых в той же самой двухмерной плоскости, что и родитель­
ский элемент, или же следует попытаться создать трехмерный
эффект, когда потомки с положительным или отрицательным
значением свойства 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.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

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


Опис ание:
Это сокращенная форма свойства, определяющая особен­
ности переходов одного или более элементов из одного со­
стояния в другое. И хотя на момент написания данной книги
синтаксис объявления значений этого свойства еще не был
окончательно определен, в спецификации поясняется, что если
объявлены два значения <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 *

Исходное значение:
о

Применяется:
Ко всем элементам, а также к псевдоэлементам : : before и
: : a fter.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описан ие:
Определяет задержку от теоретически возможного на­
чала перехода и до его фактического начала. Так, если начало

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


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

рез полсекунды после наведения курсора на элемент в первый


раз. Разрешается указывать и отрицательные значения данного
свойства, но они приводят лишь к тому, что переход перено­
сится к тому моменту, которого он достиг бы, если бы пере­
ход начинался в определенное время, отодвинутое в прошлое.
Иными словами, процесс отчасти начнется в течение самого
перехода и дойдет до своего логического завершения.

П римеры:
a [ hre f ] : hover { t rans i t ion-delay : 0 . 2 5 ; )
hl { t ransit ion-delay : О ; )

transition-duration
Значения:
<time> [ , < t ime> ] *

Исходное значение:
о

Применяется:
Ко всем элементам, а также к псевдоэлементам : : before и
: : after.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет продолжительность перехода от начала и
до конца. Устанавливаемое по умолчанию нулевое значение
(О) означает, что переход происходит мгновенно и без всякой

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


анимации. Отрицательные значения данного свойства интер­
претируются как нулевые ( О ) .

Примеры:
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

Применяется:
Ко всем элементам, а также к псевдоэлементам : : before и
: : afte r.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет одно или более свойств, которые должны пере­
ходить из одного состояния в другое. Например, для свойства
color это означает переход цвета переднего плана от началь­
ного оттенка к конечному оттенку этого цвета. Если объявлена
сокращенная форма свойства, то действие параметров перехо­
да этого свойства распространяется и на все остальные свой­
ства, представленные в сокращенной форме.
Ключевое слово all означает, что переходу подлежат все
свойства. А ключевое слово none препятствует переходу лю­
бых свойств, по существу, отменяя их переход из одного состо­
яния в другое.

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


Примеры:
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>

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


Исходное знач ение:
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

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


Исходное значение:
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).

Наследуется:
Нет.

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


Вычисnяемое значение:
Такое же, как и объявляемое значение.

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

Примеры:
td { white-space : nowrap ; )
tt { white- space : pre ; )

width
Значения:
<length> 1 <percentage> 1 auto

Исходное значение:
auto

Применяется:
К блочным и заменяемым элементам.

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


Наследуется:
Нет.

Задание в процентах:
По ширине содержащего блока.

Вычисляемое значение:
Для исходных значений 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

Применяется:
Ко всем элементам.

Наследуется:
Да.

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


Задание в процентах:
По ширине глифа пробела в Уникоде (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

Применяется:
Ко всем элементам.

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


Насnедуется:
Да.

Вычисnяемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет порядок автоматического переноса текста в тех
случаях, когда он не переносится обычным образом. Приме­
ром тому служит перенос очень длинной строки чисел без про­
белов подобно первой тысяче цифр после десятичной точки
в числе 7t. Значение break-word данного свойства разрешает
пользовательским агентам разбивать слово на произвольные
части, если им не удается найти обычные точки разбиения в
том, что они распознают как слово (т.е. текстовую строку).

Примеры:
td { word-wrap : break-word; )
р { word-wrap : norma l ; }

z - index
Значения:
< integer> 1 auto

Исходное значение:
auto

Применяется:
К размещаемым элементам.

Насn едуется:
Нет.

Вычис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 дан-

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


ного свойства теоретически возможно принудительное разме­
щение разрывов, гарантировать запрет их появления нельзя.
Самое лучшее, что можно сделать, - указать значение 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

Применяется:
К блочным элементам.

Наследуется:
Нет.

Вычисляемое зна � ение:


Такое же, как и объявляемое значение.

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


Описание:
Определяет, следует ли размещать разрыв столбца или
страницы перед элементом. И хотя при значении 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

Применяется:
К блочным элементам.

Наследуется:
Нет.

Вычисляемое значение:
Такое же, как и объявляемое значение.

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


Описание:
Определяет, следует ли исключить поя в ление разрыва
столб ц а или страни ц ы в самом элементе. Следует, однако,
иметь в виду, что избежать появления таких разрывов нельзя.
Так, если сделать объявление
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

Применяется:
К элементам изображений.

Наследуется:
Нет данных.

Вычисляем ое значение:
Такое же, как и объявляемое значение.

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

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


повернуты после съемки "боком". Пользовательские агенты
должны поддерживать следующие вычисляемые в градусах
значения углов поворота: 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 ; )

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


orphans
Значения:
< i nteger>

Исходное значение:
2

Применяется:
К блочным элементам.

Наследуется:
Да.

Вычисляемое значение:
Такое же, как и объявляемое значение .

Описание:
Определяет минимальное количество текстовых строк в эле­
менте, которые можно оставить внизу страницы. Это может
оказать влияние на расположение разрывов страниц в элементе.

Примеры:
р { orphans : 4 ; )
ul { orphans : 2 ; )

page
Значения:
auto 1 <ident i fier>

Исходное значение:
auto

Применяется:
К блочным элементам.

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


Наследуется:
Да.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет тип страницы, которая должна быть использо­
вана при воспроизведении элемента. Слово должна намеренно
выделено не только здесь, но и в спецификации, чтобы обра­
тить особое внимание на данное обстоятельство.
Так, если значение данного свойства для текущего элемента
отличается от его значения для предыдущего элемента, то перед
этим элементом вставляется хотя бы один разрыв страницы,
а новая страница начинается с типа страницы, объявленного в
свойстве 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

Применяется:
К блочным элементам.

Наследуется:
Нет.

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


Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет, следует ли вставить один или более разрывов
страниц после элемента. И хотя при значении 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

Применяется:
К блочным элементам.

Наследуется:
Нет.

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


Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет, следует ли вставить один или более разрывов
страниц перед элементом. И хотя при значении 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

Применяется:
К блочным элементам.

Наследуется:
Нет.

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


Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет, следует ли исключить появление разрыва стра­
ницы в самом элементе. Необходимо, однако, иметь в виду, что
избежать появления таких разрывов нельзя. Так, если сделать
объявление
{ 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.

Наследуется:
Нет данных.

Вы ч исляемое значение:
Такое же, как и объявляемое значение.

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


Описани е:
Определяет порядок указания значений счетчиков или
строковых значений относительно страничного элемента. На­
пример, сначала может возникнуть потребность определить
счетчик 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

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


Приме няется:
В контексте страницы.

Наследуется:
Нет данных.

Вычисляемое значение:
Такое же, как и объявляемое значение.

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

Пример:
body ( page- s i z e : lands cape ; }

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


widows
Значения:
<integer>

Исходное значение:
2

Применяется:
К блочным элементам.

Наследуется:
Да.

Вычисляемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет минимальное количество текстовых строк в эле­
менте, которые можно оставить вверху страницы. Это может
оказать влияние на расположение разрывов страниц в. элементе.

Примеры:
р { widows : 4 ; )
ul { widows : 2 ; )

Сво й ства акустически х носителе й


информации
Ниже перечислены все свойства акустических носителей
информации с кратким пояснением их назначения.

cue
Значения:
< ' cue-before ' > 11 < ' cue-after ' >

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


Исходное значение:
Не определено для сокращенных форм свойств.

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Задание в процентах:
Применяется к наследуемому значению свойства 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

Применяется:
Ко всем элементам.

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


Насn едуется:
Нет.

Задан и е в процентах:
Применяется к наследуемому значению свойства voice­
volume.

Выч исn яемое значение:


Абсолютный URI для значений <uri>, а иначе - none.

Оп исание:
Определяет звуковой сигнал, который следует после озву­
чивания содержимого элемента.

Пр имеры:
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

Применяется:
Ко всем элементам.

Насn едуется:
Нет.

Задан и е в процентах:
Применяется к наследуемому значению свойства voice­
volume.

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


Вычисляемое значение:
Абсолютный URI для значений <uri>, а иначе - none.

Описание:
Определяет звуковой сигнал, который предшествует озву­
чиванию содержимого элемента.

Примеры:
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.

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


Примеры:
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 ; }

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


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>

Исходное значение:
Зависит от конкретного пользовательского агента.

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


Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Не определено, но, вероятнее всего, такое же, как и объяв­
ляемое значение.

Описание:
Определяет фонетическое произношение содержимого эле­
мента. При указании значения <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 ' >

Исходное значение:
Не определено для сокращенных форм свойств.

Применяется:
Ко всем элементам.

Наследуется:
Нет.

Вычисляемое значение:
Не определено, но, вероятнее всего, соответствует паре аб­
солютных значений времени.

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


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

вообще не озвучивается, хотя фоновые звуки могут быть все


еще слышны. Подробнее о размещении перерывов читайте
ниже, в описании свойств 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>

Исходное значение:
Зависит от конкретного пользовательского агента.

Применяется:
Ко всем элементам.

Насn едуется:
Нет.

Вычисnяемое значение:
Не определено, но, вероятнее всего, соответствует абсолют­
ному значению времени.

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

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


элемента, но перед любым звуковым сигналом, который следу­
ет после озвучиваемого элемента. (См. также описание свой­
ства 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 и других соответствующих свойств.)

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


Примеры:
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 означает, что озвучивание зна­
ков препинания пропускается, а на их месте никаких пауз не
воспроизводится.

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


Примеры:
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 ; }

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


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 . Данное свойство применяется к звуко­
вым сигналам (см. также описание свойства сие и других соот­
ветствующих свойств.)

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


Примеры:
. 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> ]*

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


Расширения:
<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

Исходн ое значение:
Зависит от конкретного пользовательского агента.

Применяется:
Ко всем элементам.

Насnедуется:
Да.

Вычисnяемое значение:
Такое же, как и объявляемое значение.

Описание:
Определяет одно или более семейств голосов, которые
можно использовать для озвучивания содержимого элемента.
Сравнимо со свойством 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

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


Исходн ое значение:
mediwn

Примен яется:
Ко в сем элементам.

Наследуется:
Да.

Задание в процентах:
По liаследуемому значению.

Вычисnяемое значение:
Не определено, но, вероятнее всего, соответствует абсолют­
ному числовому значению.

Описан ие:
Определяет среднюю частоту основного тона голоса, озву­
чивающего содержимое элемента. Средняя частота основного
тона озвучивающего голоса будет зависеть, главным образом,
от выбранного семейства голосов. Значения <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

Исходное значение:
Зависит от конкретного пользовательского агента.

Глава 4. Справочник свойств 281


Применяется:
Ко всем элементам.

Наследуется:
Да.

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


По наследуемому значению.

Вычисляемое значение:
Не определено, но, вероятнее всего, соответствует абсолют­
ному числовому значению.

Описание:
Определяет отклонение средней частоты основного тона
голоса, озвучивающего содержимое элемента. Чем больше
это отклонение, тем более оживленно звучит голос. Значения
<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

Применяется:
Ко всем элементам.

Наследуется:
Да.

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


Задание в процентах:
По исходному значению, устанавливаемому по умолчанию.

Вычисляемое значение:
Не определено, но в предыдущем воплощении в виде свой­
ства 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

Применяется:
Ко всем элементам.

Наследуется:
Да.

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

Описание:
Оказывает влияние на высоту тона в интонации озвучива­
ющего голоса, которая обычно повышается по знакам ударе­
ния, принятым в конкретном языке.

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


Примеры:
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
назначение 24
элементов
наследование, механизм 25
определение 3 1
специфичность, вычисле-
отображение 2 8
ние 24
правила оформления 31
Ключевые слова
в мультимедийных запросах,
д применение 91
Директивы для обозначения цвета 57
! important, назначение 24 назначение 55
@import, назначение 18

м
Е Мультимедийные запросы
Единицы измерения ключевые слова, примене-
времени, разновидности б4 ние 91
длины назначение 90
абсолютные 59 параметры 93
относительные 61 применение 91
п универсальные значения 99
Селекторы
Пауза, определение 270
назначение 22
Перерыв, определение 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
Свойства
назначение 22
наследование 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
назначение 27
незаменяемые
вертикальная разметка 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�