Книга css3 3е издание Серия Бестселлеры OReilly

• Название: Книга css3 3е издание Серия Бестселлеры OReilly
• Анкор: TheBigBookofCSS33rdedition.pdf
• Дата: 08.08.2018
• Размер: 20.28 Mb.
• Имя файла: TheBigBookofCSS33rdedition.pdf
• Тип: Книга; #22630
• страница: 60 из 62

vertical-align
Устанавливает базовую линию внутреннего элемента относительно базовой линии окружающего содержимого. С ним вы можете сделать так, чтобы символ появился немного выше или ниже окружающего текста. Используйте его для создания сим- волов верхнего индекса, таких как TM, ® или ©. При применении к ячейке табли- цы значения top
, middle
, bottom и baseline управляют вертикальным размещением содержимого внутри ячейки (см. подраздел «Настройка горизонтального и верти- кального выравнивания» раздела «Создание стилей для таблиц» гл. 11).
Значения: baseline
, sub
, super
, top
, text-top
, middle
, bottom
, text-bottom
, процентное или абсолютное значение (например, пикселы или em). Проценты вычи сляются на основании значения line-height элемента.
Примеры: vertical-align: top; vertical-align: -5px; vertical-align: 75%;.
white-space
Управляет тем, как браузер отображает пробелы в коде HTML. Обычно если вы включаете более одного пробела между словами, например "Hello Dave"
, браузер отображает только один пробел —
"Hello Dave"
. При использовании значения pre вы можете сохранить пробелы точно так же, как в HTML. Это значение делает то же, что и HTML-тег
. Кроме того, браузеры разобьют строку текста на месте пробела, если строка не будет соответствовать ширине окна. Чтобы препятствовать обтеканию текста, примените значение nowrap
. Однако это значение вынуждает весь текст абзаца оставаться на одной строке, так что не используйте его с длинными абзацами (если вам, конечно, не хочется заставить посетителей бесконечно про- кручивать страницу вправо).
Значения: nowrap
, pre
, normal
. Еще два значения — pre-line и pre-wrap
— не рабо- тают во многих браузерах.
Пример: white-space: pre;
word-spacing (наследуется)
Работает, как свойство letter-spacing
, но регулирует расстояние между словами, а не между буквами.
Значения: любая правильная единица измерения CSS, хотя em и пикселы наиболее распространены; проценты не работают в большинстве браузеров. Ис- пользуйте положительное значение, чтобы увеличить расстояние между словами, и отрицательное значение, чтобы убрать интервал (сжать слова). Значение normal устанавливает стандартное расстояние между словами (
word-spacing
), принима- емое за
0
Примеры: word-spacing: -1px;
word-spacing: 2em;

578
Приложения
Свойства списков
Следующие свойства затрагивают форматирование маркированных (

) и нуме- рованных списков (


).
list-style (наследуется)
Применение этого свойства — сокращенный метод определения трех свойств, пе- речисленных далее. Вы можете включить значение для одного или более этих свойств, разделяя каждое пробелом. Вы можете даже использовать это свойство как кратчайший путь для написания отдельного свойства и сэкономить время при наборе кода: list-style:
outside вместо list-style-position: outside
. Если вы опре- делите и тип, и изображение, браузер покажет стандартный маркер (кружок, квад- рат и т. д.), только если не сможет найти изображение. Таким образом, если путь к изображению, определенному для маркера, не работает, маркированный список все равно будет с маркерами.
Значения: любое подходящее значение для list-style-type
, list-style-image и/или list-style-position
Пример: list-style: disc url (images/bullet.gif) inside;
list-style-image (наследуется)
Определяет изображение, которое используется для маркера в маркированном списке.
Значения: значение URL или none
Пример: list-style-image: url (images/bullet.gif);
СОВЕТ
Свойство background-image также позволяет определить для маркера изображение и предоставля- ет больше возможностей управления (см. раздел «Добавление фоновых изображений» гл. 8).
list-style-position (наследуется)
Позиционирует маркеры или числа в списке. Эти маркеры могут появиться за пределами текста, выступая за левый край, или внутри текста (прямо там, где обыч- но начинается первая буква первой строки). Значение outside определяет стандарт- ное отображения маркеров и чисел.
Значения: inside
, outside
Пример: list-style: inside;
list-style-type (наследуется)
Устанавливает тип маркера для списка: круг, квадрат, римские цифры и т. д. Вы можете даже превратить неупорядоченный (маркированный) список в упорядо- ченный (нумерованный), изменяя свойство list-style-type
, но это работает не во всех браузерах (включая Internet Explorer для Windows). Используйте значение none
, чтобы полностью удалить маркеры или числа из списка.
Значения: disc
, circle
, square
, decimal
, decimal-leading-zero
, upper-alpha
, loweralpha
, upper-roman
, lower-roman
, lower-greek
, none
Пример: list-style-type: square;

Приложение 1. Справочник свойств CSS
579
Отступы, границы и поля
Следующие свойства управляют пространством вокруг элемента.
box-shadow
Добавляет тень вокруг блочного элемента.
Значения: к блочному значению применяется необязательное значение inset
, добавляющее тень внутри элемента. За ним следуют четыре измеряемых значения и цвет. Первые два измеряемых значения (в em или пикселах) задают горизонталь- ное и вертикальное смещения. Третье значение определяет степень размытости тени,
Четвертое, необязательное значение указывает «расширение» тени, делая ее шире.
Отрицательное значение для горизонтального смещения помещает тень слева от блока, а положительное значение — справа. Отрицательное значение для вертикаль- ного смещения помещает тень сверху от блока, а положительное значение — снизу.
Каждое значение отделяется от предыдущего пробелом. Можно также добавить не- сколько теней, добавляя значения дополнительной тени через запятую.
Примеры:
box-shadow: -4px 4px 3px #999999; box-shadow: inset 4px 4px 3px 5px #999999; box-shadow: inset 4px 4px 3px 5px #999999 2px 2px 5px black;
border
Чертит линию вокруг четырех сторон элемента.
Значения: толщина границы задается в любой корректной единице измерения
CSS (кроме процентов).
Вы также можете определить стиль для линии: solid
, dotted
, dashed
, double
, groove
, ridge
, inset
, outset
, none и hidden
(см. рис. 7.7, где показаны примеры различных стилей). Значения none и hidden делают одно и то же — удаляют любую границу.
Наконец, вы можете определить цвет, используя любой корректный тип цвета
CSS (ключевое слово, например, green
, или Hex-значение, такое как
#33fc44
).
Пример: border: 2px solid #f33;
border-radius
Скругляет углы элемента. Визуальный эффект проявляется, только если у элемен- та есть граница, цвет фона или изображение.
Значения: одно, два, три или четыре значения (в px, em или %), задающие размер радиуса окружности, рисуемой в углах блока элемента. Если предоставлено только одно значение, один и тот же размер скругленного угла применяется ко всем четырем углам. Если предоставлено два значения, первое определяет радиус скругления верх- него левого и нижнего правого углов, а второе — верхнего правого и нижнего левого углов. Если используются три значения, первое определяет радиус скругления верх- него левого угла, второе — верхнего правого и нижнего левого угла, а третье — ниж- него правого угла. Если задействуются четыре значения, то каждое из них применя- ется по порядку к верхнему левому, верхнему правому, нижнему правом и нижнему левому углам. Для создания вместо углов в форме окружности углов в форме эллип- са можно добавить слеш
/
, после которого указать второе значение радиуса.

580
Приложения
Примеры:
border-radius: .5em;
border-radius: 15px 10px 25px 5px;
border-radius: 15px / 5px;
border-top, border-right, border-bottom, border-left
Добавляют границу к одному краю. Например, border-top добавляет границу к вер- шине элемента.
Значения: те же, что и для border
Пример: border-left: 1em dashed red;
border-color
Определяет цвет, используемый для всех четырех границ.
Значения: любой корректный тип цвета CSS (ключевое слово, например, green
, или Hex-значение, такое как
#33fc44
).
Пример: border-color: rgb(255,34,100);
У этого свойства есть еще и сокращенная запись, позволяющая присваивать различные цвета каждой из четырех границ.
Значения: любой корректный тип цвета CSS для каждой границы: верхней, правой, нижней и левой. Если вы укажете только два значения, то первое будет присвоено верхней и нижней, а второе — правой и левой границам.
Пример: border-color: #000 #F33 #030 #438F3C;
border-top-color, border-right-color,
border-bottom-color, border-left-color
Функционируют так же, как свойство border-color
, но устанавливают цвет только для одной границы. Используйте эти свойства, чтобы отменить цвет, заданный свойством border
. Таким образом, вы можете настроить цвета для отдельных гра- ниц, притом, что вы используете более общий стиль border
, чтобы определить ба- зовый размер и стиль для всех четырех сторон.
Значения: как и для свойства border-color
Пример: border-left-color: #333;
border-style
Определяет стиль, используемый для всех четырех границ.
Значения: одно из ключевых слов: solid
, dotted
, dashed
, double
, groove
, ridge
, inset
, outset
, none и hidden
(см. рис. 7.7, где показаны примеры различных стилей). Зна- чения none и hidden действуют одинаково — удаляют любую границу.
Пример: border-style: inset;
У этого свойства есть также сокращенная запись, позволяющая присваивать различные стили для каждой из четырех границ: верхней, правой, нижней и ле- вой.
Значения: одно из ключевых слов, упомянутых выше, для каждой из четырех границ. Если вы укажете только два значения, первое будет присвоено верхней и нижней, а второе — правой и левой границам.
Пример:
border-style: solid dotted dashed double;

Приложение 1. Справочник свойств CSS
581
border-top-style, border-right-style,
border-bottom-style, border-left-style
Функционируют точно так же, как свойство border-style
, но применяются только к одному краю (границе).
Значения: как и для свойства border-style
Пример: border-top-style: none;
border-width
Определяет толщину линии, используемой для рисования всех четырех границ.
Значения: любая корректная единица измерения CSS, кроме процентов. Наи- более распространенные — em и пикселы.
Пример: border-width: 1px;
У этого свойства есть также сокращенная запись, позволяющая присваивать различную толщину линии каждой из четырех границ.
Значения: любая корректная единица измерения CSS, кроме процентов, — для каждой из четырех границ. Если вы укажете только два значения, первое будет присвоено верхней и нижней, а второе — правой и левой границам.
Пример: border-width: 3em 1em 2em 3.5em;
border-top-width, border-right-width, border-bottom-width,
border-left-width
Функционируют точно так же, как свойство border-width
, но применяются только к одному краю.
Значения: как и для свойства border-width
Пример: border-bottom-width: 3em;
box-sizing
Предписывает браузеру порядок измерения высоты и ширины элемента. Обычно браузеры для определения количества экранного пространства, занимаемого эле- ментом, объединяют свойства border
, padding и width
. Такая система может приве- сти к запутанной ситуации, когда для ширины элемента указывается значение
300 пикселов, но если у элемента также есть отступы и границы, браузер отобра- жает элемент на экране в пространстве, превышающем по ширине 300 пикселов.
Значения: content-box
, padding-box или border-box
. Вариант content-box задает обычный порядок работы браузера.
Padding-box предписывает браузеру включать в расчет наряду со значениями width и height еще и значение padding
. Вариант border- box заставляет браузер включать в расчет еще и значение border
. Например, если у вас есть тег

, для которого установлена ширина 300 пикселов, отступы по 20 пиксе- лов и граница толщиной 2 пиксела, браузер обычно покажет этот div
-элемент в 344 пиксе лах экранного пространства (300 + 20 + 20 + 2 +2), но, если для свойства box-sizing установлено значение padding-box
, браузер покажет этот div
-элемент в 304 пикселах экранного пространства (300 + 2 +2), потому что отступы считаются частью этих 300 пикселов, а если установлено значение border-box
, то браузеру будет просто предписано сделать div
-элемент шириной 300 пикселов. Вариант border-box широко используется для упрощения отслеживания ширины элемента. К сожалению,
Internet Explorer 7 и более ранние версии не понимают этого свойства.
Пример: box-sizing: border-box;

582
Приложения
outline
Применение этого свойства — краткий способ объединить outline-color
, outline- style и outline-width
(перечислены далее). Контур, задаваемый этим свойством, работает точно так же, как граница, за исключением того, что он не занимает места
(то есть не увеличивает ширину или высоту элемента) и относится ко всем четырем краям. Оно больше применяется как средство выделения чего-нибудь на странице, чем как элемент дизайна. Свойство outline работает в Firefox, Safari, Chrome, Opera и только в 8-й или более поздней версии Internet Explorer.
Значения: те же самые, что относятся к border
, с одним исключением (см. опи- сание свойства outline-color далее).
Пример: outline: 3px solid #F33;
outline-color
Определяет цвет для контура (см. описание свойства outline
).
Значения: любой корректный цвет CSS плюс значение invert
, которое просто изменяет цвет контура (цвет, на котором расположен контур) на противополож- ный. Если контур нарисован на белом фоне, значение invert сделает его черным.
Работает точно так же, как свойство border-color
Пример: outline-color: invert;
outline-style
Определяет тип линии для контура: пунктирная, сплошная, штриховая и т. д.
Значения: те же самые, что и для свойства border-style
, описанного выше.
Пример: outline-style: dashed;
outline-width
Определяет толщину контура. Работает так же, как и свойство border-width
Значения: любая корректная единица измерения CSS, кроме процентов. Наи- более распространенные — em и пикселы.
Пример: outline-width: 3px;
padding
Устанавливает размер области между содержимым, границей и краем фона. Ис- пользуйте его, чтобы добавить пустое пространство вокруг текста, изображений или другого содержимого (см. рис. 7.1).
Значения: любая корректная единица измерения CSS, такая как пикселы или em. Значения в процентах основываются на ширине содержащего элемента. Заго- ловок, являющийся потомком тега

, использует ширину окна браузера, чтобы вычислить значение в процентах, так что отступ шириной 20 % добавляет 20 % ширины окна. Если посетитель изменяет размеры своего браузера, размер отступа изменяется пропорционально. Вы можете определить отступ для всех четырех краев, используя одно значение, или установить отдельные размеры отступа для каждого края в таком порядке: top
, right
, bottom
, left
Примеры: padding: 20px; padding: 2em 3em 2.5em 0;

Приложение 1. Справочник свойств CSS
583
padding-top
Работает точно так же, как свойство padding
, но устанавливает отступ только для верхнего края.
Пример: padding-top: 20px;
padding-right
Работает точно так же, как свойство padding
, но устанавливает отступ лишь для правого края.
Пример: padding-right: 20px;
padding-bottom
Работает точно так же, как свойство padding
, но устанавливает отступ только для нижнего края.
Пример: padding-bottom: 20px;
padding-left
Работает точно так же, как свойство padding
, но устанавливает отступ лишь для левого края.
Пример: padding-left: 20px;
margin
Устанавливает размер области между границей элемента и краями других элемен- тов (см. рис. 7.1). Свойство позволяет добавлять пустое пространство между двумя элементами: между двумя изображениями или между боковой панелью и областью главного содержимого страницы.
ПРИМЕЧАНИЕ
Вертикальные поля между элементами могут исчезать. Иными словами, браузеры используют толь- ко верхнее или нижнее поле и игнорируют остальные, создавая меньший промежуток, чем ожида- ется (см. обучающий урок в гл. 7).
Значения: любая корректная единица измерения CSS, такая как пикселы или em. Значения в процентах основаны на ширине содержащего элемента. Заголовок, который является потомком дочернего тега

, использует ширину окна брау- зера, чтобы вычислить значение в процентах, так что поле шириной 10 % добавля- ет 10 % ширины окна к краям заголовка. Если посетитель изменяет размеры свое- го браузера, изменяется размер поля. Как и в случае с отступом, вы определяете поля для всех четырех границ, используя одно значение, или устанавливаете отдель- ные поля в таком порядке: top
, right
, bottom
, left
Примеры: margin: 20px; margin: 2em 3em 2.5em 0;
margin-top
Работает точно так же, как свойство margin
, но устанавливает поле только для верх- ней стороны.
Пример: margin-top: 20px;

584
Приложения
margin-right
Работает точно так же, как свойство margin
, но устанавливает поле лишь для правой стороны.
Пример: margin-right: 20px;
margin-bottom
Работает точно так же, как свойство margin
, но устанавливает поле только для ниж- ней стороны.
Пример: margin-bottom: 20px;
margin-left
Работает точно так же, как свойство margin
, но устанавливает поле лишь для левой стороны.
Пример: margin-left: 20px;
Фоны
CSS предоставляет несколько свойств для управления фоном элемента, включая изменение цвета фона, размещение изображения позади элемента и управление тем, как позиционировано это фоновое изображение.
background
Обеспечивает краткий метод определения свойств, которые проявляются в фоне элемента, таких как цвет, изображение и размещение этого изображения. Оно объ- единяет пять свойств фона (описаны далее) в одну компактную строку так, что вы можете получить тот же самый результат с меньшим количеством кода. Однако если вы не установите одно из этих свойств, браузеры будут использовать стандарт- ное значение. Например, если вы не определите, как должно повторяться фоновое изображение, браузеры будут повторять это изображение слева направо и сверху вниз (см. раздел «Управление повтором фоновых изображений» гл. 8).
Значения: те же самые значения, что используются для свойств фона, перечис- ленных далее. Порядок свойств неважен (за исключением позиционирования, как описано ниже), но лучше указывать свойства в такой последовательности: background- color
, background-image
, background-repeat
, background-attachment
, background-position
Пример: background: #333 url (images/logo.gif) no-repeat fixed left top;
background-attachment
Определяет, как реагирует фоновое изображение, когда ваш посетитель прокручива- ет страницу. Изображение либо прокручивается наряду с остальным содержимым, либо остается на месте. Вы можете добавить логотип к верхнему левому углу очень длинной веб-страницы, используя значение fixed свойства background-attachment
, и за- ставить это изображение находиться в верхнем левом углу, даже когда страница про- кручивается (в Internet Explorer версий 6 и ниже это свойство работает только для тега

).
Значения: scroll или fixed
Scroll
— это обычное поведение: изображение про- кручивается наряду с текстом.
Fixed закрепляет изображение на месте.
Пример: background-attachment: fixed;

Приложение 1. Справочник свойств CSS
585
background-clip
Это свойство ограничивает область, в которой появляется фоновое изображение.
Обычно фоновое изображение заполняет всю область элемента, включая его грани- цы, отступы и содержимое. Но может быть необходимо, чтобы изображение появля- лось только за областью отступов и не распространялось на границы. Это может пригодиться в случае использования точечных или пунктирных границ, чтобы изо- бражение не появлялось в разрывах границы. Может также потребоваться исклю- чить область отступов, чтобы размноженное изображение фона появлялось только в области содержимого, а в области отступов был сплошной цвет. В Internet Explorer 8 и более ранних версиях это свойство не поддерживается.
Значения: border-box
, padding-box или content-box
. Вариант border-box задает обычный метод, при котором изображение помещается под границей, отступами и содержимым. Вариант padding-box сохраняет фоновое изображение только в об- ласти отступов и содержимого, и оно не появляется под границей. Вариант content- box помещает фоновое изображение только в области содержимого, и оно не появ- ляется ни в области отступов, ни под границей.
Примеры:
background-clip: content-box;
background-clip: padding-box;
background-color
Добавляет цвет к фону стиля. Фон находится под границей и под фоновым изоб- ражением — это нужно иметь в виду, если вы используете такие стили границы, как dashed или dotted
. В этих случаях фоновый цвет просвечивается через проме- жутки между черточками или точками.
Значения: любое корректное значение цвета (см. подраздел «Цвета» раздела «Зна- чения CSS» этого приложения).
Пример: background-color: #FFF;
background-image
Помещает изображение в фон стиля. Остальные элементы страницы находятся наверху фонового изображения, так что убедитесь в том, что текст является раз- борчивым в том месте, где он накладывается на изображение. Вы также можете всегда использовать отступ, чтобы отодвинуть содержимое от изображения. Изо- бражение повторяется слева направо и сверху вниз, если только вы не устанавли- ваете иное свойством background-repeat
. В CSS3 допускается использование не- скольких фоновых изображений.
Значения: URL-адрес изображения. Может также включать сгенерированный браузером линейный или радиальный градиент.
Примеры: background-image: url(images/photo.jpg); background-image: url(http://www.example.org/photo.jpg);.
background-origin
Сообщает браузеру, куда помещать фоновое изображение относительно границы, отступов и содержимого элемента. Больше подходит для неповторяющегося

586
Приложения изображения, поскольку позволяет уточнить его позицию. Internet Explorer 8 и более ранние версии это свойство не поддерживают.
Значения: border-box
, padding-box или content-box
. Вариант border-box задает обычный метод — помещение изображения в верхний левый угол границы. Вариант padding-box определяет начало фонового изображения только в области отступов, и под границей оно не появляется. Вариант content-box указывает размещение фо- нового изображения только в области содержимого, и оно не появляется в области отступов и под границей. Но если изображение размножено, вы все равно его уви- дите под границей и отступами, поскольку это свойство управляет только тем, где начинается изображение. Чтобы размноженное изображение не появлялось под границей и отступами, следует воспользоваться свойством background-clip
Пример:
background-origin: content-box;
background-position
Управляет размещением изображения в фоне (на заднем плане) элемента страницы.
Если только вы не определите иначе, изображение начинается в верхнем левом углу элемента. Если изображение повторяется, свойство background-position контролиру- ет начальную точку изображения. Если вы размещаете изображение в центре эле- мента, то браузер помещает его там, а затем повторяет вверх и налево, а также вниз и направо. Во многих случаях точное расположение изображения не вызывает ви- димого различия при повторении фона, но позволяет вносить едва заметные изме- нения в позиционирование образца в фоне.
Значения: вы можете использовать любую корректную единицу измерения CSS, такую как пикселы или em, а также ключевые слова или проценты. Значения идут парами, где первое является горизонтальной позицией, а второе — вертикальной.
Ключевые слова: left
, center и right для горизонтального позиционирования и top
, center и bottom
— для вертикального. Значения в пикселах и em рассчитываются от верхнего левого угла элемента, поэтому, чтобы поместить изображение на расстоя- нии 5 пикселов от левого края и 10 пикселов от верхнего, нужно использовать зна- чение
5px 10px
Значения в процентах устанавливают соответствие между точкой изображения и точкой в фоне элемента, рассчитанное указанными процентными отношениями от левого и верхнего краев изображения и от левого и верхнего краев элемента.
Значение
50% 50%
помещает изображение прямо посередине элемента (см. подраз- дел «Процентные значения» раздела «Позиционирование фоновых изображений» гл. 8). Вы можете смешать и сопоставить эти значения: если хотите, используйте значение в пикселах для горизонтального выравнивания и значение в процентах для вертикального.
Примеры: background-position: left top;
background-position: 1em 3em;
background- position: 10px 50%;
background-repeat
Управляет тем, повторяется ли фоновое изображение, и если повторяется, то как.
Обычно фоновое изображение повторяется от левого верхнего до правого нижне- го края, заполняя весь фон элемента.
Значения: repeat
, no-repeat
, repeat-x
, repeat-y
. Значение repeat стандартное, оно повторяет изображение слева направо, сверху вниз.
No-repeat помещает изображе-

Приложение 1. Справочник свойств CSS
587
ние в фоне один раз без какого-либо повторения.
Repeat-x повторяет изображение только сверху вниз — это удобно при добавлении графической боковой панели.
Repeat-y повторяет изображение только слева направо, так что вы можете добавить графическую полосу вверху, посередине или внизу элемента.
Пример: background-repeat: no-repeat;
background-size
Позволяет изменять размер фонового изображения, масштабируя его в разных направлениях или даже искажая его пропорции.
Значения: можно использовать конкретные значения в пикселах, em или про- центах, или же воспользоваться одним из двух ключевых слов: contain или cover
Ключевое слово contain заставляет изображение изменить свои размеры, чтобы полностью поместиться в размеры элемента, сохраняя при этом свои пропорции.
Ключевое слово cover заставляет ширину и высоту изображения приобрести такие же значения, как у ширины и у высоты элемента, что обычно искажает изображе- ние, растягивая его или сжимая, чтобы вписать его в размеры элемента.
Примеры:
background-size: 200px 400px;
background-size: contain;
Свойства разметки страницы
Следующие свойства управляют размещением и размером элементов на веб-стра- нице.
bottom
Это свойство применяется с абсолютным, относительным и фиксированным по- зиционированием. При использовании с абсолютным или фиксированным пози- ционированием bottom определяет позицию нижнего края стиля относительно нижнего края ближайшего расположенного к нему предка. Если стилизованный элемент не находится внутри каких-либо позиционированных тегов, то он будет размещаться относительно нижнего края окна браузера. Вы можете применять это свойство, чтобы поместить сноску внизу окна браузера. При использовании с от- носительным позиционированием положение элемента вычисляется от нижнего края элемента (см. подраздел «Когда и где использовать относительное позицио- нирование» раздела «Как работают свойства позиционирования» гл. 15).
Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Проценты вычисляются на основании ширины содержащего эле- мента.
Пример: bottom: 5em;
clear
Препятствует тому, чтобы элемент обертывался вокруг плавающего элемента. Вместо этого свободный элемент опускается вниз — под основание плавающего элемента.
Значения: left
, right
, both
, none
. Значение left указывает, что элемент не может обертываться вокруг перемещенных влево элементов. Точно так же right опускает

588
Приложения элемент под любым перемещенным вправо элементом. Значение both предотвра- щает элемент от обертывания вокруг перемещенных либо влево, либо вправо эле- ментов. Значение none отключает свойство, так что используйте это значение для отмены ранее установленного свойства clear
. Этот прием применяется при нали- чии у конкретного тега стиля, вызывающего выпадение плавающего элемента, ко- гда нужно, чтобы тег охватывал его только в данном случае. Чтобы отменить свой- ство float только для одного этого тега, создайте более конкретный стиль.
Пример: clear: both;
clip
Создает прямоугольное окно, которое показывает часть элемента. Если у вас была фотография вашего выпускного класса, на которой главный хулиган стоял крайним справа, вы могли бы создать область отображения, выводящую на первый план изо- бражение вашего мучителя. Остальная фотография останется нетронутой, а область отсечения отобразит только одного задиру. Свойство clip наиболее эффективно, когда используется в связке с языком JavaScript, программирующим анимацию об- ласти отсечения. Вы можете начать с маленькой области отсечения и расширять ее, пока не будет показана вся фотография.
Значения: координаты прямоугольной области. Заключите координаты в круг- лые скобки и поставьте перед ними ключевое слово rect
, например: rect(5px,110px
,35px,10px);
Рассмотрим, как действует порядок этих координат: первое число указывает верхнее смещение — верхний край окна отсечения. В этом примере смещение рав- но
5px
, так что будет скрыто все, что находится в четырех первых рядах пикселов.
Последнее число — левое смещение — левый край окна отсечения. В этом примере смещение равно
10px
, так что будет скрыто все слева (первые 9 пикселов элемента).
Второе число определяет ширину окна отсечения плюс последнее число; если ле- вый край отсечения составляет 10 пикселов и вы хотите, чтобы видимая область была шириной 100 пикселов, второе число должно быть
110px
. Третье число — вы- сота области отсечения плюс верхнее смещение (первое число). Так, в этом приме- ре высота области отсечения равна 30 пикселов (
30px
+
5px
=
35px
).
Пример: clip: rect(5px,110px,35px,10px);
СОВЕТ
Поскольку порядок координат здесь немного странный, большинству дизайнеров нравится начинать с первого и последнего аргументов, а затем рассчитывать два других.
display
Определяет вид области, используемой для отображения элемента страницы — блочного или линейного (см. подраздел «Отображение линейных и блочных эле- ментов» раздела «Управление размерами полей и отступов» гл. 7). Используйте его, чтобы переопределить вариант отображения по умолчанию. Вы можете сделать так, чтобы абзац (блочный элемент) отображался без разрывов строк над и под ним — точно так же, как, скажем, ссылка (линейный элемент).
Значения: block
, inline
, none
. Свойство display принимает 17 значений, боль- шинство из которых не дают никакого эффекта в доступных на сегодняшний день

Приложение 1. Справочник свойств CSS
589
браузерах. Значения block
, inline и none
, однако, работают практически во всех браузерах. Значение block вызывает разрыв линии над и под элементом, точно так же, как и другие блочные элементы (например, абзацы и заголовки); inline застав- ляет элемент отображаться на той же линии, что и окружающие элементы (точно так же, как текст внутри тега

появляется на той же строке, что и остальной текст); none заставляет элемент полностью исчезнуть со страницы. Затем вы може- те вновь вызвать его, применив некоторое программирование JavaScript или псев- докласс
:hover
(см. раздел «Псевдоклассы и псевдоэлементы» гл. 3).
Еще некоторые другие свойства работают лишь в немногих браузерах (наиболее значимыми исключениями являются Internet Explorer 7 и 6). Вы можете использо- вать свойства табличного отображения для создания интересных разметок страниц.
Пример: display: block;
float
Перемещает элемент к левому или правому краю окна браузера или, если этот эле- мент находится внутри другого, к левому или правому краю содержащего элемента.
Можно сказать, что свойство float делает элемент плавающим. Элементы, которые появляются после плавающего, передвигаются, чтобы заполнить место справа (для плавающих влево элементов) или слева (для плавающих вправо элементов), а затем обтекают плавающий элемент. Используйте плавание для простых эффектов, таких как перемещение изображения к какой-либо стороне страницы, или для очень слож- ных разметок — таких, что были описаны в гл. 12.
Значения: left
, right
, none
. Значение none полностью отключает плавание, что может оказаться полезным, когда у определенного тега есть стиль, к которому при- менено плавание влево или вправо и вы хотите создать более специфический стиль, чтобы отменить плавание этого тега.
Пример: float: left;
height
Устанавливает высоту содержимого — области элемента, в которой определены, например, текст, изображения и др. Фактическая высота элемента на экране — это общая сумма высоты, верхнего и нижнего полей, верхнего и нижнего отступов, а также верхней и нижней границ.
Значения: любая корректная единица измерения CSS, например пикселы, em или проценты. Проценты вычисляются на основании высоты содержащего элемента.
Пример: height: 50%;
ПРИМЕЧАНИЕ
Иногда содержимое получается больше установленной высоты: если вы вводите, например, много текста или ваш посетитель увеличивает размер шрифта в своем браузере. Браузеры обрабатывают эту ситуацию по-разному: Internet Explorer версий 6 и ниже просто делает область больше, в то время как в других браузерах содержимое простирается за пределы области.
left
При использовании с абсолютным или фиксированным позиционированием (см. раз- дел «Как работают свойства позиционирования» гл. 15) это свойство определяет

590
Приложения позицию левого края стиля относительно левого края самого близкого установ- ленного предка. Если стилизованный элемент не находится внутри каких-либо позиционированных тегов, то он будет размещаться относительно левого края окна браузера. Вы можете задействовать это свойство, чтобы поместить изоб- ражение на расстоянии 20 пикселов от левого края окна браузера. При исполь- зовании с относительным позиционированием расположение элемента вычис- ляется от его левого края.
Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты.
Пример: left: 5em;
max-height
Устанавливает максимальную высоту для элемента. Таким образом, область эле- мента может быть короче установленного значения, но не может быть выше. Если содержимое элемента оказывается выше, чем max-height
, оно выходит за пределы области. Вы можете управлять этим переполнением с помощью свойства overflow
Internet Explorer версий 6 и ниже не понимает свойство max-height
Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Браузеры вычисляют проценты на основании высоты содержащего элемента.
Пример: max-height: 100px;
max-width
Устанавливает максимальную ширину для элемента. Область элемента может быть
уже, чем это установленное значение, но не может быть шире. Если содержимое элемента шире, чем max-width
, оно выходит за пределы области, чем вы можете управлять с помощью свойства overflow
. В основном свойство max-width применяет- ся в свободных разметках (см. раздел «Типы разметок веб-страницы» гл. 12). Бла- годаря этому свойству разработчик может быть уверен: дизайн страницы на очень больших мониторах не станет таким широким, что будет непригоден для чтения.
Свойство не работает в Internet Explorer версий 6 и ниже.
Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Проценты вычисляются на основании ширины содержащего эле- мента.
Пример: max-width: 950px;
min-height
Устанавливает минимальную высоту для элемента. Область элемента может быть выше установленного значения, но не может быть короче. Если содержимое эле- мента по высоте не такое, как установлено свойством min-height
, высота области уменьшается, чтобы соответствовать заданному значению. Internet Explorer вер- сий 6 и ниже не распознает это свойство.
Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Проценты рассчитываются на основе высоты содержащего элемента.
Пример: min-height: 20em;

Приложение 1. Справочник свойств CSS
591
min-width
Устанавливает минимальную ширину для элемента. Область элемента может быть шире, чем установленное значение, но не может быть уже. Если содержимое эле- мента по высоте не такое, как установлено свойством, область становится такой тонкой, как указывает значение min-width
. Вы также можете использовать это свой- ство в свободных разметках, чтобы дизайн не «разваливался» при меньшей ширине окна. Когда окно браузера является более узким, чем определено min-width
, добав- ляются горизонтальные полосы прокрутки. Internet Explorer версий 6 и ниже не поддерживает это свойство.
Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Проценты рассчитываются на основе ширины содержащего элемента.
Пример: min-width: 760px;
ПРИМЕЧАНИЕ
Свойства max-width и min-width обычно применяются в связке при создании свободных разметок
(см. гл. 12).
overflow
Определяет, что должно случиться с элементом, который выходит за пределы сво- ей области для содержимого, например, с фотографией, оказавшейся шире, чем установлено свойством width
Значения: visible
, hidden
, scroll
, auto
. Значение visible вынуждает излишнее содержимое простираться за пределы области, накладывая его на границы и другие элементы страницы. Internet Explorer версий 6 и ниже просто увеличивает область, чтобы вставить более крупный объект. Значение hidden скрывает любое содержимое за пределами отведенной ему области; scroll добавляет полосы прокрутки к эле- менту, в результате чего посетитель может выполнить прокрутку, чтобы увидеть любой объект за пределами содержащей его области, — нечто вроде мини-фрейма.
Значение auto добавляет полосы прокрутки, только когда они необходимы, чтобы показать больше содержимого.
Пример: overflow: hidden;
position
Определяет, какой тип позиционирования использует браузер при размещении элементов на странице.
Значения: static
, relative
, absolute
, fixed
. Значение static определяет обычный режим браузера — один блочный элемент расположен на вершине следующего, а со- держимое простирается от верхнего до нижнего края экрана; relative размещает эле- мент относительно того места, где он в настоящее время появляется на странице.
Другими словами, установка этого свойства может сместить элемент с его текущей позиции. Значение absolute полностью убирает элемент из потока страницы. Другие элементы не видят абсолютный элемент и могут появиться под ним. Это значение используется для установки элемента в конкретное место на странице или для его размещения в определенном месте относительно родительского элемента, который установлен с абсолютным, относительным или фиксированным позиционированием.
Значение fixed фиксирует элемент на странице, поэтому, когда она прокручивается,

592
Приложения фиксированный элемент остается на экране, что очень похоже на фреймы HTML.
Internet Explorer версий 6 и ниже игнорирует значение fixed
Пример: position: absolute;
ПРИМЕЧАНИЕ
Чаще всего применяются значения relative, absolute и fixed вместе с left, right, top и bottom. Все подробности о позиционировании вы можете узнать из гл. 15.
right
При использовании с абсолютным или фиксированным позиционированием это свойство определяет положение правого края стиля относительно правого края его самого близкого установленного предка. Если элемент, для которого разрабатыва- ется стиль, не находится внутри каких-либо позиционированных тегов, то он будет размещаться относительно правого края окна браузера. Вы можете применять это свойство, чтобы поместить боковую панель на определенном расстоянии от право- го края окна браузера. При использовании свойства с относительным позициони- рованием положение элемента вычисляется от его правого края.
Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты.
Пример: right: 5em;
ПРИМЕЧАНИЕ
В Internet Explorer версий 6 и ниже могут быть проблемы при позиционировании элементов с ис- пользованием свойства right.
top
Действие этого свойства противоположно действию свойства bottom
, описанного выше. Другими словами, при использовании с абсолютным или фиксированным позиционированием это свойство определяет позицию верхнего края стиля отно- сительно верхнего края его самого близкого установленного предка. Если стили- зованный элемент не находится внутри каких-либо позиционированных тегов, то он будет размещаться относительно верхнего края окна браузера. Вы можете ис- пользовать это свойство, чтобы поместить логотип на установленное расстояние от верхнего края окна браузера. При использовании свойства с относительным позиционированием размещение элемента рассчитывается от его верхнего края.
Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты.
Пример: top: 5em;
visibility
Определяет, отображает ли браузер элемент. Используйте это свойство, чтобы скрыть некоторые объекты страницы, например абзац, заголовок или содержимое тега

. В отличие от значения none свойства display
, установка которого скры- вает элемент и удаляет его из потока страницы, значение hidden свойства visibility позволяет не удалять элемент из потока страницы. Вместо этого остается пустое пространство в том месте, где был бы элемент. По этой причине свойство visibility чаще применяется с абсолютно позиционированными элементами, которые уже были удалены из потока страницы.

Приложение 1. Справочник свойств CSS
593
Скрытие элемента не принесет большой пользы, если вы не сможете показать его снова. Программирование JavaScript — самый распространенный способ пере- ключать свойство visibility для показа и скрытия элементов на странице. Вы мо- жете также использовать псевдокласс
:hover
(см. раздел «Псевдоклассы и псевдо- элементы» гл. 3), чтобы изменить свойство visibility элемента, когда посетитель наводит указатель мыши на некоторые части страницы.
Значения: visible
, hidden
. Кроме того, можно использовать значение collapse
, чтобы скрыть строку или столбец в таблице.
Пример: visibility: hidden;
width
Устанавливает ширину области элемента, которая содержит текст, изображения и др. Количество места на экране, фактически отведенного для элемента, может быть намного шире, так как включает ширину левого и правого полей, левого и пра- вого отступов, а также левой и правой границ.
Значения: любая корректная единица измерения CSS, такая как пикселы, em или проценты. Проценты рассчитываются в зависимости от ширины содержащего элемента.
Пример: width: 250px;
z-index
Управляет порядком расположения позиционированных элементов. Относится только к элементам, у которых свойству position установлено значение absolute
, relative или fixed
. Свойство определяет, где появляется элемент относительно оси Z. Если два абсолютно позиционированных элемента накладываются друг на друга, тот, у которого более высокий индекс позиционирования, окажется сверху.
Значения: целочисленные значения, такие как
1
,
2
или
10
. Вы также можете использовать отрицательные значения, но различные браузеры обрабатывают их по-разному. Чем больше число, тем «выше» расположен элемент. Элемент с z-index
, равным
20
, появится ниже элемента с z-index
, равным
100
(если эти два элемента накладываются) (см. рис. 15.6).
Пример: z-index: 12;
СОВЕТ
Значения не должны задаваться в строгом порядке. Если для элемента A установлено значение 1 свойства z-index, вам не обязательно указывать значение 2 для элемента B, чтобы поместить его сверху. Вы можете использовать 5, 10 и т. д., чтобы получить тот же самый результат, главное, чтобы число было больше. Так, чтобы убедиться в том, что элемент всегда будет появляться над другими элементами, просто задайте ему очень большое значение, например 10 000. Но помните, что максимальное значение, которое может обрабатывать Firefox, равняется 2 147 483 647, поэто- му не делайте z-index больше этого числа.
Свойства анимации, преобразований и переходов
В CSS3 добавлены весьма интересные свойства для преобразования элементов путем масштабирования, вращения, наклона и перемещения, а также возможность анимировать изменения от одного CSS-свойства к другому.

594
Приложения
@keyframes
Основой CSS-анимации является правило
@keyframes
. Оно позволяет дать анимации имя, которое затем можно будет применить к любому элементу страницы и создать набор ключевых кадров (keyframes). (Согласно описанию в гл. 10, ключевые кадры являются теми местами анимации, где происходят изменения CSS-свойств.) На- пример, чтобы постепенно превратить фон элемента из черного в белый, нужны два ключевых кадра: первый для CSS-установки цвета фона в черный, а второй — для его установки в белый. Ключевых кадров с различными CSS-свойствами может быть сколько угодно.
На момент написания данной книги к правилу
@keyframe необходимо было до- бавлять префикс производителя, а анимация не работала в Internet Explorer 9 и бо- лее ранних версиях.
Значения: правило
@keyframes не похоже на любые другие свойства CSS, фак- тически это вообще не свойство. Оно названо правилом и намного сложнее обыч- ного свойства. Ему нужно присвоить имя (которое позже будет использоваться для применения анимации к элементу на странице), а затем добавить набор фигурных скобок:
{ }
. Внутри скобок находятся ключевые кадры, в качестве которых могут быть просто два ключевых слова from и to для обозначения первого и последнего ключевого кадра. Каждый ключевой кадр имеет свой набор фигурных скобок, внут- ри которого помещаются анимируемые CSS-свойства: background-color
, font-size
, позиция на странице и т. д. Более подробную информацию о работе анимации мож- но найти в гл. 10.
Пример:
@keyframes myAnimation {
from {
background-color: black;
}
to {
background-color: white;
}
}
animation
Это сокращенный метод применения анимации к элементу. Он является кратким способом включения следующих свойств в одно свойство: animation-name
, animation- duration
, animation-timing-function
, animation-iteration-count
, animation-direction
, animation-delay и animation-fill-mode
. Все эти свойства рассматриваются на следу- ющих страницах. Так как это свойство относится к CSS3, оно для многих браузеров требует применения префиксов производителей и не работает в Internet Explorer 9 и более ранних версиях.
Значения: список значений, разделенных пробелами, в том числе свойства ани- мации, которые перечислены в предыдущем абзаце. Конкретные типы значений, предоставляемые каждому из свойств, будут рассмотрены в следующих статьях
(
animation-name
, animation-duration
) и т. д. Обязательными являются только два значения — animation-name и animation-duration
. Свойство animation требует исполь- зования префиксов производителей. К одному и тому же элементу можно приме-

Приложение 1. Справочник свойств CSS
595
нить несколько именованных анимаций, предоставив список значений анимаций, с запятой в качестве разделителя.
Примеры:
animation: myAnimation 2s;
animation: myAnimation 2s ease-in 2 alternate 5s forwards;
animation: fadeOut 2s ease-in-out 2 alternate 5s forwards,
glow 5s;
animation-name
Это свойство используется для назначения анимации, созданной с помощью пра- вила
@keyframes
. Свойство добавляется в качестве части CSS-селектора, применя- емого к одному или нескольким элементам страницы. Например, добавление это- го свойства к стилю тега h1
сообщит браузеру, что при загрузке страницы нужно запустить указанную анимацию в отношении всех тегов