ББК 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
Предисловие
Каскадные таблицы стилей ( 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 -документов сведения о сти
левом оформлении отдельного элемента могут быть указаны с
помощью атри бута. В качестве значения атри бута указывается
блок объявлений без фигурных скобок (см. приведенный далее
раздел "Структура правил"), как показано ниже.
Внимание!
Этот текст оформлен как nредупреждение!
Следует иметь в виду, что на момент написания этой книги
таблицу стилей нельзя было полностью размещать в атри буте
style. В качестве значения этого а три бута можно было указы
вать лишь единственный блок о бъявлений. Например, в атри
буте style нельзя ни разместить стили наведения, используя
объявление : hove r, ни воспользоваться директивой @ import
в данном контексте.
Несмотря на то что атри бут s tyle поддерживается в
о бычных языках разметки ХМL-документов (например , в
XHTM L 1.0, XHTM L 1. 1 и SVG), такая возможность вряд ли
доступна во всех подобных языках. Вследствие этого исполь
зовать атрибут style о бычно не рекомендуется, поскольку это
считается ненадлежащей нормой практики авторской разра
ботки веб -страниц и аналогичных документов.
Встроенные таблицы стилей
Таблицу стилей можно встроить в начале HTML- или
ХНТМL-документа, используя элемент разметки style. Этот
элемент должен быть указан в элементе разметки head следу
ющим образом:
St yl i n ' !
h l { color : purple ; }
р { font-s i z e : sma l l e r ; colo r : gray ; }
Аналогичная возможность в одних языках разметки ХМL
документов может быть предоставлена, а в других - нет. Поэ
тому для полной уверенности всегда обращайтесь за справкой
к спецификации языка DTD (Определение типа документа).
Внешние таблицы стилей
Стили могут быть перечислены в отдельном файле. Глав
ное преимущество отдельного файла состоит в том, что в нем
можно собрать все наиболее употребительные стили, а для об
новления всех страниц, на которых используется находящаяся
в нем таблица стилей, достаточно отредактировать эту един
ственную таблицу. Еще одно преимущество заключается в том,
что внешние таблицы стилей кешируются, что способствует
эффективному использованию пропускной способности ка
налов связи. Обратиться к внешним таблицам стилей можно
одним из трех способов, рассматриваемых ниже.
Ди ректива @import
В начале любой таблицы стилей можно разместить одну
или больше директив @ import. Для стилевого оформления
HTML- и ХНТМL-документов это обычно делается во встро
енной таблице стилей следующим образом:
18
CSS. Карманный справочник, 4-е издание
My Docurnent< / t i t le >
@ irnport url ( s i te . cs s ) ;
@ irnport url ( navbar . cs s ) ;
@ irnport url ( footer . cs s ) ;
body (backg round: yellow; }
Следует иметь в виду, что директивы @ import могут рас
полагаться в начале (а согласно спецификации - только в на
чале) любой таблицы стилей. Таким образом, в одну таблицу
стилей можно импортировать другую таблицу, а в ту - третью
таблицу.
Элемент разметки link
Элемент разметки l ink может быть использован в НТМL
и ХНТМL-документах для связывания таблицы стилей с до
кументом. С этой целью допускается указывать несколько эле
ментов разметки l in k. Чтобы ограничить применение табли
цы стилей одним или более носителями информации, можно
указать атрибут medi a следующим образом:
A Docurnent
< 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 " >
Имеется также возможность указать альтернативные та
блицы стилей. Если предоставляются альтернативные таблицы
стилей, то пользовательский агент (или автор документа) дол
жен предоставить средства для выбора пользователем одного
из вариантов таблиц стилей, как показано ниже.
A Docurnent < / t i t l e >
Г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-е издание
За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.
.
Header add Link
" ; rel=stylesheet ; type=text /cs s ; media=a l l "
На момент написания данной книги НТТР-заголовки под
держивались не всеми пользовательскими агентами, среди
которых выделяются браузеры 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 / * цвет фона * / :
/ * цвет RGB + непрозрачность * / ; }
rgba ( 2 3 , 5 8 , 8 9 , 0 . 4 2 )
В таблицах стилей допускаются также комментарии к
НТМ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
Идентификатор nсевдокласса
:hover
0,0,1,0
Идентификатор атрибута
[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.
З.
4.
Найти все объявления, содержащие селектор, совпадаю
щий с заданным элементом разметки.
Рассортировать по явно заданным весам все объяв
ления, применяемые к заданному элементу разметки.
Правила, обозначенные в директиве ! important, полу
чают больший вес, чем остальные правила. Кроме того,
рассортировать по источнику все объявления, приме
няемые к элементу разметки. Объявления могут иметь
следующие источники: автор, ч итатель и пользователь
ский агент. Как правило, авторские стили одерживают
верх над читательскими стилями. Но читательские сти
ли типа ! important важнее любых других стилей, в том
числе авторских стилей типа ! important. Как автор
ские, так и читательские стили заменяют используемые
по умолчанию стили пользовательских агентов.
Рассортировать по специфичности все объявления,
применяемые к заданному элементу разметки. Элемен
ты с большей специфичностью обладают большим ве
сом, чем элементы с меньшей специфичностью.
Рассортировать по порядку все объявления, применяе
мые к заданному элементу разметки. Чем дальше объ
явление оказывается в таблице стилей или документе,
тем больший вес оно получает. Объявления из импорти
руемой таблицы стилей считаются предшествующими
тем объявлениям, которые находятся в импортирующей
их таблице стилей, и поэтому они обладают меньшим
весом, чем объявления из импортирующей их таблицы
стилей.
Любые указания по представлению, источники которых не
относятся к CSS (например, диалоговое окно глобальных пара
метров настройки), получают тот же самый вес, что и исполь
зуемые по умолчанию стили пользовательских агентов (см. п. 2
приведенной выше процедуры).
26
CSS. Карманный справочник, 4-е издание
Кл ассификация элементов
Вообще говоря, группы элементов разметки CSS делятся на
следующие два типа: незаменяемые и заменяемые. И хотя типы
этих элементов могут быть довольно абстрактными, у них име
ются некоторые существенные различия. Эти различия под
робно рассматриваются в главе третьего издания книги CSS:
1he Definitive Gиide того же автора, вышедшей в издательстве
O'Reilly (в русском переводе эта книга вышла под названием
CSS
-
Каскадные таблицы стилей. Подробное руководство
в издательстве "Символ-плюс", Спб" 2008).
Незаменяемые элементы
Большинство элементов разметки HTML- и ХНТМL-доку
ментов являются незаменяемыми, а это означает, что их со
держимое представлено пользовательским агентом в блоке,
формируемом самим элементом. Например, элемент разметки
hi there< / span> является незаменяемым, а размеча
емый им текст " hi ther e " отображается пользовательским
агентом. Абзацы, заголовки, ячейки таблиц, списки и практи
чески все содержимое HTML- и XHTML-документов относят
ся к незаменяемым элементам разметки.
Заменяемые элементы
С другой стороны, заменяемьtми называются такие эле
менты разметки, содержимое которых заменяется тем, что
непосредственно отсутствует в самом документе. Наиболее
характерным тому примером служит элемент разметки img,
заменяемый файлом изображения, являющимся внешним по
отношению к документу. В действительности сам элемент раз
метки img ничего не содержит, как следует из приведенного
ниже простого примера.
Г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, которая позволяет
сформировать структурный или внутристрочной блок в зави
симости от конкретной ситуации. Получаемый в итоге резуль
тат определяется следующими правилами.
Если сам вставляемый блок содержит структурный блок,
он формирует такой блок.
2. А если после вставляемого блока сразу же следует род
ственный структурный блок, который не перемещает
ся свободно и не имеет абсолютного расположения, то
вставляемый блок становится первым внутристрочным
блоком этого родственного блока.
3. Если же ни одно из упомянутых выше условий не вы
полняется, то вставляемый блок формирует структур
ный блок.
1.
Если вставляемый блок вводится в виде первого внутри строчного блока его родственного структурного блока (см.
приведенное выше правило 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
::s
;z:
э
"
g. �
::s �
;z: ;z:
tl
� �
>::S
::s
g=
()
>::S
;z:
"
•::S
i
2i
"
"
<
;s
gi
�
f::!' =
"
<
>::S
�
;s
,
,
,
,
,
�mа·
ширина•
в
�
�
"
"
� �·
,
<
�
-
,
нижний внутренний край
нижнее внутреннее поле
нижняя граница
,
нижний отступ
'
,
,
::s''
верхний внутренний край
�
�
"'
,,
-
верхнее внутреннее поле
>::S
"
�
,
верхний отступ
'
>::S
tl
,
верхний внешний край
'
-
ii
�. � -5
isi:
i� i� 'Ё�
si:
",
С>
;z:"'
",
()
=
;z:
3
;z: 5! ;z:
Е "' "'
", "' 15
�
"'
",
::s
i �
r::. elernent2
66
CSS. Карманный справочник, 4-е издание
Оп исан и е:
Этот тип селектора служит для совпадения с элементом по
его состоянию как потомка другого элемента. Он более стро
гий, чем селектор порожденных элементов, поскольку обеспе
чивает совпадение только с потомком.
П ри меры:
div > р { color : cyan; )
ul > li { font-weight : bold ; )
Этот селектор позволяет выбрать следующий смежный
элемент, родственный другому элементу. (У родственных эле
ментов, как подразумевает их название, имеется общий роди
тельский элемент.) Любой текст, расположенный между двумя
родственными элементами, игнорируется, а во внимание при
нимаются только сами элементы и их положение в дереве до
кумента.
Пр имеры:
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 . сот" ]
div [ class * = "port " )
{ font-weight : bold; )
{ 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е с элементами, у
которых отсутствуют порожденные узлы, т.е. отсутствуют по
рожден:ные элементы или узлы содержимог не является пустым и не окажется
таковым, даже если заменить в нем пробел знаком новой строки.
Следует, однако, иметь в виду, что этот псевдокласс не применя
ется к п устым элементам наподобие 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)
* : lang ( f r )
( ba c kground : s i lver ; }
( quotes :
' &# 1 7 1 ;
'
'
» ; ' ; }
: 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 ; }
Описание:
Этот псевдокласс обеспечивает совпадение с каждым п-м
потомком по шаблону выбора, определяемому по формуле
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+Ь, где а и Ь - целые числа типа , а 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+Ь, где а и Ь
целые числа типа , а 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+Ь, где а и
Ь
целые числа типа , а 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)
img : nth-of- type ( Зn )
Описание:
Этот псевдокласс обеспечивает совпадение с элементом, яв
ляющимся единственным потомком своего родительского эле
мента. Такой псевдокласс чаще всего применяется для удале
ния границы из любого привязываемого по ссылке изображе
ния при условии, что оно является единственным элементом в
ссылке. Следует иметь в виду, что элемент может быть выбран
с помощью псевдокласса : 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
Применяется:
К любому элементу.
Описани е:
Этот псевдокласс обеспечивает совпадение с элемента
ми пользовательского интерфейса, которые не в состоянии
принять вводимые пользователем данные из-за языковых
атрибутов или других непредставительных средств, например
разметки недоступного поля
ввода текста в 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 :
p : after { content : " 1 " ; }
"
" url { / icons /globe . g i f ) ; }
: : 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 ) ;
Мультимедийный запрос можно применять везде, где допу
скается задавать тип носителя информации. Это означает, что
несколько подобных запросов можно перечислить в списке че
рез запятую следующим образом:
@ 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
можно указывать только в начале мультимедийного запроса.
П араметры мул ьтимедийных запросов
В качестве параметров мультимедийных запросов внедре
ны два новых типа значений, которые не применяются в ка
ком-либо другом контексте. Эти значения описаны ниже.
Значение параметра пропорций состоит из двух положи
тельных целочисленных значений типа < intege r>, разделя
емых знаком косой черты (/) и необязательными пробелами.
Первое значение обозначает ширину, а второе - высоту. Сле
довательно, чтобы выразить пропорции 1 6:9 в виде соотноше
ния ширины и высоты, в запросе достаточно указать 1 6 / 9 или
16 / 9.
Значение параметра разрешения состоит из положитель
ного целочисленного значения типа и обозначе
ния единицы измерения dpi или dpcm заданного разрешения.
Как правило, пробелы между целочисленным значением типа
Гnава 3. Селекторы
93
< integer> и обозначением единицы измерения заданного раз
решения не допускаются.
Свойства носителей информации
Ниже перечислены свойства носителей информации, ко
торые можно указывать в мультимедийных запросах. Следует,
однако, иметь в виду, что значения всех этих свойств не долж
ны быть отрицательными.
width , min-width , max-width
Значения :
Обозначают ширину области отображения для пользова
тельского агента. Для веб-браузера, рассчитанного на экран
ные носители информации, это ширина области просмотра,
включая любые полосы прокрутки. А для печатного носителя
информации это ширина страничного блока. Следовательно,
свойство ( min-width : 8 50рх ) применяется в том случае, если
область просмотра оказывается шире 8 5 0 пикселей.
device-width , min-device-width , max-device-width
Значения :
Обозначают ширину всей области воспроизведения на уст
ройстве вывода. Для экранных носителей информации это ши
рина экрана, а для печатных носителей информации - шири на страницы. Следовательно, свойство (max-device-width :
1 2 0 0рх ) применяется в том случае, если область вывода на
устройстве оказывается меньше 1200 пикселей в ширину.
height, min-height , max-height
Значеюvс :
Обозначают высоту области отображения для пользова
тельского агента. Для веб-браузера, рассчитанного на экран
ные носители информации, это высота области просмотра,
включая любые полосы прокрутки. А для печатного носителя
информации это высота страничного блока. Следовательно,
94
CSS. Карманный справочник, 4-е издание
свойство ( height : 5 67 рх ) применяется в том случае, если вы
сота области просмотра оказывается равной 567 пикселям.
device-height , min-device-height , mAX-device-height
ЗначеНIVr :
Обозначают высоту всей области воспроизведения на уст
ройстве вывода. Для экранных носителей информации это вы
сота экрана, а для печатных носителей информации - высо
та страницы. Следовательно, свойство (max-device-height :
4 0 0рх ) применяется в том случае, если область вывода на
устройстве оказывается меньше 4 0 0 пикселей в высоту.
aspect-ratio , min-aspect-ratio, mAX-aspect-ratio
ЗначеНIVr :
Обозначают пропорции, получаемые в результате сравне
ния свойств width и height носителя информации (см. приве
денное выше описание значения типа ). Следователь
но, свойство (min-aspect-rat i o : 2 / 1 ) применяется к любой
области просмотра, в которой соотношение ширины и высоты
составляет хотя бы 2 : 1.
device-aspect-ratio , min-device-aspect-ratio ,
max-deviceaspect-ratio
ЗначеНIVr :
Обозначают пропорции, получаемые в результате срав
нения свойств devi ce-width и device-height носителя ин
формации (см. приведенное выше описание значения типа
). Следовательно, свойство devi c e - a spe c t - ra t i o :
1 6 / 9 ) применяется к любому устройству вывода, в котором
соотношение ширины и высоты в области отображения точно
равно 1 6 : 9.
color , min-color , mAX-color
Значениs� :
Обозначают наличие возможности воспроизводить инфор
мацию в цвете на устройстве вывода, причем необязатель
ное целое число представляет количество битов, используе
мых в каждой составляющей цвета. Следовательно, свойство
Гnава 3. Селекторы
95
( color ) применяется к любому устройству с какой угодно глу
биной цвета, тогд� как свойство (min-colo r : 4 ) означает, что
на каждую составляющую цвета должно приходиться не мень
ше 4 бит. Любое устройство, не поддерживающее воспроизве
дение информации в цвете, возвратит нулевое значение (О).
color-index , min-color-index , max-color-index
Значен11Jl :
Обозначают общее количество цветов, доступных в спра
вочной таблице цветов на устройстве вывода. Любое устрой
ство, на котором справочная таблица цветов не применяет
ся, возвратит нулевое значение (О). Следовательно, сJЗойство
(min-color- index : 2 5 6 ) применяется к любому устройству
вывода, в котором доступно для воспроизведения не меньше
2 5 6 цветов.
monochrome , min-monochrome , max-monochrome
Значен11Jl :
Обозначают наличие возможности воспроизводить инфор
мацию в монохромном виде, причем необязательное целое чис
ло представляет количество битов, приходящихся на каждый
пиксель в буфере кадров устройства вывода. Следовательно,
свойство (monochrome ) применяется к любому монохромному
устройству вывода, тогда как свойство ( min-monochrome : 2 )
означает любое монохромное устройство вывода, в котором на
каждый пиксель в буфере кадров приходится не меньше 2 бит.
resolution , min-resolution , max-resolution
Значен11Jl :
Обозначают разрешение устройства вывода, выражаемое
как плотность пикселей и измеряемое в точках на дюйм (dpi)
или в точках на сантиметр (dpcm). (См. приведенное выше
описание значения типа .) Если пиксели на
устройстве вывода не оказываются квадратными, то для обо
значения требуемого разрешения используется наименьшая из
осей плотности. Тhк, если плотность по одной оси на устрой
1 2 0dpcm,
стве вывода состаhляет lOOdpcm, а по другой оси
-
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 >]
[,
[ ] ] *
Расширения:
< anima tion-parameters>
< ' animat ion-name ' > 1 1 < ' animation-durat ion ' > 1 1
< ' animat ion-timing-func t i on ' > 1 1 < ' animation-delay ' >
< ' animat ion-iterat ion-count ' >
11
11
< ' animation-direct ion ' >
Исходное значение:
См. ниже описание отдельных свойств.
Применяется:
К блочным и внутристрочным элементам.
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Это сокращенная форма свойства, охватывающая все ос
тальные свойства видов СSS-анимации, указываемых спи
ском через запятую. Отдельные части значения этого свой
ства могут быть указаны в любом порядке, поэтому следует
избегать возможной неоднозначности значений задержки и
1 00
CSS. Карманный справочник, 4-е издание
продолжительности анимации. На момент написания данной
книги первой обычно указывалась продолжительность анима
ции, а второй - ее задержка, хотя это и нельзя гарантировать.
Примеры:
div# s l ide { anima t i o n :
hl { animation :
' s lide ' 2 . S s l inear О 1 norma l ; }
' bounce ' O . S s О . З З s
ease-in-out infinite a l ternate ; }
animation- delay
Значения:
[ , < 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
Значения:
[ , ] *
Исходное значение:
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 [ ,
infinite
J ] *
Исходное значение:
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 :
h2 ( animation- name :
' turn ' ,
' s lide ' , none ; )
' 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
cuЬicЬezier ( <
1
ease-in 1 ease-out
1
ease-in-out 1
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
Значения:
[ ,
] * < f i na l -bg-layer>
Расширения:
1 1 [ / ] ? 1 1
1 1 1 1 < bg-box> { 1, 2 ) 1 1
1 08
CSS. Карманныйсправочник, 4-е издание
Исходное значение:
См. ниже описание отдельных свойств.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Задание в процентах:
Допускается для значения (см. ниже опи
сание свойства 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
Значения:
[ , ] *
Расширения:
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
Значения:
[
,
]*
Расширения:
Ь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
Значения:
Исходное значение:
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
Значения:
[ , ] *
Расширения:
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
Значения:
[ , ] *
Расширения:
Ь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
Значения:
[ , ] *
Расширения:
[ [ top 1 Ьottom ] 1 [ / < length> 1 left 1
center / right ] [ 1 < length> 1 top 1 center
1 bottom ] ? 1 [ center 1 [ left 1 right ] [ 1
] ? ] && [ center / [ top 1 Ьcttom ] [
] ? ]
]
Исходное значение:
0% 0%
Применяется:
Ко всем элементам.
Гпава 4. Справочник свойств
11S
Наследуется:
Нет.
Задание в процентах:
По соответствующей точке как на элементе, так и на исход
ном изображении.
Вычисляемое значение:
Смещения по абсолютной длине, если объявлено значение
типа , а иначе - значения, задаваемые в процентах.
Описание:
Определяет положение одного или более исходных изо
бражений задних планов, как задано в свойстве 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 ,
pre { background-po s ition : l Opx 50 % ; )
1 16
CSS. Карманный справочник, 4-е издание
5 0 % 7 5 % , О 40рх ; )
background- repea t
Значения:
[
,
]*
Расширения:
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
их растягивание до взаимного
соприкосновения. Следует также иметь в виду, что значение
-
Примеры:
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
Значения:
[ , ] *
Расширения:
[ 1 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 ; }
Исходное зн ачение:
См. ниже описание отдельных свойств.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое зна чение:
Такое же, как и объявляемое значение.
Описание:
Это сокращенная форма свойства, определяющая ширину,
цвет и стиль границ элемента. Несмотря на то что ни одно из
значений данного свойства фактически указывать не нужно,
следует все же иметь в виду, что если опустить стиль границы,
то обрамление элемента будет отсутствовать, поскольку стиль
границы по умолчанию выбирается равным 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; }
Исходное значение:
Не определено для сокращенных форм свойств.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
См. ниже описание отдельных свойств.
Описание:
Это сокращенная форма свойства, определяющая ширину,
цвет и стиль нижней границы элемента. Если опустить стиль
границы, как и в свойстве border, то обрамление элемента бу
дет отсутствовать.
Примеры:
ul { border-bottom : O . Sin groove green ; )
a : act ive { border-bottom : purple 2рх dashed ; )
border-bo ttom- color
Значения:
Исходное значение:
Значение свойства 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
Значения:
[ 1 ]
[ < length> 1
]?
Исходное значение:
о
Применяется:
Ко всем элементам.
Нас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
Значения:
[
1
)
[
1
) ?
Исходное значение:
о
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Задание в процентах:
По размерам блока границы элемента.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет радиус скрутления правого нижнего утла гра
ницы элемента. Если заданы два значения данного свойства, то
первое из них обозначает горизонтальный радиус, а второе вертикальный радиус. Порядок создания формы скрутления
приведен ниже, в описании свойства 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
ridqe 1 inset
dotted 1 dashed 1 solid 1 douЫe
outset
1
qroove 1
Исходное значение:
none
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет стиль нижней границы элемента. Значение дан
ного свойства должно отличаться от none, чтобы эта граница
стала видимой.
Примеры:
ul { border-bottom-style : groove ; )
a : active { border-bottom- style : dashed ; }
border-bottom-width
Значения:
thin 1 medium 1 thick 1
Г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
Значения:
{ 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.
as ide {
border- image : url ( a s ides . png)
2 stretch round ; )
1 0 0 50 1 5 0 / 8 З 13 /
Примечание:
На момент написания данной книги поддержка свойства
border- image в браузерах была неполной и несогласован
ной, тогда как ни одно из связанных с ним свойств (например,
border-image-source) вообще не поддерживалось. Тем не ме
нее описание этих свойств было включено в книгу, поскольку
в дальнейшем предполагалось согласовать их поддержку в бра
узерах.
Ьorder- image- ou tset
Значения:
[ 1 ] ( 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
Значения:
[ 1 ] { 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
Исходное значение:
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
Значения:
(
1
1
1 auto
] {1,4)
Исходное значение:
1
Применяется:
Ко всем элементам, кроме табличных элементов, в которых
свойство border-collapse принимает значение collapse.
1 32
CSS. Карманный справочник, 4-е издание
Наследуется:
Нет.
Задание в процентах:
По размерам области изображения границы.
Вычисляемое значение:
Такое же, как и объявляемое значение, тем не менее читайте
приведенное ниже описание.
Опи сани е:
Определяет ширину изображения границы по каждой из
его четырех сторон. Нарезки изображения границы, отличаю
щиеся по ширине от самого изображения границы, масштаби
руются, чтобы вписаться в пределы границы, что может ловли ять на порядок их повторения. Так, если правый край изобра
жения границы составляет 10 пикселей в ширину, а ширина
изображения границы объявлена как border- image-width :
Зрх ; , то изображения границы по правому краю будут умень
шены до трех пикселей в ширину.
Следует, однако, иметь в виду, что свойство border-image
width отличается от свойства border-width тем, что ширина
изображения границы может быть иной, чем ширина обла
сти границы. В тех случаях, когда изображение оказывается
шире или выше области границы, оно обрезается по умолча
нию, хотя этому может воспрепятствовать установка свойства
border- image-outset. А если изображение оказывается уже
или короче области границы, его масштаб не увеличивается.
Примечание :
На момент написания данной книги поддержка свойства
border- image-width в браузерах отсутствовала. Тем не ме
нее его описание включено в эту книгу, поскольку свойство
Гnава 4. Справочник свойав
133
border-image, охватывающее свойство border- image-width,
поддерживалось в браузерах, а в дальнейшем предполага
лась также поддержка свойства border- image-width.
уже
border - left
Значения:
< ' border-width ' >
11
< ' border-style ' >
11
Исходное значение:
Не определено для сокращенных форм свойств.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
См. ниже описание отдельных свойств.
Описание:
Это сокращенная форма свойства, определяющая ширину,
цвет и стиль левой границы элемента. Если опустить стиль
границы, как и в свойстве border, то обрамление элемента бу
дет отсутствовать.
Примеры:
р { border - le ft : Зеm solid gray; )
pre { border-le f t : douЫe Ы а с k 4рх ; )
border - left- 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
ridqe 1 inset
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет стиль левой границы элемента. Значение дан ного свойства должно отличаться от 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
Исходное значение:
mediwn
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
Абсолютная длина. Нулевое значение (О), если задан стиль
границы none или hidden.
Описание:
Определяет ширину левой границы элемента, что возымеет
действие только в том случае, если задан любой стиль грани
цы, кроме none. Если же задан стиль границы none, то ее ши
рина, по существу, становится равной нулю (О). Отрицатель
ные значения длины в данном свойстве не допускаются.
1 36
CSS. Карманный справочник, 4-е издание
Примеры:
р { border- left-widt h : Зеm; }
pre { border-left-width : 4рх ; }
Применяется:
Ко всем элементам, кроме табличных элементов, в которых
свойство border-co l l apse принимает значение collapse.
Наследуется:
Нет.
Задание в процентах:
По размерам блока границы элемента (см. приведенное
ниже оrrисание) .
Вычисnяемое значение:
Такое же, как и объявляемое значение.
Описание:
Это сокращенная форма свойства, определяющая радиус
скругления правого нижнего угла границы элемента. Конкрет
ные углы объявляются в нем по высоте и ширине. Рассмотрим
в качестве примера следующее объявление:
. callout { border-radius :
lOpx ; }
Каждый угол элемента с выноской, определяемой селек
тором t
11
< ' border-style ' >
11
Исходное значение:
См. ниже описание отдельных свойств.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
См. ниже описание отдельных свойств.
Гnава 4. Сnравочник свойств
1 39
Описание:
Это сокращенная форма свойства, определяющая ширину,
цвет и стиль правой границы элемента. Если опустить стиль
границы, как и в свойстве border, то обрамление элемента бу
дет отсутствовать.
Исходное значение:
Значение свойства 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
ridge 1 inset
dotted 1 dashed 1 solid 1 douЫe 1 groove
outset
1
Исходное значение:
none
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет стиль правой границы элемента. Значение дан
ного свойства должно отличаться от none, чтобы эта граница
стала видимой.
Примеры:
img { border-right - s t yle : dotted ; }
hЗ { border-right - s tyle : inset ; }
border-right-width
Значения:
thin
1
medium 1 thick 1
Исходное значение:
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
Значения:
?
Исходное значение:
о
Применяется:
К элементам со значением 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рх ; )
Исходное значение:
Не определено для сокращенных форм свойств.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
См. ниже описание отдельных свойств.
Описание:
Это сокращенная форма свойства, определяющая стили об
щей границы элемента или каждой его стороны в отдельности.
Г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
Исходное значение:
См. ниже описание отдельных свойств.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое зна� ение:
См. ниже описание отдельных свойств.
Описание:
Это сокращен �ая форма свойства, определяющая �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, задаваемое для аналогич
ного элемента, а иначе - такое же, как и объявляемое значение.
Описание:
Определяет цвет видимых участков верхней границы эле
мента. Стиль этой границы должен отличаться от задаваемого
значением none или hidden, чтобы она стала видимой.
Примеры:
ul { border-top-colo r : Ыасk; )
hl { border-top-co lor : gray; )
Ьorder- top - left- radius
Значения:
[
1
]
[ < length>
1
]
Глава 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
Значения:
[
1
]
[ < length> 1 ] ?
Исходное значение:
о
Применяется:
Ко всем элементам.
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
ridqe 1 inset
1
1
dotted 1 dashed 1 solid 1 douЫe 1 qroove 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
Значения:
1
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
Значения:
Исходное значение:
о
Применяется:
К потомкам элемента из обычного потока со значением Ьох
или 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
Значения:
Исходное значение:
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
[
,
] *
Расширения:
inse t? & &
[ < l ength > { 2 , 4 } & & ? ]
Гnава 4. Справочник свойств
1 59
Исходное значение:
none
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое зна 4 ение:
Такое же, как и объявляемое значение, но с абсолютными
длинами и вычисляемыми цветами.
Описание:
Определяет одн у или более несколько, отбрасыnаемых
формой блока элемента. Данное свойство позволяет опреде
лить внешнюю (т.е. падающую) или внутреннюю тень, причем
последнюю с помощью ключевого слова inset. Если же это
ключевое слово не указано, тень оказывается внешней.
Четыре значения длины моrут быть объявлены для данно
го свойства в следующем порядке: смещение по горизонтали,
смещение по вертикали, расстояние размытия и расстояние
распространения тени. При положительных значениях обоих
видов смещения тень отбрасывается вниз и вправо, а при от
рицательных значениях - вверх и влево. При положительных
значениях расстояния распространения тени ее размеры уве
личиваются, а при отрицательных значениях - уменьwаются.
И наконец расстояние размытия не может иметь отрицатель
ных значений.
Следует, однако, иметь в виду, что тени ограничиваются
краями границ элемента. Следовательно, внешняя тень вос
производится только до внешнего края границы. На полупро
зрачном или полностью прозрачном фоне элемента внешняя
тень от него не проявляется. А внутренняя тень видна только
на самом краю границы и вообще не выходит за его пределы.
Применяется:
Ко всем элементам со свойствами 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
Значения:
Исходное значение:
Зависит от конкретного пользовательского агента.
Применяется:
Ко всем элементам.
Нас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
Значения:
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
Значения:
normal
1
Исходное значение:
normal
Применяется:
К элементам, размещаемым с помощью нескольких столбцов.
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет ширину промежутка между соседними столб
цами в элементе, размечаемом с помощью нескольких столб
цов. Любая линейка для разделения столбцов (см. ниже опи
сание свойства column- rul e ) центруется в пределах каждого
промежутка между столбцами. Длина промежутка между
столбцами не может быть отрицательной.
Исходное значение:
См. ниже описание отдельных свойств.
Применяется:
К элементам, размещаемым с помощью нескольких столбцов.
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описа ние:
Это сокращенная форма свойства, определяющая ширину,
стиль и цвет так называемых линеек (т.е. вертикальных линий),
воспроизводимых между столбцами в элеме�те, размечаемом с
помощью нескольких столбцов. Любое про�ущенное значение
устанавливается равным значению по умолчанию соответству
ющего свойства. Следует, однако, иметь в виду, что если стиль
границы не определяется, то по умолчанию рн принимает зна
чение none и линейка для разделения столрцов не воспроиз
водится .
1
Исходное значение:
Зависит от конкретного пользовательского агента.
Применяется:
К элементам, размещаемым с помощью нескольких столбцов.
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет цвет так называемых линеек (т.е. вертикальных
линий), воспроизводимых между столбцами в элементе, разме
чаемом с помощью нескольких столбцов.
Примеры:
# 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
Исходное значение:
medium
Применяется:
К элементам, размещаемым с помощью нескольких столбцов.
Наследуется:
Нет.
Вычисляемое значение:
Абсолютная длина. Нулевое значение (О), если задан стиль
границы none или hidden.
Гnава 4. Справочник свойств
171
Описание:
Определяет ширину так называемых линеек ( т.е. вертикаль
ных линий), отображаемых между столбцами в элементе, раз
мечаемом с помощью нескольких столбцов.
Применяется:
К статически размещаемым, не свободно перемещаемым эле
ментам.
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет количество столбцов, на которое простира
ется элемент, размечаемый с помощью нескольких столбцов.
Для этого имеются только две возможности: вообще не про
стирать элемент ни на один из столбцов (значение none) или
же простирать его на все столбцы (значение all). Если элемент
простирается на несколько столбцов, то содержимое, которое
находится перед этим элементом, равномерно распределяет
ся по столбцам над ним. А содержимое, которое следует после
1 72
CSS. Карманный справочник, 4-е издание
данного элемента, равномерно распределяется по столбцам под
ним.
Пример:
h2 { column-span : a l l ; )
column-width
Значения:
1 auto
Исходное значение:
&uto
Применяется:
К незаменяемым блочным элементам, кроме табличных
элементов, к ячейкам таблицы и внутристрочным блочным
элементам.
Наследуется:
Нет.
Вычисляемое значение:
Абсолютная длина.
Описание:
Определяет абсолютную ширину столбцов в элементе, раз
мечаемом с помощью нескольких столбцов. Это означает оп
тимальную ширину столбцов, а следовательно, пользователь
ские агенты могут видоизменить ее значение или пренебречь
ею, если сочтут нужным. Очевидным тому примером служит
несоответствие общей ширины столбов и промежутков между
ними ширине многостолбцового элемента. И это в какой-то
степени похоже на изменение ширины ячеек таблицы с целью
подогнать столбцы по общей ширине таблицы.
Гnава 4. Справочник свойств
1 73
Значения абсолютной длины должны быть больше нуля.
Но по какой-то непонятной причине указывать эти значения в
процентах не разрешается.
Исходное значение:
См. ниже описание отдельных свойств.
Применяется:
К незаменяемым блочным элементам, кроме табличных
элементов, к ячейкам таблицы и внутристрочным блочным
элементам.
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Это сокращенная форма свойства, определяющего количе
ство и ширину столбцов в элементе, размечаемом с помощью
несколько столбцов. Пропущенные значения устанавливаются
равными значениям по умолчанию соответствующих свойств.
Примеры:
body { columns : З 2 3em; }
div { co lumns : 2 0 0рх 5 ; }
1 74
CSS. Карманный справочник, 4-е издание
content
Значения:
normal 1 none 1 [
1 1 1
open-quote 1 close-quote 1 no-open-quote
< s t r ing>
attr ( < ident i f ie r > ) 1
1 no-close-quote ] +
Исходное значение:
nortnAl
Применяется:
К псевдоэлементам : : before и : : a fter.
Наследуется:
Нет.
Вычисляемое значение:
Абсолютный 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> ? ] + 1
none
Исходное значение:
none
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое зна� ение:
Такое же, как и объявляемое значение.
Описание:
С помощью этого свойства счетчики могут инкрементиро
ваться (или декрементироваться) на любое значение: положи
тельное, отрицательное или нулевое (О). Если тип
значения не указан, то по умолчанию устанавливает значение 1
данного свойства.
Вычисляемое значение:
Один или более наборов цветов плюс три абсолютные длины.
Описание:
Определяет одну или более теней, отбрасываемых тексто
вым содержимым элемента. Тени всегда воспроизводятся по
зади текста в элементе, но впереди его переднего плана, границ
и контура. Кроме того, тени воспроизводятся от первой сверху
и до последней снизу.
Четыре значения длины теней могут быть объявлены в
следующем порядке: смещение по горизонтали, смещение
Г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
Значения:
1
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
[
] *
Расширения:
< 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
Зна чения:
[ [ [
1 [ [ [ left
center 1 Ьottom ]
? ]
[
top
left 1 center 1 right ]
top 1 center 1 Ьottom ] ? ]
center 1 right ] 1 1
1 1
[ 1 1
1
1
] ? ]
Исходное зна ч ение:
50% 50%
о
Применяется:
К блочным и внутристрочным элементам.
Наследуется:
Нет.
Задание в процентах:
По размеру блока элемента.
Вычисляемое знач ение:
Абсолютная длина для значения , а иначе - в про
центах.
Гnава 4. Справочник свойств
241
Описание:
Определяет исходную точку для преобразований элемента
как в двухмерном, так и в имитируемом трехмерном простран
стве. Значения , отмеченные как необязательные,
определяют исходную точку преобразований в имитируемом
трехмерном пространстве. Если они не указаны, то данная точ
ка относится к двухмерному пространству.
Примеры:
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 ' > ] ) *
Исходное значение:
Не определено для сокращенных форм свойств.
Применяется:
Ко всем элементам, а также к псевдоэлементам
: : after.
:
: before и
Гnава 4. Справочник свойств
243
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Опис ание:
Это сокращенная форма свойства, определяющая особен
ности переходов одного или более элементов из одного со
стояния в другое. И хотя на момент написания данной книги
синтаксис объявления значений этого свойства еще не был
окончательно определен, в спецификации поясняется, что если
объявлены два значения , то первое из них обознача
ет продолжительность перехода, а второе - задержку. Если
же объявлено лишь одно значение , то оно обозначает
только продолжительность перехода.
Примеры:
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> [ , 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
Значения:
[ , < t ime> ] *
Исходное значение:
о
Применяется:
Ко всем элементам, а также к псевдоэлементам
: : after.
:
: before и
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет продолжительность перехода от начала и
до конца. Устанавливаемое по умолчанию нулевое значение
(О) означает, что переход происходит мгновенно и без всякой
Г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 [
]
[
' ,
'
< I DENТ> ] *
Исходное значение:
all
Применяется:
Ко всем элементам, а также к псевдоэлементам
: : afte r.
:
: before и
Наследуется:
Нет.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет одно или более свойств, которые должны пере
ходить из одного состояния в другое. Например, для свойства
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
Значения:
[ , ] *
Расширения:
< transi tion- timing>
ease 1 linear 1 ease-in 1 ease-out
1
ease-in-out 1
cuЬicЬezier ( , , , )
Исходное значение:
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
textЬottom 1 1 < length>
248
CSS. Карманный справочник, 4-е издание
1
middle 1 bottom 1
Исходное знач ение:
baseline
Применяется:
К В!iутристрочным элементам и ячейкам таблицы.
Наследуется:
Нет.
Задание в процентах:
По з начению элемента.
Выч исляемое знач ение:
Для значений в процентах и значений длины вычисляемое
значение равно соответствующей абсолют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
Значения:
1
1
auto
Исходное значение:
auto
Применяется:
К блочным и заменяемым элементам.
Гnава 4. Справочник свойств
251
Наследуется:
Нет.
Задание в процентах:
По ширине содержащего блока.
Вычисляемое значение:
Для исходных значений auto и в процентах такое же, как
объявляемое значение, а иначе - абсолютная длина, если толь
ко данное свойство не применяется к элементу, и тогда оно
равно auto.
Описание:
Определяет ширину области содержимого элемента, к ко
торой снаружи добавляются внутренние поля, границы и от
ступы. Данное свойство игнорируется при разметке внутри
строчных незаменяемых элементов. Указывать отрицательные
значения абсолютной длины и в процентах не разрешается.
Задание в процентах:
По ширине глифа пробела в Уникоде (U+0020) для начерта
ния шрифта элемента.
Вычисляемое значение:
Для значений длины вычисляемое значение равно соответ
ствующей абсолютной длине, а иначе nonnal.
-
Описание:
Определяет величину пробела, вставляемого между слова
ми. Следует, однако, иметь в виду, что в спецификации поня
тие слово не определено. Поэтому на практике пользователь
ские агенты будут, как правило, применять данное свойство
к сворачиваемым пробелам между строками непробельных
символов. Разрешается указывать отрицательные значения аб
солютной длины и в процентах. В таком случае слова распола
гаются ближе одно к другому.
Примеры:
p . spacious { letter-spacing : брх ; )
em { letter-spacing : 0 . 2em; )
p . cramped { letter-spacing : - 0 . Sem; }
Примечание:
В спецификации CSS2. l свойство word- spacing принимает
единственное значение: или 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
avoid-page 1 avoid-column
1
right 1 page 1 column 1
Исходн ое значение:
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
avoid-page 1 avoid-column
1
right
1
page
Исходное значение :
auto
Применяется:
К блочным элементам.
Наследуется:
Нет.
Вычисляемое зна � ение:
Такое же, как и объявляемое значение.
256
CSS. Карманный справочник, 4-е издание
1
column 1
Описание:
Определяет, следует ли размещать разрыв столбца или
страницы перед элементом. И хотя при значении always дан
ного свойства теоретически возможно принудительное разме
щение разрывов, гарантировать запрет их появления нельзя.
Самое лучшее, что можно сделать, - указать значение avoid,
чтобы пользовательский агент не вставлял разрыв столбца или
страницы перед элементом. Ключевые слова avoid-column и
avoid-pa9e препятствуют вставке разрыва столбца или стра
ницы соответственно перед элементом. Ключевое слово left
служит для вставки достаточного количества разрывов перед
элементом, чтобы страница располагалась слева. Аналогич
но ключевое слово ri9ht служит для размещения страницы
справа. А ключевые слова ра9е и always служат для вставки
разрыва страницы перед элементом, тогда как ключевые слова
colwnn и always для вставки разрыва столбца.
-
Вычисляемое значение:
Такое же, как и объявляемое значение.
Г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
Исходн ое значение:
auto
Применяется:
К элементам изображений.
Наследуется:
Нет данных.
Вычисляем ое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет угол поворота изображений по часовой стрел
ке, когда они воспроизводятся на печатных носителях ин
формации. Это дает возможность поворачивать изображе
ния, поступающие из мобильных устройств, где они не были
258
CSS. Карманный справочник, 4-е издание
повернуты после съемки "боком". Пользовательские агенты
должны поддерживать следующие вычисляемые в градусах
значения углов поворота: Odeg, 90deg, 1 80deg и 2 7 0deg, а
остальные значения могут игнорироваться. Следует, однако,
иметь в виду, что данное свойство не требуется для вращения
изображений при переходе от книжной ориентации к альбом
ной и обратно, поскольку такое вращение должно выполнять
ся пользовательским агентом автоматически.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет, следует ли добавить крестообразные приво
дочные .метки или метки обрезки при воспроизведении стра
ницы.
Пример:
@page {marks : cross crop ; )
Гnава 4. Справочник свойств
259
orphans
Значения:
< i nteger>
Исходное значение:
2
Применяется:
К блочным элементам.
Наследуется:
Да.
Вычисляемое значение:
Такое же, как и объявляемое значение .
Описание:
Определяет минимальное количество текстовых строк в эле
менте, которые можно оставить внизу страницы. Это может
оказать влияние на расположение разрывов страниц в элементе.
Примеры:
р { orphans : 4 ; )
ul { orphans : 2 ; )
page
Значения:
auto
1
Исходное значение:
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, хотя поддержка первого в браузерах может оказаться
более прочной, чем поддержка последнего.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет, следует ли исключить появление разрыва стра
ницы в самом элементе. Необходимо, однако, иметь в виду, что
избежать появления таких разрывов нельзя. Так, если сделать
объявление
{ 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 { l , 2 } 1 [
landscat>e ] ]
1 1 [ portrait
1
Расширения:
А5 1
А4
1 АЗ 1 BS
1 В4 1 letter 1 leqal
1
ledger
Исходное значение:
auto
Гnава 4. Справочник свойств
265
Приме няется:
В контексте страницы.
Наследуется:
Нет данных.
Вычисляемое значение:
Такое же, как и объявляемое значение.
Описание:
Определяет размеры и ориентацию страничного блока.
Ключевые слова auto, portrait и landscape приводят к
тому, что страничный блок заполняет пространство, доступ
ное для воспроизведения на странице. Содержимое странич
ных блоков со значением portrai t данного свойства печа
тается таким образом, чтобы более длинные стороны стра
ничного блока располагались слева и справа. А содержимое
страничных блоков со значением landscape данного свойства
печатается таким образом, чтобы более длинные стороны
страничного блока располагались вверху и внизу.
Если размеры страничного блока указываются с помощью
значений длины или какого-нибудь ключевого слова из рас
ширения , обозначающего формат страницы (на
пример, А4 ), а сам страничный блок не вписывается в размеры
страницы для его воспроизведения, то размеры страничного
блока и его содержимого могут быть уменьшены, чтобы по
догнать его по странице. Если же указано лишь одно значе
ние длины, то оно означает оба размера, тем самым определяя
квадратный страничный блок. Значения длины, указанные в
единицах измерения em или ех, рассчитываются относитель
но вычисляемого размера шрифта, выбираемого из контекста
страницы.
Пример:
body ( page- s i z e : lands cape ; }
266
CSS. Карманный справочник, 4-е издание
widows
Значения:
Исходное значение:
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 [ 1 1 silent 1 x-soft 1
soft 1 medium 1 loud 1 x-loud ]
Исходное значение:
none
Применяется:
Ко всем элементам.
268
CSS. Карманный справочник, 4-е издание
Насn едуется:
Нет.
Задан и е в процентах:
Применяется к наследуемому значению свойства voice
volume.
Выч исn яемое значение:
Абсолютный URI для значений , а иначе
-
none.
Оп исание:
Определяет звуковой сигнал, который следует после озву
чивания содержимого элемента.
Пр имеры:
taЫe . layout { cue-afte r : url ( s ad-tromЬone . wav) ; }
pre { cue-after : url ( raygun . mpЗ ) ; }
cue-bef ore
Значения:
none
soft
[ 1
medium 1 loud 1 x-loud ]
1 silent 1 x-soft
1
Исходное значен ие:
none
Применяется:
Ко всем элементам.
Насn едуется:
Нет.
Задан и е в процентах:
Применяется к наследуемому значению свойства voice
volume.
Гnава 4. Справочник свойств
269
Вычисляемое значение:
Абсолютный 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
Исходное значение:
Зависит от конкретного пользовательского агента.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
Абсолютное значение времени.
Описание:
Определяет продолжительность паузы, которая следует по
сле озвучивания содержимого элемента. Пауза - это проме
жуток, в течение которого содержимое вообще не озвучивает
ся, хотя фоновые звуки могут быть все еще слышны. Эта пауза
воспроизводится после любого звукового сигнала, который
следует после озвучиваемого элемента. (См. также описание
свойства cue-after и других соответствующих свойств.)
Исходное значение:
Зависит от кон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-е издание
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
Не определено, но, вероятнее всего, такое же, как и объяв
ляемое значение.
Описание:
Определяет фонетическое произношение содержимого эле
мента. При указании значения используется Между
народный фонетический алфавит, обозначаемый экранируе
мыми кодовыми точками в Уникоде.
Пример:
#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
Исходное значение:
Зависит от конкретного пользовательского агента.
Применяется:
Ко всем элементам.
Нас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
Исходное значение:
Зависит от конкретного пользовательского агента.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
Не определено, но, вероятнее всего, соответствует абсолют
ному значению времени.
Описание:
Определяет продолжительность перерыва, который пред
шествует озвучиванию содержимого элемента. Перерыв - это
промежуток, в течение которого содержимое вообще не оз
вучивается, хотя фоновые звуки могут быть все еще слышны.
Этот перерыв воспроизводится перед озвучиванием содержи мого элемента, но после любого звукового сигнала, который
предшествует озвучиваемому элементу. (См. также описание
свойства 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
Значения:
left 1 center 1 right
1
1
leftwards 1 rightwards
Исходное значение:
center
Применяется:
Ко всем элементам.
Наследуется:
Да.
Вычисляемое значение:
Не определено, но, вероятнее всего, соответствует абсолют
ному числовому значению.
Описание:
Определяет стереобалансировку озвучивающего голоса.
Это дает возможность перемещать звучание голоса из одно
го стереоканала в другой, а при заданном числовом значении
смешивать звучание голоса в обоих стереокана
лах:. Например, при значении -50 голос звучит так, как будто
он исходит из положения слева от центра. Числовые значения
указываются в пределах: от - 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
Значения:
Исходное значение:
Зависит от конкретного пользовательского агента.
Применяется:
Ко всем элементам.
Наследуется:
Нет.
Вычисляемое значение:
Не определено.
Оп и сание:
Определяет продолжительность времени, необходимого
для озвучивания содержимого элемента. В конечном итоге за
мещает значение свойства voice- rate. Допускаются только
положительные значения данного свойства.
Примеры:
. tel ( voice-durat i o n : З s ; }
big { vo ice-durat ion : l O s ; }
voice- fami ly
Значения:
[ ,
]*
Гnава 4. Справочник свойств
279
Расширения:
1 [
? ? ]
< a ge >
child 1 young 1 old
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
Значения:
280
1
1
x-low
1
low 1 medium 1 high 1 x-high
CSS. Карманный справочник, 4-е издание
Исходн ое значение:
mediwn
Примен яется:
Ко в сем элементам.
Наследуется:
Да.
Задание в процентах:
По liаследуемому значению.
Вычисnяемое значение:
Не определено, но, вероятнее всего, соответствует абсолют
ному числовому значению.
Описан ие:
Определяет среднюю частоту основного тона голоса, озву
чивающего содержимое элемента. Средняя частота основного
тона озвучивающего голоса будет зависеть, главным образом,
от выбранного семейства голосов. Значения данно
го свойства указываются в герцах, определяя частоту основ
ного тона.
Пример ы:
big ( voice-pitch : 1 0 0 ; )
sma l l ( voice-pitch : high ; )
voi ce-pi tch- range
Значен ия:
1
1 x-low 1 low
1
medium 1 hiqh
1
x-hiqh
Исходное значение:
Зависит от конкретного пользовательского агента.
Глава 4. Справочник свойств
281
Применяется:
Ко всем элементам.
Наследуется:
Да.
Задание в про центах:
По наследуемому значению.
Вычисляемое значение:
Не определено, но, вероятнее всего, соответствует абсолют
ному числовому значению.
Описание:
Определяет отклонение средней частоты основного тона
голоса, озвучивающего содержимое элемента. Чем больше
это отклонение, тем более оживленно звучит голос. Значения
данного свойства указываются в герцах, определяя
диапазон частот основного тона.
Примеры:
em { voice-pi tch-range : high ; )
code ( vo i ce-pitch- range : 5 0 ; }
voice- rate
Значения:
1 x-low 1 low 1 medium
1
fast
Исходн ое значение:
mediшn
Применяется:
Ко всем элементам.
Наследуется:
Да.
282
CSS. Карманный справочник, 4-е издание
1
x-fast
Задание в процентах:
По исходному значению, устанавливаемому по умолчанию.
Вычисляемое значение:
Не определено, но в предыдущем воплощении в виде свой
ства speech- rate соответствовало абсолютному числовому
значению.
Описание:
Определяет среднюю частоту произношения слов при озву
чивании содержимого элемента.
Вычисляемое значение:
Не определено, но, вероятнее всего, соответствует объявля
емому значению.
Описание:
Оказывает влияние на высоту тона в интонации озвучива
ющего голоса, которая обычно повышается по знакам ударе
ния, принятым в конкретном языке.
Гnава 4. Справочник свойств
283
Примеры:
strong { voice-stres s : s t rong ; )
footer { voice-stres s : reduced ; )
Вычисляемое значение:
Не определено, но в предыдущем воплощении в виде свойст
ва volume соответствовало абсолютному числовому значению.
Описание:
Определяет средний уровень громкости для формы звуко
вых колебаний при озвучивании содержимого элемента. Сле
довательно, форма звуковых колебаний с крупными всплеска
ми и впадинами может значительно подниматься выше или
опускаться ниже среднего уровня громкости, устанавливае
мого с помощью данного свойства. Значения дан
ного свойства указываются в пределах от О до 100 включи
тельно. Следует также иметь в виду, что нулевое значение ( О )
284
CSS. Карманный справочник, 4-е ИЭАание
равнозначно ключевому слову silent, а значение 100
чевому слову x-loud.
-
клю
Приме ры:
b i g { voice-volume : x- loud; }
footer { voice-volume : 1 5 ; }
Гпава 4. Справочник свойств
285
Предм етны й указатель
уrлов, разновидности 63
А
частоты, разновидности
Аспект шрифта,
назначение
1 88
3
Б
Звуковые сигналы,
назначение
Блоки
268
Знакоместо, определение
внутристрочные, созда
ние
29
ления
34
и
вставляемые, правила оформ-
Идеографический текст,
30
гибкие, размещение
64
определение
151
объявлен и й , структура 22
построчные, назначение
35
содержащие элементы, правила расположения
половинный, определение 34
применение
38
34
к
строковые
определение 32
229
Интерлиньяж
Каскады
правила оформления 32
структурные, создание
29
элементов
механизм действия
назначение
25
24
наследование, механизм
определение 3 1
отображение 2 8
правила оформления
31
ние
24
Ключевые слова
в мультимедийных запросах,
д
применение
Директивы
91
для обозначения цвета
! important, назначение 24
@import, назначение
назначение
57
55
18
Е
Единицы измерения
времени, разновидности б4
длины
25
специфичность, вычисле-
м
Мультимедийные запросы
ключевые слова, применение
91
назначение
90
абсолютные 59
параметры
93
относительные 61
применение
91
универсальные значения
п
Пауза, определение
270
Перерыв, определение
274
Подгонка страниц,
определение
39
22
70
точным, назначение 70
частичным, назначение 70
взаимодействия, разновидно
по идентификатору, назначе
82; 87
ние
отрицания, назначение
81
структурные, разновидно
сти
назначение
по атрибутам, назначение
по значениям атрибутов
Псевдоклассы
сти
99
Селекторы
72; 80
69
по классу, назначение
68
по подстрокам
конечным в значениях атри
Псевдоэлементы,
бутов, назначение 7 1
разновидности
88; 90
начальным в значениях
атрибутов, назначение 7 1
р
произвольным в значениях
атрибутов, назначение 72
Разметка
блочная, особенности
З1
порожденных элементов, назначение
внутристрочная, особенно
сти
66
по типу, назначение
32
66
потомков, назначение
таблиц
автоматическая, модель 48
значение
правила 46
составляющие 45
фиксированная, модель 47
элементов с абсолютным рас
72
родственных элементов
следующих, назначение 68
смежных, назначение 67
универсальные, назначе
положением
ние
вертикальная 43
горизонтальная 40
Расположение, виды
67
по языковым атрибутам, на-
37
65
Статическое положение,
определение
39
Стили
с
внешние, применение
Свойства
назначение
18
встроенные, применение
22
наследование
акустических 267; 284
визуальных
т
25
носителей информации
1 00; 255
в мультимедийных запро
сах 94; 97
17
Таблицы стилей
альтернативные, примене
ние
19
внешние, применение
18
встроенные, применение
18
печатных 255; 267
Предметный указатеnь
287
горизонтальная размет
каскадирование ,23
комментарии
ка 40
2J
связывание, спосЬбы
20
назначение 27
расположение, виды
структура правил 22
37
роли
Типы значений
URI, обозначение
на уровне блока 28
63
в процентах, обозначение 59
времени, обозначение 64
на уровне строки 29
свободно перемещаемъ1е, пра
вила размещения
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ЗС.
