. Чтобы это сработало, необходимо также назначить свойство animation-duration
. Это свойство требует применения префиксов производителей и не работает в Internet Explorer 9 и более ранних версиях.
Значения: имя из правила
@keyframes
Пример: animation-name: myAnimation;
animation-duration
Определяет продолжительность анимации, указанной свойством animation-name
Значения: значение в секундах —
1s или в миллисекундах —
1000ms
Пример: animation-duration: 2s;
animation-timing-function
Задает скорость анимации в течение выделенного ей периода. Так, установив про- должительность перехода 5 секунд, можно также управлять тем, как проигрывает- ся переход в течение этих 5 секунд, например медленный старт и быстрый финиш.
Это свойство требует применения префиксов производителей и не работает в Internet
Explorer 9 и более ранних версиях.
Значения: одно из пяти ключевых слов: linear
, ease
, ease-in
, ease-out и ease-in- out
. Для пользовательской функции распределения по времени можно также при- менять значение кубической кривой Безье.
Примеры:
animation-timing-function: ease-out;
animation-timing-function: cubic-bezier(.20, .96, .74, .07);
animation-delay
Определяет время задержки начала воспроизведения анимации в секундах или миллисекундах. Это свойство требует применения префиксов производителей и не работает в Internet Explorer 9 и более ранних версиях.
Значения: значение в секундах —
1s или в миллисекундах —
1000ms
Пример: animation-delay: 1.5s;
596 Приложения animation-iteration-countОпределяет количество запусков анимации. Обычно анимация запускается один раз, а затем останавливается, но вы можете заставить анимацию запускаться 4, 5, 100 или бесконечное количество раз. Это свойство требует применения префиксов произво- дителей и не работает в Internet Explorer 9 и более ранних версиях. Значения: положительное целое число или ключевое слово infinite Примеры:animation-iteration-count: 5; animation-iteration-count: infinite; animation-directionКогда анимация запускается более одного раза, это свойство указывает старто- вую точку для каждой последующей анимации. Обычно браузер просто заново проигрывает анимацию от начальной стартовой точки снова и снова. Но можно также запустить анимацию вперед, а затем назад, затем опять вперед. Например, при наличии анимации, постепенно превращающей цвет фона из белого в чер- ный, может потребоваться придать ей пульсирующий характер, заставив запус- каться много раз и превращать белый цвет в черный, затем черный в белый, затем опять белый в черный и черный в белый и т. д. Это свойство требует при- менения префиксов производителей и не работает в Internet Explorer 9 и более ранних версиях. Значения: ключевое слово normal или alternate . Обычно браузер проигрывает анимацию в режиме normal , поэтому данное свойство нужно использовать только при потребности использования ключевого слова alternate Пример: animation-direction: alternate; animation-fill-modeЗадает стилизацию анимируемого элемента в начале и (или) в конце анимации. Это свойство требует применения префиксов производителей и не работает в Internet Explorer 9 и более ранних версиях. Значения: одно из трех ключевых слов: backwards , forwards или both . Ключевое слово forwards применяется наиболее часто, поскольку оно оставляет элемент сти- лизованным так же, как в конце анимации, вместо возвращения к тому стилю, ко- торый был до начала анимации. Пример: animation-fill-mode: backwards; animation-play-stateУправляет проигрыванием анимации. Это свойство можно использовать с псевдо- классом :hover для приостановки анимации при прохождении указателя мыши посетителя над элементом. Свойство требует применения префиксов производи- телей и не работает в Internet Explorer 9 и более ранних версиях. Значения: одно из двух ключевых слов: pause или running . Ключевое слово pause приостанавливает анимацию, а running заставляет продолжить ее выполне- ние. По умолчанию используется ключевое слово running Пример: animation-play-state: paused;
Приложение 1. Справочник свойств CSS
597
transform
Приводит к изменению элемента одним или несколькими способами, включая мас- штабирование, вращение, наклон или перемещение. Это свойство требует примене- ния префиксов производителей и не работает в Internet Explorer 8 и более ранних версиях.
Значения: ключевые слова rotate()
, translate()
, skew()
или scale()
. Каждое клю- чевое слово получает собственный тип значения. Например, rotate требует значе- ния угла вращения —
180deg
,
translate требует такого показателя, как процент, em или пикселы, skew получает два угловых значения, а scale получает положительное или отрицательное число. К одному и тому же элементу можно применить более одного вида преобразования.
Примеры: transform: rotate(45deg);
transform: scale(1.5);
transform: skew(45deg 0) rotate(200deg) translate(100px, 0) scale(.5);
transform-origin
Управляет точкой, в которой применяется преобразование. Например, обычно при вращении элемента за ось вращения берется центр элемента. Но его можно также вращать вокруг одного из его четырех углов. Это свойство требует применения пре- фиксов производителей и не работает в Internet Explorer 8 и более ранних версиях.
Значения: два значения, одно для горизонтальной координаты исходной точки, а другое — для вертикальной. Можно использовать те же ключевые слова и значе- ния, что и для свойства background-position
Примеры:
transform-origin: left top;
transform-origin: 0% 100%;
transform-origin: 10px -100px;
transition
Краткий метод определения свойств transition-property
, transition-duration
, transition-timing-function и transition-delay
(рассматриваемых ниже).
Свойство transition заставляет браузер анимировать изменения CSS-свойств элемента. Например, можно анимировать изменение фонового цвета кнопки нави- гации с красного на зеленый при проходе над ней указателя мыши посетителя. Это свойство требует применения префиксов производителей и не работает в Internet
Explorer 9 и более ранних версиях.
Значения: список свойств с пробелом в качестве разделителя, включающий свой- ства transition
(необязательное, по умолчанию имеет значение all
), transition-duration
(обязательное), transition-timing-function
(необязательное, по умолчанию имеет зна- чение ease
), transition-delay
(необязательное, по умолчанию имеет значение
0
).
Пример: transition: background-color 1.5s ease-in-out 500ms;
transition-property
Определяет конкретные CSS-свойства, подвергаемые анимированию при измене- нии CSS-свойств элемента. Это свойство требует применения префиксов произ- водителей и не работает в Internet Explorer 9 и более ранних версиях.
598 Приложения Значения: анимируемое CSS-свойство или ключевое слово all Примеры: transition-property: width, left, background-color; transition-property: all; transition-durationОпределяет продолжительность анимации перехода. Значения: значение в секундах — 1s или в миллисекундах — 1000ms Пример: animation-duration: 2s; transition-timing-functionЗадает скорость анимации перехода в течение определенного периода. Например, установив продолжительность перехода 5 секунд, можно также управлять тем, как проигрывается переход в течение этих 5 секунд, включив, допустим, медленный старт и быстрый финиш. Это свойство требует применения префиксов производи- телей и не работает в Internet Explorer 9 и более ранних версиях. Значения: одно из пяти ключевых слов: linear , ease , ease-in , ease-out или ease- in-out . Для пользовательской функции распределения по времени можно приме- нять значение кубической кривой Безье. Примеры:transition-timing-function: ease-out; transition-timing-function: cubic-bezier(.20, .96, .74, .07); transition-delayОпределяет время задержки перед началом анимации перехода в секундах или миллисекундах. Это свойство требует применения префиксов производителей и не работает в Internet Explorer 9 и более ранних версиях. Значения: значение в секундах — 1s или в миллисекундах — 1000ms Пример: transition-delay: 1.5s; Свойства таблицыСуществует несколько свойств CSS, которые относятся исключительно к таблицам HTML. В гл. 11 можно найти детальные инструкции по использованию CSS с таб- лицами. border-collapseОпределяет, расширены границы вокруг ячеек таблицы или сжаты. Когда они рас- ширены, браузеры добавляют пространство размером несколько пикселов между каждой ячейкой. Даже если вы уберете это пространство, установив значение 0 атрибуту cellspacing HTML-тега
, браузеры все еще будут отображать двой- ные границы. Таким образом, нижняя граница одной ячейки появится над верхней границей другой ячейки, расположенной ниже, что вызовет удвоение линий гра- ниц. Установка значения collapse свойства border-collapse устраняет и область между ячейками, и это удвоение границ (см. раздел «Создание стилей для таблиц» гл. 11). Свойство работает, только когда относится к тегу
Приложение 1. Справочник свойств CSS 599Значения: collapse , separate Пример: border-collapse: collapse; border-spacingУстанавливает расстояние между ячейками в таблице. Оно заменяет HTML-атри- бут cellspacing тега
. Однако Internet Explorer 7 и ниже не понимает свойство border-spacing
, так что лучше продолжать использовать атрибут cellspacing в тегах
, чтобы гарантировать пространство между ячейками во всех браузерах.
ПРИМЕЧАНИЕ
Если вы хотите удалить пространство, которое браузеры обычно вставляют между ячейками, про сто установите значение collapse свойства border-collapse.
Значения: два CSS-значения длины. Первое устанавливает горизонтальное раз- деление (пространство с обеих сторон каждой ячейки), а второе — вертикальное
(пространство, отделяющее основание одной ячейки от вершины другой ячейки, находящейся под первой).
Пример: border-spacing: 0 10px;
caption-side
Когда свойство относится к заголовку таблицы, оно определяет, появится заголо- вок вверху или внизу таблицы. Поскольку, согласно правилам HTML, тег
должен идти сразу за открывающим тегом
, заголовок обычно возникает вверху таблицы.
Значения: top
, bottom
Пример: caption-side: bottom;
ПРИМЕЧАНИЕ
К сожалению, это свойство не дает никакого эффекта в браузерах Internet Explorer 6 или 7 (в вер- сии 8 оно работает), так что безопаснее придерживаться эквивалентного HTML-кода: "bottom"> или .
empty-cells
Определяет, как браузер должен отобразить ячейку таблицы, которая совершенно пуста. В HTML это выглядело бы следующим образом:
|
. Значение hide скрывает любую часть ячейки, вставляя пустое пространство, так что границы, фоновые цвета и изображения не показываются в пустой ячейке. Примените это свойство к стилю, форматирующему тег
Значения: show
, hide
Пример: empty-cells: show;
ПРИМЕЧАНИЕ
Свойство empty-cells не дает никакого эффекта в Internet Explorer 7 и более ранних версиях.
table-layout
Управляет тем, как браузер чертит таблицу, и может немного влиять на скорость отображения страницы браузером. Установка значения fixed заставляет браузер
600 Приложения привести все столбцы к той же ширине, что задана для столбцов из первой стро- ки, из-за чего таблица чертится быстрее. Значение auto — стандартное, при кото- ром «браузер делает свое дело», поэтому, если вы довольны тем, как быстро ваши таблицы появляются на странице, не беспокойтесь об этом свойстве. Если же вы используете его, то применяйте к стилю, форматирующему тег
Значения: auto
, fixed
Пример: table-layout: fixed;
Различные свойства
CSS 2.1 предлагает некоторые дополнительные и иногда интересные свойства. Они позволяют улучшать веб-страницы, задавая специальное содержимое, различные указатели мыши, расширяют управление печатью страницы и т. д. К сожалению, не все браузеры одинаково правильно понимают эти свойства.
content
Определяет текст, который появляется либо до, либо после элемента. Используйте это свойство с псевдоэлементами
:after или
:before
(см. врезку «Информация для опытных пользователей. Показываем ссылки при печати» в подразделе «Стилизация фонов для печати» раздела «Создание таблиц стилей для печати» гл. 14). Вы може- те добавить открывающую кавычку перед цитируемым материалом и закрывающую кавычку после него. Это свойство не поддерживается в Internet Explorer 6 и 7, так что его использование ограничено.
Значения: текст в кавычках (
"как этот"
), ключевые слова normal
, open-quote
, close-quote
, no-open-quote
, no-close-quote
Примеры: p.advert:before {content: "And now a word from our sponsor…";}
и a:
after {content: "("attr(href)")";}
ПРИМЕЧАНИЕ
Добавление текста таким способом (как пример с открывающими и закрывающими кавычками) называют генерируемым содержимым. Прочитайте простое объяснение этого феномена на сайте www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html.
cursor
Позволяет изменять вид указателя мыши, когда он передвигается над определен- ным элементом. Например, вы можете задать ему вид вопросительного знака, ко гда кто-то проводит указателем мыши над ссылкой, предоставляющей дополнитель- ную информацию по какой-либо теме.
Значения: auto
, default
, crosshair
, pointer
, move
, e-resize
, ne-resize
, nw-resize
, nresize
, se-resize
, sw-resize
, s-resize
, w-resize
, text
, wait
, help
, progress
. Вы также можете применять URL-значение, чтобы использовать для указателя собственное изображение (но прочтите примечание ниже). Указатель, который находится над ссылкой, выглядит как стрелка, так что, если хотите, чтобы какие-то элементы на странице показывали пользователю, что он может щелкнуть на них, добавьте к сти- лю объявление cursor: pointer
Пример: cursor: help; cursor: url(images/cursor.cur);
Приложение 1. Справочник свойств CSS 601ПРИМЕЧАНИЕ Не все браузеры распознают значения URL для указателя. Для получения более полной информации зайдите на сайт www.quirksmode.org/css/cursor.html. opacityПозволяет управлять прозрачностью любого элемента и всех его потомков. При этом через элемент могут просвечиваться находящиеся под ним цвета, изображения и со- держимое. Учтите, что при применении свойства opacity к div -контейнеру тот же уровень прозрачности получат все содержащиеся в нем заголовки, изображения, абзацы и другие div -контейнеры. То есть, если для тега установить значение свойства opacity, равное .5 (50 % прозрачность), изображение внутри этого тега так- же получит 50 %-ную прозрачность, даже если конкретно для него будет установле- на прозрачность 1 , она не отменит 50 %-ную прозрачность. Значения: десятичное значение от 0 до 1. Значение 0 означает невидимость, а значение 1 — полную непрозрачность. Пример: opacity: .5; orphansОпределяет минимальное количество строк текста, которые можно оставить внизу распечатанной страницы. Предположим, вы печатаете страницу на лазерном прин- тере и пятистрочный абзац приходится на две страницы, причем всего одна строка находится внизу первой страницы, а четыре оставшиеся — на второй. Поскольку одна строка выглядит «висячей», вы можете указать браузеру разбить абзац, только если, скажем, по крайней мере три строки оставлены внизу распечатанной страни- цы (на момент написания книги только браузер Opera понимает это свойство). Значения: числа, например 1 , 2 , 3 или 5 Пример: orphans: 3; page-break-afterОпределяет, происходит ли разрыв страницы при печати после определенного эле- мента. С ним вы можете убедиться в том, что конкретный абзац всегда будет по- следним элементом, который появится на печатной странице. Значения: auto , always , avoid , left , right . Значение auto — стандартное, оно позво- ляет браузеру определять, когда и как разбивать содержимое на печатные страницы; always вынуждает элемент, который следует далее, появиться вверху отдельной пе- чатной страницы, и это единственное значение, которое работает одинаково во всех браузерах; avoid предотвращает обрыв страницы после элемента; это отличный спо- соб прикрепить заголовок к абзацу, который идет за ним, но, к сожалению, большин- ство браузеров не распознают его. Значения left и right определяют, появляется ли следующий элемент на лево- или правосторонней странице, что может заставить браузер напечатать дополнительную пустую страницу. Но, поскольку никакие брау- зеры не понимают эти значения, не волнуйтесь о напрасной трате бумаги. Браузеры обрабатывают значения left и right так же, как и always Пример: page-break-after: always; 602 Приложения page-break-beforeРаботает так же, как и page-break-after , за исключением того, что разрыв страницы происходит перед стилизованным элементом. При этом элемент помещается на- верх следующей печатной страницы. Вы можете использовать это свойство, чтобы убедиться в том, что каждый заголовок для различных разделов длинной веб-стра- ницы появится вверху страницы. Значения: те же самые, что и для page-break-after Пример: page-break-before: always; page-break-insideПрепятствует тому, чтобы элемент был разбит на две печатные страницы. Если вы хотите держать фотографию и ее заголовок вместе на отдельной странице, укажи- те для них обоих один тег
, а затем примените к нему стиль со свойством page- break-inside
(на момент написания книги только Opera понимает это свойство).
|
Скачать 20.28 Mb.