Как пользоваться справочником

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

Браузеры

При создании универсальных веб-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие свойства будут работать и где, а какие нет. Для этого в таблице приведены популярные браузеры — Internet Explorer, Chrome, Opera, Safari и Firefox. Также в таблицу добавлены мобильные браузеры.

В справочнике используются следующие обозначения:

Да — свойство полностью поддерживается браузером со всеми допустимыми значениями;

Нет — свойство браузером не воспринимается и игнорируется;

Предупреждение — свойство понимается браузером, но с некоторыми оговорками.

Значение по умолчанию

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

Наследование

Наследование — это перенос правил форматирования для элементов, находящихся внутри других. Например, если для <p> задан красный цвет текста, а для курсива <i>, который находится внутри абзаца, нет, то в этом случае вложенный элемент наследует свойства своего родителя и курсивный текст также будет красным.

Наследование полезно для задания свойств, применяемых к элементу по умолчанию. Так, достаточно задать параметры форматирования для <table> и к ячейкам таблицы <td> они будут применены автоматически. Точно так же можно определить свойства <body>, который порождает стиль всех остальных элементов веб-страницы.

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

Применение

Свойства CSS можно применять далеко не ко всем элементам веб-страницы, а только к тем, с которыми они «дружат». Большинство свойств работают со всеми элементами, а некоторые только с блочными или позиционированными. Например, для изображений совершенно бессмысленно устанавливать свойства, которые манипулируют с текстом. Так что в каждом случае следует решать самостоятельно, когда применять свойство, а когда нет.

Синтаксис

При описании синтаксиса применяются следующие обозначения:

  • вертикальная черта между значениями (например, fixed | scroll) указывает на логическое исключающее ИЛИ, это означает, что надо выбрать только одно значение из предложенных;
  • двойная вертикальная черта (border-style || color) обозначает объединяющее ИЛИ (ИЛИ/И), каждое значение может использоваться самостоятельно или совместно с другими через пробел;
  • квадратные скобки ([left | center | right]) помечают группу, из которой, как правило, выбирается одно значение, причем оно не является обязательным к использованию;
  • два числа в фигурных скобках ({a,b}) говорят, что предшествующее им значение следует повторять не менее a, но не более b раз;
  • звёздочка (*) после квадратных скобок ([]*) сообщает, что значение внутри скобок допустимо повторять несколько раз.

Объектная модель

Для динамического изменения свойств элемента через JavaScript, необходимо знать, как к нему обращаться. Зная имя объекта и желаемое свойство, можно указать его новое значение без перезагрузки веб-страницы. Так, для сокрытия и отображения элемента применяется visibility, а объектная модель для управления его значением — document.getElementById("elementID").style.visibility. Указывая вместо elementID свой идентификатор элемента, заданный атрибутом id, получаем механизм для динамического скрывания некоторого содержимого.

Справочник CSS. Версия 10.0 от 18.02.2015

webref.ru


Селекторы тегов

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

Синтаксис

E { Описание правил стиля }

Здесь E имя произвольного элемента. Следует понимать, что хотя правила стиля можно применить к любому элементу, результат будет заметен только для элементов, которые непосредственно отображаются в контейнере <body>.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы тегов</title>
  <style>
   p {
    text-align: justify; /* Выравнивание по ширине */
    color: green; /* Зелёный цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Более эффективным способом ловли льва в пустыне
  является метод золотого сечения. При его использовании пустыня делится
  на две неравные части, размер которых подчиняется правилу золотого
  сечения.</p>
 </body>
</html>

В данном примере изменяется цвет текста и выравнивание текста абзаца. Стиль будет применяться только к тексту, который располагается внутри контейнера <p> (рис. 1).

Применение стиля к селектору P

Рис. 1. Применение стиля к селектору p

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3.5 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


Идентификаторы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

Синтаксис

#<Имя идентификатора> { Описание правил стиля }

При описании идентификатора вначале указывается символ решётки (#), затем идёт имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   #help {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение элемента от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
    background: #f0f0f0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div id="help">
   Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>
 </body>
</html>

Результат примера показан на рис. 1.

Вид текста, оформленного с помощью идентификатора

Рис. 1. Вид текста, оформленного с помощью идентификатора

Примечание

В браузере Internet Explorer до версии 7.0 идентификаторы иногда игнорируются, если они комбинируются с селекторами тегов или классами.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
3.5 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


Классы

Классы применяют, когда необходимо определить стиль для одного или нескольких элементов веб-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class.

Синтаксис

E.<Имя класса> { Описание правил стиля }
.<Имя класса> { Описание правил стиля }

Здесь E — обозначает любой элемент. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что элемент используется с определённым классом, к тегу добавляется атрибут class.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   p { /* Обычный абзац */
    text-align: justify; /* Выравнивание текста по ширине */
   }
   p.cite { /* Абзац с классом cite */
    color: navy; /* Синий цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   }
  </style>
 </head>
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы.
     Они отличаются высокой световой отдачей, продолжительным сроком службы,
     малой яркостью светящейся поверхности, близким к естественному спектральным
     составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p class="cite">Для исключения засветки экрана дисплея световыми потоками
     оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

Результат примера показан на рис. 1.

Вид текста, оформленного с помощью класса

Рис. 1. Вид текста, оформленного с помощью класса

Примечание

Internet Explorer до версии 7.0 понимает классы, имена которых начинаются с дефиса (-) или символа подчеркивания (_). Остальные браузеры таки имена игнорируют.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
3.5 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


Мультиклассы

К любому элементу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.

Синтаксис

<E class="class1 class2 ...">

Здесь E — обозначает любой тег.

В стилях допустимо использовать запись следующего вида.

.class1.class2 { Описание правил стиля }

В таком случае стиль применяется только для элементов, у которых одновременно заданы классы class1 и class2, т. е. в коде HTML используется конструкция <E class="class1 class2>.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Мультиклассы</title>
  <style>
   .level1 { font-size: 1em; }
   .level2 { font-size: 1.2em; }
   .level3 { font-size: 1.4em; }
   .level4 { font-size: 1.6em; }
   .level5 { font-size: 1.8em; }
   .level6 { font-size: 2em; }
   a.tag {
    color: #468be1; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div>
   <a href="/term/2" class="tag level6">Paint.NET</a>
   <a href="/term/69" class="tag level6">Photoshop</a>
   <a href="/term/3" class="tag level5">цвет</a>
   <a href="/term/95" class="tag level5">фон</a>
   <a href="/term/11" class="tag level4">палитра</a>
   <a href="/term/43" class="tag level3">слои</a>
   <a href="/term/97" class="tag level2">свет</a>
   <a href="/term/44" class="tag level2">панели</a>
   <a href="/term/16" class="tag level1">линия</a>
   <a href="/term/33" class="tag level1">прямоугольник</a>
   <a href="/term/14" class="tag level1">пиксел</a>
   <a href="/term/27" class="tag level1">градиент</a>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Цвет и размер ссылок, заданный через классы

Рис. 1. Цвет и размер ссылок, заданный через классы

Примечание

Браузер IE до версии 7.0 некорректно работает с мультиклассами и понимает запись .a.b как .b, т. е. воспринимает только имя последнего класса, что приводит к ошибкам.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
3.5 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


Универсальный селектор

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

В CSS3 универсальный селектор применяется также в комбинации с пространством имён.

  • ns|* — все элементы в пространстве имён ns.
  • *|* — все элементы во всех пространствах имён.
  • |* — все элементы без явного указания пространства имён.

Синтаксис

* { Описание правил стиля }

Для обозначения универсального селектора применяется символ звёздочки (*). В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Универсальный селектор</title>
  <style>
   * {
    margin: 0;
    padding: 0; /* Убираем отступы и поля для всех элементов */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

Браузеры

Браузер Internet Explorer до шестой версии включительно понимает конструкцию * html, что нелогично, поскольку тег <html> является тегом верхнего уровня и выше него никаких элементов быть не может. Эта ошибка иногда применяется, чтобы создать стиль только для IE6, например конструкция * html body { ... } будет добавлять стиль для селектора body только в IE6 и не работает в других браузерах.

В браузере Internet Explorer 7 при добавлении универсального селектора перед именем селектора без пробелов, он воспринимается как контекстный селектор. Так, запись *body работает только в IE7 и игнорируется другими браузерами.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 8 | 1.1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 8 | 1.3


Вложенные селекторы

При создании веб-страницы часто приходится вкладывать одни элементы внутрь других. Чтобы стили для этих элементов использовались корректно, помогут вложенные селекторы. Например, задать стиль для <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного элемента, а также для элемента, который находится внутри другого.

Синтаксис

E F { Описание правил стиля }

Здесь E это родительский элемент, а F — дочерний элемент, расположенный в контейнере <E>. В этом случае стиль будет применяться к элементу <F>, когда соблюдается следующий код <E><F></F></E>. Не обязательно должно быть два элемента, допускается произвольный уровень вложения. При этом конструкция может записываться так: div div ul li {...}.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы</title>
  <style>
   p b {
    font-family: Times, serif; /* Семейство шрифта */
    font-weight: bold; /* Жирное начертание */
    color: navy; /* Синий цвет текста */
   }
  </style>
 </head>
 <body>
  <div><b>Жирное начертание текста</b></div>
  <p><b>Одновременно жирное начертание текста
  и выделенное цветом</b></p>
 </body>
</html>

В данном примере показано обычное применение элемента <b> и этого же элемента, когда он находится внутри текстового абзаца <p>.

Примечание

В браузере Internet Explorer версии 6 и ниже не работает комбинация вложенных селекторов и псевдокласса :hover. Например, стиль для селекторов p b:hover или a:hover span применяться не будет.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
3.5 | 7 | 1 | 4 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


Дочерние селекторы

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

Рис. 1. Дерево элементов

На рис. 1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к <div> выступает элемент <p>. Вместе с тем <strong> не является дочерним для элемента <div>, поскольку он расположен в контейнере <p>.

Синтаксис

E > F { Описание правил стиля }

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Дочерние селекторы</title>
  <style>
   #menu {
    margin: 0; padding: 0; /* Убираем отступы */
   }
   #menu > li {
    list-style: none; /* Убираем маркеры списка */
    width: 100px; /* Ширина элемента в пикселах */
    background: #b3d9d2; /* Цвет фона */
    color: #333; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт */
    font-size: 90%; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    float: left; /* Располагаем элементы по горизонтали */
   }
   li > ul {
    list-style: none; /* Убираем маркеры списка */
    margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */
    border-bottom: 1px solid #666; /* Граница внизу */
    padding-top: 5px; /* Добавляем отступ сверху */
   }
   li > a {
    display: block; /* Ссылки отображаются в виде блока */
    font-weight: normal; /* Нормальное начертание текста */
    font-size: 90%; /* Размер шрифта */
    background: #fff; /* Цвет фона */
    border: 1px solid #666; /* Параметры рамки */
    border-bottom: none; /* Убираем границу снизу */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <ul id="menu">
   <li>Правка
    <ul>
      <li><a href="undo.html">Отменить</a></li>
      <li><a href="cut.html">Вырезать</a></li>
      <li><a href="copy.html">Копировать</a></li>
      <li><a href="paste.html">Вставить</a></li>
    </ul>
   </li>
   <li>Начертание
    <ul>
      <li><a href="bold.html">Жирное</a></li>
      <li><a href="italic.html">Курсивное</a></li>
      <li><a href="underline.html">Подчеркнутое</a></li>
    </ul>
   </li>
   <li>Размер
    <ul>
      <li><a href="small.html">Маленький</a></li>
      <li><a href="normal.html">Нормальный</a></li>
      <li><a href="middle.html">Средний</a></li>
      <li><a href="big.html">Большой</a></li>
    </ul>
   </li>
  </ul>
 </body>
</html>

В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться. Результат примера показан на рис. 2.

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

Рис. 2. Использование дочерних селекторов

Примечание

Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (li > /* больше */ a).

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
7 | 8 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


Родственные селекторы

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h1>. При этом <h1> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.

Здесь красный цвет текста будет установлен для всех абзацев.

h1 ~ p { color: red; }
<h1>Заголовок</h1>
<p>Абзац 1</p>
<p>Абзац 2</p>

Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h1> и <p> не имеют общего родителя.

h1 ~ p { color: red; }
<h1>Заголовок</h1>
<p>Абзац 1</p>
 <div><p>Абзац 2</p></div>
<p>Абзац 3</p>

Синтаксис

E ~ F { Описание правил стиля }

Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует сразу после него.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы</title>
  <style>
   img {
    display: none;
   }
   #switch:checked ~ img {
    display: block;
   }
  </style>
 </head>
 <body>
  <form>
   <input type="checkbox" id="switch">
   <label for="switch">Показать картинки</label>
    <img src="images/thumb1.jpg" alt="">
    <img src="images/thumb2.jpg" alt="">
    <img src="images/thumb3.jpg" alt="">
  </form>
 </body>
</html>

В данном примере все изображения изначально скрыты, но отображаются если поставить в поле формы галочку.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 9 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3


Соседние селекторы

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

Синтаксис

E + F { Описание правил стиля }

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

Элемент <b> является дочерним по отношению к <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b>  <var>sit</var> amet.</p>

Элементы <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются элементы <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Соседние селекторы</title>
  <style>
   b + i {
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
   <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Красный цвет текста для соседних селекторов

Рис. 1. Красный цвет текста для соседних селекторов

Примечание

Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I).

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
7 | 8 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


Селекторы атрибутов

Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно.

Синтаксис

[атрибут] { Описание правил стиля }
E[атрибут] { Описание правил стиля }

Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность
   может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:
  <q title="Из законов Фергюссона-Мержевича">После того, как веб-страница
   будет корректно отображаться в одном браузере, выяснится,
   что она неправильно показывается в другом</q>.</p>
 </body>
</html>

Результат примера показан на рис. 1.

Изменение стиля элемента в зависимости от применения атрибута title

Рис. 1. Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера <q>, когда к нему добавляется атрибут title. Обратите внимание, что для селектора q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора q.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 9 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3


[атрибут="значение"]

Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута.

Синтаксис

[атрибут="значение"] { Описание правил стиля }
E[атрибут="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем тегам, которые содержат указанное значение атрибута. А во втором — только к определённым селекторам.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   a[target="_blank"] {
    background: url(images/blank.png) 0 6px no-repeat; /* Фоновый рисунок */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
   <p><a href="link1.html">Обычная ссылка</a> |
      <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>

Результат примера показан ниже (рис. 1).

Изменение стиля элемента в зависимости от значения атрибута target

Рис. 1. Изменение стиля элемента в зависимости от значения атрибута target

В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 9 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3


[атрибут^="значение"]

Устанавливает стиль для элемента в том случае, если значение атрибута начинается с указанного текста.

Синтаксис

[атрибут^="значение"] { Описание правил стиля }
E[атрибут^="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определенным селекторам. Использование кавычек не обязательно.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   a[href^="http://"] {
    font-weight: bold /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная ссылка</a> |
  <a href="http://htmlbook.ru" target="_blank">Внешняя
  ссылка на сайт htmlbook.ru</a></p>
 </body>
</html>

Результат примера показан ниже (рис. 1).

Изменение стиля для внешних ссылок

Рис. 1. Изменение стиля для внешних ссылок

В данном примере внешние ссылки выделяются жирным начертанием. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 9 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3


[атрибут$="значение"]

Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом.

Синтаксис

[атрибут$="значение"] { Описание правил стиля }
E[атрибут$="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определенным селекторам.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   a[href$=".ru"] { /* Если ссылка заканчивается на .ru */
    background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */
    padding-left: 12px; /* Смещаем текст вправо */
   }
   a[href$=".com"] { /* Если ссылка заканчивается на .com */
    background: url(images/com.png) no-repeat 0 6px;
    padding-left: 12px;
   }
  </style>

 </head>
 <body>
  <p><a href="http://www.yandex.com">Yandex.Com</a> |
     <a href="http://www.yandex.ru">Yandex.Ru</a></p>
 </body>
</html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 1). Стилевые свойства будут добавляться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет.

Добавление картинки к ссылкам

Рис. 1. Добавление картинки к ссылкам

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 9 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3


[атрибут*="значение"]

Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, когда частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включён данный текст — в начале, середине или конце. В подобном случае следует использовать конструкцию *=. Она определяет, что значение атрибута содержит указанный текст.

Синтаксис

[атрибут*="значение"] { Описание правил стиля }
E[атрибут*="значение"] { Описание правил стиля }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   [href*="htmlbook"] {
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> |
  <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> |
  <a href="http://webimg.ru">Графика для Веб</a></p>
 </body>
</html>

Результат данного примера показан на рис. 1. В примере показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».

Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Рис. 1. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 9 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3


[атрибут~="значение"]

Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения требуется использовать конструкцию ~=.

Синтаксис

[атрибут~="значение"] { Описание правил стиля }
E[атрибут~="значение"] { Описание правил стиля }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Блок</title>
  <style>
   [class~="block"] h3 { color: green; }
  </style>
 </head>
 <body>
  <div class="block tag">
   <h3>Заголовок</h3>
  </div>
 </body>

</html>

В данном примере зелёный цвет текста применяется к селектору h3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 9 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3


[атрибут|="значение"]

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class.

Синтаксис

[атрибут|="значение"] { Описание правил стиля }
E[атрибут|="значение"] { Описание правил стиля }

Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Блок</title>
  <style>
   div[class|="block"] {
    background: #306589; /* Цвет фона */
    color: #acdb4c; /* Цвет текста */
    padding: 5px; /* Поля */
   }
   div[class|="block"] a {
    color: #fff; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div class="block-menu-therm">
   <h2>Термины</h2>
   <div class="content">
     <ul class="menu">
      <li><a href="t1.html">Буквица</a></li>
      <li><a href="t2.html">Выворотка</a></li>
      <li><a href="t3.html">Выключка</a></li>
      <li><a href="t4.html">Интерлиньяж</a></li>
      <li><a href="t5.html">Капитель</a></li>
      <li><a href="t6.html">Начертание</a></li>
      <li><a href="t7.html">Отбивка</a></li>
     </ul>
   </div>
  </div>
 </body>
</html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |="block", поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

Спецификация

Спецификация | Статус
CSS Selectors Level 3 | Рекомендация
CSS 2.1 | Рекомендация
CSS 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 9 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3


inherit

Ключевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента. Естественно, результат будет заметен только в том случае, если у родителя указанное свойство установлено.

Синтаксис

Свойство: inherit;

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>inherit</title>
  <style>
   div {
    border: 1px solid green;
    padding: 10px;
   }
   p {
    border: inherit;
    padding: inherit;
   }
  </style>
 </head>
 <body>
   <div><p>Внимание, запрашиваемая страница не найдена!</p></div>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 4 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 1 | 1


initial

Значение initial применяется для установки исходного значения свойства. Может пригодиться в нескольких случаях, к примеру, восстановить значения свойств, заданных браузером по умолчанию или задать начальное значение свойства, измененное в результате наследования. Ключевое слово initial добавлено в CSS3 и пока плохо поддерживается браузерами.

Синтаксис

Свойство: initial;

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>initial</title>
  <style>
   h2 { color: #ffb734; font-family: Arial, sans-serif; }
   p { color: green; }
   .initial {
    color: initial;
    font-family: initial;
   }
  </style>
 </head>
 <body>
  <h2>Метод случайных чисел</h2>
  <p>Разделим пустыню на <span class="initial">ряд элементарных
   прямоугольников</span>, размер которых совпадает с размером
   клетки для льва. После чего перебираем полученные прямоугольники,
   каждый раз выбирая заданную область случайным образом.
   Если в данной области окажется лев, то мы поймаем его, накрыв
   клеткой.</p>
  <h2 class="initial">Метод Гаусса</h2>
</body>
</html>

Примечание

Firefox до версии 19.0 поддерживает нестандартное значение -moz-initial.

Спецификация

Спецификация | Статус
CSS Cascading and Inheritance Level 3 | Возможная рекомендация
CSS Values and Units Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
 | 1 | 15 | 1.2 | 3.5 | 19
Android | Firefox Mobile |  | Opera Mobile | Safari Mobile
1 | 3.5 | 19 |  | 1.2


Адрес

Адреса применяются для указания пути к файлу, например, для установки фоновой картинки на странице. Для этого применяется ключевое слово url(), внутри скобок пишется относительный или абсолютный адрес файла. При этом адрес можно задавать в необязательных одинарных или двойных кавычках.

Синтаксис

Свойство: url(<адрес>);

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Добавление фона</title>
  <style>
   body {
    background: url(http://webimg.ru/images/156_1.png) no-repeat;
   }
   div {
    background: url(images/warning.png) no-repeat;
    padding-left: 140px;
   }
  </style>
 </head>
 <body>
   <div>Внимание, запрашиваемая страница не найдена!</div>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 1 | 1


Время

Задаёт время в секундах или миллисекундах. Значение состоит из целого или дробного числа, за которым сразу же следует символ s для секунд или ms для миллисекунд. Пробел после числа недопустим. Для преобразования единиц помните, что 1s = 1000ms.

При нулевом значении единица времени не опускается и также должна быть добавлена. Всегда пишите 0s или 0ms вместо простого 0.

Синтаксис

Свойство: <время>

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Загрузка...</title>
  <style>
   .loading {
    width: 240px;
    margin: auto;
    padding: 20px 0 10px;
    background: #333;
    color: #fff;
    text-align: center;
   }
   .spin {
    display: inline-block;
    width: 30px; height: 30px;
    border: 10px solid #ccc;
    border-right: 10px solid #000;
    border-radius: 30px;
    /* Анимация */
    animation: spin 2s linear 0s infinite normal;
   }
   /* Задаём вращение */
   @keyframes spin { from { transform: rotate(0deg); }
                     to { transform: rotate(360deg); } }
  </style>
 </head>
 <body>
  <div class="loading">
   <div class="spin"></div>
   <p>Загружается...</p>
  </div>
 </body>
</html>

В данном примере задаётся время вращения элемента 2 секунды, анимация начинается сразу же после загрузки страницы.

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 11 | 10.5 | 3.2 | 4
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 4 | 10.5 | 3.2


Медиа-запросы

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

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

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Табл. 1. Типы носителей и их описание
Тип | Описание
all | Все типы. Это значение используется по умолчанию.
braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed | Принтеры, использующие для печати систему Брайля.
handheld | Смартфоны и аналогичные им аппараты.
print | Принтеры и другие печатающие устройства.
projection | Проекторы.
screen | Экран монитора.
speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv | Телевизоры.

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color) { ... }

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

@media all and (not handheld) { ... }

Оператор not оценивается в запросе последним, поэтому выражение

@media not all and (color) { ... }

следует понимать как

@media not (all and (color)) { ... }

а не

@media (not all) and (color) { ... }

only

Применяется для старых браузеров, которые не поддерживают медиа-запросы.

Пример. Стиль для новых браузеров

@media only all and (not handheld) { ... }

В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

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

Медиа-функции

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

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

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

@media all and (min-color-index: 256) {
 ...
}

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

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

@media screen and (min-device-aspect-ratio: 16/9) {
 ...
}

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере ниже в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк,
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

Тип носителя: all
Значение: нет

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

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media handheld and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В данном примере показан стиль для монохромного и цветного принтера.

@media print and (monochrome) {
 body { font-family: Times, 'Times New Roman', serif; }
 h1, h2, p { color: black; }
}
@media print and (color) {
 body { font-family: Arial, Verdana, sans-serif; }
 h1, h2, p { color: #556b2f; }
}

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В данном примере устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

@media screen and (orientation: landscape) {
  #logo { background: url(logo1.png) no-repeat; }
}
@media screen and (orientation: portrait) {
  #logo { background: url(logo2.png) no-repeat; }
}

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

Определяет разрешение устройства, например, принтера. В примере ниже стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

@media print and (min-resolution: 300dpi) {
 ...
}

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В данном примере при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток,
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

Спецификация

Спецификация | Статус
Media Queries Level 4 | Рабочий проект
Media Queries Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.2 | 1.3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3.1


Проценты

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

Синтаксис

Свойство: <число>%

Допускается указывать дробное значение, например 50.3%.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина в процентах</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы в процентах */
    background: #f0f0f0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
   <table>
    <tr><td>Содержимое таблицы</td></tr>
   </table>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 1 | 1


Размер

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

Относительные единицы

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

Табл. 1. Относительные единицы измерения
Единица | Описание
em | Размер шрифта текущего элемента
ex | Высота символа x
ch | Ширина символа 0 текущего элемента
rem | Размер шрифта корневого элемента

Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.

Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html.

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

Табл. 2. Относительные единицы измерения
Единица | Описание
vw | 1% от ширины области просмотра
vh | 1% от высоты области просмотра
vmin | 1% от меньшего значения из ширины и высоты области просмотра
vmax | Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1%

Абсолютные единицы

Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.

Табл. 3. Абсолютные единицы измерения
Единица | Описание
px | Пиксель
in | Дюйм (1 дюйм равен 2,54 см)
cm | Сантиметр
mm | Миллиметр
pt | Пункт (1 пункт равен 1/72 дюйма)
pc | Пика (1 пика равна 12 пунктам)

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Относительные единицы</title>
  <style>
    h1 { font-size: 30px; }
    p { font-size: 1.5em; }
  </style>
 </head>
 <body>
  <h1>Заголовок размером 30 пикселов</h1>
  <p>Размер текста 1.5 em</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Абсолютные единицы</title>
  <style>
   h1 { font-size: 24pt; }
   p { margin-left: 30mm; }
  </style>
 </head>
 <body>
   <h1>Заголовок размером 24 пункта</h1>
   <p>Сдвиг текста вправо на 30 миллиметров</p>
 </body>
</html>

Примечание

При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
px, in, cm, mm, pt, pc, em, ex | 3.0 | 1 | 3.5 | 1.0 | 1.0
ch | 9.0 | 27 | 20 | 7.0 | 1.0
rem | 9.0 | 4 | 11.6 | 4.1 | 3.6
vw, vh | 9.0 | 20 | 20 | 6.0 | 19
vmax |  | 20 | 20 |  | 19
vmin | 9.0 | 26 | 20 | 6.0 | 19
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
px, in, cm, mm, pt, pc, em, ex | 1.0 |  |  |
ch |  |  | 20 | 7.1.1
rem | 2.1 |  | 12 | 4
vw, vh | 2.1 | 19 |  | 6.0
vmax |  | 19 |  |
vmin | 2.1 | 19 |  | 6.0


Строка

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

Переносы строк не разрешены, но можно добавить перевод с помощью шестнадцатеричного символа юникода \A или \00000a.

Синтаксис

Свойство: 'первая "строка"'
Свойство: "первая 'строка'"
Свойство: "первая \"строка\""

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Строка</title>
  <style>
   .new { content: " обновлено"; }
  </style>
 </head>
 <body>
  <p class="new">Тег DEL используется для выделения текста, который
     был удален в новой версии документа.</p>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 1 | 1


Угол

Задаёт угол наклона или поворота. Положительное значение отмеряется по часовой стрелке, отрицательное против часовой стрелки.

Синтаксис

Свойство: <угол>;

Угол может задаваться в следующих единицах.

  • В градусах. После значения пишется deg. Полный круг равен 360deg.
  • В градах. Обозначается как grad. Полный круг равен 400grad,
  • В радианах. Обозначается как rad. Полный круг равен 2π или примерно 6.2832rad.
  • В поворотах. Обозначается как turn. Один круг равен одному повороту и пишется как 1turn.

Значения некоторых углов представлены в табл. 1.

Табл. 1. Углы, кратные 90 градусам
90 | 90deg = 100grad = 0.25turn ≈ 1.5708rad
180 | 180deg = 200grad = 0.5turn ≈ 3.1416rad
270 | 270deg = 300grad = 0.75turn ≈ 4.7124rad
-90 | -90deg = -100grad = -0.25turn ≈ -1.5708rad

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент под углом</title>
  <style>
   body {
    background: #b3dced;
    background: linear-gradient(-45deg, #b3dced, #29b8e5 50%, #bce0ee);
   }
  </style>
 </head>
 <body>
   <p>Внимание, запрашиваемая страница не найдена!</p>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 2 | 12 | 4 | 3.6
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4 | 4 | 12 | 4


Цвет

Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.

По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

По названию

Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.

Табл. 1. Названия цветов
Имя | Цвет | Код | RGB | HSL | Описание
white |  | #ffffff или #fff | rgb(255,255,255) | hsl(0,0%,100%) | Белый
silver |  | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Серый
gray |  | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Темно-серый
black |  | #000000 или #000 | rgb(0,0,0) | hsl(0,0%,0%) | Черный
maroon |  | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Темно-красный
red |  | #ff0000 или #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Красный
orange |  | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Оранжевый
yellow |  | #ffff00 или #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Желтый
olive |  | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Оливковый
lime |  | #00ff00 или #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Светло-зеленый
green |  | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Зеленый
aqua |  | #00ffff или #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Голубой
blue |  | #0000ff или #00f | rgb(0,0,255) | hsl(240,100%,50%) | Синий
navy |  | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Темно-синий
teal |  | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Сине-зеленый
fuchsia |  | #ff00ff или #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Розовый
purple |  | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Фиолетовый

С помощью RGB

Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).

RGBA

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.

HSL

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.

Рис. 1. Цветовой круг

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

HSLA

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвета</title>
  <style>
   body { background-color: #F9F2E3; }
   h2 {
    background-color: rgb(214,86,43);
    color: rgba(255,255,255,.9);
    padding: 10px;
   }
   p { color: green; }
   div {
    background-color: hsl(60,100%,25%);
    color: hsla(120,100%,50%,0.1);
   }
  </style>
 </head>
 <body>
  <h2>Предупреждение</h2>
   <p>Все перечисленные на сайте методы ловли льва являются теоретическими
   и базируются на вычислительных методах. Авторы не гарантируют вашей
   безопасности при их использовании и снимают с себя всякую
   ответственность за результат. Помните, лев это хищник и
   опасное животное!</p>
  <div>Арррргх!</div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Цвета на веб-странице

Рис. 2. Цвета на веб-странице

Спецификация

Спецификация | Статус
CSS Color Module Level 4 | Редакторский черновик
CSS Color Module Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
#RRGGBB | #RGB | 3 | 1 | 3.5 | 1 | 1
Названия | 3 | 1 | 3.5 | 1 | 1
rgb() | 4 | 1 | 3.5 | 1 | 1
hsl() | 9 | 1 | 9.5 | 3.1 | 1
rgba() | 9 | 1 | 10 | 3.1 | 3
hsla() | 9 | 1 | 10 | 3.1 | 3
transparent | 9 | 1 | 10 | 3.1 | 3
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
#RRGGBB | #RGB | 1 | 1 | 1 | 1
Названия | 1 | 1 | 1 | 1
rgb() | 1 | 1 | 1 | 1
hsl() | 1 | 1 | 10 | 4
rgba() | 4 | 4 | 10 | 4
hsla() | 4 | 4 | 10 | 4
transparent | 4 | 4 | 10 | 4


Число

Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой. Если число начинается с нуля, то его можно опустить (.5 вместо 0.5).

Синтаксис

Свойство: <число>

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Числа</title>
  <style>
   h1 { line-height: 1.1; }
   p { line-height: 2; }
  </style>
 </head>
 <body>
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 1 | 1


Функция attr()

Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.

Синтаксис

CSS2.1
attr(<атрибут>)
CSS3
attr(<атрибут>, <тип>, <значение>)

Значения

<атрибут>
Имя атрибута элемента передаваемое в CSS.
<тип>
Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color (цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time (время), deg (градус), а также единицы CSS вроде em, px и др.
<значение>
Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить.

Между версиями CSS есть небольшая разница по прочтению некоторых особенностей attr(). В CSS2.1 функция attr() может использоваться только совместно со свойством content и всегда возвращает строку в качестве значения. В CSS3 attr() допустимо применять с любым свойством и возвращаемое значение может быть в любом корректном для CSS3 формате.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>attr()</title>
  <style>
   .site::after {
    content: ' (' attr(href) ') '; /* Выводим адрес ссылки в скобках */
    font-size: 0.8em; /* Уменьшаем текст*/
    background: yellow; /* Жёлтый фон */
   }
  </style>
 </head>
 <body>
   <p><a href="http://htmlbook.ru" class="site">Полезный сайт</a></p>
 </body>
</html>

В данном примере после ссылок с классом site в скобках выводится значение атрибута href, к которому применяется стилевое оформление.

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 2 | 9 | 3.1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.1


calc()

Справочник по CSS

Функция calc()

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

Синтаксис

Свойство: calc(<выражение>)

Значения

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

  • + — сложение (width: calc(20px + 20px));
  • - — вычитание (padding: calc(10% - 10px););
  • * — умножение (height: calc(20%*2);)
  • / — деление. На ноль делить запрещено (width: calc(100%/3);).

Знаки плюс и минус должны отбиваться пробелами с двух сторон.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
   div {
    border: 1px solid #000;
    height: 200px;
    background: url(images/figure.jpg) no-repeat;
    background-position: calc(100% - 20px) 0;
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

В данном примере задаётся положение фонового рисунка как 20 пикселов от правого края.

Примечание

Firefox до версии 16.0 поддерживает значение -moz-calc.

Chrome до версии 26.0 поддерживает значение -webkit-calc.

Safari с версии 6.0 поддерживает значение -webkit-calc.

Спецификация

Спецификация | Статус
CSS Values and Units Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera | Safari | Firefox
9 | 19 | 26 | 15 | 6 | 4 | 16
Android | Firefox Mobile |  | Opera Mobile | Safari Mobile
2.3.6 | 4 | 16 | 15 |


linear-gradient()

Справочник по CSS

Функция linear-gradient()

Функция linear-gradient() добавляет линейный градиент к фону элемента. Она выступает значением свойства background-image или background.

Синтаксис

background-image: linear-gradient([<угол> | to <позиция> ,] <цвет> [, <цвет>]*);

Значения

<угол>

Задаёт угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

<цвет>
Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция>
Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left. В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.
Табл. 1. Типы градиента
Позиция | Угол | Описание | Вид
top | 270deg | Сверху вниз. |
left | 0deg | Слева направо. |
bottom | 90deg | Снизу вверх. |
right | 180deg | Справа налево. |
top left | -45deg | От левого верхнего угла к правому нижнему. |
top right | 225deg | От правого верхнего угла к левому нижнему. |
bottom left | 45deg | От левого нижнего угла к правому верхнему. |
bottom right | -225deg | От правого нижнего угла к левому верхнему. |

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .gradient {
    background: #fefcea; /* Для старых браузеров */
    background: linear-gradient(to top, #fefcea, #f1da36);
    padding: 10px;
    border: 1px solid #333;
   }
  </style>
 </head>
 <body>
  <p class="gradient">Здесь обсценная идиома традиционно начинает прозаический
  образ, но языковая игра не приводит к активно-диалогическому пониманию.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Линейный градиент для абзаца

Рис. 1. Линейный градиент для абзаца

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-linear-gradient().

Opera до версии 12.10 поддерживает -o-linear-gradient().

Firefox до версии 16 поддерживает -moz-linear-gradient().

Все свойства с префиксами не используют ключевое слово to при задании направления градиента.

Спецификация

Спецификация | Статус
CSS Image Values and Replaced Content Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera |  | Safari |  | Firefox
10 | 10 | 26 | 11.10 | 12.10 | 5.1 | 6.1 | 3.6 | 16
Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
2.1 | 4 | 1 | 16 | 12 | 6.1


radial-gradient()

Справочник по CSS

Функция radial-gradient()

Функция radial-gradient() добавляет радиальный градиент к фону элемента. Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки. На рис. 1 представлено для сравнения одновременно два разных градиента: радиальный (рис. 1а) и линейный (рис. 1б).

Радиальный градиент | Линейный градиент
а | б

Рис. 1. Радиальный и линейный градиент

Радиальный градиент создаётся с помощью свойства background или background-image.

Синтаксис

background-image: radial-gradient([ circle || <радиус> ] [ at <позиция> ]? ,
   | [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]? ,
   | [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]? ,
   | at <позиция> ,
     <цвет> [ , <цвет> ]*)

Значения

cicle
Радиальный градиент круглой формы.
ellipse
Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию.
<радиус>
Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения — радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента.
<позиция>

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

  • top left = left top = 0% 0% (в левом верхнем углу);
  • top = top center = center top = 50% 0% (по центру вверху);
  • right top = top right = 100% 0% (в правом верхнем углу);
  • left = left center = center left = 0% 50% (по левому краю и по центру);
  • center = center center = 50% 50% (по центру) — это значение по умолчанию;
  • right = right center = center right = 100% 50% (по правому краю и по центру);
  • bottom left = left bottom = 0% 100% (в левом нижнем углу);
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу);
  • bottom right = right bottom = 100% 100% (в правом нижнем углу).
<цвет>
Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<размер>
Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента.
Табл. 1. Ключевые слова для изменения размера градиента
Значение | Код | Описание | Вид
closest-side | background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(closest-side at 30px 20px, #fff, #000); | Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса). | contain
closest-corner | background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000); background: radial-gradient(closest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока. | closest-corner
farthest-side | background: radial-gradient(circle farthest-side at 30px 20px, #fff, #000); background: radial-gradient(farthest-side at 30px 20px, #fff, #000); | Похож по своему действию на closest-side, но градиент распространяется до дальней стороны блока. | farthest-side
farthest-corner | background: radial-gradient(circle farthest-corner at 30px 20px, #fff, #000); background: radial-gradient(farthest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока, | cover

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   div {
    background: radial-gradient(circle closest-side, #333 10px,
                        white 11px, white 30px, green 31px);
    height: 70px;
   }
  </style>
 </head>
 <body>
   <div></div>
 </body>
</html>

Результат данного примера показан ниже.

Резкие переходы между разными цветами

Резкие переходы между разными цветами

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   div {
    background: #ffb60f;
    background: radial-gradient(circle at 80px 40px, #f9eec7, #ffb60f, #ffb60f);
    padding: 20px;
   }
  </style>
 </head>
 <body>
  <div>Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>
 </body>
</html>

Результат данного примера показан ниже.

Круговой градиент

Спецификация

Спецификация | Статус
CSS Image Values and Replaced Content Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera |  | Safari |  | Firefox
10 | 10 | 26 | 11.10 | 12.10 | 5.1 | 6.1 | 3.6 | 16
Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
2.1 | 4.4 | 1 | 16 | 12 | 6.1


!important

Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей, также применяется для повышения специфичности стилевого правила. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.

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

  • !important добавлен в авторский стиль — будет применяться стиль автора.
  • !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
  • !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
  • !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Итог от применения !important в общем случае показан в табл. 1.

Табл. 1. Результат применения !important
Стиль автора Стиль пользователя Результат
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt
}
 BODY {
/* Чёрный цвет текста */
color: #000;

/* Размер текста 12 пунктов */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt
} 		BODY {
/* Чёрный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим чёрный текст размером 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt
} 		BODY {
/* Чёрный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как чёрный, размер 12 пунктов.
BODY {
/* Серый цвет текста, повышенная важность */
color: silver !important;

/* Размер текста 8 пунктов, повышенная важность */
font-size: 8pt !important
} 		BODY {
/* Чёрный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет чёрным, а размер его увеличится до 12 пунктов.

В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Оформление, как показано на рис. 1.

Подключение стиля пользователя в браузере Internet Explorer

Рис. 1. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Настроить стили» (рис. 2).

Подключение стиля пользователя в браузере Opera

Рис. 2. Подключение стиля пользователя в браузере Opera

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

Свойство: <значение> !important

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>important</title>
  <style>
   p {
    background: url(images/tune1.png) no-repeat !important;
    min-height: 112px; /* Минимальная высота */
    padding-left: 65px; /* Поле слева от текста */
   }
   p {
    background: url(images/tune2.png) no-repeat;
   }
  </style>
 </head>
 <body>
    <p>Минорная пентатоника с пониженной V ступенью также называется блюзовой
    пентатоникой.</p>
 </body>
</html>

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

Примечание

При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important, оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.

Спецификация

Спецификация | Статус
CSS Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 2 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


@charset

Команда @charset применяется для задания кодировки внешнего CSS-файла. Это имеет значение в том случае, если в CSS-файле используются символы национального алфавита.

Для внешней таблицы стилей браузер последовательно просматривает следующие пункты для определения кодировки таблицы стилей:

  1. кодировка, которую отдает сервер;
  2. правило @charset;
  3. атрибут charset элемента <link>;
  4. кодировка, установленная в документе через метатег (<meta charset="utf-8">).

Приведенный список имеет четко выраженную иерархию — чем выше находится пункт, тем выше его приоритет. Если ни один из пунктов не найден, будет установлена кодировка UTF-8.

Синтаксис

@charset "кодировка";

Значения

Для русского языка обычно указывается кодировка windows-1251 или utf-8. Значение кодировки обязательно должно быть взято в кавычки.

Пример

@charset "windows-1251";
body {
 font: 11pt Arial, Helvetica, sans-serif;
 margin: 0;
 color: #000;
}
p.new:after {
 content: " Новье!";
}

Примечание

В браузере Internet Explorer до версии 7.0 включительно название кодировки допускается писать без кавычек, что противоречит спецификации CSS.

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5.5 | 2 | 9 | 4 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 4


@font-face

Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.

Синтаксис

@font-face { свойства шрифта }

Значения

Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI), где URI — относительный или абсолютный путь к файлу.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@font-face</title>
  <style>
   @font-face {
    font-family: Pompadur; /* Имя шрифта */
    src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
   }
   P {
    font-family: Pompadur;
   }
  </style>
 </head>
 <body>
  <p>Протяженность варьирует дорийский микрохроматический интервал,
     но если бы песен было раз в пять меньше, было бы лучше для всех.</p>
 </body>
</html>

Результат данного примера в браузере Safari показан на рис. 1.

Собственный шрифт на странице

Рис. 1. Собственный шрифт на странице

Примечание

Браузер Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType).

Opera в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно. Это происходит в тех случаях, когда имя пользователя в Windows написано кириллицей.

Спецификация

Спецификация | Статус
WOFF File Format 2.0 | Рабочий проект
WOFF File Format 1.0 | Рекомендация
CSS Fonts Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera |  | Safari | Firefox
5.5 | 9 | 4 | 10 | 12 | 3.1 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 5


@import

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import.

Синтаксис

@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей];

В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание
Тип | Описание
all | Все типы. Это значение используется по умолчанию.
aural | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld | Наладонные компьютеры и аналогичные им аппараты.
print | Печатающие устройства вроде принтера.
projection | Проектор.
screen | Экран монитора.
tv | Телевизор.

Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт стиля</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
    @import "/style/palm.css" handheld, print; /* Стиль для печати */
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Примечание

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

Спецификация

Спецификация | Статус
Media Queries | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5.5 | 1 | 5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 5 | 1


@keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.

Самый простой вариант, когда у нас есть только два ключевых кадра — исходное и конечное состояние (рис. 1).

Рис. 1. Перемещение элемента

В таком случае @keyframes запишется в следующем виде:

@keyframes box {
 from { left: 0; }
 to { left: 300px; }
}

В данном случае мы даём нашему набору имя box, оно затем будет задействовано в свойстве animation и определяем, что элемент будет изменять значение свойства left от 0 до 300 пикселей. Вместо ключевых слов from и to можно использовать, соответственно, 0% и 100%.

Ключевые кадры не обязательно должны начинаться с 0% и заканчиваться 100%. Анимация тогда будет происходить не сразу.

@keyframes box {
 50% { left: 0; }
 90% { left: 300px; }
}

Синтаксис

@keyframes <переменная> { [ from | to | <проценты> ] [, from | to | <проценты> ]* }

Значения

<переменная>

Уникальная переменная, которая связывает @keyframes с animation, через это свойство настраивается время анимации и другие её параметры.
from
Первый ключевой кадр, аналогичен 0%.
to
Последний ключевой кадр, аналогичен 100%.
<проценты>
Устанавливает ключевой кадр в процентах от времени всей анимации.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@keyframes</title>
  <style>
   .creature {
    width:  200px;
    height: 200px;
    border-radius: 50%;
    background: #3ac;
    position: relative;
   }
   .creature::before, .creature::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    top: 40px;
    animation: eye 3s ease-in-out infinite;
    -webkit-animation: eye 3s ease-in-out infinite;
   }
   .creature::before { left: 55px; }
   .creature::after { right: 55px; }
   @keyframes eye {
    90% { transform: none; }
    95% { transform: scaleY(0.1); }
   }
   @-webkit-keyframes eye {
    90% { transform: none; }
    95% { transform: scaleY(0.1); }
   }
  </style>
 </head>
 <body>
   <div class="creature"></div>
 </body>
</html>

Примечание

Chrome, Safari и Android поддерживают @-webkit-keyframes.

Opera до версии 12.10 поддерживает @-o-keyframes.

Firefox до версии 16 поддерживает @-moz-keyframes.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
10 | 3 | 12 | 12.10 | 4 | 5 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2 | 5 | 16 | 12 | 12.10 | 4


@media

Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание
Тип | Описание
all | Все типы. Это значение используется по умолчанию.
aural | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld | Наладонные компьютеры и аналогичные им аппараты.
print | Печатающие устройства вроде принтера.
projection | Проектор.
screen | Экран монитора.
tv | Телевизор.

Синтаксис

@media тип1 [, тип2] {
  Описание стиля
}

Значения

После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 1; если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил.

Пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>@media</title>
  <style type="text/css">
   @media screen { /* Стиль для отображения в браузере */
    body {
     font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
     font-size: 0.9em; /* Размер шрифта */
     color: #000080; /* Цвет текста */
    }
    h1 {
     background: #faf0e6; /* Цвет фона под текстом */
     border: 2px dashed #800000; /* Рамка вокруг заголовка */
     color: #a0522d; /* Цвет текста */
     padding: 7px; /* Поля вокруг текста */
    }
    h2 {
     color: #556b2f; /* Цвет текста */
     margin: 0; /* Убираем отступы */
    }
    p {
     margin-top: 0.5em; /* Отступ сверху */
    }
   }
   @media print { /* Стиль для печати */
    body {
     font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
    }
    h1, h2, p {
     color: #000; /* Черный цвет текста */
    }
   }
  </style>
 </head>
 <body>
   <h1>Метод ловли льва в пустыне</h1>
   <h2>Метод последовательного перебора</h2>
   <p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа
   до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на
   ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва.
   Учитывая, что лев может находиться не строго на заданном участке, а одновременно на
   двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W.
   Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина
   льва или, что хуже, только его хвост.</p>
   <p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни
   клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура
   поимки считается завершенной.</p>
 </body>
</html>

В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 1 и рис. 2.

Рис. 1. Страница для отображения в окне браузера

Рис. 2. Страница, предназначенная для печати

Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 2.

Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <link> с атрибутом media, значением которого выступают те же типы, перечисленные в табл. 1.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@media</title>
  <link media="print, handheld" rel="stylesheet" href="print.css">
  <link media="screen" rel="stylesheet" href="main.css">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на КПК. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств.

Спецификация

Спецификация | Статус
Media Queries Level 4 | Рабочий проект
Media Queries | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.2 | 1.3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3.1


@page

Правило @page позволяет задать значение полей при печати документа или для страниц, у которых тип носителя задан как print.

Синтаксис

@page [ { :left | :right | :first } ] { Значения отступов }

Значения

Для установки полей на странице используется универсальное свойство margin или его производные — margin-top, margin-right, margin-bottom и margin-left, задающие соответственно отступ сверху, справа, снизу и слева. Отрицательное значение допускается, но часть страницы может оказаться «отрезанной». Свойства border и padding не применимы.

Ключевое слово :left позволяет задать поля для всех левых страниц, :right — для всех правых, а :first — для первой страницы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@page</title>
  <style>
   @media print { /* Стиль для печати */
    body {
     font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
    }
    h1, h2, p {
     color: #000; /* Черный цвет текста */
    }
   }
   @page :first {
    margin: 1cm; /* Отступы для первой страницы */
   }
   @page :left {
    margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */
   }
   @page :right {
    margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */
   }
  </style>
 </head>
 <body>
  <h1>Метод ловли льва в пустыне</h1>
  <h2>Метод последовательного перебора</h2>
  <p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа
  до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на
  ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва.
  Учитывая, что лев может находиться не строго на заданном участке, а одновременно на
  двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W.
  Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина
  льва или, что хуже, только его хвост.</p>
  <p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни
  клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура
  поимки считается завершенной.</p>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Paged Media Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 2 | 6 | 5 | 19
Android | Firefox Mobile | Opera Mobile | Safari Mobile
 | 19 | 6 | 5


Псевдокласс :active

Псевдокласс :active определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется к ссылкам и кнопкам, но ими не ограничен.

Синтаксис

Селектор:active  { ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>active</title>
  <style>
   a:link {
    color: #0000d0; /* Цвет ссылок */
   }
   a:visited {
    color: #900060; /* Цвет посещенных ссылок */
   }
   a:active {
    color: #f00; /* Цвет активной ссылки */
   }
  </style>
 </head>
 <body>
  <p><a href="task1.html">Вычислить число оборотов двигателя в минуту</a></p>
  <p>Дается: линейка, часы с секундной стрелкой, лист бумаги, нитка,
   карандаш, ножницы.</p>
 </body>
</html>

В данном примере задаётся цвет обычных, посещённых и активных ссылок. Результат примера показан на рис. 1.

Результат использования псевдокласса active

Рис. 1. Результат использования псевдокласса :active

Примечание

Internet Exporer до версии 8 и Opera до версии 7 поддерживают :active только для ссылок.

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera |  | Safari | Firefox
4 | 8 | 1 | 5 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


Псевдоэлемент ::after

Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент ::after работает совместно со свойством content.

Для ::after характерны следующие особенности.

  1. При добавлении ::after к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
  2. При добавлении ::after к строчному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.

Синтаксис

CSS2.1
Селектор:after { content: "текст" }
CSS3
Селектор::after { content: "текст" }

В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>after</title>
  <style>
    p.new::after {
      content: "Новьё!"; /* Добавляемый текст */
      color: #333; /* Цвет текста */
      background-color: #fc0; /* Цвет фона */
      font-size: 90%; /* Размер шрифта */
      padding: 2px; /* Поля вокруг текста */
    }
  </style>
 </head>
 <body>
  <h2>Истории</h2>
  <p class="new">История о том, как необходимо было сделать могилу,
     ее начали копать, а потом закапывать, и что из этого получилось.</p>
  <p>История о том, как возле столовой появились загадочные розовые
     следы с шестью пальцами, и почему это случилось.</p>
 </body>
</html>

В данном примере в конце текстового абзаца, помеченного классом new, выводится определенный текст для привлечения внимания. Результат примера показан на рис. 1.

Результат использования псевдоэлемента ::after

Рис. 1. Результат использования псевдоэлемента ::after

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Animations | Рабочий проект
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
:after | 8 | 1 | 4 | 4 | 1
::after | 9 | 5 | 7 | 4 | 1.5
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
:after | 1 | 1 | 4 | 1
::after | 1 | 1 | 7 | 1


animation

Универсальное свойство которое задаёт сразу несколько параметров анимации.

Краткая информация

Значение по умолчанию
  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation: animation-name || animation-duration || animation-timing-function ||
  animation-delay || animation-iteration-count || animation-direction ||
  animation-fill-mode || animation-play-state

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation</title>
  <style>
   .creature {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #3ac;
    position: relative;
   }
   .creature::before, .creature::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    top: 40px;
    animation: eye 3s ease-in-out infinite;
    -webkit-animation: eye 3s ease-in-out infinite;
   }
   .creature::before { left: 55px; }
   .creature::after { right: 55px; }
   @keyframes eye {
    90% { transform: none; }
    95% { transform: scaleY(0.1); }
   }
   @-webkit-keyframes eye {
    90% { transform: none; }
    95% { transform: scaleY(0.1); }
   }
  </style>
 </head>
 <body>
   <div class="creature"></div>
 </body>
</html>

Объектная модель

Объект.style.animation

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation.

Opera до версии 12.10 поддерживает свойство -o-animation.

Firefox до версии 16 поддерживает свойство -moz-animation.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
10 | 3 | 12 | 12.10 | 4 | 5 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2 | 5 | 16 | 12 | 12.10 | 4


animation-delay

Свойство animation-delay устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую.

Краткая информация

Значение по умолчанию | 0s
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-delay: <время> [,<время>]*

Значения

См. время.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-duration</title>
  <style>
   .warn {
    background: #fc0;
    padding: 10px;
    top: -100px;
    position: absolute;
    left: 0; right: 0;
   }
   .fadeInTop {
    -webkit-animation-name: fadeInTop;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-name: fadeInTop;
    animation-duration: 2s; /* Продолжительность анимации */
    animation-delay: 1s; /* Задержка */
    animation-fill-mode: forwards;
   }
   @-webkit-keyframes fadeInTop {
    from { top: -100px; }
    to { top: 0; }
   }
   @keyframes fadeInTop {
    from {  top: -100px; }
    to {  top: 0; }
   }
  </style>
 </head>
 <body>
  <div class="warn fadeInTop">Вы не учли, что скалярное
  поле необходимо и достаточно!</div>
 </body>
</html>

Объектная модель

Объект.style.animationDelay

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-delay.

Opera до версии 12.10 поддерживает свойство -o-animation-delay.

Firefox до версии 16 поддерживает свойство -moz-animation-delay.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
10 | 3 | 12 | 12.10 | 4 | 5 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2 | 5 | 16 | 12 | 12.10 | 4


animation-direction

Устанавливает направление движения анимации.

Краткая информация

Значение по умолчанию | normal
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-direction: normal | alternate | reverse | alternate-reverse

Значения

normal
Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию.
alternate
Анимация идёт с начала до конца, затем плавно возвращается в исходное положение.
reverse
Анимация идёт с конца цикла, после его завершения возвращается к исходному состоянию.
alternate-reverse

Анимация идёт с конца до начала, затем плавно возвращается в исходное положение.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-direction</title>
  <style>
   .box {
    background: #fc0;
    width: 100px; height: 100px;
    text-align: center;
    position: absolute;
    animation: move 5s infinite;
    -webkit-animation: move 5s infinite;
   }
   .normal {
    animation-direction: normal;
    -webkit-animation-direction: normal;
   }
   .alternate {
     top: 150px;
     animation-direction: alternate;
     -webkit-animation-direction: alternate;
   }
   .reverse {
    top: 300px;
    animation-direction: reverse;
    -webkit-animation-direction: reverse;
   }
   .alternate-reverse {
    top: 450px;
    animation-direction: alternate-reverse;
    -webkit-animation-direction: alternate-reverse;
   }
   @-webkit-keyframes move {
    from { left: 0; }
    to { left: calc(100% - 100px); }
   }
   @keyframes move {
    from { left: 0; }
    to { left: calc(100% - 100px); }
   }
  </style>
 </head>
 <body>
  <div class="box normal">normal</div>
  <div class="box alternate">alternate</div>
  <div class="box reverse">reverse</div>
  <div class="box alternate-reverse">alternate-reverse</div>
 </body>
</html>

В данном примере показано разное движение квадратов от одного края окна браузера до другого.

Объектная модель

объект.style.animationDirection

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-direction.

Opera до версии 12.10 поддерживает свойство -o-animation-direction.

Firefox до версии 16 поддерживает свойство -moz-animation-direction.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera |  | Safari | Firefox
normal, alternate | 10 | 3 | 12 | 12.10 | 4 | 5 | 16
reverse, alternate-reverse | 10 | 19 |  |  |  | 16
 | Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
normal, alternate | 2 | 5 | 16 | 12 | 12.10 | 4
reverse, alternate-reverse |  | 16 |  |  |  |


animation-duration

Задаёт время в секундах или миллисекундах, сколько должен длиться один цикл анимации. По умолчанию значение равно 0s, это означает, что никакой анимации нет.

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

Краткая информация

Значение по умолчанию | 0s
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-duration: <время> [,<время>]*

Значения

См. время.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-duration</title>
  <style>
   .warn {
    background: #fc0;
    padding: 10px;
   }
   .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    animation-name: fadeInLeft;
    animation-duration: 1s;
   }
   @-webkit-keyframes fadeInLeft {
    from {
     opacity: 0;
     transform: translateX(-2000px);
    }
    to {
     opacity: 1;
     transform: none;
    }
   }
   @keyframes fadeInLeft {
    from {
     opacity: 0;
     transform: translateX(-2000px);
    }
    to {
     opacity: 1;
     transform: none;
    }
   }
  </style>
 </head>
 <body>
  <div class="warn fadeInLeft">Вы не учли, что скалярное
  поле необходимо и достаточно!</div>
 </body>
</html>

Объектная модель

Объект.style.animationDuration

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-duration.

Opera до версии 12.10 поддерживает свойство -o-animation-duration.

Firefox до версии 16 поддерживает свойство -moz-animation-duration.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
10 | 3 | 12 | 12.10 | 4 | 5 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2 | 5 | 16 | 12 | 12.10 | 4


animation-iteration-count

Свойство определяет, сколько раз проигрывать цикл анимации до её остановки.

Краткая информация

Значение по умолчанию | 1
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-iteration-count: infinite | <число>

Значения

infinite
Анимация повторяется бесконечно.
<число>
Сколько раз должна повторяться анимация. Отрицательные значения не допустимы. Можно использовать числа меньше нуля, для примера 0.5 будет означать половину цикла анимации.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-iteration-count</title>
  <style>
   .blink {
    -webkit-animation: blink 1s;
    -webkit-animation-iteration-count: infinite;
    animation: blink 1s;
    animation-iteration-count: infinite;
   }
   @-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
   }
   @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
   }
  </style>
 </head>
 <body>
  <div class="blink">Мигающий текст привлекает к себе внимание, не правда ли.</div>
 </body>
</html>

В данном примере установлено бесконечное мигание выбранного текста.

Объектная модель

объект.style.animationIterationCount

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-iteration-count.

Opera до версии 12.10 поддерживает свойство -o-animation-iteration-count.

Firefox до версии 16 поддерживает свойство -moz-animation-iteration-count.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
10 | 3 | 12 | 12.10 | 4 | 5 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2 | 5 | 16 | 12 | 12.10 | 4


animation-fill-mode

Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.

К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-fill-mode: none | forwards | backwards | both

Значения

none
К элементу не применяются какие-либо стили.
forwards
К элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count (табл. 1).

Табл. 1. Последний ключевой кадр
animation-direction | animation-iteration-count | Значение
normal | любое число | 100% или to
reverse | любое число | 0% или from
alternate | чётное число | 0% или from
alternate | нечётное число | 100% или to
alternate-reverse | чётное число | 100% или to
alternate-reverse | нечётное число | 0% или from
backwards

К элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction (табл. 2).

Табл. 2. Первый ключевой кадр
animation-direction | Значение
normal или alternate | 0% или from
reverse или alternate-reverse | 100% или to
both
К элементу применяются оба правила, как для forwards, так и для backwards.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-fill-mode</title>
  <style>
   .wheel {
    animation: wheel 3s 1s;
    animation-fill-mode: both;
    -webkit-animation: wheel 3s 1s;
    -webkit-animation-fill-mode: both;
   }
   @keyframes wheel {
    from { transform: translateX(0) rotate(0);}
    to { transform: translateX(450px) rotate(2turn); }
   }
   @-webkit-keyframes wheel {
    from { transform: translateX(0) rotate(0);}
    to { transform: translateX(450px) rotate(2turn); }
   }
  </style>
 </head>
 <body>
   <img src="images/12.png" alt="" class="wheel">
 </body>
</html>

В данном примере показано изображение ожидает одну секунду, затем начинает вращаться и двигаться вправо. По окончанию анимации колесо остаётся в крайнем правом положении.

Объектная модель

Объект.style.animationFillMode

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-fill-mode.

Opera до версии 12.10 поддерживает свойство -o-animation-fill-mode.

Firefox до версии 16 поддерживает свойство -moz-animation-fill-mode.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
10 | 3 | 12 | 12.10 | 4 | 5 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2 | 5 | 16 | 12 | 12.10 | 4


animation-name

Устанавливает одну или несколько анимаций, которые применяются к элементу. Представляет собой имя связанное с правилом @keyframes, оно в свою очередь задаёт последовательность движения.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-name: none | <идентификатор> [, none | <идентификатор>]*

Значения

none
Отключает анимацию.
<идентификатор>

Текстовая строка, которая связана с анимацией. Идентификатор должен начинаться с латинской буквы или подчёркивания (_), также может содержать цифры от 0 до 9 и дефис (-). Запрещено использовать зарезервированные ключевые слова none, unset, inherit, initial.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-name</title>
  <style>
   .spaceOutUp {
    -webkit-animation-name: spaceOutUp;
    animation-name: spaceOutUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
   }
   @-webkit-keyframes spaceOutUp {
    from {
     opacity: 0;
     -webkit-transform-origin: 50% 0%;
     -webkit-transform: scale(.2) translate(0%, -200%);
    }
    to {
     opacity: 1;
     -webkit-transform-origin: 50% 0%;
     -webkit-transform: scale(1) translate(0%, 0%);
    }
   }
   @keyframes spaceOutUp {
    from {
     opacity: 0;
     transform-origin: 50% 0%;
     transform: scale(.2) translate(0%, -200%);
    }
    to {
     opacity: 1;
     transform-origin: 50% 0%;
     transform: scale(1) translate(0%, 0%);
    }
   }
  </style>
 </head>
 <body>
  <img src="images/thumb1.jpg" alt="" class="spaceOutUp">
 </body>
</html>

Объектная модель

Объект.style.animationName

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-name.

Opera до версии 12.10 поддерживает свойство -o-animation-name.

Firefox до версии 16 поддерживает свойство -moz-animation-name.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
10 | 3 | 12 | 12.10 | 4 | 5 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2 | 5 | 16 | 12 | 12.10 | 4


animation-play-state

Свойство определяет, проигрывать анимацию или поставить её на паузу. При продолжении установленной на паузе анимации она начинается с того момента где была остановлена.

Краткая информация

Значение по умолчанию | running
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-play-state: running | paused

Значения

running
Проигрывать анимацию.
paused
Поставить анимацию на паузу.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-play-state</title>
  <style>
   .marquee {
    overflow: hidden; /* Скрываем строку за её пределами */
    white-space: nowrap; /* Запрещаем переносы слов */
    -webkit-animation: marquee 30s linear infinite;
    animation: marquee 30s linear infinite;
   }
   .marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused; /* Пауза */
   }
   @-webkit-keyframes marquee {
    from { text-indent: 100%; }
    to { text-indent: -100%; }
   }
   @keyframes marquee {
    from { text-indent: 100%; }
    to { text-indent: -100%; }
   }
  </style>
 </head>
 <body>
  <div class="marquee">Современная ситуация решительно заполняет
  трагический дедуктивный метод, ломая рамки
  привычных представлений.</div>
 </body>
</html>

В данном примере при наведении на текст курсора мыши движение бегущей строки останавливается. Стоит только убрать курсор и анимация продолжится с того же самого места.

Объектная модель

Объект.style.animationPlayState

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-play-state.

Opera до версии 12.10 поддерживает свойство -o-animation-play-state.

Firefox до версии 16 поддерживает свойство -moz-animation-play-state.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
10 | 3 | 12 | 12.10 | 4 | 5 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2 | 5 | 16 | 12 | 12.10 | 4


animation-timing-function

Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами. Она представляет собой математическую функцию, показывающую, как быстро по времени меняется значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).

Рис. 1. Вид функции

Краткая информация

Значение по умолчанию | ease
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear |
     step-start | step-end | steps | cubic-bezier

Значения

ease
Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
ease-in
Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
ease-out
Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
ease-in-out
Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
linear
Одинаковая скорость от начала и до конца.
step-start
Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
step-end
Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
steps
Ступенчатая функция, имеющая заданное число шагов.

animation-timing-function: steps(<число>, start | end)

Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию.
cubic-bezier
Задаёт функцию движения в виде кривой Безье.

ease

ease-in

ease-out

ease-in-out

linear

step-start

step-end

steps(2, start)

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-timing-function</title>
  <style>
   .progress {
    background: #333; /* Фон */
    border: 2px solid #333; /* Рамка */
    height: 20px; /* Высота */
    position: relative; /* Относительное позиционирование */
   }
   .progress::before{
    animation: progress 5s;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    -webkit-animation-name: progress;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 5s;
    -webkit-animation-fill-mode: forwards;
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    height: 100%;
    background: #FFA600; /* Фон */
   }
   @-webkit-keyframes progress {
    from { width: 0; }
    to { width: 100%; }
   }
   @keyframes progress {
    from { width: 0; }
    to { width: 100%; }
   }
  </style>
 </head>
 <body>
  <div class="progress"></div>
 </body>
</html>

Объектная модель

Объект.style.animationTimingFunction

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-timing-function.

Opera до версии 12.10 поддерживает свойство -o-animation-timing-function.

Firefox до версии 16 поддерживает свойство -moz-animation-timing-function.

Спецификация

Спецификация | Статус
CSS Animations | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
10 | 3 | 12 | 12.10 | 4 | 5 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2 | 5 | 16 | 12 | 12.10 | 4


background

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Краткая информация

Значение по умолчанию | transparent || none || repeat || scroll || 0% 0%
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat]

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat]

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

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(images/hand.png) repeat-y #fc0; /* Цвет фона,
                                                    путь к фоновому изображению и
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>

  <div>
   Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie
   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
   iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
   te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
   ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te
   feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
  </div>

 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Вид фона и фонового рисунка в блоке фиксированного размера

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(images/hand.png) repeat-y,
                #fc0 url(images/bg-right.png) repeat-y 100% 0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Объектная модель

Объект.style.background

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
один фон | 4 | 1 | 3.5 | 1 | 1
несколько фонов | 9 | 1 | 10.5 | 1.3 | 3.6
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
один фон | 2.1 | 1 | 10 | 3.2
несколько фонов | 2.1 | 1 | 10 | 3.2


background-attachment

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.

Краткая информация

Значение по умолчанию | scroll
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

background-attachment: fixed | scroll | local[, fixed | scroll | local]*

Значения

fixed
Делает фоновое изображение элемента неподвижным.
scroll
Позволяет перемещаться фону вместе с содержимым.
local
Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-attachment</title>
  <style>
   body {
    background-image: url(images/help.png); /* Путь к фоновому изображению */
    background-attachment: fixed; /* Фиксируем фон веб-страницы */
   }
  </style>
 </head>
 <body>
  <div style="height:2000px">
    Пример текста
  </div>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-attachment</title>
  <style>
   body {
    background-image: url(images/pattern-left.png), url(images/pattern-right.png);
    background-repeat: repeat-y, repeat-y;
    background-position: left, right;
    background-attachment: fixed, fixed;
   }
  </style>
 </head>
 <body>
  <div style="height:2000px">
  </div>
 </body>
</html>

Объектная модель

Объект.style.backgroundAttachment

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
один фон | 4 | 1 | 3.5 | 1 | 1
несколько фонов | 9 | 1 | 10.5 | 1.3 | 3.6
local | 9 | 4 | 10.5 | 5 | 25
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
один фон | 2.1 | 1 | 10 | 3.2
несколько фонов | 2.1 | 1 | 10 | 3.2
local | 2.1 | 25 | 10 | 3.2


background-clip

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

Краткая информация

Значение по умолчанию | border-box
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

background-clip: [padding-box | border-box | content-box]
   [, [padding-box | border-box | content-box]]

Значения

padding-box
Фон отображается внутри границ.
border-box
Фон выводится под границами.
content-box
Фон отображается только внутри контента.

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

Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселей показан на рис. 1.

Рис. 1а | Рис. 1а | Рис. 1а
padding-box | border-box | content-box

Рис. 1. Результат применения разных значений

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
   .example {
    background: #5f392f url(images/gear.png); /* Фоновый рисунок */
    border: 10px dotted red; /* Параметры рамки */
    background-clip: border-box; /* Фон под рамкой */
    padding: 10px; /* Поля */
    color: #fff; /* Цвет текста */
    min-height: 48px; /* Минимальная высота */
   }
  </style>
 </head>
 <body>
  <div class="example">Содержимое страницы</div>
 </body>
</html>

Объектная модель

Объект.style.backgroundClip

Примечание

Firefox до версии 4 поддерживает свойство -moz-background-clip и значения padding и border.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
border-box, padding-box | 9 | 1 | 10.5 | 3 | 4
content-box | 9 | 1 | 12 | 3 | 4
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
border-box, padding-box | 4.1 | 14 | 12.1 | 3.2
content-box | 4.1 | 14 | 12.1 | 3.2


background-color

Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.

Краткая информация

Значение по умолчанию | transparent
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

background-color: <цвет> | transparent

Значения

См. цвет

transparent
Устанавливает прозрачный фон.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-color</title>
  <style>
   body{
    background-color: #3366CC; /* Цвет фона веб-страницы */
   }
   h1 {
    background-color: RGB(249, 201, 16); /* Цвет фона под заголовком */
   }
   p {
    background-color: maroon; /* Цвет фона под текстом параграфа */
    color: white; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета. Результат примера показан на рис. 1.

Рис. 1. Применение background-color

Объектная модель

Объект.style.backgroundColor

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


background-image

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

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

background-image: url(путь к файлу) | none[, url(путь к файлу) | none]*

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-image</title>
  <style>
   body {
    background-image: url(images/bg.jpg); /* Путь к фоновому изображению */
    background-color: #c7b39b; /* Цвет фона */
   }
  </style>
   </head>
 <body>
  <p>...</p>
 </body>
</html>

Объектная модель

Объект.style.backgroundImage

Примечание

Internet Explorer до версии 7 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout. Если у элемента нет hasLayout, свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные (dashed или dotted), а не сплошные.

Если для элемента значение overflow установлено как scroll или auto, в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.

Если фон задаётся для строки таблицы (элемент <tr>), то Chrome и Safari отображают его не так, как предписывает спецификация, а именно для каждой ячейки отдельно. В то время как браузер должен показывать цельный фон для всего ряда. В примере ниже приведён код демонстрирующий ошибку.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон для TR</title>
  <style>
   table {width: 100%; border-spacing: 0; }
   tr { background: #f6d654 url(images/orangebg.png) repeat-y; }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>1</td><td>2</td><td>3</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).

Рис. 1. Повторение фона для каждой ячейки

Рис. 2. Фон для всей строки

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
один фон | 4 | 1 | 3.5 | 1 | 1
несколько фонов | 9 | 1 | 10.5 | 1.3 | 3.6
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
один фон | 2.1 | 1 | 10 | 3.2
несколько фонов | 2.1 | 1 | 10 | 3.2


background-origin

Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.

Краткая информация

Значение по умолчанию | padding-box
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

background-origin: [padding-box | border-box | content-box]
  [, [padding-box | border-box | content-box]]*

Значения

padding-box
Фон позиционируется относительно края элемента с учетом толщины границы.
border-box
Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box
Фон позиционируется относительно содержимого элемента.

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

Результат использования значений свойства background-origin для элемента с рамкой толщиной 20 пикселов показан на рис. 1.

Рис. 1а | Рис. 1а | Рис. 1а
padding-box | border-box | content-box

Рис. 1. Результат применения разных значений

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-origin</title>
  <style>
   .example {
    border: 20px solid #fc0;
    padding: 20px;
    height: 200px;
    background: url(images/figure.jpg) no-repeat;
    background-origin: content-box;
   }
  </style>
 </head>
 <body>
  <div class="example">...</div>
 </body>
</html>

Объектная модель

Объект.style.backgroundOrigin

Примечание

Если фон задан один, а значений background-origin несколько, то браузеры покажут разное поведение. Firefox и Opera используют первое значение, Chrome и Safari создадут несколько фоновых рисунков.

Safari до версии 5, Android до версии 3 поддерживают свойство -webkit-background-origin.

Opera до версии 10.5 поддерживает свойство -o-background-origin.

Firefox до версии 4 поддерживает свойство -moz-background-origin.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari |  | Firefox
9 | 1 | 10.1 | 10.5 | 3.1 | 5 | 3.6 | 4
Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
2.1 | 3 | 3.6 | 4 | 10.5 | 3.2 | 5


background-position

Задаёт начальное положение фонового изображения, установленного с помощью свойства background-image. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Краткая информация

Значение по умолчанию | 0% 0%
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

background-position: <позиция>[, <позиция>]*

Здесь:

<позиция> = [left | center | right | <проценты> | <размер>] || [top | center | bottom | <проценты> | <размер>].

Значения

У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселях или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задаётся положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

  • top left = left top = 0% 0% (в левом верхнем углу)
  • top = top center = center top = 50% 0% (по центру вверху)
  • right top = top right = 100% 0% (в правом верхнем углу)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • center = center center = 50% 50% (по центру)
  • right = right center = center right = 100% 50% (по правому краю и по центру)
  • bottom left = left bottom = 0% 100% (в левом нижнем углу)
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу)
  • bottom right = right bottom = 100% 100% (в правом нижнем углу)

В скобках указано, где располагается фоновый рисунок относительно контейнера.

Пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>background-position</title>
  <style type="text/css">
   html {
    height: 100%; /* Высота страницы */
   }
   body {
    background-image: url(images/mybg.png); /* Путь к фоновому рисунку */
    background-position: right bottom; /* Положение фона */
    background-repeat: no-repeat; /* Отменяем повторение фона */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-position</title>
  <style>
   body {
    background-image: url(images/pattern-left.png), url(images/pattern-right.png);
    background-repeat: repeat-y, repeat-y;
    background-position: left, right;
   }
  </style>
 </head>
 <body>
  <div style="height:2000px">
  </div>
 </body>
</html>

Объектная модель

Объект.style.backgroundPosition

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
один фон | 4 | 1 | 3.5 | 1 | 1
несколько фонов | 9 | 1 | 10.5 | 1.3 | 3.6
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
один фон | 2.1 | 1 | 10 | 3.2
несколько фонов | 2.1 | 1 | 10 | 3.2


background-repeat

Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Краткая информация

Значение по умолчанию | repeat
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

background-repeat: <повторение> [ , <повторение> ]*

Здесь:

<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.

Значения

no-repeat
Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.
repeat
Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.
repeat-x
Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.
repeat-y
Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.
space
Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
round
Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-repeat</title>
  <style>
   body {
    background-image: url(images/bg_grey.png); /* Путь к фоновому рисунку */
    background-position: left bottom; /* Положение фона */
    background-repeat: repeat-x; /* Повторяем фон по горизонтали */
   }
  </style>
 </head>
 <body>
  <p>Даже опытному верстальщику приходится иногда смотреть свой код
  на наличие опечаток и ошибок. Так что не брезгуй проверять код валидатором,
  это поможет избежать множества ляпов в будущем.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Повторение фона по горизонтали

Рис. 1. Повторение фона по горизонтали

Сама фоновая картинка приведена на рис. 2.

Фон для блока

Рис. 2. Фон для блока

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-repeat</title>
  <style>
   body {
    background-image: url(images/pattern-left.png), url(images/pattern-right.png);
    background-position: left, right;
    background-repeat: repeat-y, repeat-y;
   }
  </style>
 </head>
 <body>
  <div style="height:2000px">
  </div>
 </body>
</html>

Объектная модель

Объект.style.backgroundRepeat

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
один фон | 4 | 1 | 3.5 | 1 | 1
несколько фонов | 9 | 1 | 10.5 | 1.3 | 3.6
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
один фон | 2.1 | 1 | 10 | 3.2
несколько фонов | 2.1 | 1 | 10 | 3.2


background-size

Масштабирует фоновое изображение согласно заданным размерам.

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

background-size: [ <размер> | <проценты> | auto ]{1,2} | cover | contain

Значения

<размер>
Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>
Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-size</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    border: 2px solid #000; /* Параметры рамки */
    background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */
    background-size: cover; /* Масштабируем фон */
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

Объектная модель

Объект.style.backgroundSize

Примечание

Safari до версии 4.1, Chrome до версии 3.0 и Android используют свойство -webkit-background-size.

Opera до версии 10.53 использует свойство -o-background-size.

Firefox до версии 4 использует свойство -moz-background-size.

Opera 9.5 некорректно устанавливает положение фиксированного фона.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera |  | Safari |  | Firefox
9 | 1 | 3 | 9 | 10.53 | 3 | 4.1 | 3.6 | 4
Android | Firefox Mobile |  | Opera Mobile | Safari Mobile
2.3 | 1 | 4 | 11 | 5.1


Псевдоэлемент ::before

Псевдоэлемент ::before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

Для ::before характерны следующие особенности.

  1. При добавлении ::before к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
  2. При добавлении ::before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
  3. ::before наследует стиль от элемента, к которому он добавляется.

Синтаксис

CSS2.1
Селектор:before { content: "текст" }
CSS3
Селектор::before { content: "текст" }

В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>before</title>
  <style>
   li::before {
     content: "¶ "; /* Добавляем желаемый символ перед элементом списка */
   }
   li {
     list-style: none; /* Убираем исходные маркеры */
   }
  </style>
 </head>
 <body>
   <ul>
     <li>Альфа</li>
     <li>Бета</li>
     <li>Гамма</li>
   </ul>
 </body>
</html>

В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента ::before выводится символ ¶. Результат примера продемонстрирован на рис. 1.

Использование псевдоэлемента ::before в списках

Рис. 1. Использование псевдоэлемента ::before в списках

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Animations | Рабочий проект
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
:before | 8 | 1 | 4 | 4 | 1
::before | 9 | 5 | 7 | 4 | 1.5
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
:before | 1 | 1 | 4 | 1
::before | 1 | 1 | 7 | 1


border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Краткая информация

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border: [border-width || border-style || border-color]

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border</title>
  <style>
   .brd {
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div class="brd">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat.
   </div>
 </body>
</html>

В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

Применение свойства border

Рис. 2. Применение свойства border

Объектная модель

Объект.style.border

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-bottom

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

Краткая информация

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-bottom: [border-bottom-width || border-bottom-style || border-bottom-color]

Значения

Значение border-bottom-width определяет толщину границы. Для управления её видом предоставляется несколько значений свойства border-bottom-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-bottom-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom</title>
  <style>
   .panel {
    background: #ccc; /* Цвет фона */
   }
   .panel P.content {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    border-top: 2px dotted white; /* Параметры линии вверху */
   }
   .panel P.title {
    font-family: sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    background: maroon; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom: 2px solid white; /* Параметры линии внизу */
   }
  </style>
 </head>
 <body>
  <div class="panel">
  <p class="title">Lorem ipsum dolor sit amet</p>
  <p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
     sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
     aliguam erat volutpat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства border-bottom

Рис. 2. Применение свойства border-bottom

Объектная модель

Объект.style.borderBottom

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-bottom-color

Устанавливает цвет границы внизу элемента.

Краткая информация

Значение по умолчанию | Значение цвета, заданное через color
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-bottom-color: <цвет> | transparent

Значения

<цвет>
См. цвет
transparent
Устанавливает прозрачный цвет.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-color</title>
  <style>
   #panel {
    background: #ccc; /* Цвет фона */
   }
   #panel p {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
   }
   #title {
    background: navy; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom-width: 2px; /* Толщина линии внизу */
    border-bottom-style: solid; /* Стиль линии внизу */
    border-bottom-color: white; /* Цвет линии внизу */
   }
  </style>
 </head>
 <body>

  <div id="panel">
  <p id="title">Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
     sed diem nonummy nibh euismod tincidunt ut lacreet dolore
     magna aliguam erat volutpat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства border-bottom-color

Рис. 1. Применение свойства border-bottom-color

Объектная модель

Объект.style.borderBottomColor

Примечание

Internet Explorer до версии 6.0 включительно не поддерживает значение transparent.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-bottom-left-radius

Устанавливает радиус скругления левого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-bottom-left-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-left-radius</title>
  <style>
   .radius {
    background: #fc0;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div style="border-bottom-left-radius: 20px" class="radius">
   border-bottom-left-radius: 20px
  </div>
  <div style="border-bottom-left-radius: 70px 40px" class="radius">
   border-bottom-left-radius: 70px 40px
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Радиус скругления в браузере Safari

Рис. 2. Радиус скругления в браузере Safari

Объектная модель

Объект.style.borderBottomLeftRadius

Примечание

Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют нестандартное свойство -webkit-border-bottom-left-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome |  | Opera | Safari |  | Firefox
Базовый синтаксис | 9 | 1 | 4 | 10.5 | 3 | 5 | 1 | 4
Проценты | 9 | 4 |  | 10.5 | 5 |  | 4
Эллиптические уголки | 9 | 1 |  | 10.5 | 3 |  | 3.5
 | Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
Базовый синтаксис | 1 | 2.1 | 1 | 4 | 10.5 | 3 | 5
Проценты | 2.1 |  | 4 |  | 10.5 | 5
Эллиптические уголки | 2.1 |  | 3.5 |  | 10.5 | 3


border-bottom-right-radius

Устанавливает радиус скругления правого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-bottom-right-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-right-radius</title>
  <style>
   .radius {
    background: #fc0;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div style="border-bottom-right-radius: 20px" class="radius">
   border-bottom-right-radius: 20px
  </div>
  <div style="border-bottom-right-radius: 70px 40px" class="radius">
   border-bottom-right-radius: 70px 40px
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Радиус скругления в браузере Safari

Рис. 2. Радиус скругления в браузере Safari

Объектная модель

Объект.style.borderBottomRightRadius

Примечание

Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют нестандартное свойство -webkit-border-top-left-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-topleft.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome |  | Opera | Safari |  | Firefox
Базовый синтаксис | 9 | 1 | 4 | 10.5 | 3 | 5 | 1 | 4
Проценты | 9 | 4 |  | 10.5 | 5 |  | 4
Эллиптические уголки | 9 | 1 |  | 10.5 | 3 |  | 3.5
 | Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
Базовый синтаксис | 1 | 2.1 | 1 | 4 | 10.5 | 3 | 5
Проценты | 2.1 |  | 4 |  | 10.5 | 5
Эллиптические уголки | 2.1 |  | 3.5 |  | 10.5 | 3


border-bottom-style

Устанавливает стиль границы внизу элемента.

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

Значения

none
Линия не отображается и значение её толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-style</title>
  <style>
   #panel {
    background: #ccc; /* Цвет фона */
   }
   #panel p {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
   }
   #title {
    background: navy; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom-width: 2px; /* Толщина линии внизу */
    border-bottom-style: solid; /* Стиль линии внизу */
    border-bottom-color: white; /* Цвет линии внизу */
   }
  </style>
 </head>
 <body>

  <div id="panel">
  <p id="title">Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  </div>

 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства border-bottom-style

Рис. 2. Применение свойства border-bottom-style

Объектная модель

Объект.style.borderBottomStyle

Примечание

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-bottom-width

Устанавливает толщину границы внизу элемента.

Краткая информация

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-bottom-width: значение | thin | medium | thick

Значения

Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-width</title>
  <style>
   h1 {
    border-color: #ccc; /* Цвет границы */
    border-style: double; /* Стиль границы */
    border-bottom-width: 7px; /* Толщина линии внизу текста */
    border-right-width: 7px; /* Толщина линии справа от текста */
    padding-left: 5px; /* Отступ слева от текста */
   }
  </style>
 </head>
 <body>

  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства border-bottom-width

Рис. 1. Применение свойства border-bottom-width

Объектная модель

Объект.style.borderBottomWidth

Примечание

Браузер Internet Explorer до версии 7 при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7 включительно не поддерживает значения hidden.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 8 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-collapse

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

Рис. 1а | Рис. 1б
а | б

Рис. 1. Вид таблицы при использовании свойства border-collapse

Краткая информация

Значение по умолчанию | separate
Наследуется | Нет
Применяется | К элементу <table> или к элементам, у которых значение display установлено как table или inline-table

Синтаксис

border-collapse: collapse | separate

Значения

collapse
Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border: 4px double black; /* Рамка вокруг таблицы */
    border-collapse: collapse; /* Отображать только одинарные линии */
   }
   th {
    text-align: left; /* Выравнивание по левому краю */
    background: #ccc; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг содержимого ячеек */
    border: 1px solid black; /* Граница вокруг ячеек */
   }
   td {
    padding: 5px; /* Поля вокруг содержимого ячеек */
    border: 1px solid black; /* Граница вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>&nbsp;</th><th>2013</th>
    <th>2014</th><th>2015</th>
   </tr>
   <tr>
    <td>Нефть</td><td>43</td>
    <td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Золото</td><td>29</td>
    <td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Дерево</td><td>38</td>
    <td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2.

Вид таблицы при использовании свойства border-collapse

Рис. 2. Вид таблицы при использовании свойства border-collapse

Объектная модель

Объект.style.borderCollapse

Примечание

Internet Explorer до версии 8.0 не отменяет действие атрибута cellspacing.

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5 | 1 | 4 | 1.2 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.3 | 1 | 11 | 3


border-color

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

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-color: [<цвет> | transparent] {1,4}

Значения

<цвет>
См. цвет.
transparent
Устанавливает прозрачный цвет.

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

Табл. 1. Изменение цвета в зависимости от числа значений
Число значений | Результат
1 | Цвет границы будет установлен для всех сторон элемента.
2 | Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3 | Первое значение задаёт цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 | Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-color</title>
  <style>
   h1 {
    border-color: red white; /* Цвет границы */
    border-style: solid; /* Стиль границы */
   }
   p {
    border-color: #008a77; /* Цвет границы */
    border-style: solid; /* Стиль границы */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>

  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Использование свойства border-color

Рис. 1. Использование свойства border-color

Объектная модель

Объект.style.borderColor

Примечание

Internet Explorer до версии 7.0 не поддерживает значение transparent.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-image

Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, за исключением тех, у кого border-collapse задан как collapse

Синтаксис

border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] &&
  [stretch | repeat | round]{0,2}

Значения

none
Не отображает рисованную рамку, используется установленный стиль границы.
URL
Путь к графическому файлу. Обязательный параметр.

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

Изображение для создания рамки

Рис. 1. Изображение для создания рамки

<число>

Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселях, задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px).На рис. 2 красными линиями выделены необходимые для создания рамки области.

Деление исходного изображения на области

Рис. 2. Деление исходного изображения на области

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Табл. 1. Зависимость от числа значений
Число значений | Результат
1 | Устанавливает границы одинаковой толщины на каждой стороне рисунка.
2 | Первое значение устанавливает высоту верхней и нижней границы, второе — левой и правой.
3 | Первое значение определяет высоту верхней границы, второе — левой и правой, а третье — высоту нижней границы.
4 | Поочерёдно устанавливается размеры верхней, правой, нижней и левой границы.
<проценты>
Аналогично <числу>, но значения задаются в процентах. Тот или другой параметр обязателен.
<толщина>
Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогом border-width и использует тот же синтаксис.
stretch
Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat
Повторяет рисунок границы.
round
Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Влияние этих параметров на вид рамки показано на рис. 3.

stretch | repeat | round
stretch | repeat | round

Рис. 3. Результат использования параметров stretch, repeat и round

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-image</title>
  <style>
   div {
    border: 30px solid #40c4c8;
    padding: 20px;
    border-image: url(images/bg-image.png) 30 round round;
   }
  </style>
 </head>
 <body>
   <div>Витраж представляет собой композицию сделанную из
   множества цветных стекол обрамлённых проволокой и наиболее
   эффектно смотрится при прохождении через него солнечного
   или искусственного света.</div>
 </body>
</html>

Результат примера показан на рис. 1.

Вид рамки в браузере Chrome

Рис. 4. Вид рамки в браузере Chrome

Объектная модель

Объект.style.borderImage

Примечание

Firefox до версии 15.0 поддерживает свойство -moz-border-image.

Safari до версии 6.0, Chrome до версии 15.0, Android до версии 4.0 поддерживают свойство -webkit-border-image.

Opera до версии 15.0 поддерживает свойство -o-border-image.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera |  | Safari |  | Firefox
11 | 7 | 16 | 10.5 | 15 | 3 | 6 | 3.5 | 15
Android |  | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2.1 | 4 | 3.5 | 15 | 11 | 16 | 3.2 | 6


border-left

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

Краткая информация

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-left: [border-left-width || border-left-style || border-left-color]

Значения

Значение border-left-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-left-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-left-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-left</title>
  <style>
   .line {
    border-left: 2px dotted green; /* Линия слева от текста */
    padding-left: 10px; /* Расстояние между линией и текстом */
    margin-left: 10px; /* Расстояние от левого края до линии */
   }
  </style>
 </head>
 <body>
  <div class="line">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
   ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства border-left

Рис. 2. Применение свойства border-left

Объектная модель

Объект.style.borderLeft

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-left-color

Задаёт цвет границы слева от элемента.

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-left-color: <цвет> | transparent

Значения

<цвет>
См. цвет
transparent
Устанавливает прозрачный цвет.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-left-color</title>
  <style>
   .line {
    border-left-color: #fc0; /* Цвет линии слева */
    border-left-style: solid; /* Стиль линии */
    border-left-width: 7px; /* Толщина линии */
    padding-left: 10px; /* Расстояние между линией и текстом */
   }
  </style>
 </head>
 <body>
  <div class="line">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
   sed diem nonummy nibh euismod tincidunt ut lacreet dolore
   magna aliguam erat volutpat. Ut wisis enim ad minim veniam,
   quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат использования border-left-color

Рис. 1. Результат использования border-left-color

Объектная модель

Объект.style.borderLeftColor

Примечание

Internet Explorer до версии 6.0 включительно не поддерживает значение transparent.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-left-style

Устанавливает стиль границы слева от элемента.

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

Значения

none
Линия не отображается и значение её толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-left-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае левая граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-left-style</title>
  <style>
   .line {
    border-left-color: red; /* Цвет линии слева */
    border-left-style: double; /* Стиль линии */
    border-left-width: 7px;  /* Толщина линии */
    padding-left: 10px;  /* Расстояние между линией и текстом */
   }
  </style>
 </head>
 <body>
  <div class="line">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Использование свойства border-left-style

Рис. 2. Использование свойства border-left-style

Объектная модель

Объект.style.borderLeftStyle

Примечание

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-left-width

Устанавливает толщину границы слева от элемента.

Краткая информация

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-left-width: <размер> | thin | medium | thick

Значения

Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину границы слева. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-left-width</title>
  <style>
   .line {
    border-left-color: red; /* Цвет линии слева */
    border-left-style: double; /* Стиль линии */
    border-left-width: thick; /* Толщина линии */
    padding-left: 10px; /* Расстояние между линией и текстом */
   }
  </style>
 </head>
 <body>
  <div class="line">
  <h3>Обратите внимание!</h3>
  <p>В наши расчеты не входит задача взорвать весь город, поэтому
     будьте аккуратнее, когда начнете пересыпать ядерное топливо из
     мешка. Чтобы не загрязнить комнату, не забудьте положить
     на пол газету.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Использование свойства border-left-width

Рис. 1. Использование свойства border-left-width

Объектная модель

Объект.style.borderLeftWidth

Примечание

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 8 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-radius

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам, за исключением таблиц с border-collapse: collapse

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значений | Результат
1 | Радиус указывается для всех четырех уголков.
2 | Первое значение задаёт радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 | Первое значение устанавливает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

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

Радиус скругления для создания разных типов уголков

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 15px; /* Поля вокруг текста */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head>
 <body>
  <div style="border-radius: 50px 0 0 50px;" class="radius">
   border-radius: 50px 0 0 50px;
  </div>
  <div style="border-radius: 40px 10px" class="radius">
   border-radius: 40px 10px;
  </div>
  <div style="border-radius: 10em/1em;" class="radius">
   border-radius: 13em/3em;
  </div>
  <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius">
   border-radius: 13em 0.5em/1em 0.5em;
  </div>
  <div style="border-radius: 8px;" class="radius">
   border-radius: 8px;
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Радиусы скругления в браузере Safari

Рис. 2. Радиусы скругления в браузере Safari

Объектная модель

Объект.style.borderRadius

Примечание

Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют свойство -webkit-border-radius.

Firefox до версии 4.0 использует свойство -moz-border-radius.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome |  | Opera | Safari |  | Firefox
Базовый синтаксис | 9 | 1 | 4 | 10.5 | 3 | 5 | 1 | 4
Проценты | 9 | 4 |  | 10.5 | 5 |  | 4
Эллиптические уголки | 9 | 1 |  | 10.5 | 3 |  | 3.5
 | Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
Базовый синтаксис | 1 | 2.1 | 1 | 4 | 10.5 | 3 | 5
Проценты | 2.1 |  | 4 |  | 10.5 | 5
Эллиптические уголки | 2.1 |  | 3.5 |  | 10.5 | 3


border-right

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

Краткая информация

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-right: [border-right-width || border-right-style || border-right-color]

Значения

Значение border-right-width определяет толщину границы. Для управления её видом предоставляется несколько значений свойства border-right-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-right-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-right</title>
  <style>
   .line {
    border-left: 1px solid red; /* Линия слева от текста */
    border-right: 1px solid red; /* Линия справа от текста */
    padding: 0 10px;  /* Расстояние между линией и текстом */
    margin: 0 10%; /* Отступы от края до линии */
   }
  </style>
 </head>
 <body>
  <div class="line">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение border-right

Объектная модель

Объект.style.borderRight

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-right-color

Задаёт цвет границы справа от элемента.

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-right-color: <цвет> | transparent

Значения

<цвет>
См. цвет.
transparent
Устанавливает прозрачный цвет.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-right-color</title>
  <style>
   .line {
    border-right-color: navy; /* Цвет линии справа */
    border-right-style: dotted; /* Стиль линии */
    border-right-width: 3px;  /* Толщина линии */
    padding-right: 10px;  /* Расстояние между линией и текстом */
    margin-right: 100px; /* Отступ справа */
   }
  </style>
 </head>
 <body>
  <div class="line">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства border-right-color

Рис. 1. Применение свойства border-right-color

Объектная модель

Объект.style.borderRightColor

Примечание

Internet Explorer до версии 6.0 включительно не поддерживает значение transparent.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-right-style

Устанавливает стиль границы справа от элемента.

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-right-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

Значения

none
Линия не отображается и значение её толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-right-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае правая граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрёхмерная линия.
outset
Псевдотрёхмерная линия.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-right-style</title>
  <style>
   .line {
    border-right-color: #ef40b0; /* Цвет линии справа */
    border-right-style: dotted; /* Стиль линии */
    border-right-width: 3px; /* Толщина линии */
    border-left-color: #ef40b0; /* Цвет линии слева */
    border-left-style: dotted; /* Стиль линии */
    border-left-width: 3px; /* Толщина линии */
    padding: 0 10px; /* Расстояние между линией и текстом */
    margin: 0 50px; /* Отступы справа и слева */
   }
  </style>
 </head>
 <body>

  <div class="line"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
   erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci
   tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
   consequat.
  </div>

 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства border-right-style

Рис. 2. Применение свойства border-right-style

Объектная модель

Объект.style.borderRightStyle

Примечание

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-right-width

Устанавливает толщину границы справа от элемента.

Краткая информация

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-right-width: <размер> | thin | medium | thick

Значения

Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину границы справа. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-right-width</title>
  <style>
   .line {
    border-right-color: #c38e63; /* Цвет линии справа */
    border-right-style: dashed; /* Стиль линии */
    border-right-width: 2px; /* Толщина линии */
    border-left-color: #c38e63; /* Цвет линии слева */
    border-left-style: dashed; /* Стиль линии */
    border-left-width: 2px; /* Толщина линии */
    padding: 0 10px; /* Расстояние между линией и текстом */
   }
  </style>
 </head>
 <body>
  <div class="line">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
   erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci
   tution ullamcorper suscipit lobortis nisl ut aliquip ex ea
   commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства border-right-width

Рис. 1. Применение свойства border-right-width

Объектная модель

Объект.style.borderRightWidth

Примечание

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 8 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-spacing

Задаёт расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

Краткая информация

Значение по умолчанию | 0
Наследуется | Да
Применяется | К таблицам

Синтаксис

border-spacing: <размер> [<размер>]

Значения

Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-spacing</title>
  <style>
   table {
    border: 4px double #333; /* Рамка вокруг таблицы */
    border-collapse: separate; /* Способ отображения границы */
    width: 100%; /* Ширина таблицы */
    border-spacing: 7px 11px; /* Расстояние между ячейками */
   }
   td {
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #a52a2a; /* Граница вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>1</td><td>2</td>
   </tr>
   <tr>
    <td>3</td><td>4</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства border-spacing

Рис. 1. Применение свойства border-spacing

Объектная модель

Объект.style.borderSpacing

Примечание

Если к элементу <table> добавлен атрибут cellspacing, то при использовании стилевого свойства border-spacing атрибут cellspacing не принимается во внимание и его значение игнорируется.

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 4 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-style

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-style: [none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset] {1,4}

Значения

Для управления видом границы предоставляется несколько значений свойства border-style. Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
1 пиксел | 3 пиксела | 5 пикселов | 7 пикселов
dotted | dotted | dotted | dotted
dashed | dashed | dashed | dashed
solid | solid | solid | solid
double | double | double | double
groove | groove | groove | groove
ridge | ridge | ridge | ridge
inset | inset | inset | inset
outset | outset | outset | outset

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

none
Не отображает границу и её толщина (border-width) задаётся нулевой.
hidden
Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

Табл. 2. Зависимость результата использования от числа значений
Число значений | Результат
1 | Стиль границы будет задан для всех сторон элемента.
2 | Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3 | Первое значение задаёт стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 | Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-style</title>
  <style>
   p {
    border-style: double; /* Стиль линии вокруг параграфа */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства border-style

Рис. 1. Применение свойства border-style

Объектная модель

Объект.style.borderStyle

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-top

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

Краткая информация

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-top: [border-top-width || border-top-style || border-top-color]

Значения

border-top-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-top-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-top-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top</title>
  <style>
   .line {
    border-top: 1px solid red; /* Линия сверху текста */
    border-bottom: 1px solid red; /* Линия снизу текста */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>

  <div class="line">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
  </div>

 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства border-top

Рис. 2. Применение свойства border-top

Объектная модель

Объект.style.borderTop

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-top-color

Задаёт цвет границы сверху элемента.

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-top-color: <цвет> | transparent

Значения

<цвет>
См. цвет
transparent
Устанавливает прозрачный цвет.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top-color</title>
  <style>
   h1 {
    border-top-color: #ccc; /* Цвет линии сверху */
    border-top-style: double; /* Стиль линии сверху */
    border-top-width: 7px; /* Толщина линии сверху */
    border-left-color: #ccc; /* Цвет линии слева */
    border-left-style: solid; /* Стиль линии */
    border-left-width: 2px; /* Толщина линии */
    padding: 7px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>

  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства border-top-color

Рис. 1. Применение свойства border-top-color

Объектная модель

Объект.style.borderTopColor

Примечание

Internet Explorer до версии 6.0 включительно не поддерживает значение transparent.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-top-style

Устанавливает стиль границы сверху элемента.

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-top-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

Значения

none
Линия не отображается и значение её толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-top-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае верхняя граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>border-top-style</title>
  <style>
   h1 {
    border-top-color: #800000; /* Цвет линии сверху */
    border-top-style: double; /* Стиль линии сверху */
    border-top-width: 7px; /* Толщина линии сверху */
    border-left-color: #bd0000; /* Цвет линии слева */
    border-left-style: solid; /* Стиль линии */
    border-left-width: 2px; /* Толщина линии */
    padding: 7px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>

  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства border-top-style

Рис. 2. Применение свойства border-top-style

Объектная модель

Объект.style.borderTopStyle

Примечание

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-top-width

Устанавливает толщину границы сверху элемента.

Краткая информация

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-top-width: <размер> | thin | medium | thick

Значения

Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>border-top-width</title>
  <style>
   h1 {
    border-top-color: green; /* Цвет линии сверху */
    border-top-style: double; /* Стиль линии сверху */
    border-top-width: 7px; /* Толщина линии сверху */
    border-right-color: green; /* Цвет линии справа */
    border-right-style: double; /* Стиль линии */
    border-right-width: 5px; /* Толщина линии */
    padding: 7px; /* Поля вокруг текста */
    color: #f9b61c; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
     diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
     erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci
     tution ullamcorper suscipit lobortis nisl ut aliquip
     ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства border-top-width

Рис. 1. Применение свойства border-top-width

Объектная модель

Объект.style.borderTopWidth

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


border-top-left-radius

Устанавливает радиус скругления левого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-top-left-radius: [<размер> | <проценты>] [<размер> | <проценты>]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Радиус скругления для создания разных типов уголков

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top-left-radius</title>
  <style>
   .title {
    background: #000080; /* Цвет фона */
    color: #ffe; /* Цвет текста */
    padding: 7px; /* Поля вокруг текста */
    border-top-left-radius: 10px; /* Левый верхний уголок */
    border-top-right-radius: 10px; /* Правый верхний уголок */
   }
   .content {
    border: 1px solid #000080;  /* Параметры рамки */
    background: #f0f0f0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border-bottom-left-radius: 10px; /* Левый нижний уголок */
    border-bottom-right-radius: 10px; /* Правый нижний уголок */
   }
  </style>
 </head>
 <body>
  <div class="title">Буквица</div>
   <div class="content">
    Буквица является художественным приемом оформления текста и
    представляет собой увеличенную первую букву, базовая линия
    которой ниже на одну или несколько строк базовой линии
    основного текста.
   </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Радиус скругления в браузере Safari

Рис. 2. Радиус скругления в браузере Safari

Объектная модель

Объект.style.borderTopLeftRadius

Примечание

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-topleft.

Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют нестандартное свойство -webkit-border-top-left-radius.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome |  | Opera | Safari |  | Firefox
Базовый синтаксис | 9 | 1 | 4 | 10.5 | 3 | 5 | 1 | 4
Проценты | 9 | 4 |  | 10.5 | 5 |  | 4
Эллиптические уголки | 9 | 1 |  | 10.5 | 3 |  | 3.5
 | Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
Базовый синтаксис | 1 | 2.1 | 1 | 4 | 10.5 | 3 | 5
Проценты | 2.1 |  | 4 |  | 10.5 | 5
Эллиптические уголки | 2.1 |  | 3.5 |  | 10.5 | 3


border-top-right-radius

Устанавливает радиус скругления правого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-top-right-radius: [<размер>| <проценты>] [<размер> | <проценты>]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top-right-radius</title>
  <style>
   .radius {
    background: #f0f0f0;
    border: 1px dashed #000;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div style="border-top-right-radius: 10px" class="radius">
   border-top-right-radius: 10px
  </div>
  <div style="border-top-right-radius: 70px 40px" class="radius">
   border-top-right-radius: 70px 40px
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Радиус скругления в браузере Safari

Рис. 2. Радиус скругления в браузере Safari

Объектная модель

Объект.style.borderTopRightRadius

Примечание

Firefox до версии 4.0 использует свойство -moz-border-radius-topright.

Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют нестандартное свойство -webkit-border-top-right-radius.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome |  | Opera | Safari |  | Firefox
Базовый синтаксис | 9 | 1 | 4 | 10.5 | 3 | 5 | 1 | 4
Проценты | 9 | 4 |  | 10.5 | 5 |  | 4
Эллиптические уголки | 9 | 1 |  | 10.5 | 3 |  | 3.5
 | Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
Базовый синтаксис | 1 | 2.1 | 1 | 4 | 10.5 | 3 | 5
Проценты | 2.1 |  | 4 |  | 10.5 | 5
Эллиптические уголки | 2.1 |  | 3.5 |  | 10.5 | 3


border-width

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

Краткая информация

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

border-width: [<размер> | thin | medium | thick] {1,4}

Значения

Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах. inherit наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и приведён в табл. 1.

Табл. 1. Зависимость результата от числа значений
Число значений | Результат
1 | Толщина границы будет установлена для всех сторон элемента.
2 | Первое значение устанавливает толщину верхней и нижней границы, второе — левой и правой.
3 | Первое значение задаёт толщину верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 | Поочерёдно устанавливается толщину верхней, правой, нижней и левой границы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-width</title>
  <style>
   p {
    border-style: double; /* Стиль рамки вокруг параграфа */
    border-width: 3px 7px 7px 4px; /* Толщина границы */
    padding: 7px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства border-width

Рис. 1. Применение свойства border-width

Объектная модель

Объект.style.borderWidth

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 8 | 1 | 9.2 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


bottom

Устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов. Отсчёт координат зависит от свойства position, оно обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

При относительном позиционировании элемента, отсчёт ведётся от нижнего края исходного положения элемента, а при абсолютном — относительно нижнего края окна браузера (рис. 1). Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя (рис. 2).

Рис. 1. Значение bottom при абсолютном позиционировании элемента

Рис. 1. Значение bottom при абсолютном позиционировании элемента

Рис. 2. Значение bottom относительно родителя

Рис. 2. Значение bottom относительно родителя

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

bottom: <размер> | <проценты> | auto

Значения

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

auto
Не изменяет положение элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>bottom</title>
  <style>
   #layer {
    bottom: 20px; /* Расстояние от нижнего края окна браузера */
    position: absolute; /* Абсолютное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <div id="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3.

Применение свойства bottom

Рис. 3. Применение свойства bottom

Объектная модель

Объект.style.bottom

Примечание

В браузере Internet Explorer до версии 7 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
5.5 | 7 | 1 | 5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


box-shadow

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

box-shadow: none | <тень> [,<тень>]*

где <тень>:

inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Значения

none
Отменяет добавление тени.
inset
Тень выводится внутри элемента. Необязательный параметр.
сдвиг по x
Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y
Смещение тени по вертикали относительно элемента. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие
Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой.
растяжение
Положительное значение растягивает тень, отрицательное, наоборот, её сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет
Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная. Необязательный параметр.

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>box-shadow</title>
  <style>
   .shadow {
    background: #fc0; /* Цвет фона */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="shadow">В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!</div>
 </body>
</html>

Результат примера показан на рис. 1.

Вид тени в браузере Safari

Рис. 1. Вид тени в браузере Safari

Объектная модель

Объект.style.boxShadow

Примечание

Safari до версии 5.1, Chrome до версии 10.0, Android до версии 4.0 поддерживают свойство -webkit-box-shadow.

Firefox до версии 4.0 поддерживает свойство -moz-box-shadow.

Internet Explorer до версии 9.0 не поддерживает свойство box-shadow, взамен можно использовать нестандартное свойство filter:

filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Здесь: offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Применение фильтра dropshadow дает чёткую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow.

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселях.

Спецификация

Спецификация | Статус
CSS Backgrounds and Borders Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera | Safari |  | Firefox
9 | 1 | 10 | 10.5 | 3 | 5.1 | 3.5 | 4
Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
1 | 4 | 3.5 | 4 | 11 | 3 | 5,1


box-sizing

Применяется для изменения алгоритма расчёта ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Краткая информация

Значение по умолчанию | content-box
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

box-sizing: content-box | border-box | padding-box

Значения

content-box
Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box
Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме совместимости.
padding-box
Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
   .box1 {
    background: #f0f0f0; /* Цвет фона */
    width: 300px; /* Ширина блока */
    padding: 10px; /* Поля */
    border: 2px solid #000; /* Параметры рамки */
   }
   .box2 {
    background: #fc0; /* Цвет фона */
    width: 300px; /* Ширина блока */
    padding: 10px; /* Поля */
    margin-top: 10px; /* Отступ сверху */
    border: 2px solid #000; /* Параметры рамки */
    box-sizing: border-box; /* Ширина блока с полями */
   }
  </style>
 </head>
 <body>
  <div class="box1">Ширина с учетом значения свойства width, полей и границ.</div>
  <div class="box2">Ширина равна значению свойства width.</div>
 </body>
</html>

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing. Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Ширина блоков

Объектная модель

Объект.style.boxSizing

Примечание

Firefox до версии 29 поддерживает нестандартное свойство -moz-box-sizing.

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 поддерживают нестандартное свойство -webkit-box-sizing.

Спецификация

Спецификация | Статус
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome |  | Opera | Safari |  | Firefox
content-box, border-box | 8 | 1 | 10 | 7 | 3 | 5.1 | 1 | 29
padding-box |  |  |  |  |  |  | 1
 | Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
content-box, border-box | 1 | 2.1 | 1 | 29 | 9 | 3 | 5,1
padding-box |  |  | 1 |  |  |


caption-side

Определяет положение заголовка таблицы, который задается с помощью элемента <caption>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align.

Краткая информация

Значение по умолчанию | top
Наследуется | Да
Применяется | К <caption> или ко всем элементам, у которых значение display установлено как table-caption.

Синтаксис

caption-side: top | bottom

Значения

top
Располагает заголовок по верхнему краю таблицы.
bottom
Заголовок располагается под таблицей.
left
Заголовок размещается слева от таблицы. Значение удалено из спецификации и уже нестандартное. Поддерживается только в Firefox.
right
Заголовок размещается справа от таблицы. Значение удалено из спецификации и уже нестандартное. Поддерживается только в Firefox.

Пример

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>caption-side</title>
  <style>
    table {
     width: 100%; /* Ширина таблицы */
     border-collapse: collapse; /* Убираем двойную рамку между ячеек */
    }
    td {
     border: 1px solid green; /* Параметры границы */
     padding: 5px; /* Поля в ячейках */
    }
    caption {
     caption-side: bottom; /* Заголовок под таблицей */
    }
   </style>
  </head>
  <body>
   <table>
    <caption>Расклад карт</caption>
    <tr>
     <td>&nbsp;</td><td>&spades;</td><td>&clubs;</td><td>&hearts;</td>
     <td>&diams;</td>
    </tr>
    <tr>
     <td>Чебурашка</td><td>6</td><td>3</td><td>1</td><td>3</td>
    </tr>
    <tr>
     <td>Крокодил Гена</td><td>1</td><td>5</td><td>5</td><td>2</td>
    </tr>
    <tr>
     <td>Шапокляк</td><td>3</td><td>4</td><td>6</td><td>0</td>
    </tr>
    <tr>
     <td>Крыса Лариса</td><td>3</td><td>1</td><td>1</td><td>8</td>
    </tr>
   </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат использования caption-side

Рис. 1. Результат использования caption-side

Объектная модель

Объект.style.captionSide

Спецификация

Спецификация | Статус
CSS Logical Properties Level 1 | Редакторский черновик
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 4 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


Псевдокласс :checked

Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента <input> или пользователем.

Синтаксис

Селектор:checked  { ...  }

Примеры использования

input[type="radio"]:checked { ... }

Стиль применяется только ко включенным переключателям.

input[type="checkbox"]:checked { ... }

Стиль применяется только к помеченным флажкам (чекбоксам).

option:checked { ... }

Стиль применяется только к выбранным элементам списка.

Пример

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>checked</title>
  <style>
   input:checked + span {
    background: #fc0;
   }
  </style>
 </head>
 <body>
  <p><strong>С какими операционными системамы вы знакомы?</strong></p>
  <p><input type="checkbox" name="a1"><span>Windows 7</span><br>
  <input type="checkbox" name="a2"><span>Windows Vista</span><br>
  <input type="checkbox" name="a3"><span>Windows XP</span><br>
  <input type="checkbox" name="a4"><span>System X</span><br>
  <input type="checkbox" name="a5"><span>Linux</span><br>
  <input type="checkbox" name="a6"><span>Mac OS</span></p>
  <p><input type="submit" value="Отправить"></p>
 </body>
</html>

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

Результат использования псевдокласса checked

Рис. 1. Результат использования псевдокласса :checked

Спецификация

Specification | Status
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Предлагаемая рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9 | 3.1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 9.5 | 3.1


clear

Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

clear: none | left | right | both

Значения

none
Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
both
Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
left
Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right
Отменяет обтекание с правой стороны элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>clear</title>
  <style>
   #layer {
    float: left; /* Обтекание блока по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    width: 40%; /* Ширина блока */
   }
  </style>
 </head>
 <body>

  <div id="layer">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>

  <div style="clear: left"></div>

  <p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat,
  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
  odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
  te feugat nulla facilisi.</p>

 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства clear

Рис. 1. Применение свойства clear

Объектная модель

Объект.style.clear

Примечание

В браузере Internet Explorer до версии 6 включительно наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear, соприкасающиеся с плавающими элементами (у которых задано свойство float) могут исчезать.

В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear.

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 8 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


clip

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

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

clip: rect(Y1, X1, Y2, X2) | auto

Значения

В качестве значений используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — пиксели (px), em и др. Если край области нужно оставить без изменений, следует установить auto, положение остальных значений показано на рис. 1.

Рис. 1. Значения свойства clip

Рис. 1. Значения свойства clip

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>clip</title>
  <style>
  #layer {
   position: absolute; /* Абсолютное позиционирование */
   clip: rect(40px, auto, auto, 40px); /* Прячем часть текста */
   width: 200px; /* Ширина блока */
   color: white; /* Цвет текста */
   background: #7f4c3e; /* Цвет фона */
   border: 1px solid black; /* Параметры рамки */
   padding: 10px; /* Поля вокруг текста */
  }
  </style>
  </head>
  <body>
  <div id="layer">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
   lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение clip в браузере Safari

Рис. 2. Применение clip в браузере Safari

Объектная модель

Объект.style.clip

Примечание

Internet Explorer до версии 7.0 включительно работает с другой формой записи, при которой значения координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto auto 40px).

Спецификация

Спецификация | Статус
CSS Masking Level 1 | Возможная рекомендация
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 8 | 1


color

Определяет цвет текста элемента.

Краткая информация

Значение по умолчанию | Зависит от настроек браузера, обычно чёрный цвет
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

color: <цвет> | transparent

Значения

<цвет>
См. цвет
transparent
Устанавливает прозрачный цвет.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>color</title>
  <style>
   .letter {
    color: red; /* Цвет символа */
    font-size: 200%; /* Размер шрифта */
   }
   p {
    color: rgb(49, 151, 116); /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p><span class="letter">L</span>orem ipsum dolor
   sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt
   ut lacreet dolore magna aliguam erat volutpat.</p>
  <p><span class="letter">U</span>t wisis enim ad
   minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Использование свойства color

Рис. 1. Использование свойства color

Объектная модель

Объект.style.color

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Color Module Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


column-count

Определяет количество колонок в многоколоночном тексте.

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Синтаксис

column-count: <число> | auto

Значения

<число>
Целое число больше нуля, задающее оптимальное число колонок.
auto
Число колонок вычисляется автоматически на основе других свойств (column-width, column-gap).

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>column-count</title>
  <style>
   .book {
    column-count: 2;
   }
  </style>
 </head>
 <body>
  <div class="book">
   Контрапункт контрастных фактур дает структурный midi-контроллер,
   таким образом объектом имитации является число длительностей в
   каждой из относительно автономных ритмогрупп ведущего голоса.
   Протяженность, по определению, просветляет флэнжер, хотя это
   довольно часто напоминает песни Джима Моррисона и Патти Смит.
  </div>
 </body>
</html>

Объектная модель

Объект.style.columnCount

Примечание

Firefox поддерживает нестандартное свойство -moz-column-count.

Safari, Chrome и Аndroid поддерживают нестандартное свойство -webkit-column-count.

Спецификация

Спецификация | Статус
CSS Multi-column Layout Module | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 1 | 11.1 | 3 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 11 | 3


column-gap

Задаёт расстояние между колонками в многоколоночном тексте.

Краткая информация

Значение по умолчанию | normal
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Синтаксис

column-gap: <размер> | normal

Значения

<размер>
Значение ширины межколоночного интервала в единицах CSS (например, пикселах).
normal
Межколоночный интервал устанавливается браузером.

Пример

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>column-gap</title>
  <style>
   .book {
    column-count: 3;
    column-width: 200px;
    column-gap: 2em;
   }
  </style>
 </head>
 <body>
  <div class="book">
   Как было показано выше, кризис жанра дает звукоряд, и здесь в
   качестве модуса конструктивных элементов используется ряд
   каких-либо единых длительностей. Фьюжн, по определению, полифигурно
   варьирует гармонический интервал, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
   Трехчастная фактурная форма, в первом приближении, возможна. Форшлаг
   изящно продолжает хамбакер, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
  </div>
 </body>
</html>

Объектная модель

Объект.style.columnGap

Примечание

Firefox поддерживает нестандартное свойство -moz-column-gap.

Safari, Chrome и Аndroid поддерживают нестандартное свойство -webkit-column-gap.

Спецификация

Спецификация | Статус
CSS Multi-column Layout Module | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 1 | 11.1 | 3 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 11 | 3


column-rule

В многоколоночном тексте отрисовывает линию между колонками.

Краткая информация

Значение по умолчанию | medium none
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Синтаксис

column-rule: <border-width> || <border-style> || <цвет>

Значения

Значение border-width определяет толщину линии. Для управления видом линии предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили линии

<цвет> устанавливает цвет линии, значение может быть в любом допустимом для CSS формате.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>column-rule</title>
  <style>
   .book {
    column-count: 3;
    column-width: 200px;
    column-rule: 1px solid #ccc;
   }
  </style>
 </head>
 <body>
  <div class="book">
   Как было показано выше, кризис жанра дает звукоряд, и здесь в
   качестве модуса конструктивных элементов используется ряд
   каких-либо единых длительностей. Фьюжн, по определению, полифигурно
   варьирует гармонический интервал, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
   Трехчастная фактурная форма, в первом приближении, возможна. Форшлаг
   изящно продолжает хамбакер, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
  </div>
 </body>
</html>

Объектная модель

Объект.style.columnRule

Примечание

Firefox поддерживает нестандартное свойство -moz-column-rule.

Safari, Chrome и Аndroid поддерживают нестандартное свойство -webkit-column-rule.

Спецификация

Спецификация | Статус
CSS Multi-column Layout Module | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 1 | 11.1 | 3 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 11 | 3


column-width

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

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Синтаксис

column-width: <размер> | auto

Значения

<размер>
Значение ширины колонки в абсолютных единицах CSS (например, пикселях).
auto
Ширина колонок вычисляется автоматически на основе других свойств (column-count, column-gap).

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>column-width</title>
  <style>
   .book {
    column-count: 3;
    column-width: 200px;
   }
  </style>
 </head>
 <body>
  <div class="book">
   Как было показано выше, кризис жанра дает звукоряд, и здесь в
   качестве модуса конструктивных элементов используется ряд
   каких-либо единых длительностей. Фьюжн, по определению, полифигурно
   варьирует гармонический интервал, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
   Трехчастная фактурная форма, в первом приближении, возможна. Форшлаг
   изящно продолжает хамбакер, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
  </div>
 </body>
</html>

Объектная модель

Объект.style.columnWidth

Примечание

Firefox поддерживает нестандартное свойство -moz-column-width.

Safari, Chrome и Аndroid поддерживают нестандартное свойство -webkit-column-width.

Спецификация

Спецификация | Статус
CSS Multi-column Layout Module | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 1 | 11.1 | 3 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 11 | 3


columns

Универсальное свойство, которое позволяет одновременно задать ширину и количество колонок многоколоночного текста.

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Синтаксис

columns: [column-width] || [column-count]

Значения

Комбинация свойств column-width и column-count. Порядок значения не имеет.

Пример

Ширина колонок 200 пикселов, количество задаётся браузером.

columns: 200px auto;

Три колонки минимальной ширины 12em каждая.

columns: 3 12em;

Две колонки, их ширина определяется браузером.

columns: 2;

Объектная модель

Объект.style.columns

Примечание

Firefox поддерживает нестандартное свойство -moz-columns.

Safari, Chrome и Android поддерживают нестандартное свойство -webkit-columns.

Спецификация

Спецификация | Статус
CSS Multi-column Layout Module | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 1 | 11.1 | 3 | 9
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 11 | 3


content

Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами ::after и ::before, они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.

Краткая информация

Значение по умолчанию | Пустая строка
Наследуется | Нет
Применяется | К псевдоэлементам :before и :after

Синтаксис

content: <строка> | attr(параметр) | open-quote | close-quote
    | no-open-quote | no-close-quote | url | counter | normal | none

Значения

<строка>
Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (&sect; например), будут отображаться как есть, т.е. простым текстом (&sect;, а не §).
attr(параметр)

Возвращает строку, которая является значением параметра тега указанного в скобках. Например, a:after {content:attr(href)} добавит после ссылки её адрес, т.е. значение атрибута href. Если указанного атрибута нет, вернется пустая строка.
open-quote
Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes.
close-quote
Вставляет закрывающую кавычку.
no-open-quotes

Отменяет добавление открывающей кавычки.
no-close-quote

Отменяет добавление закрывающей кавычки.
url
Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.
counter
Выводит значение счетчика, заданного свойством counter-reset.
none
Не добавляет никакое содержание.
normal
Задаётся как none для псевдоэлементов ::before и ::after.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>content</title>
  <style>
   .tag {
    color: navy; /* Цвет текста */
    font-family: monospace; /* Моноширинный шрифт */
    quotes: "<" ">"; /* Устанавливаем вид кавычек */
   }
   .tag::before {
    content: open-quote; /* Добавляем перед текстом открывающую кавычку */
  }
   .tag::after {
    content: close-quote; /* Добавляем после текста закрывающую кавычку */
   }
  </style>
 </head>
 <body>
  <p>Тег <span class="tag">DEL</span> используется
  для выделения текста, который был удален в новой версии документа.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства content

Рис. 1. Применение свойства content

Объектная модель

Объект.style.content

Примечание

Firefox до версии 2.0 включительно и Opera до версии 9.2 включительно не поддерживают значение none. Safari до версии 3.1 не поддерживает значение none и normal.

Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11 и 5.1 соответственно.

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 4 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9.5 | 1


counter-increment

Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов ::after и ::before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

counter-increment: none | <переменная> | <число>

Значения

none
Запрещает увеличение счётчика для текущего селектора.
<переменная>

Задаёт одну или несколько переменных, для которых требуется изменить значение счётчика. Переменные разделяются между собой пробелом.
<число>
Определяет значение приращения счётчика. По умолчанию оно равно 1. Допускается использовать только положительные целые числа, отрицательные целые числа и ноль.

Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1.

Табл. 1. Изменение нумерации списка
Код Результат
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}

Список начинается с нуля.

0, 1, 2

LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) ". ";
}

Выводятся все чётные числа.

2, 4, 6

LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list list;
content: counter(list) ". ";
}

Выводятся все нечётные числа.

1, 3, 5

LI { list-style-type: none; }
OL { counter-reset: list 9; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}

Список начинается с 10.

10, 11, 12

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>counter-increment</title>
  <style>
   body {
    counter-reset: heading; /* Инициируем счетчик */
   }
   h2:before {
    counter-increment: heading; /* Указываем идентификатор счетчика */
    content: "Глава " counter(heading) ". "; /* Выводим текст перед содержимым тега <h2> */
   }
  </style>
 </head>
 <body>
  <h2>Теория ловли льва в пустыне</h2>
  <h2>Методы инверсной кинематики</h2>
  <h2>Ловля льва численными методами</h2>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства counter-increment

Рис. 1. Применение свойства counter-increment

Объектная модель

Объект.style.counterIncrement

Примечание

Для элементов, у которых установлено display: none, значение счётчика не меняется.

Спецификация

Спецификация | Статус
CSS Lists and Counters Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 2 | 9.2 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 9.5 | 3


counter-reset

Устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика. Такой счётчик может выводиться с помощью свойства content и псевдоэлементов ::after и ::before.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

counter-reset: none | <переменная> | <число>

Значения

none
Запрещает инициацию счётчика для текущего селектора.
inherit
Наследует значение родителя.
<переменная>

Задаёт одну или несколько переменных, в которых будет храниться значение счётчика. Значения разделяются между собой пробелом.
<число>
Начальное значение каждого идентификатора. По умолчанию равно 0.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>counter-reset</title>
  <style>
   li { list-style-type: none; } /* Убираем исходную нумерацию у списка */
   ol { counter-reset: list1; } /* Инициируем счетчик */
   ol li:before {
    counter-increment: list1; /* Увеличиваем значение счетчика */
    content: counter(list1) ". "; /* Выводим число */
   }
   ol ol { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
   ol ol li:before {
    counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */
    content: counter(list1) "." counter(list2) ". "; /* Выводим число */
   }
  </style>
 </head>
 <body>
  <ol>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства counter-reset

Рис. 1. Применение свойства counter-reset

Объектная модель

Объект.style.counterReset

Примечание

Для элементов, у которых установлено display: none, значение счётчика не меняется.

Спецификация

Спецификация | Статус
CSS Lists and Counters Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 2 | 9.2 | 3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 9.5 | 3


cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Краткая информация

Значение по умолчанию | auto
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

cursor: [url('путь к курсору'),] | [ auto | crosshair | default | e-resize |
  help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize |
  se-resize | sw-resize | text | w-resize | wait]

Значения

url
Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
auto
Вид курсора по умолчанию для текущего элемента.

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора
Вид | Значение | Тест | Пример
 | default |  | P {cursor: default}
 | crosshair |  | P {cursor: crosshair}
 | help |  | P {cursor: help}
 | move |  | P {cursor: move}
 | pointer |  | P {cursor: pointer}
 | progress |  | P {cursor: progress}
 | text |  | P {cursor: text}
 | wait |  | P {cursor: wait}
 | n-resize |  | P {cursor: n-resize}
 | ne-resize |  | P {cursor: ne-resize}
 | e-resize |  | P {cursor :e-resize}
/ | se-resize |  | P {cursor: se-resize}
 | s-resize |  | P {cursor: s-resize}
 | sw-resize |  | P {cursor: sw-resize}
 | w-resize |  | P {cursor: w-resize}
 | nw-resize |  | P {cursor :nw-resize}

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

При добавлении курсора из файла синтаксис несколько видоизменится.

cursor: url('путь к курсору1'), url('путь к курсору2'), ..., <ключевое слово>

Через запятую допускается указывать несколько значений url, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдёт к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer, допустимые значения перечислены выше.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>cursor</title>
  <style>
   .cross { cursor: crosshair; }
   .help { cursor: help; }
  </style>
 </head>
 <body>
  <p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
  <p>
   <a href="help.html" class="help">СПРАВКА 1</a><br />
   <a href="help.html" class="help">СПРАВКА 2</a><br />
   <a href="help.html" class="help">СПРАВКА 3</a>
  </p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства cursor

Рис. 1. Применение свойства cursor

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>cursor</title>
  <style>
   a { cursor: url(images/sniper.cur), pointer; }
  </style>
 </head>
 <body>
  <p>Обычный текст</p>
  <p><a href="1.html">Ссылка 1</a> <a href="2.html">Ссылка 2</a>
   <a href="3.html">Ссылка 3</a></p>
 </body>
</html>

Объектная модель

Объект.style.cursor

Примечание

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Opera не работает с файлами курсора.

Спецификация

Спецификация | Статус
CSS Basic User Interface Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
auto, crosshair, default,move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize | 4 | 1 | 7 | 1.2 | 1
pointer, progress | 6 | 1 | 7 | 1.2 | 1
url() | 6 | 1 |  | 3 | 1.5
not-allowed, no-drop,vertical-text, all-scroll, col-resize, row-resize | 6 | 1 | 10.6 | 3 | 1.5
alias, cell, copy, ew-resize, ns-resize,nesw-resize, nwse-resize | 10 | 1 | 10.6 | 3 | 1.5
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
auto, crosshair, default,move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize | 1 | 1 | 9.5 | 1.2
pointer, progress | 1 | 1 | 9.5 | 1.2
url() | 1 | 1.5 |  | 3
not-allowed, no-drop,vertical-text, all-scroll, col-resize, row-resize | 1 | 1.5 | 10.6 | 3
alias, cell, copy, ew-resize, ns-resize,nesw-resize, nwse-resize | 1 | 1.5 | 10.6 | 3


Псевдокласс :default

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

Синтаксис

Селектор:default  { ...  }

Пример

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>default</title>
  <style>
   :default {
    background-color: lime;
   }
  </style>
 </head>
 <body>
  <form>
   <p><input type="submit"> <input type="submit"> <input type="reset"></p>
  </form>
 </body>
</html>

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

Результат использования псевдокласса :default

Рис. 1. Результат использования псевдокласса :default

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Возможная рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
 | 10 | 10 | 5 | 4
Android | Firefox Mobile | Opera Mobile | Safari Mobile
3 | 4 | 10 | 5


direction

direction предназначен для сайтов, в которых имеет значение направление текста. Например, при использовании арабского алфавита чтение происходит справа налево.

Свойство direction достаточно универсально и управляет следующими возможностями:

  • способ отображения текста в блоке;
  • порядок колонок в таблице;
  • позиция полосы прокрутки в блоке;
  • положение последней висячей строки текстового блока при text-align: justify.

Для использования со встроенными элементами, значение свойства unicode-bidi должно быть задано как embed или override.

Краткая информация

Значение по умолчанию | ltr
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

direction: ltr | rtl

Значения

ltr
Устанавливает направление слева направо.
rtl
Задаёт направление справа налево.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>direction</title>
  <style>
   div.rtl {
    direction: rtl; /* Направление */
    width: 200px; /* Ширина блока */
    height: 150px; /* Высота блока */
    overflow: scroll; /* Полоса прокрутки */
    text-align: left; /* Выравнивание по левому краю */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #000; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <div class="rtl">Велосипед уже изобрели, различные приемы верстки тоже.
  Так что больше знакомься с мировым опытом по части верстки и тебе не придется
  тратить время на разработку того, что всем давно известно.</div>
 </body>
</html>

Результат данного примера показан на рис. 1. Обратите внимание на положение точки в предложении, а также на то, что полоса прокрутки в браузере Internet Explorer отображается слева.

Результат использования direction в браузере Internet Explorer

Рис. 1. Результат использования direction в браузере Internet Explorer

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>direction</title>
  <style>
    table {
     direction: rtl; /* Колонки идут справа налево */
     width: 100%; /* Ширина таблицы */
     border-spacing: 0; /* Убираем пространство между ячейками */
    }
  </style>
 </head>
 <body>
  <table border="1">
   <tr>
     <td>&nbsp;</td><td>1999</td><td>2000</td>
     <td>2001</td><td>2002</td><td>2003</td>
   </tr>
   <tr>
     <td>Нефть</td><td>16</td><td>34</td>
     <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
     <td>Золото</td><td>4</td><td>69</td>
     <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
     <td>Дерево</td><td>7</td><td>73</td>
     <td>79</td><td>34</td><td>86</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2. Колонки таблицы отображается справа налево.

Применение direction к таблице

Рис. 2. Применение direction к таблице

Объектная модель

Объект.style.direction

Примечание

При добавлении свойства direction со значением rtl к блоку с полосой прокрутки (например, <textarea>), браузер Internet Explorer и Firefox отображают скроллинг слева, а Opera и Safari — справа.

Спецификация

Спецификация | Статус
CSS Writing Modes Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5.5 | 2 | 9.2 | 1.3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 8 | 3.1


Псевдокласс :disabled

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

Синтаксис

Селектор:disabled  { ...  }

Пример

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>disabled</title>
  <style>
   textarea:disabled {
    background: url(images/dline.png);
    border: 1px solid #666;
    padding: 5px;
   }
  </style>
 </head>
 <body>
  <form>
   <p><textarea disabled cols="30" rows="5">
   Это заблокированное поле, в него нельзя ничего писать</textarea></p>
  </form>
 </body>
</html>

В данном примере изменен стиль заблокированного текстового поля. Результат примера показан на рис. 1.

Результат использования псевдокласса :disabled

Рис. 1. Результат использования псевдокласса :disabled

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Предлагаемая рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9 | 3.1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 9.5 | 3.1


display

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Краткая информация

Значение по умолчанию | inline
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

display: block | inline | inline-block | inline-table | list-item | none |
run-in | table | table-caption | table-cell | table-column-group | table-column |
table-footer-group | table-header-group | table-row | table-row-group

Значения

block
Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline
Элемент отображается как строчный. Использование блочных элементов, таких как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
inline-table
Определяет, что элемент является таблицей как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.
list-item
Элемент выводится как блочный и добавляется маркер списка.
none
Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
run-in
Устанавливает элемент как блочный или строчный в зависимости от контекста.
table
Определяет, что элемент является блочной таблицей подобно использованию <table>.
table-caption
Задаёт заголовок таблицы подобно применению <caption>.
table-cell
Указывает, что элемент представляет собой ячейку таблицы (<dd> или <th>).
table-column

Назначает элемент колонкой таблицы, словно был добавлен <col>.
table-column-group

Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.
table-footer-group

Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой <tfoot>.
table-header-group

Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой <thead>.
table-row
Элемент отображается как строка таблицы (<tr>).
table-row-group

Создаёт структурный блок, состоящий из нескольких строк таблицы аналогично действию <tbody>.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>display</title>
  <style>
   .example {
    border: dashed 1px #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Шрифт текста */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы вокруг */
   }
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Устанавливаем как строчный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер текста */
    margin: 0; /* Убираем отступы вокруг */
    white-space: nowrap; /* Отменяем переносы текста */
   }
  </style>
 </head>
 <body>
  <p class="exampleTitle">Пример</p>
  <p class="example">
  &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
  &lt;html&gt;<br>
  &lt;body&gt;<br>
  &lt;b&gt;Формула серной кислоты:&lt;/b&gt;
  &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
  SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
  &lt;/sub&gt;&lt;/i&gt;<br>
  &lt;/body&gt;<br>
  &lt;/html&gt;</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства display

Рис. 1. Применение свойства display

Объектная модель

Объект.style.display

Примечание

Internet Explorer до версии 7 включительно:

  • поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
  • для элементов <li> понимает значение block как list-item;
  • значение inline-block применяется только для строчных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

  • значение table-column применяется только для <col>;
  • значение table-column-group поддерживается только для <colgroup>.

Chrome до версии 4, а также Safari до версии 5:

  • значение run-in поддерживают только для элементов, которые располагаются перед строчными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

  • Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Chrome 32

  • Значение run-in больше не поддерживается.

Спецификация

Спецификация | Статус
CSS Display Module Level 3 | Рабочий проект
CSS Ruby Layout Module Level 1 | Рабочий проект
CSS Grid Layout | Рабочий проект
CSS Flexible Box Layout Module | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
none, inline, block | 4 | 1 | 7 | 1 | 1
inline-block | 5.5 | 1 | 7 | 1 | 3
list-item | 6 | 1 | 7 | 1 | 1
run-in | 8 | 1 | 7 | 1 |
inline-table | 8 | 1 | 7 | 1 | 3
table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, andtable-caption | 8 | 1 | 7 | 1 | 1
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
none, inline, block | 1 | 1 | 8 | 1
inline-block | 1 | 1 | 8 | 1
list-item | 1 | 1 | 8 | 1
run-in | 1 |  | 8 | 1
inline-table | 1 | 1 | 8 | 1
table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, andtable-caption | 1 | 1 | 8 | 1


Псевдокласс :empty

Псевдокласс :empty представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста или пробелов. К примеру, <p></p> является пустым элементом, а <p> </p>, <p>&nbsp;</p> или <p>эге</p> уже нет.

Синтаксис

Селектор:empty  { ...  }

Пример

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>empty</title>
  <style>
   span:empty {
    background: red;
    padding: 3px;
    margin-left: 7px;
    display: inline-block;
   }
  </style>
 </head>
 <body>
  <p>Линеарная фактура, в том числе, иллюстрирует фузз, и здесь мы видим
  ту самую каноническую секвенцию с разнонаправленным шагом
  отдельных звеньев<span></span></p>
 </body>
</html>

Результат данного примера в браузере Safari показан на рис. 1.

Применение псевдокласса :empty

Рис. 1. Применение псевдокласса :empty

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 3.1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.1


empty-cells

Задаёт отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.

Ячейка считается пустой в следующих случаях:

  • нет вообще никаких символов;
  • в ячейке содержится только перевод строки, символ табуляции или пробел;
  • значение visibility установлено как hidden.

Добавление неразрывного пробела &nbsp; воспринимается как видимое содержание, т. е. ячейка уже будет непустой.

Краткая информация

Значение по умолчанию | show
Наследуется | Да
Применяется | К <td>, <th> или к элементам, у которых display: table-cell

Синтаксис

empty-cells: show | hide

Значения

show
Отображает границу вокруг ячейки и фон в ней.
hide
Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>empty-cells</title>
  <style>
   table {
    border: 4px double #399; /* Граница вокруг таблицы */
   }
   td {
    background: #fc0; /* Цвет фона */
    border: 1px solid #333; /* Граница вокруг ячеек */
    empty-cells: hide; /* Прячем пустые ячейки */
    padding: 5px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table width="100%">
   <tr>
    <td>Леонардо</td><td>5</td><td>8</td>
   </tr>
   <tr>
    <td>Рафаэль</td><td> </td><td>11</td>
   </tr>
   <tr>
    <td>Микеланджело</td><td>24</td><td></td>
   </tr>
   <tr>
    <td>Донателло</td><td>&nbsp;</td><td>13</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера в браузере Safari показан на рис. 1. Тот же пример в браузере Internet Explorer 7 продемонстрирован на рис. 2.

Вид таблицы в браузере Safari

Рис. 1. Вид таблицы в браузере Safari

Вид таблицы в браузере Internet Explorer 7

Рис. 2. Вид таблицы в браузере Internet Explorer 7

Объектная модель

Объект.style.emptyCells

Примечание

Internet Explorer до версии 7.0 включительно не поддерживает свойство empty-cells и отображает пустые ячейки всегда так, словно для них установлено empty-cells: hide.

Firefox версии 2 и ниже не прячет строку таблицы, если для всех ячеек задано empty-cells: hide и ячейки пусты.

Браузер Opera до версии 9.27 включительно не скрывает строку таблицы и для пустых ячеек отображает цвет фона.

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 4 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 3.1


Псевдокласс :enabled

Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.

Синтаксис

Селектор:enabled  { ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>enabled</title>
  <script>
   function agreeForm(f) {
    if (f.agree.checked) f.submit.disabled = 0;
    else f.submit.disabled = 1;
   }
  </script>
  <style>
   input:enabled { background: red; }
  </style>
 </head>
 <body>
  <form>
   <p>Типовой договор</p>
   <p><input type="checkbox" name="agree" onclick="agreeForm(this.form)">
   Я согласен со всеми условиями</p>
   <p><input type="submit" name="submit" value="Отправить" disabled></p>
  </form>
 </body>
</html>

В данном примере при включении галочки добавляется стиль к кнопке. Результат примера показан на рис. 1.

Результат использования псевдокласса :enabled

Рис. 1. Результат использования псевдокласса :enabled

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Возможная рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9 | 3.1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 9.5 | 3.1


Псевдокласс :first-child

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

Синтаксис

Селектор:first-child  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>first-child</title>
  <style>
    B:first-child {
     color: red; /* Красный цвет текста */
    }
  </style>
 </head>
 <body>
   <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>
   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet
   dolore magna aliguam erat volutpat.</p>
   <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b>
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo
   consequat</b>.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Выделение цветом первого дочернего элемента абзаца

Рис. 1. Выделение цветом первого дочернего элемента абзаца

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .links {
    background: #F6967D; /* Цвет фона */
   }
   .links a {
    color: #FFFDEB; /* Цвет ссылок */
    display: inline-block; /* Строчно-блочный элемент */
    border-left: 1px solid #B62025; /* Параметры рамки слева */
    padding: 5px 10px; /* Поля вокруг ссылок */
   }
   .links a:first-child {
    border-left: none; /* Убираем первую линию слева */
   }
  </style>
 </head>
 <body>
  <div class="links">
    <a href="1.html">uno</a>
    <a href="2.html">dos</a>
    <a href="3.html">tres</a>
    <a href="4.html">cuatro</a>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Ссылки с линией слева

Рис. 2. Ссылки с линией слева

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 4 | 9.5 | 4 | 3
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 10 | 3.1


Псевдоэлемент ::first-letter

Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

Синтаксис

CSS2.1
Селектор:first-letter { ... }
CSS3
Селектор::first-letter { ... }

В CSS3 псевдоэлементы обозначаются с двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>first-letter</title>
  <style>
   p {
    font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
    font-size: 0.9em; /* Размер шрифта */
   }
   p::first-letter {
    font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 2em; /* Размер шрифта первого символа */
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее
   как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и
   посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую
   завесу из мрака и пыли. </p>
   <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
   не было, и лишь на полу валялась порванная туфля Паши.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.

Результат использования псевдоэлемента ::first-letter

Рис. 1. Результат использования псевдоэлемента ::first-letter

Спецификация

Спецификация | Статус
CSS Pseudo-Elements Level 4 | Рабочий проект
CSS Text Decoration Level 3 | Возможная рекомендация
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
:first-letter | 5.5 | 1 | 3.5 | 1 | 1
::first-letter | 9 | 1 | 7 | 1 | 1
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
:first-letter | 1 | 1 | 4 | 1
::first-letter | 1 | 1 | 7 | 1


Псевдоэлемент ::first-line

Псевдоэлемент ::first-line задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

Синтаксис

CSS2.1
Селектор:first-line { ... }
CSS3
Селектор::first-line { ... }

В CSS3 псевдоэлементы обозначаются с двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>first-line</title>
  <style>
    p::first-line {
     color: red; /* Красный цвет текста */
     font-style: italic; /* Курсивное начертание */
     font-weight: bold; /* Жирное начертание */
    }
  </style>
 </head>
 <body>
   <p>Олимпия 2008<br />
   Основной претендент на I место это конечно же Джей Катлер, достигший наивысшего
   результата за последние два года.</p>
 </body>
</html>

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

Результат использования псевдоэлемента ::first-line

Рис. 1. Результат использования псевдоэлемента ::first-line

Спецификация

Спецификация | Статус
CSS Pseudo-Elements Level 4 | Рабочий проект
CSS Text Decoration Level 3 | Возможная рекомендация
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
:first-line | 5.5 | 1 | 3.5 | 1 | 1
::first-line | 9 | 1 | 7 | 1 | 1
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
:first-line | 1 | 1 | 4 | 1
::first-line | 1 | 1 | 7 | 1


Псевдокласс :first-of-type

Псевдокласс :first-of-type задаёт правила стилей для первого элемента в списке дочерних элементов своего родителя. К примеру, добавление :first-of-type к селектору td устанавливает стиль для всех первых ячеек, поскольку родителем для элемента <td> выступает элемент <tr>.

Синтаксис

Селектор:first-of-type  {  ...  }

Пример

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>first-of-type</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные границы */
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячеек */
   }
   td {
    border: 1px solid #6A3E14; /* Параметры рамки */
    padding: 4px; /* Поля в ячейках */
   }
   tr:first-of-type {
    background: #808990; /* Цвет фона */
    color: #fff; /* Цвет текст */
   }
   td:first-of-type {
    background: #CFD6D3; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>&nbsp;</td><td>1998</td><td>1999</td><td>2000</td><td>2001</td>
    <td>2002</td><td>2003</td>
   </tr>
   <tr>
    <td>Нефть</td>
    <td>3</td><td>22</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td>
    <td>4</td><td>13</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td>
    <td>4</td><td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат использования псевдокласса :first-of-type в таблице

Рис. 1. Результат использования псевдокласса :first-of-type в таблице

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 3.2 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.2


float

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

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам (за исключением абсолютно позиционированных)

Синтаксис

float: left | right | none

Значения

left
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right
Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none
Обтекание элемента не задаётся.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   .layer1 {
    float: left; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    margin-right: 20px; /* Отступ справа */
    width: 40%; /* Ширина блока */
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div>
   Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
   illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
   dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
   feugat nulla facilisi.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства float

Рис. 1. Применение свойства float

Объектная модель

Объект.style.cssFloat

Примечание

В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трёхпиксельный баг») в направлении, заданном значением float.

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
6 | 4 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


Псевдокласс :focus

Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.

Синтаксис

Селектор:focus  { ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>focus</title>
  <style>
   #enter .label {
     width: 80px; /* Ширина блока с текстом */
     float: left; /* Расположение в одну строку с полем */
     text-align: right; /* Выравнивание по правому краю */
   }
   #enter .form-text {
     width: 240px; /* Ширина поля */
     margin-left: 10px; /* Расстояние между полем и текстом */
     border: 1px solid #abadb3; /* Рамка вокруг текстового поля */
     padding: 2px; /* Поля вокруг текста */
   }
   #enter .form-item {
     margin-bottom: 5px; /* Отступ снизу */
   }
   #enter .form-text:focus {
     background: #ffe; /* Цвет фона */
     border: 1px solid #29B0D9; /* Параметры рамки */
   }
   #enter p {
    margin-left: 90px; /* Сдвиг вправо */
   }
  </style>
 </head>
 <body>
  <form action="login.php" method="post" id="enter">
   <div class="form-item">
     <span class="label">Логин:</span>
     <span class="field"><input type="text" name="login" value="" class="form-text"></span>
   </div>
   <div class="form-item">
     <span class="label">Пароль:</span>
     <span class="field"><input type="password" name="pass" class="form-text"></span>
   </div>
   <p><input type="submit" value="Войти" /></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.

Результат использования псевдокласса :focus

Рис. 1. Результат использования псевдокласса :focus

Примечание

Chrome не добавляет стиль для элемента a, чтобы заставить его понимать правило a:focus, добавьте к элементу <a> атрибут tabindex.

<a href="1.html" tabindex="1">Ссылка</a>

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


font

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Краткая информация

Значение по умолчанию | Зависит от использования
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family

Значения

В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.

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

caption
Шрифт для текста элементов форм вроде кнопок.
icon
Шрифт для текста под иконками.
menu
Шрифт применяемый в меню.
message-box
Шрифт для диалоговых окон.
small-caption
Шрифт для подписей к небольшим элементам управления.
status-bar
Шрифт для строки состояния окон.

Пример

p { font: 12pt/10pt  sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние (интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).

p { font: bold italic 110% serif; }

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задается в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font</title>
  <style>
   .layer1 {
    font: 12pt sans-serif;
   }
   h1 {
    font: 200% serif;
   }
  </style>
 </head>
 <body>
  <div class="layer1">
  <h1>Duis te feugifacilisi</h1>
  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
  feugat nulla facilisi.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства font

Рис. 1. Применение свойства font

Объектная модель

Объект.style.font

Спецификация

Спецификация | Статус
CSS Fonts Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 6 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


font-family

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берётся следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщённым именем, которое задаёт вид начертания.

Краткая информация

Значение по умолчанию | Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

 font-family: <шрифт> [, <шрифт>[, ...]]

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

  • serif — шрифты с засечками (антиквенные), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • cursive — курсивные шрифты;
  • fantasy — декоративные шрифты;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-family</title>
  <style>
   h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
   }
   p {
    font-family: Georgia, 'Times New Roman', Times, serif;
   }
  </style>
 </head>
 <body>
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства font-family

Рис. 1. Применение свойства font-family

Объектная модель

Объект.style.fontFamily

Спецификация

Спецификация | Статус
CSS Fonts Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


font-size

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

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

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.

Рис. 1. Размер шрифта

Краткая информация

Значение по умолчанию | medium
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

font-size: <абсолютный размер> | <относительный размер> | <размер> | <проценты>

Значения

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML
CSS | xx-small | x-small | small | medium | large | x-large | xx-large |
HTML | 1 |  | 2 | 3 | 4 | 5 | 6 | 7

Относительный размер шрифта задается значениями larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берётся размер шрифта родительского элемента. Отрицательные значения не допускаются.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-size</title>
  <style>
   h1 {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */
    font-size: 250%; /* Размер шрифта в процентах */
   }
   p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11pt; /* Размер шрифта в пунктах */
   }
  </style>
 </head>
 <body>
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства font-size

Рис. 2. Применение свойства font-size

Объектная модель

Объект.style.fontSize

Спецификация

Спецификация | Статус
CSS Fonts Module Level 3 | Возможная рекомендация
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5.5 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


font-stretch

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

font-stretch:  ultra-condensed | extra-condensed | condensed | semi-condensed |
  normal | semi-expanded | expanded | extra-expanded | ultra-expanded

Значения

Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.

Вид букв при разных значениях font-stretch

Рис. 1. Вид букв при разных значениях font-stretch

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-stretch</title>
  <style>
   p {
    font-size: 5em;
    font-family: 'Myriad Pro';
   }
  </style>
 </head>
 <body>
  <p>
   <span style="font-stretch: ultra-condensed">Б</span>
   <span style="font-stretch: extra-condensed">Б</span>
   <span style="font-stretch: condensed">Б</span>
   <span style="font-stretch: semi-condensed">Б</span>
   <span style="font-stretch: normal">Б</span>
   <span style="font-stretch: semi-expanded">Б</span>
   <span style="font-stretch: expanded">Б</span>
   <span style="font-stretch: extra-expanded">Б</span>
   <span style="font-stretch: ultra-expanded">Б</span>
  </p>
 </body>
</html>

Объектная модель

Объект.style.fontStretch

Примечание

Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.

Спецификация

Спецификация | Статус
CSS Fonts Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 |  |  |  | 9
Android | Firefox Mobile | Opera Mobile | Safari Mobile
 | 9 |  |


font-style

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

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

font-style: normal | italic | oblique

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-style</title>
  <style>
   h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Рубленый шрифт заголовка */
   }
   p {
    font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */
    font-style: italic; /* Курсивное начертание */
   }
  </style>
 </head>
 <body>
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства font-style

Рис. 1. Применение свойства font-style

Объектная модель

Объект.style.fontStyle

Примечание

Браузеры текст со значением oblique всегда отображают как курсив (italic).

Спецификация

Спецификация | Статус
CSS Fonts Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


font-variant

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

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

font-variant: normal | small-caps

Значения

normal
Оставляет регистр символов исходным, заданным по умолчанию.
small-caps
Модифицирует все строчные символы как заглавные уменьшенного размера, как показано на рис. 1.

Обычный текст и текст в виде капители

Рис. 1. Обычный текст и текст в виде капители

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-variant</title>
  <style>
   h1 {
    font-variant: small-caps; /* Устанавливаем капитель для заголовка */
   }
  </style>
 </head>
 <body>
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства font-variant

Рис. 2. Применение свойства font-variant

Объектная модель

Объект.style.fontVariant

Спецификация

Спецификация | Статус
CSS Fonts Module Level 3 | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


font-weight

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-weight</title>
  <style>
   h1 {
    font-weight: normal; /* Нормальное начертание */
   }
   .select {
    color: maroon; /* Цвет текста */
    font-weight: 600; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <h1>Duis te feugifacilisi</h1>
  <p><span class="select">Lorem ipsum dolor sit amet</span>,
  consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
  dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства font-weight

Рис. 1. Применение свойства font-weight

Объектная модель

Объект.style.fontWeight

Примечание

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

Спецификация

Спецификация | Статус
CSS Fonts Module Level 3 | Возможная рекомендация
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3.5 | 2 | 3.5 | 1.3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 3.1


height

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным и заменяемым элементам

Синтаксис

height: <размер> | <проценты> | auto

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>height</title>
  <style>
   .layer {
    height: 50px; /* Высота блока */
    width: 150px; /* Ширина блока */
    overflow: scroll; /* Добавляем полосы прокрутки */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства height

Рис. 1. Применение свойства height

Объектная модель

Объект.style.height

Примечание

Браузер Internet Explorer до версии 7 некорректно определяет height как min-height.

В режиме совместимости (quirk mode) Internet Explorer до версии 8 включительно неправильно вычисляет высоту элемента, не добавляя к ней значения отступов, полей и границ.

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


Псевдокласс :hover

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

Синтаксис

Селектор:hover  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>hover</title>
  <style>
   a:link {
    color: #0000d0; /* Цвет ссылок */
    padding: 2px; /* Поля вокруг текста */
   }
   a:hover {
    background: #786b59; /* Цвет фона под ссылкой */
    color: #ffe; /* Цвет ссылки */
   }
  </style>
 </head>
 <body>
  <p><a href="1.html">Ссылка 1</a></p>
  <p><a href="2.html">Ссылка 2</a></p>
  <p><a href="3.html">Ссылка 3</a></p>
 </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат примера показан на рис. 1.

Результат использования псевдокласса :hover для ссылок

Рис. 1. Результат использования псевдокласса :hover для ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hover</title>
  <style>
   ul {
    width: 180px; /* Ширина меню */
    list-style: none; /* Для списка убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
    font-size: 10pt; /* Размер названий в пункте меню */
   }
   li ul {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 165px; /* Сдвигаем подменю вправо */
    margin-top: -2em; /* Сдвигаем подменю вверх */
   }
   li a {
    display: block; /* Ссылка как блочный элемент */
    padding: 5px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
   }
   li a:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #5488af; /* Цвет фона активного пункта */
   }
   li:hover ul {
    display: block; /* При выделении пункта курсором мыши отображается подменю */
   }
   .brd {
    border-bottom: 1px solid #ccc; /* Линия снизу */
   }
  </style>
 </head>
 <body>
  <ul class="menu">
   <li><a href="russian.html">Русская кухня</a>
    <ul>
     <li><a href="linkr1.html">Бефстроганов</a></li>
     <li><a href="linkr2.html">Гусь с яблоками</a></li>
     <li><a href="linkr3.html">Крупеник новгородский</a></li>
     <li><a href="linkr4.html" class="brd">Раки по-русски</a></li>
    </ul>
   </li>
   <li><a href="ukrainian.html">Украинская кухня</a>
    <ul>
     <li><a href="linku1.html">Вареники</a></li>
     <li><a href="linku2.html">Жаркое по-харьковски</a></li>
     <li><a href="linku3.html">Капустняк черниговский</a></li>
     <li><a href="linku4.html" class="brd">Потапцы с помидорами</a></li>
    </ul>
   </li>
   <li><a href="caucasus.html">Кавказская кухня</a>
    <ul>
     <li><a href="linkc1.html">Суп-харчо</a></li>
     <li><a href="linkc2.html">Лилибдж</a></li>
     <li><a href="linkc3.html">Чихиртма</a></li>
     <li><a href="linkc4.html" class="brd">Шашлык</a></li>
    </ul>
   </li>
   <li><a href="asia.html" class="brd">Кухня Средней Азии</a></li>
  </ul>
 </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат примера показан на рис. 2.

Использование :hover для создания меню

Рис. 2. Использование :hover для создания меню

Примечание

В браузере Internet Explorer до версии 7.0 псевдокласс :hover работает только для ссылок.

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 4 | 2 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


hyphens

Свойство hyphens сообщает браузеру, как расставлять переносы слов в блоке текста. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang="ru" к элементу <html> или непосредственно к абзацу текста.

Синтаксис

hyphens: none | manual | auto

Значения

none
Слова не переносятся, даже при наличии в тексте мягких переносов &shy;.
manual
Переносы слов в тексте происходят в тех местах, где добавлен &shy; или <wbr>, если их нет, то переносы не делаются.
auto
Браузер автоматически добавляет переносы слов на основе встроенного словаря переносов.

Пример

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>hyphens</title>
  <style>
   p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
   }
  </style>
 </head>
 <body>
  <p>Никотинамидадениндинуклеотидфосфат — широко
  распространённый в природе кофермент некоторых
  дегидрогеназ — ферментов, катализирующих
  окислительно-восстановительные реакции в
  живых клетках. </p>
</body>
</html>

Результат примера в браузере Internet Explorer показан на рис. 1.

Рис. 1. Переносы слов

Объектная модель

Объект.style.hyphens

Примечание

Internet Explorer поддерживает свойство -ms-hyphens.

Chrome, Safari и Android поддерживают свойство -webkit-hyphens.

Firefox поддерживает свойство -moz-hyphens.

Chrome не поддерживает значение auto, поэтому переносы слов в реальности в нём не работают.

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 13 |  | 5.1 | 6
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4 | 6 |  | 4.2


image-rendering

Сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера.

Краткая информация

Значение по умолчанию | auto
Наследуется | Да
Применяется | К изображениям, фоновым картинкам, <video>, <canvas>

Синтаксис

image-rendering: auto | crisp-edges | pixelated

Значения

auto
Браузер применяет встроенный в него алгоритм интерполяции, обычно применяется бикубический метод.
crisp-edges
Цель алгоритма — быстрое отображение картинки, для чего применяется метод интерполяции по ближайшим точкам. Он не создаёт сглаживания вокруг линий и его можно рекомендовать в тех случаях, когда требуется сохранить первоначальный набор цветов и резкость краёв.
pixelated
При увеличении размера картинки сохраняет контраст и контуры изображения, не допуская размытия цветов и контуров. При уменьшении размеров аналогичен auto.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>image-rendering</title>
  <style>
   img { border: 1px solid #ccc; }
   .fast {
    image-rendering: crisp-edges;
   }
  </style>
 </head>
 <body>
  <p><img src="images/russia.png" alt="Флаг России" width="200">
  <img src="images/russia.png" alt="Флаг России" width="200" class="fast"></p>
 </body>
</html>

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

Примечание

Chrome вместо crisp-edges поддерживает значение -webkit-optimize-contrast.

Opera поддерживает значение -o-crisp-edges.

Firefox поддерживает значение -moz-crisp-edges.

Спецификация

Спецификация | Статус
CSS Image Values and Replaced Content Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
auto |  | 1 | 11.60 |  | 3.6
crisp-edges |  |  | 11.60 |  | 3.6
pixelated |  | 41 | 26 |  |
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
auto | 1 | 3.6 | 11.60 |
crisp-edges |  | 3.6 | 11.60 |
pixelated | 4.1 |  | 26 |


Псевдокласс :indeterminate

Псевдокласс :indeterminate задаёт стиль для переключателей, когда они находятся в неопределённом состоянии. К примеру, если ни один переключатель не помечен, то они находятся в указанном состоянии. В реальности, стиль применяется только к элементам, у которых DOM-атрибут :indeterminate через JavaScript установлен в значение true. Также этот псевдокласс используется некоторыми браузерами для элемента <progress>.

Синтаксис

Селектор:indeterminate { ... }

Пример

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>indeterminate</title>
  <style>
   :indeterminate, :indeterminate + span { background: limegreen; }
   input, span { background: red; }
  </style>
 </head>
 <body>
  <form>
   <p><input type="checkbox"> <span>Этот текст станет зеленым, если чекбокс
    находится в неопределенном состоянии.</span></p>
  </form>
  <script>
   document.getElementsByTagName("input")[0].indeterminate = true;
  </script>
 </body>
</html>

В данном примере с помощью JavaScript первый элемент формы переводится в неопределённое состояние и к нему применяются стили. Результат примера показан на рис. 1.

Результат использования псевдоэлемента :indeterminate

Рис. 1. Результат использования псевдоэлемента :indeterminate

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Возможная рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
input type="checkbox" | 9 | 1 | 10.60 | 3 | 3.6
<progress> | 10 | 6 | 15 | 5.2 | 6
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
input type="checkbox" | 2.1 | 1 | 10 | 3
<progress> | 2.1 | 6 | 15 | 5.2


Псевдокласс :invalid

Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.

Синтаксис

input:invalid  { ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:invalid</title>
  <style>
   input:invalid {
    background: #fdd; /* Красный цвет фона */
   }
   input:valid {
    background: #dfd; /* Зеленый цвет фона */
   }
  </style>
 </head>
 <body>
  <form>
   <p>Адрес сайта</p>
   <p><input type="url" required></p>
   <p>Адрес электронной почты</p>
   <p><input type="email" required></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере корректно заполненные поля формы обозначаются зеленым фоном, а некорректные красным. Результат примера в Chrome показан на рис. 1.

Использование псевдокласса :invalid

Рис. 1. Использование псевдокласса :invalid

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard/a> | Живой стандарт
HTML5 | Возможная рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 10 | 10 | 5 | 4
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4 | 4 | 10 | 5


Псевдокласс :lang

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

Синтаксис

Селектор:lang(<язык>)  { ...  }

Значения

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий; fr — французский; it — итальянский и др.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>lang</title>
  <style>
   p {
    font-size: 1.5em; /* Размер текста */
   }
   q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */
   }
   q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
   }
   q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */
    quotes: "\00AB" "\00BB";
   }
  </style>
 </head>
 <body>
  <p>Цитата на французском языке: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
  <p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
  <p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
 </body>
</html>

Результат данного примера показан на рис. 1. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу <q>.

Результат использования псевдокласса :lang

Рис. 1. Результат использования псевдокласса :lang

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 8 | 3.1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 8 | 3.1


Псевдокласс :last-child

Псевдокласс :last-child задаёт стилевое оформление последнего элемента своего родителя.

Синтаксис

Селектор:last-child  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>last-child</title>
  <style>
   .block {
    background: #7da7d9; /* Цвет фона */
    color: #fff; /* Цвет текста */
   }
   .block :first-child {
    padding: 10px; /*  Поля вокруг текста */
   }
   .block :last-child {
    background: #dda458 url(images/line.png) repeat-x; /* Параметры фона */
    height: 5px; /* Высота блока */
   }
  </style>
 </head>
 <body>
  <div class="block">
   <div>
    При истечении возможности понимания вышеизложенной информации вы
    имеете объективную возможность подать официальный запрос главному
    субординатору локальной виртуальной вселенной.
   </div>
   <div></div>
  </div>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :last-child применяется для определения стиля последнего элемента <div>, расположенного внутри контейнера с именем класса block. Это позволило создать цветную полосу внизу блока без включения новых классов.

Результат использования псевдокласса :last-child

Рис. 1. Результат использования псевдокласса :last-child

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 3.2 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.2


Псевдокласс :last-of-type

Псевдокласс :last-of-type задаёт правила стилей для последнего элемента в списке дочерних элементов своего родителя. К примеру, добавление :last-of-type к селектору li устанавливает стиль только для последнего пункта списка, при этом не распространяется на остальные пункты.

Синтаксис

Селектор:last-of-type  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>last-of-type</title>
  <style>
   p:last-of-type:after {
    content: " ◄"; /* Добавляем символ в конце текста */
    color: #c00000; /* Цвет символа */
   }
  </style>
 </head>
 <body>
  <p>Этот старинный скандинавский напиток пришел к нам из древних времен и
  воспет во многих песнях. Теперь вы самостоятельно можете приготовить
  его и насладиться чудесным вкусом и ароматом легендарного нектара.</p>
  <p>...</p>
  <p>Осталось добавить хлива и хрольва, чтобы напиток был готов.
  Подавать горячим.</p>
 </body>
</html>

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

Результат использования псевдокласса :last-of-type

Рис. 1. Результат использования псевдокласса :last-of-type

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 3.2 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.2


left

Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края (рис. 1).

Значение свойства left относительно окна браузера

Рис. 1. Значение свойства left относительно окна браузера

В случае значения relative, left отсчитывается от левого края исходного положения элемента (рис. 2).

Значение свойства left относительно исходного положения

Рис. 2. Значение свойства left относительно исходного положения

Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от левого края родителя.

Значение свойства left относительно родителя

Рис. 3. Значение свойства left относительно родителя

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

left: <размер> | <проценты> | auto

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение свойства left может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента.

auto
Не изменяет положение элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>left</title>
  <style>
   .layer1 {
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; /* Положение от левого края */
    background: #fc3; /* Цвет фона */
    margin: 7px; /* Отступы вокруг элемента */
   }
   .layer2 {
    position: relative; /* Относительное позиционирование */
    left: -12px; /* Положение от левого края */
    top: 13px; /* Положение от верхнего края */
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin: 7px; /* Отступы вокруг элемента */
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   <div class="layer2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
    volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 4.

Применение свойства left

Рис. 4. Применение свойства left

Объектная модель

Объект.style.left

Примечание

В браузере Internet Explorer до версии 7 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
5.5 | 7 | 1 | 5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


letter-spacing

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

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

letter-spacing: <размер> | normal

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).

normal
Задает интервал между символами как обычно.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>letter-spacing</title>
  <style>
   p {
    letter-spacing: 5px;
   }
  </style>
 </head>
 <body>
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства letter-spacing

Рис. 1. Применение свойства letter-spacing

Объектная модель

Объект.style.letterSpacing

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
Scalable Vector Graphics (SVG) 1.1 (Second Edition) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


line-height

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

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

line-height: <множитель> | <размер> | <проценты> | normal

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.

normal
Расстояние между строк вычисляется автоматически.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>line-height</title>
  <style>
   h1 {
    line-height: 60%;
   }
   p {
    line-height: 1.5;
   }
  </style>
 </head>
 <body>
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства line-height

Рис. 1. Применение свойства line-height

Объектная модель

Объект.style.lineHeight

Примечание

Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


Псевдокласс :link

Псевдокласс :link применяется к ссылкам, которые ещё не посещались пользователем, и задаёт для них стилевое оформление.

Синтаксис

Селектор:link  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>link</title>
  <style>
   a:link {
    color: #0000d0; /* Цвет ссылок */
   }
   a:visited {
    color: #900060; /* Цвет посещенных ссылок */
   }
  </style>
 </head>
 <body>
   <p><a href="task2.html">Выяснить вес нестандартного груза (камень)</a></p>
   <p>Дается: стул, палка, веревка, безмен с ограничением по весу.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат использования псевдокласса :link

Рис. 1. Результат использования псевдокласса :link

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1.5 | 1 | 4 | 3.2


list-style

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

Краткая информация

Значение по умолчанию | Нет
Наследуется | Да
Применяется | К элементам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

Синтаксис

list-style: list-style-type || list-style-position || list-style-image

Значения

Любые комбинации трёх значений определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идёт тип маркера, затем положение и картинка. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>list-style</title>
  <style>
   ul {
    list-style: square outside; /* Квадратные маркеры */
                               /* Маркеры размещаются за
                                  пределами текстового блока */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat.</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства list-style

Рис. 1. Применение свойства list-style

Объектная модель

Объект.style.listStyle

Спецификация

Спецификация | Статус
CSS Lists and Counters Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


list-style-image

Устанавливает адрес изображения, которое служит в качестве маркера списка. Это свойство наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.

Краткая информация

Значение по умолчанию | none
Наследуется | Да
Применяется | К элементам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

Синтаксис

list-style-image: none | url('путь к файлу')

Значения

none
Отменяет изображение в качестве маркера для родительского элемента.
url
Относительный или абсолютный путь к графическому файлу. Значение можно указывать в одинарных, двойных кавычках или без них.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>list-style-image</title>
  <style>
   ul {
    list-style-image: url(images/book.gif);
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
   enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
   nisl ut aliquip ex ea commodo consequat.</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства list-style-image

Рис. 1. Применение свойства list-style-image

Объектная модель

Объект.style.listStyleImage

Примечание

В разных браузерах расстояние между изображением и текстом может различаться.

В Internet Explorer до версии 7 включительно не отображаются маркеры, если для списка добавлено свойство float.

Спецификация

Спецификация | Статус
CSS Lists and Counters Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 8 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


list-style-position

Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается текстом (рис. 2).

Рис. 1. Значение outside

Рис. 2. Значение inside

Краткая информация

Значение по умолчанию | outside
Наследуется | Да
Применяется | К элементам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

Синтаксис

list-style-position: inside | outside

Значения

inside
Маркер является частью текстового блока и отображается в элементе списка.
outside
Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>list-style-position</title>
  <style>
   ul {
    list-style-image: url(images/book.gif); /* Путь к рисунку для установки маркера */
    list-style-position: inside; /* Маркер обтекается текстом */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
   enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
   nisl ut aliquip ex ea commodo consequat.</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 3.

Применение свойства list-style-position

Рис. 3. Применение свойства list-style-position

Объектная модель

Объект.style.listStylePosition

Примечание

В браузере Internet Explorer 6 при использовании нумерованного списка <ol> и значения inside свойства list-style-position, числа идущие с 10, начинают накладываться на текст списка.

Спецификация

Спецификация | Статус
CSS Lists and Counters Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


list-style-type

Изменяет вид маркера для каждого элемента списка. Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка (элемент <ul>) и нумерованного (элемент <ol>).

Краткая информация

Значение по умолчанию | disc (для <ul>); decimal (для <ol>)
Наследуется | Да
Применяется | К элементам <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

Синтаксис

list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero |
   georgian | lower-alpha | lower-greek | lower-latin | lower-roman |
   upper-alpha | upper-latin | upper-roman | none

Значения

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

Маркированный список

circle
Маркер в виде кружка.
disc
Маркер в виде точки.
square
Маркер в виде квадрата.

Нумерованный список

armenian
Традиционная армянская нумерация.
decimal
Арабские числа (1, 2, 3, 4,...).
decimal-leading-zero

Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).
georgian
Традиционная грузинская нумерация.
lower-alpha
Строчные латинские буквы (a, b, c, d,...).
lower-greek
Строчные греческие буквы (α, β, γ, δ,...).
lower-latin
Это значение аналогично lower-alpha.
lower-roman
Римские числа в нижнем регистре (i, ii, iii, iv, v,...).
upper-alpha
Заглавные латинские буквы (A, B, C, D,...).
upper-latin
Это значение аналогично upper-alpha.
upper-roman
Римские числа в верхнем регистре (I, II, III, IV, V,...).
none
Отменяет маркеры для списка.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>list-style-type</title>
  <style>
   ol {
    list-style-type: upper-alpha; /* Заглавные буквы */
   }
  </style>
 </head>
 <body>
  <ol>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat.</li>
   </ol>
 </body>
 </html>

Результат данного примера показан на рис. 1.

Применение свойства list-style-type

Рис. 1. Применение свойства list-style-type

Объектная модель

Объект.style.listStyleType

Примечание

В браузере Internet Explorer 6 при использовании нумерованного списка <ol> и значения inside свойства list-style-position, числа идущие с 10, начинают накладываться на текст списка.

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения armenian, decimal-leading-zero, georgian, lower-greek, lower-latin, upper-latin. Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов (ul { float: left; }).

Internet Explorer 8 дополнительно понимает значение upper-greek, которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ,...).

Спецификация

Спецификация | Статус
CSS Counter Styles Level 3 | Рабочий проект
CSS Lists and Counters Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman | 4 | 1 | 7 | 1 | 1
lower-latin, upper-latin, lower-greek,armenian, georgian | 8 | 1 | 6 | 1 | 1
decimal-leading-zero | 8 | 1 | 8 | 1 | 1
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman | 1 | 1 | 6 | 1
lower-latin, upper-latin, lower-greek,armenian, georgian | 1 | 1 | 6 | 1
decimal-leading-zero | 1 | 1 | 8 | 1


margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Отступ от левого края элемента

Рис. 1. Отступ от левого края элемента

Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <body> равное нулю.

Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить её только для указанных сторон.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

margin: [<размер> | <проценты> | auto] {1,4}

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Табл. 1. Зависимость от числа значений
Число значений | Результат
1 | Отступы будут установлены одновременно от каждого края элемента.
2 | Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3 | Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 | Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Величину отступов можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin</title>
  <style>
   body {
    margin: 0; /* Убираем отступы */
   }
   .parent {
    margin: 20%; /* Отступы вокруг элемента */
    background: #fd0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
   .child {
    border: 3px solid #666; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    margin: 10px; /* Отступы вокруг */
   }
  </style>
 </head>
 <body>
  <div class="parent">
   <div class="child">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
    euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
    ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
    ut aliquip ex ea commodo consequat.
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства margin

Объектная модель

Объект.style.margin

Примечание

Internet Explorer до версии 7 в режиме совместимости (quirk mode) не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto. Также в этом браузере наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

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

Схлопывание не срабатывает:

  • для элементов, у которых на стороне схлопывания задано свойство padding.
  • для элементов, у которых на стороне схлопывания задана граница;
  • на элементах с абсолютным позиционированием, т. е. таких, у которых position установлено как absolute;
  • на плавающих элементах (для них свойство float задано как left или right);
  • для строчных элементов;
  • для <html>.

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


margin-bottom

Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от нижнего края элемента

Рис. 1. Отступ от нижнего края элемента

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

margin-bottom: <размер> | auto

Значения

Величину нижнего отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin-bottom</title>
  <style>
   .layer1 {
    background: #8b0086; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 10px; /* Поля вокруг текста */
    margin-bottom: -7px; /* Отступ снизу */
   }
   .layer2 {
    margin-left: 40px; /* Отступ слева */
    background: #e9c1e4; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   <big>Lorem ipsum dolor sit amet</big>
  </div>
  <div class="layer2">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства margin-bottom

Рис. 2. Применение свойства margin-bottom

Объектная модель

Объект.style.marginBottom

Примечание

Браузер Internet Explorer до версии 7 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


margin-left

Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Рис. 1. Отступ от левого края элемента

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

margin-left: <размер> | auto

Значения

Величину левого отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin-left</title>
  <style>
   .layer1 {
    background-color: #D36037; /* Цвет фона */
   }
   .layer2 {
    margin-left: 20%; /* Отступ слева */
    background-color: #ccc; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   <div class="layer2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
    euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
    ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
    ut aliquip ex ea commodo consequat.
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства margin-left

Рис. 2. Применение свойства margin-left

Объектная модель

Объект.style.marginLeft

Примечание

Браузер Internet Explorer до версии 7 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


margin-right

Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от правого края элемента

Рис. 1. Отступ от правого края элемента

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

margin-right: <размер> | auto

Значения

Величину правого отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin-right</title>
  <style>
   body {
    margin-right: 25%; /* Отступ справа */
    margin-left: 25%; /* Отступ слева */
   }
   .panel {
    background: #007083; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 10px; /* Поля вокруг текста */
    text-align: justify; /* Выравнивание по ширине */
   }
  </style>
 </head>
 <body>
  <div class="panel">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства margin-right

Рис. 2. Применение свойства margin-right

Объектная модель

Объект.style.marginRight

Примечание

Браузер Internet Explorer до версии 7 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


margin-top

Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от верхнего края элемента

Рис. 1. Отступ от верхнего края элемента

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

margin-top: <размер> | auto

Значения

Величину верхнего отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin-top</title>
  <style>
   div {
    background: #fc3; /* Цвет фона */
    border: 2px solid black; /* Параметры рамки */
    padding: 20px; /* Поля вокруг текста */
    margin-top: 20%; /* Отступ сверху */
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства margin-top

Рис. 2. Применение свойства margin-top

Объектная модель

Объект.style.marginTop

Примечание

Браузер Internet Explorer до версии 7 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


max-height

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Высота элемента
Значения свойств |  |  |  |  | Высота
min-height | < | height | < | max-height | height
 |  | height | < | max-height | height
 |  | height | > | max-height | max-height
min-height | > | height | > | max-height | min-height
min-height | > | height | < | max-height | min-height

Данные из таблицы следует понимать следующим образом. Если значение высоты (height) больше значения max-height, то высота элемента принимается равной значению max-height.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, кроме строчных и таблиц

Синтаксис

max-height: <размер> | <проценты> | none

Значения

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

none
Отменяет действие этого свойства.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>max-height</title>
  <style>
   .block {
    overflow: auto; /* Полоса прокрутки при необходимости */
    padding: 10px; /* Поля вокруг текста */
    max-height: 80px; /* Максимальная высота */
    background: #ffe; /* Цвет фона */
    border: 1px solid #cb2027; /* Параметры рамки */
   }
   .block p {
    margin: 2px auto; /* Отступы в абзаце */
   }
  </style>
 </head>
 <body>
  <div class="block">
    <p>Блокирование элемента не позволяет вообще производить с
       ним каких-либо действий, в том числе выделять содержимое
       текстового поля, изменять его или активизировать.
       Заблокированное поле помечается обычно серым цветом</p>
    <p>Некоторые браузеры позволяют выделять и копировать
       содержимое заблокированного текстового поля, но все
       остальные действия недоступны.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат использования свойства max-height

Рис. 1. Результат использования свойства max-height

Объектная модель

Объект.style.maxHeight

Спецификация

Спецификация | Статус
CSS Intrinsic & Extrinsic Sizing Module Level 3 | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 7 | 1


max-width

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Ширина элемента
Значения свойств |  |  |  |  | Ширина
min-width | < | width | < | max-width | width
 |  | width | < | max-width | width
 |  | width | > | max-width | max-width
min-width | > | width | > | max-width | min-width
min-width | > | width | < | max-width | min-width

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) больше значения max-width, то ширина элемента принимается равной значению max-width.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, кроме строчных и таблиц

Синтаксис

max-width: <размер> | <проценты> | none

Значения

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

none
Отменяет действие этого свойства.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Версия сайта для КПК</title>
  <style media="handheld">
   body {
    max-width: 320px; /* Максимальная ширина страницы в пикселах */
   }
  </style>
 </head>
 <body>
  <h1>Текст заголовка</h1>
  <p>Текст примера</p>
 </body>
</html>

В данном примере ширина страницы ограничена размером 320 пикселов для всех наладонных устройств. К ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы.

Объектная модель

Объект.style.maxWidth

Спецификация

Спецификация | Статус
CSS Intrinsic & Extrinsic Sizing Module Level 3 | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 7 | 1


min-height

Задаёт минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Высота элемента
Значения свойств |  |  |  |  | Высота
min-height | < | height | < | max-height | height
min-height | > | height | > | max-height | min-height
min-height | > | height | < | max-height | min-height
min-height | < | height |  |  | height
min-height | > | height |  |  | min-height
min-height | > |  |  | max-height | min-height
min-height | < |  |  | max-height | max-height

Данные из таблицы следует понимать следующим образом. Если значение высоты (height) меньше значения min-height, то высота элемента принимается равной min-height.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам, кроме строчных и таблиц

Синтаксис

min-height: <размер> | <проценты>

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>min-height</title>
  <style>
   #bottom {
    background: #66806E url(images/clover.png) no-repeat 20px bottom; /* Параметры фона */
    min-height: 80px; /* Минимальная высота */
    color: #E4BC96; /* Цвет текста */
    padding: 5px 5px 5px 140px; /* Поля вокруг текста */
   }
   #bottom p { margin: 5px 0; }
   #bottom a {
    color: #FFFDE0;
   }
  </style>
 </head>
 <body>
  <div id="bottom">
    <p>Сайт Cloverfield</p>
    <p><a href="techinfo.html">Информация о сайте</a> <a href="activity.html">Об авторе</a></p>
  </div>
 </body>
</html>

В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселам. Результат примера показан на рис. 1.

Высота блока, заданная с помощью min-height

Рис. 1. Высота блока, заданная с помощью min-height

Объектная модель

Объект.style.minHeight

Спецификация

Спецификация | Статус
CSS Intrinsic & Extrinsic Sizing Module Level 3 | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 7 | 1


min-width

Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.

Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Ширина элемента
Значения свойств |  |  |  |  | Ширина
min-width | < | width | < | max-width | width
min-width | > | width | > | max-width | min-width
min-width | > | width | < | max-width | min-width
min-width | < | width |  |  | width
min-width | > | width |  |  | min-width
min-width | > |  |  | max-width | min-width
min-width | < |  |  | max-width | max-width

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам, кроме строчных и таблиц

Синтаксис

min-width: <размер> | <проценты>

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>min-width</title>
  <style>
   #container {
    min-width: 420px; /* Минимальная ширина контейнера */
   }
   #col1 {
    background-color: #fc0; /* Цвет фона колонки */
    padding: 5px; /* Поля вокруг текста */
    float: left; /* Обтекание по правому краю */
    width: 150px; /* Ширина левой колонки */
   }
   #col2  {
    background-color: #c0c0c0; /* Цвет фона колонки */
    padding: 5px; /* Поля вокруг текста */
    width: 250px; /* Ширина правой колонки */
    float: left; /* Обтекание по правому краю */
   }
  </style>
 </head>
 <body>
  <div id="container">
   <div id="col1">Колонка 1</div>
   <div id="col2">Колонка 2</div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат использования min-width в браузере

Рис. 1. Результат использования min-width в браузере

Объектная модель

Объект.style.minWidth

Спецификация

Спецификация | Статус
CSS Intrinsic & Extrinsic Sizing Module Level 3 | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
7 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 7 | 1


Псевдокласс :not

Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор.

Синтаксис

Селектор:not(<Селектор>) { ... }

В качестве селектора могут указываться псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать псевдокласс :not (конструкция :not(:not(...)) запрещена) и псевдоэлементы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
   input:not([type="submit"]) {
    border: 1px solid #ccc;
    padding: 3px;
   }
  </style>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="user"></p>
   <p>Прилагаемый файл: <input type="file" name="file"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере стиль применяется ко всем элементам <input> за исключением того, в параметрах которого установлено type="submit" (кнопка «Отправить»). Результат примера показан на рис. 1.

Результат использования псевдокласса :not

Рис. 1. Результат использования псевдокласса :not

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 3.2 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.2


Псевдокласс :nth-child

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Синтаксис

Селектор:nth-child(odd | even | <число> | <выражение>) {...}

Значения

odd
Все нечётные номера элементов.
even
Все чётные номера элементов.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>
Задаётся в виде an+b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса
Значение | Номера элементов | Описание
1 | 1 | Первый элемент, является синонимом псевдокласса :first-child.
5 | 5 | Пятый элемент.
2n | 2, 4, 6, 8, 10 | Все чётные элементы, аналог значения even.
2n+1 | 1, 3, 5, 7, 9 | Все нечётные элементы, аналог значения odd.
3n+2 | 2, 5, 8, 11, 14 | —
-n+3 | 3, 2, 1 | —
5n-2 | 3, 8, 13, 18, 23 | —
even | 2, 4, 6, 8, 10 | Все чётные элементы.
odd | 1, 3, 5, 7, 9 | Все нечётные элементы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-child</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   tr:nth-child(2n) {
    background: #f0f0f0; /* Цвет фона */
   }
   tr:nth-child(1) {
    background: #666; /* Цвет фона */
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <table border="1">
   <tr>
    <td>&nbsp;</td><td>2134</td><td>2135</td>
    <td>2136</td><td>2137</td><td>2138</td>
   </tr>
   <tr>
    <td>Нефть</td><td>16</td><td>34</td>
    <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>4</td><td>69</td>
    <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>7</td><td>73</td>
    <td>79</td><td>34</td><td>86</td>
   </tr>
   <tr>
    <td>Камни</td><td>23</td><td>34</td>
    <td>88</td><td>53</td><td>103</td>
   </tr>
  </table>
 </body>
</html>

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис. 1).

Применение псевдокласса :nth-child к строкам таблицы

Рис. 1. Применение псевдокласса :nth-child к строкам таблицы

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 3.1 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 9.5 | 3.1


Псевдокласс :nth-last-child

Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.

Синтаксис

Селектор:nth-last-child(odd | even | <число> | <выражение>) {...}

Значения

odd
Все нечётные номера элементов.
even
Все чётные номера элементов.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
<выражение>
Задаётся в виде an+b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса
Значение | Номера элементов | Описание
1 | 1 | Последний элемент, является синонимом псевдокласса :last-child.
5 | 5 | Пятый элемент с конца.
2n | 2, 4, 6, 8, 10 | Все чётные элементы, аналог значения even.
2n+1 | 1, 3, 5, 7, 9 | Все нечётные элементы, аналог значения odd.
3n+2 | 2, 5, 8, 11, 14 | —
-n+3 | 3, 2, 1 | —
5n-2 | 3, 8, 13, 18, 23 | —
even | 2, 4, 6, 8, 10 | Все чётные элементы.
odd | 1, 3, 5, 7, 9 | Все нечётные элементы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-last-child</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   td {
    border: 1px solid #333; /* Параметры рамки */
    padding: 3px; /* Поля в ячейках */
    border-left: 3px double #333; /* Граница слева */
   }
   td:nth-last-child(2n+1) {
    background: #f0f0f0; /* Цвет фона */
   }
   td:nth-child(1) {
    border: 1px solid #333; /* Параметры рамки */
    background: #cfc; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>&nbsp;</td><td>2134</td><td>2135</td>
    <td>2136</td><td>2137</td><td>2138</td>
   </tr>
   <tr>
    <td>Нефть</td><td>16</td><td>34</td>
    <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>4</td><td>69</td>
    <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>7</td><td>73</td>
    <td>79</td><td>34</td><td>86</td>
   </tr>
   <tr>
    <td>Камни</td><td>23</td><td>34</td>
    <td>88</td><td>53</td><td>103</td>
   </tr>
  </table>
 </body>
</html>

В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).

Применение псевдокласса :nth-last-child к колонкам таблицы

Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 4 | 9.5 | 3.2 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.2


Псевдокласс :nth-last-of-type

Псевдокласс :nth-last-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-of-type отсчёт ведётся не от первого элемента, а от последнего.

Синтаксис

Селектор:nth-last-of-type(odd | even | <число> | <выражение>) {...}

Значения

odd
Все нечётные номера элементов.
even
Все чётные номера элементов.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
<выражение>
Задаётся в виде an+b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса
Значение | Номера элементов | Описание
1 | 1 | Последний элемент.
5 | 5 | Пятый элемент с конца.
2n | 2, 4, 6, 8, 10 | Все чётные элементы, аналог значения even.
2n+1 | 1, 3, 5, 7, 9 | Все нечётные элементы, аналог значения odd.
3n+2 | 2, 5, 8, 11, 14 | —
-n+3 | 3, 2, 1 | —
5n-2 | 3, 8, 13, 18, 23 | —
even | 2, 4, 6, 8, 10 | Все чётные элементы.
odd | 1, 3, 5, 7, 9 | Все нечётные элементы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-last-of-type</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   td {
    border: 1px solid #333; /* Параметры рамки */
    padding: 3px; /* Поля в ячейках */
   }
   td:not(:first-of-type) {
    border-left: 3px double #333; /* Граница слева */
   }
   td:first-of-type {
    background: #eb9; /* Цвет фона */
   }
   td:nth-last-of-type(2n+1) {
    background: #f0f0f0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>&nbsp;</td><td>2134</td><td>2135</td>
    <td>2136</td><td>2137</td><td>2138</td>
   </tr>
   <tr>
    <td>Нефть</td><td>16</td><td>34</td>
    <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>4</td><td>69</td>
    <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>7</td><td>73</td>
    <td>79</td><td>34</td><td>86</td>
   </tr>
   <tr>
    <td>Камни</td><td>23</td><td>34</td>
    <td>88</td><td>53</td><td>103</td>
   </tr>
  </table>
 </body>
</html>

В данном примере псевдокласс :nth-last-of-type используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).

Применение псевдокласса :nth-last-of-type к колонкам таблицы

Рис. 1. Применение псевдокласса :nth-last-of-type к колонкам таблицы

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 4 | 9.5 | 3.2 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.2


Псевдокласс :nth-of-type

Псевдокласс :nth-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.

Синтаксис

Селектор:nth-of-type(odd | even | <число> | <выражение>) {...}

Значения

odd
Все нечётные номера элементов.
even
Все чётные номера элементов.
<число>
Порядковый номер указанного элемента. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>
Задаётся в виде an+b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса
Значение | Номера элементов | Описание
1 | 1 | Первый элемент.
5 | 5 | Пятый элемент.
2n | 2, 4, 6, 8, 10 | Все чётные элементы, аналог значения even.
2n+1 | 1, 3, 5, 7, 9 | Все нечётные элементы, аналог значения odd.
3n+2 | 2, 5, 8, 11, 14 | —
-n+3 | 3, 2, 1 | —
5n-2 | 3, 8, 13, 18, 23 | —
even | 2, 4, 6, 8, 10 | Все чётные элементы.
odd | 1, 3, 5, 7, 9 | Все нечётные элементы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
   img:nth-of-type(2n+1) { float: left; }
   img:nth-of-type(2n) { float: right; }
  </style>
 </head>
 <body>
  <p><img src="images/left.gif" alt="">
   <img src="images/right.gif" alt=""></p>
   <h1>Исторический турнир</h1>
 </body>
</html>

В данном примере нечётные картинки выравниваются по левому краю окна, а чётные картинки по правому (рис. 1).

Применение псевдокласса :nth-of-type к изображениям

Рис. 1. Применение псевдокласса :nth-of-type к изображениям

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 4 | 9.5 | 3.1 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 9.5 | 3.1


object-fit

Управляет соотношением сторон заменяемых элементов, таких как <img> и <video>, когда у них задана ширина или высота, а также способом масштабирования. Свойство object-fit может сохранять исходные пропорции элемента или наоборот, искажать пропорции, в угоду соблюдения размеров.

Краткая информация

Значение по умолчанию | fill
Наследуется | Нет
Применяется | К <img>, <video>, <object>, <input type="image">

Синтаксис

object-fit: fill | contain | cover | none

Значения

fill
Элемент масштабируется, чтобы соответствовать заданным размерам, при этом пропорции игнорируются.
contain
Элемент масштабируется, чтобы целиком уместиться в заданные размеры с соблюдением пропорций.
cover
Элемент увеличивается или уменьшается, чтобы целиком заполнить заданную область с сохранением пропорций.
none
Сохраняются исходные пропорции элемента, установленные значения ширины или высоты не влияют на содержимое.

Влияние разных значений на фотографии продемонстрировано на рис. 1. Был использован следующий стиль.

img {
  background: #ccc; overflow: hidden;
  width: 200px; height: 200px;
}

Исходные изображения

fill

contain

cover

none

Рис. 1. Фотографии с разным значением object-fit

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>object-fit</title>
   <style>
    .dolphin img {
     object-fit: cover;
      height: 400px;
      width: 300px
      background: #020509;
    }
  </style>
 </head>
 <body>
  <p class="dolphin"><img src="images/dolphin.jpg" alt="Дельфин"></p>
 </body>
</html>

Объектная модель

Объект.style.objectFit

Примечание

Opera до версии 19 поддерживает свойство -o-object-fit.

Спецификация

Спецификация | Статус
CSS Image Values and Replaced Content Module Level 4 | Рабочий проект
CSS Image Values and Replaced Content Module Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
 | 31 | 10.60 | 19 | 5 | 36
Android | Firefox Mobile | Opera Mobile |  | Safari Mobile
4.4.4 | 36 | 11.5 | 24 | 5


Псевдокласс :only-child

Псевдокласс :only-child применяется к дочернему элементу, только если он единственный у родителя. Аналогичен использованию :first-child:last-child или :nth-child(1):nth-last-child(1).

Синтаксис

Селектор:only-child  {  ...  }

Примечание

В Safari до версии 3.0 псевдокласс :only-child воспринимается как :first-child.

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 2 | 9.5 | 3.1 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.1


Псевдокласс :only-of-type

Псевдокласс :only-of-type применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогичен использованию :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).

Синтаксис

Селектор:only-of-type  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>only-of-type</title>
  <style>
   img:only-of-type {
    border: 2px solid red; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <p><img src="images/figure.jpg" alt="">
     <img src="images/figure.jpg" alt=""></p>
  <p><img src="images/figure.jpg" alt=""></p>
 </body>
</html>

В примере псевдокласс :only-of-type применяется к селектору img, в правилах стиля которого задаётся рамка красного цвета для картинок. Сама рамка добавляется к изображениям, которые у своих родителей (в данном случае это тег <p>) встречаются только один раз. В первой строке повторяется два изображения, поэтому псевдокласс не действует, во второй строке вставлено одно изображение, для него :only-of-type и работает.

Применение псевдокласса :only-of-type к картинкам

Рис. 1. Применение псевдокласса :only-of-type к картинкам

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 3.2 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 3.2


opacity

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

Краткая информация

Значение по умолчанию | 1
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

opacity: <число>

Значения

В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>opacity</title>
  <style>
   .semi {
    opacity: 0.5; /* Полупрозрачность элемента */
   }
  </style>
 </head>
 <body>
  <p>
    <img src="images/igels.png" alt="Обычный рисунок">
    <img src="images/igels.png" alt="Полупрозрачный рисунок" class="semi">
  </p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат использования opacity

Рис. 1. Результат использования opacity

Объектная модель

Объект.style.opacity

Примечание

Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Color Module Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9 | 1.2 | 1 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 9 | 3.2


Псевдокласс :optional

Применяет стилевые правила к элементу <input>, у которого не задан атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optional применяется к необязательным полям формы.

Синтаксис

input:optional  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:optional</title>
  <style>
   input:optional {
    opacity: 0.5; /* Полупрозрачность */
   }
  </style>
 </head>
 <body>
  <form>
   <p>Пожалуйста, укажите ваше имя и возраст.</p>
   <p>Имя: <input name="name"></p>
   <p>Возраст: <input type="number" min="18" required name="old"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Возможная рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 10 | 10 | 5 | 4
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4 | 4 | 10 | 5


orphans

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

Краткая информация

Значение по умолчанию | 2
Наследуется | Да
Применяется | К блочным элементам

Синтаксис

orphans: <число>

Значения

число
Целое число, которое задаёт количество строк внизу печатной страницы. Отрицательное значение запрещено.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>orphans</title>
  <style>
   @media print {
    p {
     widows: 3;
     orphans: 3;
    }
   }
  </style>
 </head>
 <body>
  <p>Роджерс определял терапию как, интроекция интегрирует гештальт, в полном соответствии
  с основными законами развития человека. Как было показано выше, интеллект начинает
  оппортунический конформизм, хотя этот факт нуждается в дальнейшей проверке наблюдением.
  Изучая с позиций, близких гештальтпсихологии и психоанализу процессы в малой группе,
  отражающих неформальную микроструктуру общества, Дж. Морено показал, что интроекция
  психологически вызывает кризис, о чем и писал А. Маслоу в своей
  работе «Мотивация и личность».</p>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Fragmentation Module Level 3 | Рабочий проект
CSS Multi-column Layout Module | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 25 | 9.2 |  |
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4 |  | 9 |


outline

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

Краткая информация

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

outline: outline-color || outline-style || outline-width

Значения

outline-color
Задаёт цвет линии в любом допустимом для CSS формате.
outline-style
Стиль линии.
outline-width
Толщина границы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline</title>
  <style>
   .photo img {
    padding: 20px; /* Поля вокруг изображения */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 10px; /* Отступ снизу */
    outline: 1px solid #666; /* Параметры рамки */
    background: #f0f0f0; /* Цвет фона */
    float: left; /* Обтекание по правому краю */
   }
  </style>
 </head>
 <body>
  <div class="photo">
   <img src="images/girl.jpg" alt="Девочка с муфтой">
   <img src="images/owl.jpg" alt="Сова">
   <img src="images/boy.jpg" alt="Эвенкийский мальчик">
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Использование свойства outline

Рис. 1. Использование свойства outline

Объектная модель

Объект.style.outline

Спецификация

Спецификация | Статус
CSS Basic User Interface Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 7 | 1.2 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 3.1


outline-color

Указывает цвет внешней границы элемента. В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Краткая информация

Значение по умолчанию | invert
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

outline-color: invert | <цвет>

Значения

invert
Автоматически задаёт цвет линии, исходя из фона под ней для достижения максимального контраста. В CSS 2.1 браузеру разрешается игнорировать значение invert и вместо него использовать цвет линии заданный свойством color.
цвет
Задаёт цвет линии в любом допустимом для CSS формате.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline-color</title>
  <style>
   #block {
    outline-style: dashed; /* Пунктирная граница */
    outline-color: #be8b5e; /* Цвет границы */
    padding: 10px; /* Поля вокруг текста */
    background: #eedac8; /* Цвет фона */
   }
  </style>
 </head>
 <body>
   <div id="block">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
     nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
 </body>
</html>

Результат примера показан на рис. 1.

Использование свойства outline-color

Рис. 1. Использование свойства outline-color

Объектная модель

Объект.style.outlineColor

Примечание

Chrome, Android и Safari не поддерживают значение invert.

Спецификация

Спецификация | Статус
CSS Basic User Interface Module Level 3 | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 7 | 1.2 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 3.1


outline-offset

Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

outline-offset: <размер>

Значения

<размер>
Задаёт расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline-offset</title>
  <style>
   .clue {
    background: url(images/leather.jpg); /* Фоновый рисунок */
    outline: 2px dashed rgba(255,255,255,0.8); /* Пунктирная рамка */
    outline-offset: -10px; /* Выводим рамку внутри элемента */
    padding: 10px; /* Поля */
    min-height: 100px; /* Минимальная высота */
   }
  </style>
 </head>
 <body>
   <div class="clue"></div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Использование свойства outline-offset

Рис. 1. Использование свойства outline-offset

Объектная модель

Объект.style.outlineOffset

Спецификация

Спецификация | Статус
CSS Basic User Interface Module Level 3 | Рабочий проект
CSS Transitions | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
 | 1 | 9.5 | 1.2 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1.5 | 10 | 1.2


outline-style

Устанавливает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset

Значения

none
Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создаёт эффект вдавленной рамки.
ridge
Создаёт эффект рельефной границы.
inset
Псевдотрёхмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
outset
Псевдотрёхмерная рамка, при которой левая и верхняя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.

Вид указанных стилей представлен на рис. 1.

Рис. 1. Вид границы с разным значением стилей

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline-style</title>
  <style>
   .noborder a {
    outline-style: none; /* Убираем границу вокруг ссылок */
   }
  </style>
 </head>
<body>
   <p><a href="http://ya.ru">Яндекс</a>
   <a href="http://google.ru">Google</a></p>

   <p class="noborder"><a href="http://ya.ru">Яндекс</a>
   <a href="http://google.ru">Google</a></p>
 </body>
</html>

Результат примера показан на рис. 2. В данном примере для браузера IE8 убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка ещё будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style.

Использование свойства outline-style для ссылок

Рис. 2. Использование свойства outline-style для ссылок

Объектная модель

Объект.style.outlineStyle

Спецификация

Спецификация | Статус
CSS Basic User Interface Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 7 | 1.2 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1.5 | 7 | 1.2


outline-width

Определяет толщину внешней границы элемента. В отличие от свойства border-width, для outline-width нельзя задать границу для каждой стороны элемента индивидуально.

Чтобы outline-width работал, необходимо установить у свойства outline-style любое значение кроме none.

Краткая информация

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

outline-width: thin | medium | thick | <размер>

Значения

thin
Тонкая линия. Значение в пикселах может изменяться в зависимости от браузера, но обычно составляет 1 пиксел.
medium
Линия средней толщины (3 пиксела).
thick
Линия большой толщины (6 пикселов).
<размер>
Для точной установки толщины можно использовать любые единицы размера принятые в CSS.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline-width</title>
  <style>
   #block {
    outline-style: dotted; /* Пунктирная внешняя граница */
    outline-width: 3px; /* Толщина внешней границы */
    padding: 10px; /* Поля вокруг текста */
    border: 3px dotted #000; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
   <div id="block">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
 </body>
</html>

Результат примера показан на рис. 1.

Использование свойства outline-width

Рис. 1. Использование свойства outline-width

Объектная модель

Объект.style.outlineWidth

Спецификация

Спецификация | Статус
CSS Basic User Interface Module Level 3 | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 7 | 1.2 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1.5 | 7 | 1.2


overflow

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

Краткая информация

Значение по умолчанию | visible
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

overflow: auto | hidden | scroll | visible

Значения

visible
Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляются полосы прокрутки.
auto
Полосы прокрутки добавляются только при необходимости.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow</title>
  <style>
   .layer {
    overflow: scroll; /* Добавляем полосы прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
   <div class="layer">
   <h2>Duis te feugifacilisi</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства overflow

Рис. 1. Применение свойства overflow

Объектная модель

Объект.style.overflow

Примечание

Internet Explorer до версии 7.0 включительно:

  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position: fixed.

Internet Explorer 8:

  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll, игнорируется ширина, заданная через свойство max-width.
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.

Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы (<thead>, <tbody>, <tfoot>).

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 7 | 1


overflow-x

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

Краткая информация

Значение по умолчанию | visible
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

overflow-x: auto | hidden | scroll | visible

Значения

visible
Отображается всё содержание элемента, даже за пределами установленной ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется горизонтальная полоса прокрутки.
auto
Горизонтальная полоса прокрутки добавляется только при необходимости.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow-x</title>
  <style>
   .layer {
    overflow-x: scroll; /* Добавляем полосу прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
    white-space: nowrap; /* Запрещаем перенос строк */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   <h2>Duis te feugifacilisi</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства overflow-x

Рис. 1. Применение свойства overflow-x

Объектная модель

Объект.style.overflowX

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5 | 1 | 9.5 | 3 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 10 | 3


overflow-y

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

Краткая информация

Значение по умолчанию | visible
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

overflow-y: auto | hidden | scroll | visible

Значения

visible
Отображается всё содержание элемента, даже за пределами установленной высоты.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется вертикальная полоса прокрутки.
auto
Вертикальная полоса прокрутки добавляется только при необходимости.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow-y</title>
  <style>
   body {
    overflow-y: hidden; /* Убираем вертикальную полосу прокрутки */
   }
   .layer {
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   <h2>Duis te feugifacilisi</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства oveflow-y

Рис. 1. Применение свойства overflow-y

Объектная модель

Объект.style.overflowY

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5 | 1 | 9.5 | 3 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 10 | 3


padding

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

Рис. 1. Поле слева от текста

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

padding: [<размер> | <проценты>] {1, 4}

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Табл. 1. Зависимость от числа значений
Число значений | Результат
1 | Поля будут установлены одновременно от каждого края элемента.
2 | Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3 | Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 | Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding</title>
  <style>
   .layer {
    background: #fc3; /* Цвет фона */
    border: 2px solid black;  /* Параметры рамки */
    padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства padding

Рис. 2. Применение свойства padding

Объектная модель

Объект.style.padding

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


padding-bottom

Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле снизу от текста

Рис. 1. Поле снизу от текста

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

padding-bottom: [<размер> | <проценты>]

Значения

Величину нижнего поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding-bottom</title>
  <style>
   .layer {
    background: #fc3; /* Цвет фона */
    border: 2px solid #000; /* Параметры рамки */
    padding-bottom: 40px; /* Поле снизу от текста */
    padding-top: 40px; /* Поле сверху от текста */
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   Lorem ipsum dolor sit amet
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства padding-bottom

Рис. 2. Применение свойства padding-bottom

Объектная модель

Объект.style.paddingBottom

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


padding-left

Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

Рис. 1. Поле слева от текста

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

padding-left: [<размер> | <проценты>]

Значения

Величину левого поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding-left</title>
  <style>
   .layer {
    background: #fc3; /* Цвет фона */
    border: 2px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
   }
   .layer p {
    margin: 0; /* Убираем отступы вокруг */
    padding-left: 10%; /* Поле слева */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
   lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства padding-left

Рис. 1. Применение свойства padding-left

Объектная модель

Объект.style.paddingLeft

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


padding-right

Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле справа от текста

Рис. 1. Поле справа от текста

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

padding-right: [<размер> | <проценты>]

Значения

Величину правого поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding-right</title>
  <style>
   .layer {
    background: #ffe url(images/help.png) no-repeat top right; /* Параметры фона */
    border: 2px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    padding-right: 90px; /* Поле справа */
    text-align: justify; /* Выравнивание по ширине */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna
   aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
   nostrud exerci tution ullamcorper suscipit lobortis nisl ut
   aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства padding-right

Рис. 2. Применение свойства padding-right

Объектная модель

Объект.style.paddingRight

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


padding-top

Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле сверху от текста

Рис. 1. Поле сверху от текста

Краткая информация

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

padding-top: [<размер> | <проценты>]

Значения

Величину верхнего поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding-top</title>
  <style>
   .layer {
    background: #fc3; /* Цвет фона */
    border-top: 5px solid #000; /* Параметры верхней линии */
    border-bottom: 5px solid #000; /* Параметры нижней линии */
    padding: 5px; /* Поля вокруг текста */
    padding-top: 10%; /* Поле сверху */
    padding-bottom: 10%; /* Поле снизу */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Применение свойства padding-top

Рис. 2. Применение свойства padding-top

Объектная модель

Объект.style.paddingTop

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


page-break-after

Добавляет разрыв страницы при печати документа после заданного элемента.

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

page-break-after: always | auto | avoid | left | right

Значения

always
Всегда добавляет разрыв страницы после элемента.
auto
Вставляет разрыв страницы при необходимости.
avoid
Запрещает разрыв страницы после элемента.
left
Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной.
right
Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>page-break-after</title>
  <style>
   @media print {
    .more {
     page-break-after: always;
    }
   }
  </style>
 </head>
 <body>
  <h2>Мусорные пакеты</h2>
  <p>История о том, как однажды мусорных пакетов оказалось несколько больше,
     чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p>
  <p class="more">Читать дальше</p>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Paged Media Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
auto, always | 4 | 1 | 7 | 1.2 | 1
avoid, left, right | 4 | 1 | 7 | 1.2 |
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
auto, always | 1 | 1 | 7 | 1.3
avoid, left, right | 1 |  | 7 | 1.3


page-break-before

Добавляет разрыв страницы при печати документа перед заданным элементом.

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

page-break-before: always | auto | avoid | left | right

Значения

always
Всегда добавляет разрыв страницы перед элементом.
auto
Вставляет разрыв страницы при необходимости.
avoid
Запрещает разрыв страницы перед элементом.
left
Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была четной.
right
Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была нечетной.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>page-break-before</title>
  <style>
   @media print {
    .more {
     page-break-before: always;
    }
   }
  </style>
 </head>
 <body>
  <h2>Мусорные пакеты</h2>
  <p>История о том, как однажды мусорных пакетов оказалось несколько больше,
     чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p>
  <p class="more">Читать дальше</p>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Paged Media Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
auto, always | 4 | 1 | 7 | 1.2 | 1
avoid, left, right | 4 | 1 | 7 | 1.2 |
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
auto, always | 1 | 1 | 7 | 1.3
avoid, left, right | 1 |  | 7 | 1.3


page-break-inside

Разрешает или запрещает разрыв страницы внутри элемента при печати.

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

page-break-inside: auto | avoid

Значения

auto
Вставляет разрыв страницы при необходимости.
avoid
Запрещает разрыв страницы внутри элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>page-break-inside</title>
  <style>
   @media print {
    p {
     page-break-inside: avoid;
    }
   }
  </style>
 </head>
 <body>
  <h2>Мусорные пакеты</h2>
  <p>История о том, как однажды мусорных пакетов оказалось несколько больше,
     чем хотелось, как и для чего их можно использовать, и что из этого
     получилось.</p>
  <p class="more">Читать дальше</p>
 </body>
</html>

Спецификация

Спецификация | Статус
CSS Paged Media Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 1 | 7 | 1.3 | 19
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 19 | 7 | 1.3


position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Краткая информация

Значение по умолчанию | static
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

position: absolute | fixed | relative | static

Значения

absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   <div class="layer2">
     <img src="images/girl.jpg" alt="Девочка" />
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства position

Рис. 1. Применение свойства position

Объектная модель

Объект.style.position

Примечание

Браузер Internet Explorer до версии 7 значение fixed не поддерживает.

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация
CSS Positioned Layout Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 7 | 1 | 4 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


quotes

Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, свойство quotes позволяет задать вид их отображения по всему тексту и установить, таким образом, его единообразное оформление. Добавление кавычек происходит автоматически для содержимого контейнера <q>, а также для текста, к которому применяется стилевое свойство content со значением open-quote (открывающая кавычка) или close-quote (закрывающая кавычка).

Краткая информация

Значение по умолчанию | Зависит от браузера, его настроек и операционной системы. Чаще всего используется кавычки вида "/"
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

quotes: <Строка> <Строка> | none

Значения

В качестве значения используется символ текста (например, quotes: "«" "»") или символ юникода. Некоторые из них перечислены в табл. 1.

Табл. 1. Виды кавычек
Вид | Спецкод HTML | Юникод | Описание
" | &#34; | \0022 | Двойная кавычка, применяется обычно в моноширинных шрифтах, для обозначения символа дюйма, а также угловых секунд.
' | &#39; | \0027 | Апостроф. Символ угловых минут, в латинице применяется для обозначения мягкого знака (popalas' lisa).
« | &#171; или &laquo; | \00ab | Открывающая двойная угловая кавычка.
» | &#187; или &raquo; | \00bb | Закрывающая двойная угловая кавычка.
‘ | &#8216; | \2018 | Открывающая одинарная кавычка.
’ | &#8217; | \2019 | Закрывающая одинарная кавычка.
“ | &#8220; | \201c | Открывающая двойная кавычка в англоязычных текстах или закрывающая для русского языка.
” | &#8221; | \201d | Закрывающая двойная кавычка в англоязычных текстах.
„ | &#8222; | \201e | Открывающая двойная кавычка. Применяется в русском языке.
none
Кавычки не добавляются.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>quotes</title>
  <style>
   q {
    font-family: Times, serif; /* Шрифт с засечками */
    font-style: italic; /* Курсивное начертание текста */
    color: navy; /* Синий цвет текста */
    quotes: "\00ab" "\00bb"; /* Кавычки в виде двойных угловых скобок */
   }
  </style>
 </head>
 <body>
  <p>Станислав Лец утверждал: <q>Чаще всего выход там, где был вход</q>.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства quotes

Рис. 1. Применение свойства quotes

Объектная модель

Объект.style.quotes

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 11 | 4 | 5.1 | 1.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 2 | 6 | 5.1


Псевдокласс :read-only

Применяется к полям формы, у которых задан атрибут readonly. Такое поле не может быть модифицировано и получить фокус.

Синтаксис

input:read-only  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:read-only</title>
  <style>
   input:read-only {
    opacity: 0.3; /* Полупрозрачность */
   }
  </style>
 </head>
 <body>
  <form>
    <p><input type="text" name="comment" size="40"
       value="Введенный текст не может изменяться" readonly></p>
    <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Возможная рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
 | 8 | 10.5 | 5 |
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4 |  | 10.5 | 5


Псевдокласс :read-write

Применяется к полям формы, доступных для изменения. Псевдокласс :read-write является противоположным по своему действию :read-only, который применяется к полям с атрибутом readonly (только для чтения).

Синтаксис

input:read-write  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:read-write</title>
  <style>
   input:read-write {
    border: 1px solid green;
   }
  </style>
 </head>
 <body>
  <form>
    <p><input type="text" size="40"
       value="Введенный текст не может изменяться" readonly></p>
    <p><input type="text" size="40"
       value="Этот текст может изменяться"></p>
    <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Возможная рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
 | 12 | 10.5 | 5 |
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4 |  | 10.5 | 5


Псевдокласс :required

Применяет стилевые правила к элементу <input>, у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы.

Синтаксис

input:required  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Комментарии</title>
  <style>
   #comment p {
    margin: 0 0 5px; /* Отступ снизу */
   }
   #comment label {
    width: 110px; /* Ширина текста */
    float: left; /* Выстраиваем по горизонтали */
    text-align: right; /* Текст по правому краю */
    padding-right: 10px; /* Поле справа */
   }
   #comment input[type="text"], #comment textarea {
    width: 320px; /* Ширина текстовых полей */
   }
   input:required {
    border: 1px solid red; /* Красная рамка для обязательных полей */
   }
  </style>
 </head>
 <body>
  <form id="comment">
   <p><label for="user">Имя</label>
      <input id="user" type="text" required></p>
   <p><label for="email">E-mail</label><input id="email" type="text"></p>
   <p><label for="text">Комментарий</label>
      <textarea cols="40" rows="10" id="text"></textarea></p>
   <p><label>&nbsp;</label><input type="submit" id="send" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере обязательным считается поле для ввода имени, оно выделяется красной рамкой за счёт применения псевдокласса :required. Результат примера в Safari 5 показан на рис. 1.

Использование псевдокласса :required

Рис. 1. Использование псевдокласса :required

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Возможная рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 10 | 10 | 5 | 4
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4 | 4 | 10 | 5


resize

Указывает, можно ли пользователю изменять размеры текстового поля.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | К <textarea> или к любому элементу, у которого свойство overflow задано как visible

Синтаксис

resize: none | both | horizontal | vertical

Значения

none
Размеры элемента не изменяются.
both
Можно изменять размеры элемента по горизонтали и вертикали.
horizontal
Можно изменять размеры элемента только по горизонтали.
vertical
Можно изменять размеры элемента только по вертикали.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>resize</title>
  <style>
   textarea { resize: both; }
  </style>
 </head>
 <body>
  <p>Потяните за правый уголок, чтобы изменить размер текстового поля.</p>
  <p><textarea cols="30" rows="7"></textarea></p>
 </body>
</html>

Объектная модель

Объект.style.resize

Спецификация

Спецификация | Статус
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
 | 4 | 12.10 | 4 | 5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 5 | 12.10 | 4


right

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края (рис. 1). В случае значения relative, right отсчитывается от правого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от правого края родителя (рис. 2).

Рис. 1. Значение свойства right относительно окна браузера

Рис. 1. Значение свойства right относительно окна браузера

Рис. 1. Значение свойства right относительно родителя

Рис. 2. Значение свойства right относительно родителя

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

right: <размер> | <проценты> | auto

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента.

auto
Не изменяет положение элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>right</title>
   <style>
    .leftcol {
     position: absolute; /* Абсолютное позиционирование */
     top: 20px; /* Положение от верхнего края */
     left: 10px; /* Положение от левого края */
     width: 100px; /* Ширина блока */
     background: #fc3; /* Цвет фона */
     border: 1px solid #000; /* Параметры рамки */
     padding: 10px; /* Поля вокруг текста */
    }
    .centercol {
     position: relative; /* Относительное позиционирование */
     background: maroon; /* Цвет фона */
     padding: 10px; /* Поля вокруг текста */
     color: white; /* Цвет текста */
     border: 1px solid #000; /* Параметры рамки */
     margin: 20px 240px 0 140px; /* Отступы вокруг блока */
    }
    .rightcol {
     position: absolute; /* Абсолютное позиционирование */
     top: 20px; /* Положение от верхнего края */
     right: 10px; /* Положение от правого края */
     width: 200px; /* Ширина блока */
     background: #ccc; /* Цвет фона */
     border: 1px solid black; /* Параметры рамки */
     padding: 10px; /* Поля вокруг текста */
    }
   </style>
  </head>
 <body>
  <div class="leftcol">Колонка 1</div>
  <div class="centercol">Колонка 2</div>
  <div class="rightcol">Колонка 3</div>
 </body>
</html>

Результат данного примера показан на рис. 3.

Применение свойства right

Рис. 3. Применение свойства right

Объектная модель

Объект.style.right

Примечание

В браузере Internet Explorer до версии 7 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
5.5 | 7 | 1 | 5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


Псевдокласс :root

Псевдокласс :root определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу <html>.

Синтаксис

:root  {  ...  }

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 10 | 1


Псевдоэлемент ::selection

Псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background, background-color и text-shadow.

Синтаксис

Селектор::selection  { ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>selection</title>
  <style>
   p::selection {
    color: #ff0; /* Цвет текста */
    background: #000; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p>При выделении этого текста он изменит свой цвет.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере при выделении текста он изменяет свой цвет и фон.

Результат использования псевдоэлемента :selection

Рис. 1. Результат использования псевдоэлемента ::selection

Примечание

Firefox использует нестандартный псевдоэлемент ::-moz-selection.

Спецификация

Спецификация | Статус
CSS Pseudo-Elements Level 4 | Рабочий проект

Псевдоэлемент ::selection удалён из спецификации CSS3 и добавлен в рабочий проект CSS4.

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 1.1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 10 | 1


tab-size

Используется для изменения ширины отступа, заданного с помощью символа табуляции (клавиша Tab).

Краткая информация

Значение по умолчанию | 8
Наследуется | Да
Применяется | К блочным элементам

Синтаксис

tab-size: <число>

Значения

<число>
Число символов в табуляции. Значение должно быть целым положительным числом.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>tab-size</title>
  <style>
   pre {
    -o-tab-size: 3; /* Opera */
    -moz-tab-size: 3; /* Firefox */
    tab-size: 3;
   }
  </style>
 </head>
 <body>
  <pre>final class Div implements HtmlWidgetInterface
{
    private $_content;
    public function __construct($content)
    {
        if (!is_string($content) || empty($content)) {
            throw new HtmlWidgetException('Element must be a non-empty string.');
        }
        $this->_content = $content;
    }
    public function getContent()
    {
        return $this->_content;
    }
    public function render()
    {
        return '&lt;div&gt;' . $this->_content . '&lt;/div&gt;';
    }
}</pre>
 </body>
</html>

Результат примера в браузере Opera показан на рис. 1.

Текст с изменённой табуляцией

Рис. 1. Текст с изменённой табуляцией

Объектная модель

Объект.style.tabSize

Примечание

Opera до версии 15 поддерживает свойство -o-tab-size. Firefox поддерживает свойство -moz-tab-size.

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
 | 21 | 10.60 | 15 | 6.1 | 4
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4.4 | 4 | 11.5 | 7.1


table-layout

Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К тегу <table> или к элементу, у которого значение display установлено как table или inline-table.

Синтаксис

table-layout: auto | fixed

Значения

auto
Браузер загружает всю таблицу, анализирует её для определения размеров ячеек и только после этого отображает.
fixed
Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>table-layout</title>
  <style>
   table {
    table-layout: fixed; /* Фиксированная ширина ячеек */
    width: 100%; /* Ширина таблицы */
   }
   .col1 { width: 160px; }
   .coln { width: 60px; }
  </style>
 </head>
 <body>
  <table border="1">
   <col class="col1">
   <col span="9" class="coln">
   <tr>
    <td>&nbsp;</td>
    <td>2012</td><td>2013</td><td>2014</td><td>2015</td>
    <td>2016</td><td>2017</td><td>2018</td><td>2019</td>
    <td>2020</td>
   </tr>
   <tr>
    <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table>
 </body>
</html>

Объектная модель

Объект.style.tableLayout

Спецификация

Спецификация | Статус
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1.5 | 1 | 9.8 | 3


Псевдокласс :target

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис

Селектор:target  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>target</title>
  <style>
   h2:target {
    background: #fc0; /* Цвет фона */
    padding: 3px;
   }
  </style>
 </head>
 <body>
  <ul>
    <li><a href="#h1">История 1</a></li>
    <li><a href="#h2">История 2</a></li>
  </ul>
  <h2 id="h1">История 1</h2>
   <p>История о том, как необходимо было сделать могилу,
   ее начали копать, а потом закапывать, и что из этого получилось.</p>
  <h2 id="h2">История 2</h2>
   <p>История о том, как возле столовой появились загадочные розовые
   следы с шестью пальцами, и почему это случилось.</p>
 </body>
</html>

В данном примере целевой элемент выделяется цветом фона.

Примечание

В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).

Спецификация

Спецификация | Статус
Selectors Level 3 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
9 | 1 | 9.5 | 1.3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 9.5 | 2


text-align

Определяет горизонтальное выравнивание текста в пределах элемента.

Краткая информация

Значение по умолчанию | left
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

text-align: center | justify | left | right | start | end

Значения

center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
start
Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end
Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-bottom: 5px; /* Отступ снизу */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   .content {
    width: 75%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div id="left"><div class="content">Выравнивание по левому краю</div></div>
  <div id="center"><div class="content">Выравнивание по центру</div></div>
  <div id="right"><div class="content">Выравнивание по правому краю</div></div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Выравнивание текста в браузере Safari

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Выравнивание текста в браузере Internet Explorer 7

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

Объект.style.textAlign

Примечание

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer |  | Chrome | Opera | Safari | Firefox
left, right, center, justify | 3 | 8 | 1 | 3.5 | 1 | 1
start |  |  | 1 | 10 | 3.1 | 1
end |  |  | 1 |  | 3.1 | 3.6
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
left, right, center, justify | 1.5 | 1 | 4 | 1
start | 1.5 | 1 | 10 | 3.1
end | 1.5 | 3.6 |  | 3.1


text-align-last

Задаёт выравнивание последней строки текста, когда свойство text-align установлено как justify.

Краткая информация

Значение по умолчанию | start
Наследуется | Да
Применяется | К блочным элементам

Синтаксис

text-align-last: start | end | left | right | center | justify

Значения

start
Строка выравнивается по начальному краю блока.
end
Строка выравнивается по конечному краю блока.
left
Строка выравнивается по левому краю.
right
Строка выравнивается по правому краю.
center
Строка выравнивается по центру.
justify
Строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.

Влияние разных значений на положение текста показано в табл. 1.

Табл. 1. Влияние значений text-align-last
Значение | Выравнивание | Вид текста
left | По левому краю |
right | По правому краю |
center | По центру |
justify | По ширине |

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align-last</title>
  <style>
   div {
    width: 300px;
    text-align: justify;
    text-align-last: justify;
   }
  </style>
 </head>
 <body>
  <div>
   При переходе через горы опирайся на долину;
   располагайся на высотах, смотря, где солнечная сторона. При
   бое с противником, находящимся на возвышенности, не иди
   прямо вверх. Таково расположение войска в горах.
  </div>
 </body>
</html>

Объектная модель

Объект.style.textAlignLast

Примечание

Internet Explorer не поддерживает значения start и end.

Firefox поддерживает только свойство с префиксом -moz-text-align-last.

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5.5 | 35 |  |  | 12
Android | Firefox Mobile | Opera Mobile | Safari Mobile
 | 12 |  |


text-decoration

Добавляет оформление текста в виде его подчёркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none

Значения

blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through
Создает перечеркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчеркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
   a {
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:hover {
    text-decoration: underline; /* Добавляем подчёркивание
                                   при наведении курсора мыши на ссылку */
   }
  </style>
 </head>
 <body>
  <p><a href="1.html">Стратегическое нападение</a></p>
 </body>
</html>

Объектная модель

Объект.style.textDecoration

Объект.style.textDecorationLineThrough

Объект.style.textDecorationNone

Объект.style.textDecorationOverLine

Объект.style.textDecorationUnderline

Примечание

Линия, полученная с помощью значения line-through, в IE7 располагается выше чем в других браузерах; в IE8 эта ошибка исправлена.

Спецификация

Спецификация | Статус
CSS Text Decoration Level 3 | Редакторский черновик
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


text-decoration-color

Устанавливает цвет линии, которая добавляется через свойство text-decoration.

Краткая информация

Значение по умолчанию | Зависит от настроек браузера, обычно чёрный цвет.
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

text-decoration-color: <цвет>

Значения

См. цвет.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration-color</title>
  <style>
   a {
    text-decoration-color: red;
   }
  </style>
 </head>
 <body>
  <a href="link1.html">Ссылка с подчёркиванием</a>
 </body>
</html>

В данном примере ссылки подчёркиваются красной линией.

Объектная модель

Объект.style.textDecorationColor

Примечание

Firefox до версии 36 поддерживает свойство -moz-text-decoration-color.

Спецификация

Спецификация | Статус
CSS Text Decoration Level 3 | Редакторский черновик

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
 |  |  |  | 6 | 36
Android | Firefox Mobile |  | Opera Mobile | Safari Mobile
 | 6 | 36 |  |


text-decoration-line

Определяет, как должна добавляться декоративная линия к тексту — подчёркивание, перечёркивание, над текстом. Одновременно можно добавлять несколько линий, перечисляя значения через пробел.

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

text-decoration-line: [ line-through || overline || underline ] | none

Значения

line-through
Создает перечёркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчёркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration-line</title>
  <style>
   a {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
   }
  </style>
 </head>
 <body>
  <a href="link1.html">Ссылка с подчёркиванием</a>
 </body>
</html>

Объектная модель

Объект.style.textDecorationLine

Примечание

Firefox до версии 36 поддерживает свойство -moz-text-decoration-line.

Спецификация

Спецификация | Статус
CSS Text Decoration Level 3 | Редакторский черновик

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
 |  |  |  | 6 | 36
Android | Firefox Mobile |  | Opera Mobile | Safari Mobile
 | 6 | 36 |  |


text-decoration-style

Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line.

Краткая информация

Значение по умолчанию | solid
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

text-decoration-style: solid | double | dotted | dashed | wavy

Значения

solid
Одинарная линия (пример).
double
Двойная линия (пример).
dotted
Точечная линия (пример).
dashed
Пунктирная линия (пример).
wavy
Волнистая линия.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration-style</title>
  <style>
   a {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
   }
  </style>
 </head>
 <body>
  <a href="link1.html">Ссылка с подчёркиванием</a>
 </body>
</html>

Объектная модель

Объект.style.textDecorationStyle

Примечание

Firefox до версии 36 поддерживает свойство -moz-text-decoration-style.

Спецификация

Спецификация | Статус
CSS Text Decoration Level 3 | Редакторский черновик

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
 |  |  |  | 6 | 36
Android | Firefox Mobile |  | Opera Mobile | Safari Mobile
 | 6 | 36 |  |


text-indent

Устанавливает величину отступа первой строки блока текста (например, для абзаца <p>). Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

Краткая информация

Значение по умолчанию | 0
Наследуется | Да
Применяется | К блочным элементам

Синтаксис

text-indent: <размер> | <проценты>

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-indent</title>
  <style>
   P {
    text-indent: 1.5em; /* Отступ первой строки */
    text-align: justify; /* Выравнивание по ширине */
   }
  </style>
 </head>
 <body>
   <p>Огневое нападение бывает пяти видов: первое, когда
   сжигают людей; второе, когда сжигают запасы; третье,
   когда сжигают   обозы; четвертое, когда сжигают склады;
   пятое, когда сжигают отряды.</p>
   <p>Сунь-цзы, Искусство войны. Перевод Николай Конрад.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства text-indent

Рис. 1. Применение свойства text-indent

Объектная модель

Объект.style.textIndent

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


text-overflow

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden.

Краткая информация

Значение по умолчанию | clip
Наследуется | Нет
Применяется | К блочным элементам

Синтаксис

text-overflow: clip | ellipsis

Значения

clip
Текст обрезается по размеру области.
ellipsis
Текст обрезается и к концу строки добавляется многоточие.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-overflow</title>
  <style>
   p.clip {
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    background: #fc0; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    text-overflow: ellipsis; /* Добавляем многоточие */
   }
  </style>
 </head>
 <body>
  <p class="clip">Магнитное поле ничтожно гасит большой круг небесной сферы,
  в таком случае эксцентриситеты и наклоны орбит возрастают.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Многоточие в конце текста

Рис. 1. Многоточие в конце текста

Объектная модель

Объект.style.textOverflow

Примечание

Opera до версии 11.0 использует нестандартное свойство -o-text-overflow.

Спецификация

Спецификация | Статус
CSS Basic User Interface Module Level 3 | Редакторский черновик

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera |  | Safari | Firefox
6 | 1 | 9 | 11 | 1.3 | 7
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1.5 | 7 | 11 | 1.3


text-shadow

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line.

Краткая информация

Значение по умолчанию | none
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

text-shadow: none | <тень> [,<тень>]*

где <тень>:

<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Значения

none
Отменяет добавление тени.
<цвет>
Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр.
<сдвиг по x>
Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
<сдвиг по y>
Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр.
<радиус>
Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-shadow</title>
  <style>
   .shadowtext {
    text-shadow: 1px 1px 2px black, 0 0 1em red; /* Параметры тени */
    color: white; /* Белый цвет текста */
    font-size: 2em; /* Размер надписи */
   }
  </style>
 </head>
 <body>
  <p class="shadowtext">В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!</p>
 </body>
</html>

Результат примера показан на рис. 1.

Вид тени в браузере Safari

Рис. 1. Вид тени в браузере Safari

Объектная модель

Объект.style.textShadow

Примечание

Opera поддерживает максимум 6–9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera до версии 10.1 использует отображение нескольких теней, как в CSS2.

Safari до версии 4.0 поддерживает только один параметр тени, остальные игнорируются. С версии 4.0 работает уже множество теней.

Браузер Internet Explorer понимает свойство text-shadow только с версии 10. До этого используется свойство filter: Shadow(параметры). К примеру, следующая конструкция задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пикселя).

filter: Shadow(Color=#666666, Direction=45, Strength=4);

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Text-decoration Level 3 | Возможная рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 2 | 9.5 | 1.1 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 1 | 9.6 | 1.2


text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменён.

Краткая информация

Значение по умолчанию | none
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

text-transform: capitalize | lowercase | uppercase | none

Значения

capitalize
Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
lowercase
Все символы текста становятся строчными (нижний регистр).
uppercase
Все символы текста становятся прописными (верхний регистр).
none
Не меняет регистр символов.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-transform</title>
  <style>
   h1 {
    text-transform: uppercase; /* Заглавные буквы */
   }
   p {
    text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */
   }
  </style>
 </head>
 <body>
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства text-transform

Рис. 1. Применение свойства text-transform

Объектная модель

Объект.style.textTransform

Спецификация

Спецификация | Статус
CSS Text Level 4 | Редакторский черновик
CSS Text Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 7 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


top

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).

Значение top относительно окна браузера

Рис. 1. Значение top относительно окна браузера

Значение top относительно родителя

Рис. 2. Значение top относительно родителя

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

top: <размер> | <проценты> | auto

Значения

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

auto
Не изменяет положение элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>top</title>
  <style>
   .menu {
    position: absolute; /* Абсолютное позиционирование */
    left: 300px; /* Положение от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 120px; /* Ширина блока */
    background: #e0e0e0; /* Цвет фона */
    border: 1px solid #000; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
   }
   .content {
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края */
    top: 0; /* Положение от верхнего края */
    width: 280px; /* Ширина блока */
    background: #00a5b6; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    padding-right: 60px; /* Отступ справа */
    text-align: justify; /* Выравнивание по ширине */
   }
  </style>
 </head>
 <body>
  <div class="content">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna
   aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
   nostrud exerci tution ullamcorper suscipit lobortis nisl ut
   aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </div>
  <div class="menu">
   Ut wisi enim ad minim veniam, quis nostrud exerci taion
   ullamcorper suscipit lobortis nisl ut aliquip ex en
   commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3.

Применение свойства top

Рис. 2. Применение свойства top

Объектная модель

Объект.style.top

Примечание

В браузере Internet Explorer до версии 7 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
5.5 | 7 | 1 | 5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


transform

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

Краткая информация

Значение по умолчанию | none
Наследуется | Нет
Применяется | К трансформируемым элементам

Синтаксис

transform: <функция> [<функция>]* | none

Значения

<функция>
Функция трансформации.
none
Отменяет действие трансформации.

Функции трансформации

matrix

Задаёт матрицу преобразований.

rotate

Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

transform: rotate(<угол>)

scale

Масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX

Масштабирует элемент по горизонтали.

transform: scaleX(sx);

scaleY

Масштабирует элемент по вертикали.

transform: scaleY(sy);

skewX

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

transform: skewX(<угол>)

skewY

Наклоняет элемент на заданный угол по горизонтали.

transform: skewY(<угол>)

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

transform: translate(tx[, ty])

translateX

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

transform: translateX(tx)

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

transform: translateY(ty)

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform</title>
  <style>
   .turn:hover {
    transform: rotate(15deg);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик" class="turn">
     <img src="images/igels.png" alt="Ёжик" class="turn"></p>
 </body>
</html>

В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.

Объектная модель

Объект.style.transform

Примечание

Internet Explorer 9 поддерживает нестандартное свойство -ms-transform.

Chrome до версии 36 и Android до версии 4 поддерживают нестандартное свойство -webkit-transform.

Safari поддерживает нестандартное свойство -webkit-transform.

Opera до версии 12.10 и с версии 15 до 23 поддерживает нестандартное свойство -o-transform.

Firefox до версии 16 поддерживает нестандартное свойство -moz-transform.

Спецификация

Specification | Status
CSS Transforms Level 1 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome |  | Opera |  |  |  | Safari | Firefox
9 | 10 | 5 | 36 | 10.5 | 12.10 | 15 | 23 | 3.1 | 3.5 | 16
Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
2.1 | 4 | 3.5 | 16 | 11.5 | 3.2


transform-origin

Устанавливает координаты точки, относительно которой будет происходить трансформация элемента.

Краткая информация

Значение по умолчанию | 50% 50% 0
Наследуется | Нет
Применяется | К трансформируемым элементам

Синтаксис

transform-origin: <x> <y> <z>

Значения

<x>

Координата по оси X. Может принимать следующие значения:

<размер> | <проценты> | left | center | right

Здесь <размер> — любая единица измерения CSS.

<y>

Координата по оси Y. Может принимать следующие значения:

<размер> | <проценты> | top | center | bottom

<z>

Координата по оси Z. Может задаваться только в любых корректных единицах для измерения длины (исключая проценты).

Оси и значения показаны на рис. 1.

Рис. 1. Оси при трансформации элемента

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
   div {
    background: #fc0;
    padding: 10px;
    display: inline-block;
    border: 1px solid #000;
   }
   div:hover {
    /* Точка поворота в правом верхнем углу */
    transform-origin: 100% 0;
    /* Поворачиваем на 20 градусов против часовой стрелки */
    transform: rotate(-20deg);
   }
  </style>
 </head>
 <body>
  <div>Пример</div>
 </body>
</html>

В данном примере при наведении курсора на элемент он поворачивается на 20 градусов против часовой стрелки относительно правого верхнего угла.

Объектная модель

Объект.style.transformOrigin

Примечание

Internet Explorer 9 поддерживает свойство -ms-transform-origin.

Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform-origin.

Safari поддерживает свойство -webkit-transform-origin.

Opera до версии 12.10 и с версии 15 до 23 поддерживает свойство -o-transform-origin.

Firefox до версии 16 поддерживает свойство -moz-transform-origin.

Спецификация

Спецификация | Статус
CSS Transforms Level 1 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome |  | Opera |  |  |  | Safari | Firefox
9 | 10 | 5 | 36 | 10.5 | 12.10 | 15 | 23 | 3.1 | 3.5 | 16
Android |  | Firefox Mobile |  | Opera Mobile | Safari Mobile
2.1 | 4 | 3.5 | 16 | 11.5 | 3.2


transition

Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript.

Краткая информация

Значение по умолчанию | all 0s ease 0s
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

transition: <переход> [, <переход> ]*

Здесь:

<переход> = [ none | <transition-property> ] || <transition-duration> ||
   <transition-timing-function> || <transition-delay>

Значения

none
Отменяет эффект перехода.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition</title>
  <style>
   #bar {
    top:-5.5em; right:5em; /* Положение */
    padding: .5em; /* Поля */
    margin: 0; /* Отступы */
    position: absolute; /* Абсолютное позиционирование */
    width: 2em; /* Ширина */
    background: #333; /* Цвет фона */
    color: #fff; /* Цвет текста */
    text-align: center; /* Выравнивание по центру */
    /* Переход */
    transition: top 1s ease-out 0.5s;
   }
   #bar:hover { top: 0; }
  </style>
 </head>
 <body>
  <ul id="bar">
   <li>1</li><li>2</li>
   <li>3</li><li>4</li>
   <li>&darr;</li>
  </ul>
 </body>
</html>

В данном примере при наведении курсора на стрелку раскрывается блок с числами.

Объектная модель

Объект.style.transition

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android поддерживают нестандартное свойство -webkit-transition.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition.

Firefox до версии 16 поддерживает нестандартное свойство -moz-transition.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera |  | Safari |  | Firefox
10 | 1 | 26 | 11.6 | 12.10 | 3 | 6.1 | 4 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2.1 | 4 | 16 | 10 | 12.10 | 3.2


transition-delay

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.

Краткая информация

Значение по умолчанию | 0s
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

transition-delay: <время> [,<время>]*

Значения

См. время.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-delay</title>
  <style>
   #bar {
    top:-5.5em; right:5em; /* Положение */
     padding: .5em; /* Поля */
     margin: 0; /* Отступы */
     position: absolute; /* Абсолютное позиционирование */
     width: 2em; /* Ширина */
     background: #333; /* Цвет фона */
     color: #fff; /* Цвет текста */
     text-align: center; /* Выравнивание по центру */
     /* Анимация */
     transition: .4s ease-out;
     transition-delay: 0.5s;
    }
   #bar:hover { top: 0; }
  </style>
 </head>
 <body>
  <ul id="bar">
   <li>1</li><li>2</li>
   <li>3</li><li>4</li>
   <li>&darr;</li>
  </ul>
 </body>
</html>

В данном примере при наведении курсора на стрелку, раскрывается блок с числами.

Объектная модель

Объект.style.transitionDelay

Примечание

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-delay.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-delay.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-delay.

Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают нестандартное свойство -webkit-transition-delay.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-delay.

Firefox до версии 16 поддерживает нестандартное свойство -moz-transition-delay.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera |  | Safari |  | Firefox
10 | 1 | 26 | 11.6 | 12.10 | 3 | 6.1 | 4 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2.1 | 4 | 16 | 10 | 12.10 | 3.2


transition-duration

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.

Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property.

Краткая информация

Значение по умолчанию | 0s
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

transition-duration: <время> [,<время>]*

Значения

См. время.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-duration</title>
  <style>
   .warn {
    padding: 20px;
    transition-duration: 2s;
   }
   .warn:hover {
    background: #fc0;
   }
  </style>
 </head>
 <body>
  <div class="warn">Вы не учли, что скалярное
  поле необходимо и достаточно!</div>
 </body>
</html>

В данном примере при наведении курсора на блок текста меняется цвет фона под блоком.

Объектная модель

Объект.style.transitionDuration

Примечание

Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают нестандартное свойство -webkit-transition-duration.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-duration.

Firefox до версии 16 поддерживает нестандартное свойство -moz-transition-duration.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera |  | Safari |  | Firefox
10 | 1 | 26 | 11.6 | 12.10 | 3 | 6.1 | 4 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2.1 | 4 | 16 | 10 | 12.10 | 3.2


transition-property

Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

Краткая информация

Значение по умолчанию | all
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

transition-property: none | all | <свойство> [,<свойство>]*

Значения

none
Никакое свойство не задано.
all
Все свойства будут отслеживаться.
<свойство>
Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-duration</title>
  <style>
   body { margin: 0; }
   .menu {
    position: absolute;
    height: 100px; width: 100%;
    background: #fc0;
    border-bottom: 20px solid #333;
    top: -100px;
    /* Анимация */
    transition-property: top;
    transition-duration: 2s;
   }
   .menu:hover { top: 0; }
  </style>
 </head>
 <body>
  <div class="menu">
    А здесь у нас будет своё
    меню с преферансом и профурсетками.
  </div>
 </body>
</html>

В данном примере при наведении курсора на блок он плавно изменяет своё положение.

Объектная модель

Объект.style.transitionProperty

Примечание

Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают нестандартное свойство -webkit-transition-property.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-property.

Firefox до версии 16 поддерживает нестандартное свойство -moz-transition-property.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera |  | Safari |  | Firefox
10 | 1 | 26 | 11.6 | 12.10 | 3 | 6.1 | 4 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2.1 | 4 | 16 | 10 | 12.10 | 3.2


transition-timing-function

Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).

Рис. 1. Вид функции

Краткая информация

Значение по умолчанию | ease
Наследуется | Нет
Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear |
     step-start | step-end | steps | cubic-bezier

Значения

ease
Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
ease-in
Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
ease-out
Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
ease-in-out
Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
linear
Одинаковая скорость от начала и до конца.
step-start
Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
step-end
Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
steps
Ступенчатая функция, имеющая заданное число шагов.

transition-timing-function: steps(<число>, start | end)

Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию.
cubic-bezier
Задаёт функцию движения в виде кривой Безье.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-timing-function</title>
  <style>
   .progress {
    background: #333; /* Фон */
    border: 2px solid #333; /* Рамка */
    height: 20px; /* Высота */
    position: relative; /* Относительное позиционирование */
   }
   .progress:hover::before{
    width: 100%;
   }
   .progress::before{
    transition-timing-function: linear;
    transition-duration: 5s;
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    height: 100%; width: 0;
    background: #FFA600; /* Фон */
   }
  </style>
 </head>
 <body>
  <div class="progress"></div>
 </body>
</html>

Объектная модель

Объект.style.transitionTimingFunction

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android поддерживают нестандартное свойство -webkit-transition-timing-function.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-timing-function.

Firefox до версии 16 поддерживает нестандартное свойство -moz-transition-timing-function.

Safari поддерживает значение steps только с версии 5.1.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome |  | Opera |  | Safari |  | Firefox
10 | 1 | 26 | 11.6 | 12.10 | 3 | 6.1 | 4 | 16
Android | Firefox Mobile |  | Opera Mobile |  | Safari Mobile
2.1 | 4 | 16 | 10 | 12.10 | 3.2


unicode-bidi

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

Краткая информация

Значение по умолчанию | normal
Наследуется | Нет
Применяется | Ко всем элементам

Синтаксис

unicode-bidi: normal | embed | bidi-override

Значения

normal
Браузер самостоятельно определяет, как ему следует отображать текст на основе символов юникода.
embed
Переопределяет параметры текста, располагая его, как указано в свойстве direction.
bidi-override
Аналогичен embed, но при этом также меняется порядок символов в тексте, подчиняясь значению direction.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>unicode-bidi</title>
  <style>
  .rtl p {
   unicode-bidi: bidi-override; /* Меняются характеристики текста */
   direction: rtl; /* Текст пишется справа налево */
  }
  </style>
  </head>
  <body>
  <div class="rtl">
   <p>А роза упала на лапу Азора.</p>
   <p>У лип Леша нашел пилу.</p>
   <p>И городу дорог огород у дороги.</p>
   <p>Уж я веники не вяжу.</p>
   <p>Аргентина манит негра.</p>
   <p>Он дивен, палиндром — и ни морд, ни лап не видно.</p>
   <p>Но невидим архангел, мороз узором лег на храм и дивен он.</p>
   <p>Леша на полке клопа нашел.</p>
   <p>Я не стар брат Сеня.</p>
  </div>
  </body>
  </html>

Результат данного примера показан на рис. 1. Поскольку используется значение bidi-override свойства unicode-bidi, то порядок символов в тексте меняется на обратный. А именно на тот, что указан свойством direction. Заметьте, что текст располагается по правому краю окна, точка в предложении слева от текста.

Результат использования unicode-bidi и direction

Рис. 1. Результат использования unicode-bidi и direction

Объектная модель

Объект.style.unicodeBidi

Спецификация

Specification | Status
CSS Writing Modes Module Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5.5 | 2 | 9.2 | 1.3 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 8 | 1.3


Псевдокласс :valid

Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email" корректный адрес электронной почты.

Синтаксис

input:valid  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:valid</title>
  <style>
   input:invalid {
    background: #fdd; /* Красный цвет фона */
   }
   input:valid {
    background: #dfd; /* Зеленый цвет фона */
   }
  </style>
 </head>
 <body>
  <form>
   <p>Адрес сайта</p>
   <p><input type="url" required></p>
   <p>Адрес электронной почты</p>
   <p><input type="email" required></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере корректно заполненные поля формы обозначаются зеленым фоном, а некорректные красным. Результат примера в Chrome показан на рис. 1.

Использование псевдокласса :valid

Рис. 1. Использование псевдокласса :valid

Спецификация

Спецификация | Статус
WHATWG HTML Living Standard | Живой стандарт
HTML5 | Возможная рекомендация
Selectors Level 4 | Рабочий проект
CSS Basic User Interface Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
10 | 10 | 10 | 1.3 | 4
Android | Firefox Mobile | Opera Mobile | Safari Mobile
2.1 | 4 | 10 | 5


vertical-align

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

Краткая информация

Значение по умолчанию | baseline
Наследуется | Нет
Применяется | К строчным элементам или ячейкам таблицы

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|
  <размер> | <проценты>

Значения

baseline
Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom
Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle
Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub
Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super
Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom
Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top
Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top
Выравнивание верхнего края элемента по верху самого высокого элемента строки.

В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height, при этом 0% аналогично значению baseline.

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

baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по ее верхнему краю.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
  <style>
  .tex { font-size: 2rem; }
  .tex sub {
   vertical-align: sub;
   font-size: 1.8rem;
  }
  .tex sup {
   vertical-align: 5px;
   font-size: 1.6rem;
  }
  </style>
 </head>
 <body>
  <div class="tex">
  T<sub>E</sub>X и L<sup>A</sup>T<sub>E</sub>X
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства vertical-align

Рис. 1. Применение свойства vertical-align

Объектная модель

Объект.style.verticalAlign

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
4 | 1 | 4 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


visibility

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

Краткая информация

Значение по умолчанию | visible
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

visibility: visible | hidden | collapse

Значения

visible
Отображает элемент как видимый.
hidden
Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse
Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>visibility</title>
  <style>
   .button {
    background: #fc0;
    padding: 10px 20px;
    display: inline-block;
   }
   .descr { visibility: hidden; }
   .button:hover + .descr {
    visibility: visible;
   }
  </style>
 </head>
 <body>
  <div class="button">Кнопка</div>
  <p class="descr">
   Данная эксклюзия является подмножеством астрациональных
   супремативных монотенных федоний кадонарного экстрафазория.</p>
 </body>
</html>

Объектная модель

Объект.style.visibility

Примечание

Internet Explorer до версии 7.0 включительно не поддерживает значение collapse.

Браузер Safari до версии 4.0 не поддерживает значение collapse.

Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.

Спецификация

Specification | Status
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera |  | Safari |  | Firefox
4 | 8 | 1 | 4 | 9.5 | 1 | 4 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1


Псевдокласс :visited

Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.

Синтаксис

a:visited  {  ...  }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>visited</title>
  <style>
   a:link {
    color: #0000d0; /* Цвет ссылок */
   }
   a:visited {
    color: #900060; /* Цвет посещенных ссылок */
   }
  </style>
 </head>
 <body>
  <p><a href="1.html">Посещенная ссылка</a></p>
  <p><a href="2.html">Непосещенная ссылка</a></p>
  <p><a href="3.html">Непосещенная ссылка</a></p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Результат использования псевдокласса visited

Рис. 1. Результат использования псевдокласса :visited

Спецификация

Спецификация | Статус
Selectors Level 4 | Рабочий проект
Selectors Level 3 | Рекомендация
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
3.5 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


white-space

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre>, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу <pre>, но в отличие от него не меняет шрифт на моноширинный.

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

white-space: normal | nowrap | pre | pre-line | pre-wrap

Значения

normal
Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap
Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление <br> переносит текст на новую строку.
pre
Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
pre-line
В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
pre-wrap
В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.

Действие значений на текст представлено в табл. 1.

Табл. 1. Перенос текста и пробелы при разных значениях white-space
Значение | Перенос текста | Пробелы
normal | Переносится | Не учитываются
nowrap | Не переносится | Не учитываются
pre | Не переносится | Учитываются
pre-line | Переносится | Не учитываются
pre-wrap | Переносится | Учитываются

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>white-space</title>
  <style>
   .example {
    border: 1px dashed #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Семейство шрифта */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы */
    white-space: pre; /* Учитываются все пробелы и переносы */
   }
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Отображать как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    white-space: nowrap; /* Переносов в тексте нет */
   }
  </style>
 </head>
 <body>
  <p class="exampleTitle">Пример</p>
  <p class="example">
   &lt;html&gt;
   &lt;body&gt;
   &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt;
   &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
   + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
   Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
   где n - целое число &gt; 2
   &lt;/body&gt;
   &lt;/html&gt;
  </p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение свойства white-space

Рис. 1. Применение свойства white-space

Объектная модель

Объект.style.whiteSpace

Примечание

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведёт себя как pre-line.

Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

В Firefox для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
 | Internet Explorer | Chrome | Opera | Safari | Firefox
normal | 5.5 | 1 | 4 | 1 | 1
pre | 6 | 1 | 4 | 1 | 1
nowrap | 5.5 | 1 | 4 | 1 | 1
pre-wrap | 8 | 1 | 8 | 3 | 3
pre-line | 8 | 1 | 9.5 | 3 | 3.5
 | Android | Firefox Mobile | Opera Mobile | Safari Mobile
normal | 1 | 1 | 4 | 1
pre | 1 | 1 | 4 | 1
nowrap | 1 | 1 | 4 | 1
pre-wrap | 1 | 4 | 9 | 3
pre-line | 1 | 4 | 10 | 3


widows

Свойство widows задаёт минимальное число строк текста, которое располагается на следующей странице при печати документа. Это свойство работает в том случае, если весь текст размещается на двух и более печатных страницах. Если значение свойства widows конфликтует со значением orphans, то widows имеет приоритет и учитывается в первую очередь.

Краткая информация

Значение по умолчанию | 2
Наследуется | Да
Применяется | К блочным элементам

Синтаксис

widows: <число>

Значения

<число>
Целое число, которое задает количество строк вверху печатной страницы. Отрицательное значение запрещено.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>widows</title>
  <style>
   @media print {
    p {
     widows: 3;
     orphans: 3;
    }
   }
  </style>
 </head>
 <body>
  <p>Роджерс определял терапию как, интроекция интегрирует гештальт, в полном соответствии
  с основными законами развития человека. Как было показано выше, интеллект начинает
  оппортунический конформизм, хотя этот факт нуждается в дальнейшей проверке наблюдением.
  Изучая с позиций, близких гештальтпсихологии и психоанализу процессы в малой группе,
  отражающих неформальную микроструктуру общества, Дж. Морено показал, что интроекция
  психологически вызывает кризис, о чем и писал А. Маслоу в своей
  работе «Мотивация и личность».</p>
 </body>
</html>

Объектная модель

Объект.style.widows

Спецификация

Спецификация | Статус
CSS Fragmentation Module Level 3 | Рабочий проект
CSS Multi-column Layout Module | Возможная рекомендация
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
8 | 25 | 9.2 |  |
Android | Firefox Mobile | Opera Mobile | Safari Mobile


width

Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится <img>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Браузеры неодинаково работают с шириной, результат отображения зависит от используемого <!DOCTYPE>. В табл. 1 приведены возможные варианты <!DOCTYPE> и получаемая ширина.

Табл. 1. Действие width в браузерах
<!DOCTYPE> | Internet Explorer | Opera 10+, Firefox, Chrome, Safari | Opera 9
Не указан (режим совместимости) | Если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width. | Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border. Содержимое блока, если не помещается в заданные размеры, отображается поверх блока. | Ширина равна значению width. Содержимое блока, если не помещается в заданные размеры, отображается поверх.
Переходный HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Строгий HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> | Ширина формируется путем сложения значений width, padding, margin и border. Содержимое блока, если не помещается в заданные размеры, отображается поверх. |  | Ширина равна значению width плюс padding, margin, и border. Содержимое блока, если не помещается в заданные размеры, отображается поверх.
HTML 5 <!DOCTYPE html>
XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам, ячейкам таблицы, заменяемым элементам

Синтаксис

width: <размер> | <проценты> | auto

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.

auto
Устанавливает ширину исходя из типа и содержимого элемента.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>width</title>
  <style>
   .layer1 {
    width: 300px; /* Ширина блока */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #ccc; /* Параметры рамки */
   }
   .layer2 {
    width: 400px; /* Ширина текстового блока */
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   <p class="layer2">Lorem ipsum dolor sit amet,consectetuer
   adipiscing elit,seddiem nonummy nibh euismod tincidunt ut
   lacreet dolore magna aliguam erat volutpat.</p>
  </div>
 </body>
</html>

Результат данного примера, как он отображается в браузере Safari показан на рис. 1.

Рис. 1. Ширина блока

Объектная модель

Объект.style.width

Примечание

Браузер Internet Explorer до версии 6 включительно некорректно определяет width как min-width. В режиме совместимости (quirk mode) Internet Explorer до версии 8 включительно неправильно вычисляет ширину элемента, не добавляя к ней значения отступов, полей и границ.

Спецификация

Спецификация | Статус
CSS Basic Box Model | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 8 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


word-break

Свойство word-break указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

word-break: normal | break-all | keep-all

Значения

normal
Используются правила переноса строк по умолчанию. Как правило, в этом случае строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br>).
break-all
Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. Значение не работает для текста на китайском, корейском или японском языке.
keep-all
Не разрешает перенос строк в словах на китайском, корейском или японском языке. Для остальных языков действует как normal.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>word-break</title>
  <style>
   .col {
    background: #f0f0f0; /* Цвет фона */
    width: 180px; /* Ширина блока */
    padding: 10px; /* Поля */
    word-break: break-all; /* Перенос слов */
   }
  </style>
 </head>
 <body>
  <div class="col">
   <p>Cуществительное</p>
   <p>высокопревосходительство</p>
   <p>Одушевленное существительное</p>
   <p>одиннадцатиклассница</p>
   <p>Химическое вещество</p>
   <p>метоксихлордиэтиламинометилбутиламиноакридин</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Перенос длинных слов

Рис. 1. Перенос длинных слов

Объектная модель

Объект.style.wordBreak

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5.5 | 1 |  | 3.1 | 15
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 15 |  | 4


word-spacing

Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам

Синтаксис

word-spacing: <размер> | normal

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.

normal
Устанавливает интервал между словами как обычно.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>word-spacing</title>
  <style>
   .tel {
    word-spacing: 10px;
    font-size: 2em;
   }
  </style>
 </head>
 <body>
  <p class="tel">Тел.: 555-221-061</p>
 </body>
</html>

В данном примере задаётся фиксированное расстояние между номером телефона и текстом (рис. 1).

Применение свойства word-spacing

Рис. 1. Применение свойства word-spacing

Объектная модель

Объект.style.wordSpacing

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация
CSS Level 1 | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
6 | 1 | 3.5 | 1 | 1
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 4 | 1


word-wrap

Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.

Краткая информация

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Процентная запись | Неприменима

Синтаксис

word-wrap: normal | break-word

Значения

normal
Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br>).
break-word
Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>word-wrap</title>
  <style>
   .col {
    background: #f0f0f0; /* Цвет фона */
    width: 230px; /* Ширина блока */
    padding: 10px; /* Поля */
    font-size: 1.5em; /* Размер шрифта */
    word-wrap: break-word; /* Перенос слов */
   }
  </style>
 </head>
 <body>
  <div class="col">
   <p>Cуществительное</p>
   <p>высокопревосходительство</p>
   <p>Одушевленное существительное</p>
   <p>одиннадцатиклассница</p>
   <p>Химическое вещество</p>
   <p>метоксихлордиэтиламинометилбутиламиноакридин</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Перенос длинных слов

Рис. 1. Перенос длинных слов

Объектная модель

Объект.style.wordWrap

Спецификация

Спецификация | Статус
CSS Text Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer | Chrome | Opera | Safari | Firefox
5.5 | 1 | 10.5 | 1 | 3.5
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 4 | 11 | 1


writing-mode

Устанавливает направление текста на странице. Свойство writing-mode является универсальным и позволяет одновременно задавать значения свойств direction и block-progression.

Краткая информация

Значение по умолчанию | Нет
Наследуется | Да
Применяется | Ко всем элементам и генерируемому контенту

Синтаксис

writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr

Значения

lr-tb
Устанавливает направление текста слева направо.
rl-tb
Задает направление текста справа налево.
tb-rl
Текст располагается вертикально и выравнивается по верхнему и правому краю.
bt-rl
Текст располагается вертикально и выравнивается по нижнему и правому краю.
tb-lr
Текст располагается вертикально и выравнивается по верхнему и левому краю.
bt-lr
Текст располагается вертикально и выравнивается по нижнему и левому краю.

Влияние разных значений на положение текста в таблице показано на рис. 1.

Рис. 1. Положение текста при разных значениях writing-mode

Рис. 1. Положение текста при разных значениях writing-mode

В табл. 1 показаны значения свойств direction и block-progress, соответствующие значениям writing-mode, а также языки, где они

Табл. 1. Значения writing-mode
writing-mode | direction | block-progress | Для каких языков
lr-tb | ltr | tb | Романских, греческого, кириллических
rl-tb | rtl | tb | Арабского, еврейских языков
tb-rl | ltr | rl | Азиатских в вертикальном написании
bt-rl | ltr | rl | Арабского, вставленного в азиатский документ
tb-lr | ltr | rl | Монгольского
bt-lr | rtl | rl | Арабского, вставленного в монгольский документ

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>writing-mode</title>
  <style>
   table {
    border-collapse: collapse;
    height: 350px;
    width: 300px;
   }
   table td {
    border: 1px solid #333;
    padding: 5px;
   }
  </style>
 </head>
 <body>
  <table style="width: 100%">
   <tr>
    <td><p style="writing-mode: lr-tb">Текст</p></td>
    <td><p style="writing-mode: rl-tb">Текст</p></td>
    <td><p style="writing-mode: tb-rl">Текст</p></td>
    <td><p style="writing-mode: bt-rl">Текст</p></td>
    <td><p style="writing-mode: tb-lr">Текст</p></td>
    <td><p style="writing-mode: bt-lr">Текст</p></td>
   </tr>
   <tr>
    <td>lr-tb</td>
    <td>rl-tb</td>
    <td>tb-rl</td>
    <td>bt-rl</td>
    <td>tb-lr</td>
    <td>bt-lr</td>
   </tr>
  </table>
 </body>
</html>

Объектная модель

Объект.style.writingMode

Примечание

Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl, Internet Explorer 7.0 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.

Chrome, Android и Safari поддерживают свойство -webkit-writing-mode.

Спецификация

Спецификация | Статус
CSS Writing Modes Module Level 3 | Рабочий проект

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
6 | 8 | 15 |  | 8 | 36
Android | Firefox Mobile | Opera Mobile | Safari Mobile
4 | 36 |  | 8


z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Краткая информация

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К позиционированным элементам

Синтаксис

z-index: <число> | auto

Значения

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Порядок карт</title>
  <style>
   .card { position: relative; }
   .three { top: 50px; left: 55px; z-index: 5; }
   .seven { left: -120px; top: 25px; z-index: 2;}
   .ace { left: -295px; z-index: 1; }
   .card:hover { z-index: 10; }
   </style>
 </head>
 <body>
   <img src="images/3.png" alt="3" class="card three">
   <img src="images/7.png" alt="7" class="card seven">
   <img src="images/ace.png" alt="Туз" class="card ace">
 </body>
</html>

В данном примере при наведении курсора на карту она выходит на передний край, частично перекрывая остальные собой остальные изображения (рис. 1).

Изменение порядка карт

Рис. 1. Изменение порядка карт

Объектная модель

Объект.style.zIndex

Примечание

Список, созданный с помощью тега <select>, в браузере Internet Explorer до версии 6.0 включительно всегда отображается поверх других элементов, несмотря на значение z-index.

Internet Explorer до версии 7.0 включительно интерпретирует auto как 0.

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.

Спецификация

Спецификация | Статус
CSS Transitions | Рабочий проект
CSS Level 2 (Revision 1) | Рекомендация

Браузеры

Настольные
Мобильные
Internet Explorer |  | Chrome | Opera | Safari | Firefox
4 | 8 | 1 | 4 | 1 | 1 | 3
Android | Firefox Mobile | Opera Mobile | Safari Mobile
1 | 1 | 6 | 1