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

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

Браузеры

Хотя большинство свойств CSS описаны достаточно давно, разработчики не всегда включали их поддержку в браузер или делали это не в полном объеме. По этой причине часто возникала ситуация, когда стандарты нельзя было применять только потому, что они не работали. К счастью, эта ситуация исправляется и современные браузеры поддерживают спецификацию CSS 2.1 практически в полном объеме, хотя еще и не до конца. Тем не менее, при создании универсальных веб-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие свойства будут работать и где, а какие нет. Для этого в таблице приведены популярные браузеры — Internet Explorer, Chrome, Opera, Safari и Firefox. Также в таблицу добавлены браузеры под операционные системы Android и iPhone.

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

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

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

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

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

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

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

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

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

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

Применение

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

Ссылка на спецификацию

Для объективности информации приводится ссылка на спецификацию CSS 2.1 или CSS 3 по указанному свойству. Саму спецификацию можно почитать по адресу http://www.w3.org/TR/CSS21/

Свойства CSS 3 еще не носят окончательный характер, поэтому ссылка приводится, как правило, на рабочие версии спецификации.

Версии CSS

Указано, в каких версиях CSS поддерживается стилевое свойство, а в каких нет. Используются следующие обозначения:

Да — свойство описано в указанной версии CSS.

Нет — свойство в эту версию спецификации CSS не включено.

Синтаксис

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

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

Примеры

Все примеры проверены на соответствие спецификации HTML с помощью валидатора по адресу http://validator.w3.org, а также на соответствие спецификации CSS 2.1 и CSS 3 с помощью валидатора (http://jigsaw.w3.org/css-validator). Возле каждого примера располагается таблица, где цветом выделяется, валиден пример или нет. Также приводятся некоторые популярные браузеры, в которых выполнялся пример и указано, работает в них пример или нет. Работоспособность обозначается той же цветовой схемой, что и для таблицы с браузерами.

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

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

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

© 2002–2012 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

htmlbook.ru


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

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0 | 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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

Браузеры

Internet Explorer до версии 6.0 включительно не поддерживает тег <abbr>, поэтому любое добавление стиля к селектору ABBR игнорируется.


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

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0 | 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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 6 идентификаторы иногда игнорируются, если они комбинируются с селекторами тегов или классами.


Классы

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0 | 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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 6.0 классы не работают, если их имена начинаются с дефиса (-) или символа подчеркивания (_).


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

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0 | 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

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

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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. Цвет и размер ссылок, заданный через классы

Браузеры

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


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

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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 и игнорируется другими браузерами.


Контекстные селекторы

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0 | 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IE CrOpSaFx

<!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>. При этом меняется цвет и шрифт текста, как показано на рис. 1.

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

Рис. 1. Использование контекстных селекторов

Браузеры

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


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

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
7.0 | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

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

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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).


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

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
7.0 | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 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>.

Пример

HTML5CSS 2.1IECrOpSaFx

<!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

[атрибут]

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSa 5.1Fx

<!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

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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   a[target="_blank"] {
    background: url(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

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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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

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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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

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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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

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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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

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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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", поскольку значение начинается именно с этого слова и в значении встречаются дефисы.


Адрес

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

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

Синтаксис

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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>


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

Internet Explorer | Chrome |  |  | Safari | Firefox | Android | iOS
9.0+ | 2.0+ | 9.5+ | 10.6+ | 4.0+ | 3.5+ | 2.1+ | 2.0+

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

Значение по умолчанию | all
Ссылка на спецификацию | http://www.w3.org/TR/css3-mediaqueries/#syntax

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Наряду с типами носителей в 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). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

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

@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
Значение: целое число

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

Пример 2. Цветной дисплей

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

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

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

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

Пример 3. «Киношное» соотношение

@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
Значение: размер

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

Пример 4

HTML5CSS3IE 8IECrOpSaFx

<!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 (пример 5).

Пример 5

HTML5CSS3IECrOpSaFx

<!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 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

@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

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

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

Пример 7. Использование ориентации устройства

@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 (точек на сантиметр)

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

Пример 8. Разрешение принтера

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

scan

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

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

width (min-width, max-width)

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

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

Пример 9

HTML5CSS3IECrOpSaFx

<!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>

Браузеры

Opera до версии 10.6 не поддерживает некоторые запросы, вроде orientation (в версии 10.5).


Проценты

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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>


Размер

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Описание

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

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

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

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

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

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

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

Пример 1

HTML5CSS 2.1IECrOpSaFx

<!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>

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

Абсолютные единицы применяются реже, чем относительные и обычно при работе с текстом. В табл. 2 перечислены основные абсолютные единицы.

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

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

Пример 2

HTML5CSS 2.1IECrOpSaFx

<!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).


Строки

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

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


Числа

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Описание

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

Синтаксис

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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>


Угол

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 2.0+ | 11.10 | 4.0+ | 3.6+ | 2.0+ | 2.0+

Описание

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

Синтаксис

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

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

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

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

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

Пример

HTML5CSS3IE 9CrOpSaFx

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


Цвет

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

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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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.

По названию

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

Браузеры поддерживают некоторые цвета по их названию. В табл. 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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

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

RGBA

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+

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

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

HSL

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+

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

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

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

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

HSLA

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+

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

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

Пример

HTML5CSS 2.1CSS 3IECrOpSaFx

<!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. Цвета на веб-странице


calc

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ |  |  |  | 4.0+ |  |

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

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

Значения

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

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

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

Пример

HTML5CSS3IE 9CrOpSaFx

<!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 поддерживает нестандартное значение -moz-calc.


inherit

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

Описание

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

Синтаксис

Свойство: inherit;

Пример

HTML5CSS 2.1IECrOpSaFx

<!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>


initial

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 1.2+ | 1.0+ |  | 1.0+

Описание

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

Синтаксис

Свойство: initial;

Пример

HTML5CSS 2.1CSS 3IECrOpSaFx

<!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;
    color: -moz-initial;
    font-family: initial;
    font-family: -moz-initial;
   }
  </style>
 </head>
 <body>
  <h2>Метод случайных чисел</h2>
  <p>Разделим пустыню на <span class="initial">ряд элементарных
   прямоугольников</span>, размер которых совпадает с размером
   клетки для льва. После чего перебираем полученные прямоугольники,
   каждый раз выбирая заданную область случайным образом.
   Если в данной области окажется лев, то мы поймаем его, накрыв
   клеткой.</p>
  <h2 class="initial">Метод Гаусса</h2>
</body>
</html>

Браузеры

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


!important

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0 | 7.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/cascade.html#important-rules

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Значения

У этого свойства нет значений.

Пример

HTML5CSS2.1IECrOpSaFx

<!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 и ниже.


@charset

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 2.0+ | 9.0+ | 4.0+ | 1.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | UTF-8
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/syndata.html#charset

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

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

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

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

Синтаксис

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

Значения

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

Пример

CSS2.1IE 9CrOpSaFx

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

Браузеры

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


@font-face

Internet Explorer |  | Chrome |  |  | Safari | Firefox | Android | iOS
6.0+ | 9.0+ | 2.0+ | 9.0+ | 12.0+ | 4.0+ | 3.5+ | 2.1+ | 2.0+

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

Значение по умолчанию | Нет
Ссылка на спецификацию | http://www.w3.org/TR/css3-fonts/#font-face-rule

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

Значения

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

Пример

HTML5CSS2.1CSS3IECrOp 11Op 12SaFx

<!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 написано кириллицей.


@import

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 2.0+ | 4.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | all
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/cascade.html#at-import

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

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

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

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

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.2+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | all
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/cascade.html#at-import

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

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

Синтаксис

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

Значения

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

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

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

Пример 2

HTML5CSS2.1IECrOpSaFx

<!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>

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


@page

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 2.0+ | 6.0+ | 5.0+ |  |  |

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

Значение по умолчанию | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS2/page.html#page-box

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

Значения

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

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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>


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | К ссылкам (тег <a>)
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

Синтаксис

A:active { ... }

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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


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

Internet Explorer | Chrome |  |  | Safari |  |  | Android | iOS
8.0+ | 1.0+ | 4.0+ | 9.2 | 1.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#before-and-after

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

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

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

Синтаксис

элемент:after  { content: "текст"  }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre>.

Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :after к тегу <fieldset>.

Firefox до версии 3.5 не допускал применение к :after свойств position, float, list-style-type и некоторых значений display.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 7.0+ | 1.0+ | 1.5+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#gen-content

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

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

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

Синтаксис

элемент::after { content: "текст" }

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

Браузеры

Браузер Internet Explorer до версии 10.0 работает только с нотацией :after, описанной в спецификации CSS 2.1.


background

CSS | Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+
3 | 9.0+ |  | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+

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

Значение по умолчанию | transparent || none || repeat || scroll || 0% 0%
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-background

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

CSS2.1
background: [background-attachment || background-color || background-image
  || background-position || background-repeat] | inherit
CSS3
background: [<фон>, ]* <последний_фон>

Здесь:

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

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

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

Значения

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

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!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</title>
  <style type="text/css">
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: #fc0 url(images/hand.png) repeat-y; /* Цвет фона,
                                                    путь к фоновому изображению и
                                                    повторение фона по вертикали */
   }
  </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. Вид фона и фонового рисунка в блоке фиксированного размера

Пример 2

HTML5CSS3IECrOpSaFx

<!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>

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

[window.]document.getElementById("elementID").style.background

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


background-attachment

CSS | IE |  |  | Chrome | Opera | Safari | Firefox | Android | iOS
2.1 | 6.0 | 7.0 | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+
3 | 9.0+ |  |  | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+

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

Значение по умолчанию | scroll
Наследуется | Нет
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию
  • http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment
  • http://www.w3.org/TR/css3-background/#the-background-attachment

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

CSS2.1
background-attachment: fixed | scroll | inherit
CSS3
background-attachment: fixed | scroll | local[, fixed | scroll | local]*

Значения

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

Пример 1

HTML5CSS2.1IECrOpSaFx

<!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>

Пример 2

HTML5CSS3IECrOpSaFx

<!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>

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

[window.]document.getElementById("elementID").style.backgroundAttachment

Браузеры

В браузере Internet Explorer 6 значение fixed работает только для тегов <body> или <html>.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Chrome поддерживает значение local с версии 4.0.

Safari поддерживает значение local с версии 5.0.

Firefox не понимает значение local.


background-color

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | transparent
Наследуется | Нет
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-background-color

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

background-color: цвет | transparent | inherit

Значения

См. цвет

transparent
Устанавливает прозрачный фон.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.backgroundColor

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


background-image

CSS | Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
2.1 | 6.0+ | 9.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+
3 | 9.0+ |  | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию
  • http://www.w3.org/TR/CSS21/colors.html#propdef-background-image
  • http://www.w3.org/TR/css3-background/#the-background-image

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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

Значения

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

Пример 1

HTML5CSS2.1IECrOpSaFx

<!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>

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

[window.]document.getElementById("elementID").style.backgroundImage

Браузеры

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

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

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

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

Пример 2

HTML5CSS2.1IECrOpSaFx

<!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. Фон для всей строки


background-origin

Internet Explorer | Chrome | Opera |  |  |  |  | Android | iOS
9.0+ | 1.0+ | 10.5+ | 3.0+ | 5.0+ | 1.0+ | 4.0+ | 2.1+ | 1.0+

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

Значение по умолчанию | padding-box
Наследуется | Нет
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#background-origin

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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. Результат применения разных значений

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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>

Браузеры

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

Chrome до версии 3.0 и Safari до версии 5.0 поддерживают нестандартное свойство -webkit-background-origin.

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


background-position

CSS | Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+
3 | 9.0+ |  | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+

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

Значение по умолчанию | 0% 0%
Наследуется | Нет
Применяется | К блочным элементам
Ссылка на спецификацию
  • http://www.w3.org/TR/CSS21/colors.html#propdef-background-position
  • http://www.w3.org/TR/css3-background/#the-background-position

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

CSS2.1
background-position: [left | center | right | <проценты> | <значение>] ||
                     [top | center | bottom | <проценты> | <значение>] | inherit
CSS3
background-position: <позиция>[, <позиция>]*

Здесь:

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

Значения

У свойства 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% (в правом нижнем углу)

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

При inherit значение наследуется у родителя элемента.

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!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>

Пример 2

HTML5CSS3IECrOpSaFx

<!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>

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

[window.]document.getElementById("elementID").style.backgroundPosition

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


background-repeat

CSS | Internet Explorer |  | Chrome |  |  | Safari | Firefox | Android | iOS
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ |  | 1.0+ | 1.0+ | 2.1+ | 1.0+
3 | 9.0+ |  | 1.0+ | 10.5+ | 11.0+ | 1.3+ | 3.6+ | 2.1+ | 1.0+

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

Значение по умолчанию | repeat
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию
  • http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat
  • http://www.w3.org/TR/css3-background/#the-background-repeat

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

CSS2.1
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
CSS3
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.
inherit
Наследует значение родителя.
space
Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
round
Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

Пример 1

XHTML 1.0CSS 2.1IECrOpSaFx

<!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-repeat</title>
  <style type="text/css">
   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. Фон для блока

Пример 2

HTML5CSS3IECrOpSaFx

<!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>

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

[window.]document.getElementById("elementID").style.backgroundRepeat

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Значения round и space поддерживаются только в IE9 и Opera 11.0.


background-size

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.5+ | 3.0+ | 3.6+ | 2.1+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-background-size

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения

значение
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
проценты
Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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>

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.

Opera до версии 10.53 использует нестандартное свойство -o-background-size.

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.


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

Internet Explorer | Chrome |  |  | Safari |  |  | Android | iOS
8.0+ | 1.0+ | 4.0+ | 9.2 | 1.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#before-and-after

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

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

  • При добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.
  • При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
  • :before наследует стиль от элемента, к которому он добавляется.

Синтаксис

элемент:before { content: "текст" }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!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 в списках

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre>.

Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :before к тегу <fieldset>.

Firefox до версии 3.5 не допускает применение к :before свойств position, float, list-style-type и некоторых значений display.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 7.0+ | 1.0+ | 1.5+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#gen-content

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

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

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

Синтаксис

элемент::before { content: "текст" }

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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 в списках

Браузеры

Браузер Internet Explorer до версии 9.0 работает только с нотацией :before, описанной в спецификации CSS 2.1.


border

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Синтаксис

border: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.border

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-bottom

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

border-bottom: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderBottom

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-bottom-color

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Значение цвета, заданное через color
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-color-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает цвет границы внизу элемента.

Синтаксис

border-bottom-color: цвет | transparent | inherit

Значения

См. цвет

transparent
Устанавливает прозрачный цвет.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderBottomColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.


border-bottom-left-radius

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#border-bottom-left-radius

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления левого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-bottom-left-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-top-left-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.


border-bottom-right-radius

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#border-bottom-right-radius

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления правого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-bottom-right-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-top-left-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-topleft.


border-bottom-style

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-style-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает стиль границы внизу элемента.

Синтаксис

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Значения

none
Линия не отображается и значение ее толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.
inherit
Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderBottomStyle

Браузеры

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-bottom-width

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает толщину границы внизу элемента.

Синтаксис

border-bottom-width: значение | thin | medium | thick | inherit

Значения

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderBottomWidth

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.


border-collapse

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | separate
Наследуется | Нет
Применяется | К тегу <table> или к элементам, у которых значение display установлено как table или inline-table
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

Рис. 1а | Рис. 1б
а | б

Рис. 1. Вид таблицы при использовании свойства border-collapse

Синтаксис

border-collapse: collapse | separate | inherit

Значения

collapse
Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. В IE6 и IE7 не отменяется действие атрибута cellspacing.


border-color

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border-color

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

Синтаксис

border-color: [цвет | transparent] {1,4} | inherit

Значения

См. цвет

transparent
Устанавливает прозрачный цвет.
inherit
Наследует значение родителя.

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

Табл. 1. Изменение цвета в зависимости от числа значений
Число значений | Результат
1 | Цвет границы будет установлен для всех сторон элемента.
2 | Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3 | Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 | Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.


border-left

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

border-left: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderLeft

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-left-color

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-color-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает цвет границы слева от элемента.

Синтаксис

border-left-color: цвет | transparent | inherit

Значения

См. цвет

transparent
Устанавливает прозрачный цвет.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderLeftColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.


border-left-style

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-style-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает стиль границы слева от элемента.

Синтаксис

border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Значения

none
Линия не отображается и значение ее толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-left-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае левая граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.
inherit
Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderLeftStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-left-width

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает толщину границы слева от элемента.

Синтаксис

border-left-width: значение | thin | medium | thick | inherit

Значения

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы слева. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderLeftWidth

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.


border-radius

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-border-radius

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значений | Результат
1 | Радиус указывается для всех четырех уголков.
2 | Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 | Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

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

Радиус скругления для создания разных типов уголков

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.


border-right

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

border-right: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderRight

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-right-color

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-color-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает цвет границы справа от элемента.

Синтаксис

border-right-color: цвет | transparent | inherit

Значения

См. цвет

transparent
Устанавливает прозрачный цвет.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderRightColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.


border-right-style

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-style-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает стиль границы справа от элемента.

Синтаксис

border-right-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Значения

none
Линия не отображается и значение ее толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-right-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае правая граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.
inherit
Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderRightStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-right-width

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает толщину границы справа от элемента.

Синтаксис

border-right-width: значение | thin | medium | thick | inherit

Значения

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы справа. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.

Пример

HTML5CSS 2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderRightWidth

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.


border-spacing

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Да
Применяется | К таблицам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

Синтаксис

border-spacing: значение1 [значение2]

Значения

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!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

Браузеры

Если к тегу <table> добавлен атрибут cellspacing, то при использовании стилевого свойства border-spacing атрибут cellspacing не принимается во внимание и его значение игнорируется. Исключением из этого правила является браузер Internet Explorer до версии 7.0 включительно, который не понимает свойство border-spacing.


border-style

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border-style

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Значения

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

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

Табл. 2. Зависимость результата использования от числа значений
Число значений | Результат
1 | Стиль границы будет задан для всех сторон элемента.
2 | Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3 | Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 | Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-top

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Зависит от использования
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

border-top: [border-width || border-style || border-color] | inherit

Значения

border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderTop

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-top-color

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-color-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает цвет границы сверху элемента.

Синтаксис

border-top-color: цвет | transparent | inherit

Значения

См. цвет

transparent
Устанавливает прозрачный цвет.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderTopColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.


border-top-style

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-style-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает стиль границы сверху элемента.

Синтаксис

border-top-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Значения

none
Линия не отображается и значение ее толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-top-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае верхняя граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.
inherit
Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderTopStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.


border-top-width

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает толщину границы сверху элемента.

Синтаксис

border-top-width: значение | thin | medium | thick | inherit

Значения

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы слева. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderTopWidth

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.


border-top-left-radius

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#border-top-left-radius

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления левого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-top-left-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Радиус скругления для создания разных типов уголков

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

Пример

HTML5CSS3IECrOpSaFx

<!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

Браузеры

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-topleft.

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-top-left-radius.


border-top-right-radius

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#border-top-right-radius

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления правого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-top-right-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

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

Пример

HTML5CSS3IECrOpSaFx

<!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

Браузеры

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-topright.

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-top-right-radius.


border-width

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

border-width: [значение | thin | medium | thick] {1,4} | inherit

Значения

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя.

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

Табл. 1. Зависимость результата от числа значений
Число значений | Результат
1 | Толщина границы будет установлена для всех сторон элемента.
2 | Первое значение устанавливает толщину верхней и нижней границы, второе — левой и правой.
3 | Первое значение задает толщину верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 | Поочередно устанавливается толщину верхней, правой, нижней и левой границы.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.borderWidth

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.


bottom

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от свойства position, оно обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном — относительно нижнего края окна браузера (рис. 1). Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя (рис. 2).

Рис. 1. Значение bottom при абсолютном позиционирование элемента

Рис. 1. Значение bottom при абсолютном позиционирование элемента

Рис. 2. Значение bottom относительно родителя

Рис. 2. Значение bottom относительно родителя

Если одновременно задано свойство top и bottom со значениями отличными от auto, то свойство bottom игнорируется.

Синтаксис

bottom: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.bottom

Браузеры

В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


box-shadow

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 10.5+ | 3.0+ | 3.5+ | 2.1+ | 2.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-box-shadow

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Значения

none
Отменяет добавление тени.
inset
Тень выводится внутри элемента. Необязательный параметр.
сдвиг по x
Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y
Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие
Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение
Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет
Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>box-shadow</title>
  <style>
   .shadow {
    background: #fc0; /* Цвет фона */
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
    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

Браузеры

Safari до версии 5.1, Chrome до версии 10.0 и iOS поддерживают свойство -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 — смещение тени в пикселах.


box-sizing

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 7.0+ | 3.0+ | 1.0+ | 2.1+ | 2.0+

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

Значение по умолчанию | content-box
Наследуется | Нет
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#box-sizing

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | inherit

Значения

content-box
Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box
Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
inherit
Наследует значение родителя.

Пример

HTML5CSS3IECrOpSaFx

<!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; /* Параметры рамки */
    -moz-box-sizing: border-box; /* Для Firefox */
    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 10 показан на рис. 1.

Рис. 1. Ширина блоков

Браузеры

Firefox использует нестандартное свойство -moz-box-sizing.

Safari, Chrome и iOS также используют нестандартное свойство -webkit-box-sizing.


caption-side

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | top
Наследуется | Да
Применяется | К <caption> или ко всем элементам, у которых значение display установлено как table-caption.
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет положение заголовка таблицы, который задается с помощью тега <caption>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align. Браузер Firefox также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS.

Синтаксис

CSS2.1
caption-side: top | bottom
CSS3
caption-side: top | bottom | left | right

Значения

top
Располагает заголовок по верхнему краю таблицы.
bottom
Заголовок располагается под таблицей.
left
Заголовок размещается слева от таблицы. Это значение работает только в браузерах Firefox.
right
Заголовок размещается справа от таблицы. Это значение работает только в браузерах Firefox.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.captionSide


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.0+ | 3.1+ | 1.0+ | 1.0+ | 2.0+

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

Применяется | <input type="checkbox">, <input type="radio">
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#checked

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.

Синтаксис

элемент:checked { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


clear

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | К блочным и плавающим элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Синтаксис

clear: none | left | right | both | inherit

Значения

none
Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
both
Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
left
Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right
Отменяет обтекание с правой стороны элемента.
inherit
Устанавливает значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.clear

Браузеры

В браузере Internet Explorer 6 наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear, соприкасающиеся с плавающими элементами (у которых задано свойство float) могут исчезать.

В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


clip

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visufx.html#propdef-clip

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

clip: rect(Y1, X1, Y2, X2) | auto | inherit

Значения

В качестве значений используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — пикселы (px), em и др. Если край области нужно оставить без изменений, следует установить auto, положение остальных значений показано на рис. 1.

Рис. 1. Значения параметра clip

Рис. 1. Значения свойства clip

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.clip

Браузеры

Internet Explorer до версии 7.0 включительно работает с другой формой записи, при которой значения координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto auto 40px). Также Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


color

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Зависит от настроек браузера, обычно черный цвет
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-color

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет цвет текста элемента.

Синтаксис

color: цвет | inherit

Значения

См. цвет

inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.color

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


column-count

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 1.0+ | 11.1+ | 3.0+ | 1.5+ |  | 2.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-multicol/#column-count

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет количество колонок в многоколоночном тексте.

Синтаксис

column-count: <число> | auto

Значения

<число>
Целое число больше нуля, задающее оптимальное число колонок.
auto
Число колонок вычисляется автоматически на основе других свойств (column-width, column-gap).

Пример

HTML5CSS3IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>column-count</title>
  <style>
   .book {
    -moz-column-count: 2; /* Для Firefox */
    -webkit-column-count: 2; /* Для Safari и Chrome */
    column-count: 2;
   }
  </style>
 </head>
 <body>
  <div class="book">
   Контрапункт контрастных фактур дает структурный midi-контроллер,
   таким образом объектом имитации является число длительностей в
   каждой из относительно автономных ритмогрупп ведущего голоса.
   Протяженность, по определению, просветляет флэнжер, хотя это
   довольно часто напоминает песни Джима Моррисона и Патти Смит.
  </div>
 </body>
</html>

Браузеры

Firefox поддерживает нестандартное свойство -moz-column-count.

Safari, Chrome и iOS поддерживают нестандартное свойство -webkit-column-count.


column-gap

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 1.0+ | 11.1+ | 3.0+ | 1.5+ |  | 2.0+

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

Значение по умолчанию | normal
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задаёт расстояние между колонками в многоколоночном тексте.

Синтаксис

column-gap: <значение> | normal

Значения

<значение>
Значение ширины межколоночного интервала в единицах CSS (например, пикселах).
normal
Межколоночный интервал устанавливается браузером.

Пример

HTML5CSS3IE 9CrOpSaFx

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>column-gap</title>
  <style>
   .book {
    -moz-column-count: 3; /* Для Firefox */
    -moz-column-width: 200px;
    -moz-column-gap: 2em;
    -webkit-column-count: 3; /* Для Safari и Chrome */
    -webkit-column-width: 200px;
    -webkit-column-gap: 2em;
    column-count: 3;
    column-width: 200px;
    column-gap: 2em;
   }
  </style>
 </head>
 <body>
  <div class="book">
   Как было показано выше, кризис жанра дает звукоряд, и здесь в
   качестве модуса конструктивных элементов используется ряд
   каких-либо единых длительностей. Фьюжн, по определению, полифигурно
   варьирует гармонический интервал, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
   Трехчастная фактурная форма, в первом приближении, возможна. Форшлаг
   изящно продолжает хамбакер, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
  </div>
 </body>
</html>

Браузеры

Firefox поддерживает нестандартное свойство -moz-column-gap.

Safari, Chrome и iOS поддерживают нестандартное свойство -webkit-column-gap.


column-rule

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 1.0+ | 11.1+ | 3.0+ | 1.5+ |  | 2.0+

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

Значение по умолчанию | medium none
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

column-rule: <border-width> || <border-style> || <цвет>

Значения

Значение border-width определяет толщину линии. Для управления видом линии предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили линии

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

Пример

HTML5CSS3IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>column-rule</title>
  <style>
   .book {
    -moz-column-count: 3;
    -moz-column-width: 200px;
    -moz-column-rule: 1px solid #ccc;
    -webkit-column-count: 3;
    -webkit-column-width: 200px;
    -webkit-column-rule: 1px solid #ccc;
    column-count: 3;
    column-width: 200px;
    column-rule: 1px solid #ccc;
   }
  </style>
 </head>
 <body>
  <div class="book">
   Как было показано выше, кризис жанра дает звукоряд, и здесь в
   качестве модуса конструктивных элементов используется ряд
   каких-либо единых длительностей. Фьюжн, по определению, полифигурно
   варьирует гармонический интервал, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
   Трехчастная фактурная форма, в первом приближении, возможна. Форшлаг
   изящно продолжает хамбакер, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
  </div>
 </body>
</html>

Браузеры

Firefox поддерживает нестандартное свойство -moz-column-rule.

Safari, Chrome и iOS поддерживают нестандартное свойство -webkit-column-rule.


column-width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 1.0+ | 11.1+ | 3.0+ | 1.5+ |  | 2.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

column-width: <значение> | auto

Значения

<значение>
Значение ширины колонки в абсолютных единицах CSS (например, пикселах).
auto
Ширина колонок вычисляется автоматически на основе других свойств (column-count, column-gap).

Пример

HTML5CSS3IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>column-width</title>
  <style>
   .book {
    -moz-column-count: 3;
    -moz-column-width: 200px;
    -webkit-column-count: 3;
    -webkit-column-width: 200px;
    column-count: 3;
    column-width: 200px;
   }
  </style>
 </head>
 <body>
  <div class="book">
   Как было показано выше, кризис жанра дает звукоряд, и здесь в
   качестве модуса конструктивных элементов используется ряд
   каких-либо единых длительностей. Фьюжн, по определению, полифигурно
   варьирует гармонический интервал, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
   Трехчастная фактурная форма, в первом приближении, возможна. Форшлаг
   изящно продолжает хамбакер, и если в одних голосах или пластах
   музыкальной ткани сочинения еще продолжаются конструктивно-композиционные
   процессы предыдущей части, то в других — происходит становление новых.
  </div>
 </body>
</html>

Браузеры

Firefox поддерживает нестандартное свойство -moz-column-width.

Safari, Chrome и iOS поддерживают нестандартное свойство -webkit-column-width.


columns

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 1.0+ | 11.1+ | 3.0+ | 9.0+ |  | 2.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

columns: [column-width] || [column-count]

Значения

Комбинация свойств column-width и column-count. Порядок значения не имеет.

Примеры

Ширина колонок 200 пикселов, количество задаётся браузером.

columns: 200px auto;

Три колонки минимальной ширины 12em каждая.

columns: 3 12em;

Две колонки, их ширина определяется браузером.

columns: 2;

Браузеры

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

Safari, Chrome и iOS поддерживают нестандартное свойство -webkit-columns.


content

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0 | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Пустая строка
Наследуется | Нет
Применяется | К псевдоэлементам :before и :after
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#content

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

content: строка | attr(параметр) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none | inherit

Значения

Строка
Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы 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.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

Браузеры

Firefox до версии 2.0 включительно и Opera до версии 9.2 включительно не поддерживают значение none. Safari до версии 3.1 не поддерживает значение none и normal.

Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11.0 и 5.1 соответственно.


counter-increment

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 2.0+ | 9.2+ | 3.0+ | 1.0+ | 2.1+ | 2.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.

Синтаксис

counter-increment: none | inherit | идентификатор | целое число

Значения

none
Запрещает увеличение счетчика для текущего селектора.
inherit
Наследует значение родителя.
идентификатор

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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

Примечание

Для элементов, у которых установлено display: none, значение счётчика не меняется.


counter-reset

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 2.0+ | 9.2+ | 3.0+ | 1.0+ | 2.1+ | 2.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает идентификатор, в котором будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика. Такой счётчик может выводиться с помощью свойства content и псевдоэлементов :after и :before.

Синтаксис

counter-reset: none | inherit | идентификатор | целое число

Значения

none
Запрещает инициацию счётчика для текущего селектора.
inherit
Наследует значение родителя.
идентификатор

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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

Примечание

Для элементов, у которых установлено display: none, значение счётчика не меняется.


cursor

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0 | 1.0+ | 7.0+ | 3.0+ | 1.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/ui.html#cursor-props

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

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

Синтаксис

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

Значения

url
Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
auto
Вид курсора по умолчанию для текущего элемента.
inherit
Наследует значение родителя.

Остальные допустимые значения приведены в табл. 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, допустимые значения перечислены выше.

Пример 1

HTML5CSS2.1IECrOpSaFx

<!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

Пример 2

HTML5CSS2.1IECrOpSaFx

<!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>

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

[window.]document.getElementById("elementID").style.cursor

Браузеры

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand, которое является аналогом значения pointer. Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll, col-resize, no-drop, not-allowed, row-resize, vertical-text. Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand).

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Opera не работает с файлами курсора.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.1+ | 3.0+ | 2.1+ | 2.0+

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

Применяется | К элементам форм
Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#pseudo-default

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :default применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов.

Синтаксис

элемент:default { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


direction

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0 | 2.0+ | 9.2+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | ltr
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-direction

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Свойство direction достаточно универсально и управляет следующими возможностями:

  • способ отображения текста в блоке;
  • порядок колонок в таблице;
  • позиция полосы прокрутки в блоке;
  • положение последней висячей строки текстового блока при text-align: justify.

Для использования со встроенными элементами, значение свойства unicode-bidi должно быть задано как embed или override.

Синтаксис

direction: ltr | rtl | inherit

Значения

ltr
Устанавливает направление слева направо.
rtl
Задает направление справа налево.
inherit
Наследует значение родителя.

Пример 1

XHTML 1.0CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8

<!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>direction</title>
  <style type="text/css">
   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 к таблице

Рис. 1. Результат использования direction в браузере Internet Explorer

Пример 2

HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8

<!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 к таблице

Браузеры

При добавлении свойства direction со значением rtl к блоку с полосой прокрутки (например, <textarea>), браузер Internet Explorer и Firefox отображают скроллинг слева, а Opera и Safari — справа.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.0+ | 3.1+ | 1.0+ | 1.0+ | 2.0+

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

Применяется | к элементам формы
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#enableddisabled

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

элемент:disabled { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


display

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 2.0+ | 7.0+ | 1.0+ | 1.0+ | 2.1+ | 1.0+

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

Значение по умолчанию | inline
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#display-prop

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display
Значение | Описание | IE6 | IE7 | IE8 | Cr2 | Cr8 | Op9.2 | Op10 | Sa3.1 | Sa5 | Fx3 | Fx4
block | Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. |  |  |  |  |  |  |  |  |  |  |
inline | Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. |  |  |  |  |  |  |  |  |  |  |
inline-block | Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. |  |  |  |  |  |  |  |  |  |  |
inline-table | Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом. |  |  |  |  |  |  |  |  |  |  |
list-item | Элемент выводится как блочный и добавляется маркер списка. |  |  |  |  |  |  |  |  |  |  |
none | Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. |  |  |  |  |  |  |  |  |  |  |
run-in | Устанавливает элемент как блочный или встроенный в зависимости от контекста. |  |  |  |  |  |  |  |  |  |  |
table | Определяет, что элемент является блочной таблицей подобно использованию тега <table>. |  |  |  |  |  |  |  |  |  |  |
table-caption | Задает заголовок таблицы подобно применению тега <caption>. |  |  |  |  |  |  |  |  |  |  |
table-cell | Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>). |  |  |  |  |  |  |  |  |  |  |
table-column | Назначает элемент колонкой таблицы, словно был добавлен тег <col>. |  |  |  |  |  |  |  |  |  |  |
table-column-group | Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>. |  |  |  |  |  |  |  |  |  |  |
table-footer-group | Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>. |  |  |  |  |  |  |  |  |  |  |
table-header-group | Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>. |  |  |  |  |  |  |  |  |  |  |
table-row | Элемент отображается как строка таблицы (тег <tr>). |  |  |  |  |  |  |  |  |  |  |
table-row-group | Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>. |  |  |  |  |  |  |  |  |  |  |

Пример

HTML5CSS 2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").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 2.0, а также Safari версии 3 и старше, iOS:

  • значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

  • Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.5+ | 3.1+ | 1.0+ | 1.0+ | 2.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#empty-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :empty представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста или пробелов. К примеру, <p></p> является пустым элементов, а <p> </p>, <p>&nbsp;</p> или <p>эге</p> уже нет.

Синтаксис

элемент:empty { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


empty-cells

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 4.0+ | 1.2+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | show
Наследуется | Да
Применяется | К <td>, <th> или к элементам, у которых display: table-cell
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/tables.html#propdef-empty-cells

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.

Ячейка считается пустой в следующих случаях:

  • нет вообще никаких символов;
  • в ячейке содержится только перевод строки, символ табуляции или пробел;
  • значение visibility установлено как hidden.

Добавление неразрывного пробела &nbsp; воспринимается как видимое содержание, т.е. ячейка уже будет непустой.

Синтаксис

empty-cells: show | hide

Значения

show
Отображает границу вокруг ячейки и фон в ней.
hide
Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает свойство empty-cells и отображает пустые ячейки всегда так, словно для них установлено empty-cells: hide.

Firefox версии 2 и ниже не прячет строку таблицы, если для всех ячеек задано empty-cells: hide и ячейки пусты.

Браузер Opera до версии 9.27 включительно не скрывает строку таблицы и для пустых ячеек отображает цвет фона.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.0+ | 3.1+ | 1.0+ | 1.0+ | 2.0+

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

Применяется | К элементам формы
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#enableddisabled

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.

Синтаксис

элемент:enabled { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE 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


Псевдокласс :first-child

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#first-child

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

Синтаксис

элемент:first-child { ... }

Значения

Нет.

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!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>first-child</title>
  <style type="text/css">
    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. Выделение цветом первого дочернего элемента абзаца

Пример 2

HTML5CSS2.1IECrOpSaFx

<!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. Ссылки с линией слева


Псевдоэлемент :first-letter

Internet Explorer |  | Chrome | Opera | Safari |  |  | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+

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

Применяется | К блочным элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#first-letter

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдоэлемент :first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

Синтаксис

элемент:first-letter { ... }

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>first-letter</title>
  <style>
   p {
    font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
    font-size: 90%; /* Размер шрифта */
   }
   P:first-letter {
    font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 200%; /* Размер шрифта первого символа */
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
   <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее
   как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила
   внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую
   завесу из мрака и пыли. </p>
   <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
   не было, и лишь на полу валялась порванная туфля Паши.</p>
 </body>
</html>

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

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

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

Браузеры

Internet Explorer до версии 7 включительно, Firefox до версии 2.0 включительно игнорируют свойство letter-spacing, когда оно применяется к псевдоэлементу :first-letter.


Псевдоэлемент ::first-letter

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 7.0+ | 1.0+ | 1.5+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#first-letter

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

Синтаксис

элемент::first-letter { ... }

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

Браузеры

Браузер Internet Explorer до версии 9.0 работает только с нотацией :first-letter, описанной в спецификации CSS 2.1.


Псевдоэлемент :first-line

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | К блочным элементам, а также к элементам, у которых значение display задано как inline-block, table-caption или table-cell
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдоэлемент :first-line задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

Синтаксис

элемент:first-line { ... }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!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


Псевдоэлемент ::first-line

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 7.0+ | 1.0+ | 1.5+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#first-line

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдоэлемент ::first-line задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

Синтаксис

элемент::first-line { ... }

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

Браузеры

Браузер Internet Explorer до версии 9.0 работает только с нотацией :first-line, описанной в спецификации CSS 2.1.


Псевдокласс :first-of-type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.5+ | 3.1+ | 3.5+ | 2.1+ | 2.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :first-of-type задает правила стилей для первого элемента в списке дочерних элементов своего родителя. К примеру, добавление :first-of-type к селектору TD устанавливает стиль для всех первых ячеек, поскольку родителем для тега <td> выступает тег <tr>.

Синтаксис

элемент:first-of-type { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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 в таблице


float

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам (за исключением позиционированных)
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-float

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

float: left | right | none | inherit

Значения

left
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right
Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none
Обтекание элемента не задается.
inherit
Наследует значение родителя.

Пример

HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8

<!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

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

[window.]document.getElementById("elementID").style.styleFloat

[window.]document.getElementById("elementID").style.cssFloat

Браузеры

В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | К элементам, которые могут получить фокус (<a>, <input>, <select> и <textarea>)
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.

Синтаксис

элемент:focus { ... }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!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>


font

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Зависит от использования
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Синтаксис

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

Значения

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

inherit
Наследует значение родителя.

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

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.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.font

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


font-family

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис

font-family: имя шрифта [, имя шрифта[, ...]] | inherit

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

  • serif — шрифты с засечками (антиквенные), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • cursive — курсивные шрифты;
  • fantasy — декоративные шрифты;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.fontFamily

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


font-size

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | medium
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

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

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.

Рис. 1. Размер шрифта

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Значения

Для задания абсолютного размера используются следующие значения: 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% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


font-stretch

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ |  |  |  | 9.0+ |  |

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-fonts/#font-stretch-prop

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Синтаксис

font-stretch: inherit | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

Значения

Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.

Вид букв при разных значениях font-stretch

Рис. 1. Вид букв при разных значениях font-stretch

Пример

HTML5CSS3IE 9CrOpSaFx

<!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>

Браузеры

Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.


font-style

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

font-style: normal | italic | oblique | inherit

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.fontStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Браузеры текст со значением oblique всегда отображают как курсив (italic).


font-variant

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-variant

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

font-variant: normal | small-caps | inherit

Значения

normal
Оставляет регистр символов исходным, заданным по умолчанию.
small-caps
Модифицирует все строчные символы как заглавные уменьшенного размера, как показано на рис. 1.
inherit
Наследует значение родителя

Обычный текст и текст в виде капители

Рис. 1. Обычный текст и текст в виде капители

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.fontVariant

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


font-weight

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения

Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное начертание, bolder — жирное начертание; lighter — светлое начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.fontWeight

Браузеры

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.


height

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным и заменяемым элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-height

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.

Синтаксис

height: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.height

Браузеры

Браузер Internet Explorer 6 некорректно определяет height как min-height.

В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


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

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |  |

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

Применяется | Не определено
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

элемент:hover { ... }

Значения

Нет.

Пример 1

HTML5CSS2.1IECrOpSaFx

<!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 для ссылок

Пример 2

HTML5CSS2.1IECrOpSaFx

<!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 до версии 6.0 включительно псевдокласс :hover работает только для ссылок.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 10.60+ | 3.1+ | 3.6+ | 2.1+ | 2.0+

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

Значение по умолчанию | Нет
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#indeterminate

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :indeterminate задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии. К примеру, если из группы флажков ни один не помечен, то флажки находятся в указанном состоянии. В реальности, стиль применяется только к элементам, у которых DOM-атрибут :indeterminate через JavaScript установлен в значение true.

Синтаксис

элемент:indeterminate { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 9.5+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

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

Применяется | К <input>
Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#pseudo-validity

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.

Синтаксис

input:invalid { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 2.0+ | 8.0+ | 3.1+ | 1.0+ | 2.1+ | 2.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#lang

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут charset тега <meta>. В XML для этой цели применяется xml:lang.

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

Синтаксис

элемент:lang(<язык>) { ... }

Значения

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий; fr — французский; it — итальянский и др.

Пример

HTML5CSS2.1IECrOpSa 5.1Fx

<!DOCTYPE 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


Псевдокласс :last-child

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#last-child-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.

Синтаксис

элемент:last-child { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


Псевдокласс :last-of-type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.5+ | 2.1+ | 2.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#last-of-type-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

элемент:last-of-type { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>last-of-type</title>
  <style>
   p:last-of-type:after {
    content: " \25C4"; /* Добавляем символ в конце текста */
    color: #c00000; /* Цвет символа */
   }
  </style>
 </head>
 <body>
  <p>Этот старинный скандинавский напиток пришел к нам из древних времен и
  воспет во многих песнях. Теперь вы самостоятельно можете приготовить
  его и насладиться чудесным вкусом и ароматом легендарного нектара.</p>
  <p>...</p>
  <p>Осталось добавить хлива и хрольва, чтобы напиток был готов. Подавать горячим.</p>
 </body>
</html>

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

Результат использования псевдокласса :last-of-type

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


left

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-left

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Значение свойства left относительно окна браузера

Рис. 1. Значение свойства left относительно окна браузера

В случае значения relative, left отсчитывается от левого края исходного положения элемента (рис. 2).

Значение свойства left относительно исходного положения

Рис. 2. Значение свойства left относительно исходного положения

Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от левого края родителя.

Значение свойства left относительно родителя

Рис. 3. Значение свойства left относительно родителя

Синтаксис

left: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства left может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.left

Браузеры

В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


letter-spacing

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

letter-spacing: значение | normal | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).

normal
Задает интервал между символами как обычно.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.letterSpacing

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


line-height

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

line-height: множитель | значение | проценты | normal | inherit

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.

normal
Расстояние между строк вычисляется автоматически.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.lineHeight

Браузеры

Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм. Также в этом браузере не поддерживается значение inherit.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | К ссылкам (тег <a>)
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :link применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление.

Синтаксис

a:link { ... }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!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


list-style

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Да
Применяется | К тегам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#propdef-list-style

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для подробного ознакомления смотрите информацию о каждом свойстве list-style-type, list-style-position и list-style-image отдельно.

Синтаксис

list-style: list-style-type || list-style-position || list-style-image | inherit

Значения

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

inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.listStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


list-style-image

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | none
Наследуется | Да
Применяется | К тегам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

list-style-image: none | url('путь к файлу') | inherit

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.listStyleImage

Браузеры

В разных браузерах расстояние между изображением и текстом может различаться.

В Internet Explorer до версии 7.0 включительно не отображаются маркеры, если для списка добавлено свойство float. Также в этом браузере не поддерживается значение inherit.


list-style-position

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | outside
Наследуется | Да
Применяется | К тегам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается текстом (рис. 2).

Рис. 1. Значение outside

Рис. 2. Значение inside

Синтаксис

list-style-position: inside | outside

Значения

inside
Маркер является частью текстового блока и отображается в элементе списка.
outside
Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.listStylePosition

Браузеры

В браузере Internet Explorer 6 при использовании нумерованного списка <ol> и значения inside свойства list-style-position, числа идущие с 10, начинают накладываться на текст списка.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


list-style-type

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | disc (для <ul>); decimal (для <ol>)
Наследуется | Да
Применяется | К тегам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Изменяет вид маркера для каждого элемента списка. Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка (тег <ul>) и нумерованного (тег <ol>).

Синтаксис

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 | inherit

Значения

Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

Маркированный список

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
Отменяет маркеры для списка.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").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, inheirt. Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов (ul { float: left; }).

Internet Explorer 8 дополнительно понимает значение upper-greek, которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ,...).


margin

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Отступ от левого края элемента

Рис. 1. Отступ от левого края элемента

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

Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

margin: [значение | проценты | auto] {1,4} | inherit

Значения

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

Табл. 1. Зависимость от числа значений
Число значений | Результат
1 | Отступы будут установлены одновременно от каждого края элемента.
2 | Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3 | Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 | Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.margin

Браузеры

Internet Explorer 6 в режиме совместимости (quirk mode) не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto. Также в этом браузере наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Примечание

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

Схлопывание не срабатывает:

  • для элементов, у которых на стороне схлопывания задано свойство padding.
  • для элементов, у которых на стороне схлопывания задана граница;
  • на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
  • на плавающих элементах (для них свойство float задано как left или right);
  • для строчных элементов;
  • для <html>.


margin-bottom

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от нижнего края элемента

Рис. 1. Отступ от нижнего края элемента

Синтаксис

margin-bottom: значение | auto | inherit

Значения

Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.marginBottom

Браузеры

Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


margin-left

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-left

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Рис. 1. Отступ от левого края элемента

Синтаксис

margin-left: значение | auto | inherit

Значения

Величину левого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.marginLeft

Браузеры

Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


margin-right

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-right

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от правого края элемента

Рис. 1. Отступ от правого края элемента

Синтаксис

margin-right: значение | auto | inherit

Значения

Величину правого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.marginRight

Браузеры

Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


margin-top

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-top

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от верхнего края элемента

Рис. 1. Отступ от верхнего края элемента

Синтаксис

margin-top: значение | auto | inherit

Значения

Величину верхнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.marginTop

Браузеры

Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


max-height

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
7.0 | 8.0+ | 1.0+ | 4.0+ | 2.0+ | 1.0+ | 2.1+ | 2.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, кроме встроенных и таблиц
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств 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.

Синтаксис

max-height: значение | проценты | none | inherit

Значения

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

none
Отменяет действие этого свойства.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.maxHeight

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


max-width

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
7.0 | 8.0+ | 1.0+ | 4.0+ | 2.0+ | 1.0+ | 2.1+ | 2.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, кроме встроенных и таблиц
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-max-width

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств 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.

Синтаксис

max-width: значение | проценты | none | inherit

Значения

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

none
Отменяет действие этого свойства.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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-документы.

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

[window.]document.getElementById("elementID").style.maxWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


min-height

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
7.0 | 8.0+ | 1.0+ | 4.0+ | 2.0+ | 1.0+ | 2.1+ | 2.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам, кроме встроенных и таблиц
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств 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.

Синтаксис

min-height: значение | проценты | inherit

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.minHeight

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


min-width

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
7.0 | 8.0+ | 1.0+ | 4.0+ | 2.0+ | 1.0+ | 2.1+ | 2.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам, кроме встроенных и таблиц
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.

Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств 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.

Синтаксис

min-width: значение | проценты | inherit

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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 в браузере

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

[window.]document.getElementById("elementID").style.minWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#negation

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор.

Синтаксис

элемент:not(<селектор>) { ... }

В качестве селектора могут указываться псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать псевдокласс :not (конструкция :not(:not(...)) запрещена) и псевдоэлементы.

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


Псевдокласс :nth-child

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+

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

Значение по умолчанию | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :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 | Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!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 к строкам таблицы


Псевдокласс :nth-last-child

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+

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

Значение по умолчанию | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :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 | Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!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 к колонкам таблицы


Псевдокласс :nth-last-of-type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+

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

Значение по умолчанию | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#nth-last-of-type-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :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 | Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!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 к колонкам таблицы


Псевдокласс :nth-of-type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+

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

Значение по умолчанию | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :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 | Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!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 к изображениям


Псевдокласс :only-child

Internet Explorer | Chrome | Opera |  |  | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#only-child-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :only-child применяется к дочернему элементу, только если он единственный у родителя. Аналогичен использованию :first-child:last-child или :nth-child(1):nth-last-child(1).

Синтаксис

элемент:only-child { ... }

Значения

Нет.

Браузеры

В Safari до версии 3.0 псевдокласс :only-child воспринимается как :first-child.


Псевдокласс :only-of-type

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.5+ | 2.1+ | 2.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#only-of-type-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :only-of-type применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогичен использованию :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).

Синтаксис

элемент:only-of-type { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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 к картинкам


opacity

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.0+ | 2.0+ | 1.7+ | 2.0+ | 1.0+

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

Значение по умолчанию | 1
Наследуется | Нет
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-color/#transparency

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

opacity: значение

Значения

В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

Браузеры

Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 9.6+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

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

Применяется | К <input>
Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#pseudo-required-value

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Применяет стилевые правила к тегу <input>, у которого не задан атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optional применяется к необязательным полям формы.

Синтаксис

input:optional { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

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


orphans

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ |  | 9.2+ |  |  |  |

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

Значение по умолчанию | 2
Наследуется | Да
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/page.html#propdef-orphans

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

orphans: число | inherit

Значения

число
Целое число, которое задает количество строк внизу печатной страницы. Отрицательное значение запрещено.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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>


outline

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 7.0+ | 2.0+ | 1.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/ui.html#propdef-outline

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

outline: outline-color || outline-style || outline-width | inherit

Значения

outline-color
Задает цвет линии в любом допустимом для CSS формате.
outline-style
Стиль линии.
outline-width
Толщина границы.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.outline


outline-color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 7.0+ | 2.0+ | 1.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | invert
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/ui.html#propdef-outline-color

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Указывает цвет внешней границы элемента. В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Синтаксис

outline-color: invert | цвет | inherit

Значения

invert
Автоматически задаёт цвет линии, исходя из фона под ней для достижения максимального контраста. В CSS 2.1 браузеру разрешается игнорировать значение invert и вместо него использовать цвет линии заданный свойством color.
цвет
Задаёт цвет линии в любом допустимом для CSS формате.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID")style.outlineColor


outline-offset

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ | 9.5+ | 2.0+ | 1.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#outline-offset

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

outline-offset: <размер> | inherit

Значения

<размер>
Задаёт расстояние от края элемента до рамки. Отриацательное значение отображает рамку внутри элемента, положительное — вокруг элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.outlineOffset


outline-style

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 7.0+ | 2.0+ | 1.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/ui.html#propdef-outline-style

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Значения

none
Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной рамки.
ridge
Создает эффект рельефной границы.
inset
Псевдотрехмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются.
outset
Псевдотрехмерная рамка, при которой левая и верхяя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.
inherit
Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис. 1. Вид границы с разным значением стилей

Пример

HTML5CSS2.1IECrOpSaFx

<!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 для ссылок

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

[window.]document.getElementById("elementID")style.outlineStyle


outline-width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 1.0+ | 7.0+ | 2.0+ | 1.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/ui.html#propdef-outline-width

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает толщину внешней границы элемента. В отличие от свойства border-width, для outline-width нельзя устанавливать границу для каждой стороны элемента индивидуально.

Чтобы outline-width работал, необходимо установить у свойства outline-style любое значение кроме none.

Синтаксис

outline-width: thin | medium | thick | значение | inherit

Значения

thin
Тонкая линия. Значение в пикселах может изменяться в зависимости от браузера, но обычно составляет 1 пиксел.
medium
Линия средней толщины (3 пиксела).
thick
Линия большой толщины (6 пикселов).
значение
Для точной установки толщины можно использовать любые единицы размера принятые в CSS.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID")style.outlineWidth


overflow

Internet Explorer |  | Chrome | Opera | Safari |  |  | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 3.6 | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | visible
Наследуется | Нет
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

visible
Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляются полосы прокрутки.
auto
Полосы прокрутки добавляются только при необходимости.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.overflow

Браузеры

Internet Explorer до версии 7.0 включительно:

  • не поддерживает значение inherit;
  • относительно позиционированные дочерние элементы, значения 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>).


overflow-x

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 9.5+ | 3.0+ | 1.5+ | 2.1+ | 2.0+

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

Значение по умолчанию | visible
Наследуется | Нет
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-box/#overflow-x

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

overflow-x: auto | hidden | scroll | visible

Значения

visible
Отображается все содержание элемента, даже за пределами установленной ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется горизонтальная полоса прокрутки.
auto
В зависимости от браузера, в основном, горизонтальная полоса прокрутки добавляется только при необходимости.

Пример

HTML5CSS 2.1CSS3IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.overflowX


overflow-y

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 9.5+ | 3.0+ | 1.5+ | 2.1+ | 2.0+

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

Значение по умолчанию | visible
Наследуется | Нет
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-box/#overflow-y

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

overflow-y: auto | hidden | scroll | visible

Значения

visible
Отображается все содержание элемента, даже за пределами установленной высоты.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется вертикальная полоса прокрутки.
auto
В зависимости от браузера. В основном, вертикальная полоса прокрутки добавляется только при необходимости.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.overflowY


padding

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Рис. 1. Поле слева от текста

Рис. 1. Поле слева от текста

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

padding: [значение | проценты] {1, 4} | inherit

Значения

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

Табл. 1. Зависимость от числа значений
Число значений | Результат
1 | Поля будут установлены одновременно от каждого края элемента.
2 | Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3 | Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 | Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины контента блока.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.padding

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


padding-bottom

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding-bottom

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Рис. 1. Поле снизу от текста

Рис. 1. Поле снизу от текста

Синтаксис

padding-bottom: значение | inherit

Значения

Величину нижнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины контента блока.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.paddingBottom

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


padding-left

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding-left

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Рис. 1. Поле слева от текста

Рис. 1. Поле слева от текста

Синтаксис

padding-left: значение | проценты | inherit

Значения

Величину левого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.paddingLeft

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


padding-right

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding-right

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Рис. 1. Поле справа от текста

Рис. 1. Поле справа от текста

Синтаксис

padding-right: значение | inherit

Значения

Величину правого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.paddingRight

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


padding-top

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding-top

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Рис. 1. Поле сверху от текста

Рис. 1. Поле сверху от текста

Синтаксис

padding-top: значение | inherit

Значения

Величину верхнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины контента блока.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.paddingTop

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


page-break-after

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 7.0+ | 1.2+ | 1.0+ |  |

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/page.html#propdef-page-break-after

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Добавляет разрыв страницы при печати документа после заданного элемента.

Синтаксис

page-break-after: always | auto | avoid | left | right | inherit

Значения

always
Всегда добавляет разрыв страницы после элемента.
auto
Вставляет разрыв страницы при необходимости.
avoid
Запрещает разрыв страницы после элемента.
left
Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной.
right
Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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>

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значения left, right и inherit.

Браузеры Firefox, Chrome и Safari не поддерживают значения avoid, left и right.


page-break-before

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 7.0+ | 1.2+ | 1.0+ |  |

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/page.html#propdef-page-break-before

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Добавляет разрыв страницы при печати документа перед заданным элементом.

Синтаксис

page-break-before: always | auto | avoid | left | right | inherit

Значения

always
Всегда добавляет разрыв страницы перед элементом.
auto
Вставляет разрыв страницы при необходимости.
avoid
Запрещает разрыв страницы перед элементом.
left
Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была четной.
right
Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была нечетной.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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>

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значения left, right и inherit.

Браузеры Firefox, Chrome и Safari не поддерживают значения avoid, left и right.


page-break-inside

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ |  | 7.0+ |  |  |  |

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Разрешает или запрещает разрыв страницы внутри элемента при печати.

Синтаксис

page-break-inside: auto | avoid | inherit

Значения

auto
Вставляет разрыв страницы при необходимости.
avoid
Запрещает разрыв страницы внутри элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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>


position

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | static
Наследуется | Нет
Применяется | Ко всем элементам, за исключением генерируемых
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

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 не приводит к каким-либо результатам.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.


quotes

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ | 11.0+ | 4.0+ | 5.1+ | 1.5+ | 2.1+ |

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

Значение по умолчанию | Зависит от браузера, его настроек и операционной системы. Чаще всего используется кавычки вида "/"
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#propdef-quotes

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, свойство quotes позволяет задать вид их отображения по всему тексту и установить, таким образом, его единообразное оформление. Добавление кавычек происходит автоматически для содержимого контейнера <q>, а также для текста, к которому применяется стилевое свойство content со значением open-quote (открывающая кавычка) или close-quote (закрывающая кавычка).

Синтаксис

quotes: "левая кавычка" "правая кавычка" | none | inherit

Значения

В качестве значения используется символ текста (например, 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
Кавычки не добавляются.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSa 5.1Fx

<!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


Псевдокласс :read-only

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 10.5+ | 5.0+ |  | 2.1+ | 3.0+

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

Применяется | К <input>
Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#pseudo-ro-rw

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

input:read-only { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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>


Псевдокласс :read-write

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 12.0+ | 10.5+ | 5.0+ |  | 2.1+ | 3.0+

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

Применяется | К <input>
Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#pseudo-ro-rw

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Применяется к полям формы, доступных для изменения. Псевдокласс :read-write является противоположным по своему действию :read-only, который применяется к полям с атрибутом readonly (только для чтения).

Синтаксис

input:read-write { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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>


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 9.5+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

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

Применяется | К <input>
Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#pseudo-required-value

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Применяет стилевые правила к тегу <input>, у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы.

Синтаксис

input:required { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


resize

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.0+ | 4.0+ |  | 2.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | К <textarea>
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/2004/CR-css3-ui-20040511/#resize

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Указывает, можно ли пользователю изменять размеры текстового поля.

Синтаксис

resize: none | both | horizontal | vertical | inherit

Значения

none
Размеры элемента не изменяются.
both
Можно изменять размеры элемента по горизонтали и вертикали.
horizontal
Можно изменять размеры элемента только по горизонтали.
vertical
Можно изменять размеры элемента только по вертикали.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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>


right

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-right

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края (рис. 1). В случае значения relative, right отсчитывается от правого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от правого края родителя (рис. 2).

Рис. 1. Значение свойства right относительно окна браузера

Рис. 1. Значение свойства right относительно окна браузера

Рис. 1. Значение свойства right относительно родителя

Рис. 2. Значение свойства right относительно родителя

Синтаксис

right: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.right

Браузеры

В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 1.0+ | 9.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#root-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :root определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу <html>.

Синтаксис

:root { ... }

Значения

Нет.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 2.0+ | 9.5+ | 1.1+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | К выделенному тексту
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#selection

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background и background-color.

Синтаксис

элемент::selection { ... }

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

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


tab-size

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 10.60+ |  | 4.0+ |  |

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

Значение по умолчанию | 8
Наследуется | Да
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://dev.w3.org/csswg/css3-text/#tab-size

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Используется для изменения ширины отступа, заданного с помощью символа табуляции (клавиша Tab).

Синтаксис

tab-size: <число>

Значения

<число>
Число символов в табуляции. Значение должно быть целым положительным числом.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>tab-size</title>
  <style>
   pre {
    -o-tab-size: 3; /* Opera */
    -moz-tab-size: 3; /* Firefox */
   }
  </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. Текст с изменненной табуляцией

Браузеры

Opera поддерживает свойство -o-tab-size. Firefox поддерживает свойство -moz-tab-size.


table-layout

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К тегу <table> или к элементу, у которого значение display установлено как table или inline-table.
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

table-layout: auto | fixed | inherit

Значения

auto
Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed
Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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>

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


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

Internet Explorer | Chrome | Opera |  |  | Firefox | Android | iOS
9.0+ | 1.0+ | 9.6+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#target-pseudo

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис

элемент:target { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>target</title>
  <style>
   h2:target {
    background: #fc0; /* Цвет фона */
    padding: 3px;
   }
  </style>
 </head>
 <body>
  <h2 id="h1">История 1</h2>
  <p>История о том, как необходимо было сделать могилу,
  ее начали копать, а потом закапывать, и что из этого получилось.</p>
  <h2 id="h2">История 2</h2>
  <p>История о том, как возле столовой появились загадочные розовые
  следы с шестью пальцами, и почему это случилось.</p>
 </body>
</html>

В данном примере целевой элемент выделяется цветом фона.

Браузеры

В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).


text-align

CSS | Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+
3 |  |  | 2.0+ |  | 3.1+ | 3.6+ | 2.1+ | 2.0+

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

Значение по умолчанию | left
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию
  • http://www.w3.org/TR/CSS21/text.html#propdef-text-align
  • http://www.w3.org/TR/css3-text/#text-align

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

CSS2.1
text-align: center | justify | left | right | inherit
CSS3
text-align: center | justify | left | right | start | end

Значения

center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.
start
Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end
Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.


text-align-last

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.5+ |  |  |  | 12.0+ |  |

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

Значение по умолчанию | start
Наследуется | Да
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-text/#text-align-last

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает выравнивание последней строки текста, когда свойство text-align установлено как justify.

Синтаксис

text-align-last: start | end | left | right | center | justify

Значения

start
Строка выравнивается по начальному краю блока.
end
Строка выравнивается по конечному краю блока.
left
Строка выравнивается по левому краю.
right
Строка выравнивается по правому краю.
center
Строка выравнивается по центру.
justify
Строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.

Влияние разных значений на положение текста показано в табл. 1.

Табл. 1. Влияние значений text-align-last
Значение | Выравнивание | Вид текста
left | По левому краю |
right | По правому краю |
center | По центру |
justify | По ширине |

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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>

Браузеры

Internet Explorer не поддерживает значения start и end.

Firefox поддерживает только свойство с префиксом -moz-text-align-last.


text-decoration

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

text-decoration: [ blink | line-through | overline | underline ] | none | inherit

Значения

blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте (пример).
line-through
Создает перечеркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчеркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
inherit
Значение наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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>

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

[window.]document.getElementById("elementID").style.textDecoration

[window.]document.getElementById("elementID").style.textDecorationBlink

[window.]document.getElementById("elementID").style.textDecorationLineThrough

[window.]document.getElementById("elementID").style.textDecorationNone

[window.]document.getElementById("elementID").style.textDecorationOverLine

[window.]document.getElementById("elementID").style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

Все браузеры кроме Opera и Firefox не понимают значение blink и не устанавливают мигающий текст.


text-indent

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | 0
Наследуется | Да
Применяется | К блочным элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-indent

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

text-indent: <значение> | <проценты> | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.textIndent


text-overflow

Internet Explorer | Chrome | Opera |  | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 9.0+ | 11.0+ | 1.3+ | 7.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | clip
Наследуется | Нет
Применяется | К блочным элементам
Ссылка на спецификацию | http://dev.w3.org/csswg/css3-ui/#text-overflow

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden.

Это свойство пока официально не входит в CSS3 и носит черновой характер.

Синтаксис

text-overflow: clip | ellipsis

Значения

clip
Текст обрезается по размеру области.
ellipsis
Текст обрезается и к концу строки добавляется многоточие.

Пример

HTML5CSS3IECrOpSaFx

<!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. Многоточие в конце текста

Браузеры

Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow.


text-shadow

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 | 2.0+ | 9.5+ | 1.1+ | 3.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | none
Наследуется | Да
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-text/#text-shadow

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line.

Синтаксис

text-shadow: none | тень [,тень]*
где тень:
<цвет> <сдвиг по x> <сдвиг по y> <радиус размытия>

Значения

none
Отменяет добавление тени.
цвет
Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр.
сдвиг по x
Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y
Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр.
радиус
Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-shadow</title>
  <style>
   .shadowtext {
    text-shadow: black 1px 1px 2px, red 0 0 1em; /* Параметры тени */
    color: white; /* Белый цвет текста */
    font-size: 2em; /* Размер надписи */
   }
  </style>
 </head>
 <body>
  <p class="shadowtext">В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!</p>
 </body>
</html>

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

Вид тени в браузере Safari

Рис. 1. Вид тени в браузере Safari

Браузеры

Opera поддерживает максимум 6–9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5–10 использует отображение нескольких теней, как в CSS2.

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

Браузер Internet Explorer понимает свойство text-shadow только с версии 10.0. Взамен используется свойство filter: Shadow(параметры). К примеру, следующая конструкция задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пиксела).

filter: Shadow(Color=#666666, Direction=45, Strength=4);


text-transform

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | none
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

text-transform: capitalize | lowercase | uppercase | none | inherit

Значения

capitalize
Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
lowercase
Все символы текста становятся строчными (нижний регистр).
uppercase
Все символы текста становятся прописными (верхний регистр).
none
Не меняет регистр символов.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.textTransform

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


top

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).

Значение top относительно окна браузера

Рис. 1. Значение top относительно окна браузера

Значение top относительно родителя

Рис. 2. Значение top относительно родителя

Синтаксис

top: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.top

Браузеры

В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


transform

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
9.0+ | 10.0 | 5.0+ | 10.5+ | 3.1+ | 3.5+ |  | 2.0+

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

Значение по умолчанию | none
Наследуется | Нет
Применяется | К блочным и строчным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-2d-transforms/#transform-property

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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)

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform</title>
  <style>
   .turn:hover {
    -moz-transform: rotate(15deg); /* Для Firefox */
    -ms-transform: rotate(15deg); /* Для IE */
    -webkit-transform: rotate(15deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(15deg); /* Для Opera */
    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 градусов по часовой стрелке.

Браузеры

Internet Explorer 9 поддерживает нестандартное свойство -ms-transform.

Chrome, Safari и iOS поддерживают нестандартное свойство -webkit-transform.

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

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


unicode-bidi

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 2.0+ | 9.2+ | 1.3+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | normal
Наследуется | Нет
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

unicode-bidi: normal | embed | bidi-override | inherit

Значения

normal
Браузер самостоятельно определяет, как ему следует отображать текст на основе символов юникода.
embed
Переопределяет параметры текста, располагая его, как указано в свойстве direction.
bidi-override
Аналогичен embed, но при этом также меняется порядок символов в тексте, подчиняясь значению direction.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 8.0+ | 9.5+ | 5.0+ | 4.0+ | 2.1+ | 3.0+

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

Применяется | К <input>
Ссылка на спецификацию | http://www.w3.org/TR/css3-ui/#pseudo-validity

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email" корректный адрес электронной почты.

Синтаксис

input:valid { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!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


vertical-align

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | baseline
Наследуется | Нет
Применяется | К встроенным элементам или ячейкам таблицы.
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты

Значения

baseline
Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom
Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle
Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub
Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super
Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom
Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top
Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top
Выравнивание верхнего края элемента по верху самого высокого элемента строки.
inherit
Наследует значение родителя.

В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.

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

baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по ее верхнему краю.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
 </head>
 <body>
  <div style="font-size: 2em">
  T<span style="vertical-align: sub">E</span>X и L<span
  style="vertical-align: 5px; font-size: 0.8em">A</span>T<span
  style="vertical-align: sub">E</span>X
  </div>
 </body>
</html>

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

Применение свойства vertical-align

Рис. 1. Применение свойства vertical-align

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

[window.]document.getElementById("elementID").style.verticalAlign

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


visibility

Internet Explorer |  | Chrome |  |  |  |  | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 4.0+ | 9.5+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | visible
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

visibility: visible | hidden | collapse | inherit

Значения

visible
Отображает элемент как видимый.
hidden
Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse
Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>visibility</title>
  <style>
   .descr { visibility: hidden; }
   .b:hover + .descr {
    visibility: visible;
   }
  </style>
 </head>
 <body>
  <img src="images/button.gif" width="98" height="33" alt="Кнопка" class="b">
  <div class="descr">
   Данная эксклюзия является подмножеством астрациональных
   супремативных монотенных федоний кадонарного экстрафазория.</div>
 </body>
</html>

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

[window.]document.getElementById("elementID").style.visibility

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и collapse.

Браузер Safari до версии 4.0 не поддерживает значение collapse.

Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.


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

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Применяется | К ссылкам (тег <a>)
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс :visited применяется к ссылкам, уже посещённые пользователем, и задаёт для них стилевое оформление.

Синтаксис

a:visited { ... }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!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


white-space

Internet Explorer |  | Chrome |  |  |  |  |  |  | Android | iOS
6.0+ | 8.0+ | 1.0+ | 4.0+ | 9.5+ | 1.0+ | 3.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | К блочным элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-white-space

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.

Синтаксис

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

Значения

normal
Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap
Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.
pre
Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
pre-line
В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
pre-wrap
В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
inherit
Наследует значение родителя.

Действие значений на текст представлено в табл. 1.

Табл. 1. Перенос текста и пробелы при разных значениях white-space
Значение | Перенос текста | Пробелы
normal | Переносится | Учитываются
nowrap | Не переносится | Не учитываются
pre | Не переносится | Учитываются
pre-line | Переносится | Не учитываются
pre-wrap | Переносится | Учитываются

Пример

HTML5CSS2.1IECrOpSaFx

<!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

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

[window.]document.getElementById("elementID").style.whiteSpace

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line, pre-wrap и inherit. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line.

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.


widows

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
8.0+ |  | 9.2+ |  |  |  |

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

Значение по умолчанию | 2
Наследуется | Да
Применяется | К блочным элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/page.html#propdef-orphans

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Свойство widows задает минимальное число строк текста, которое располагается на следующей странице при печати документа. Это свойство работает в том случае, если весь текст размещается на двух и более печатных страницах. Если значение свойства widows конфликтует со значением orphans, то widows имеет приоритет и учитывается в первую очередь.

Синтаксис

widows: <число> | inherit

Значения

<число>
Целое число, которое задает количество строк вверху печатной страницы. Отрицательное значение запрещено.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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>


width

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-width

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <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">

Синтаксис

width: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.

auto
Устанавливает ширину исходя из типа и содержимого элемента.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!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. Ширина блока

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

[window.]document.getElementById("elementID").style.width

Браузеры

Браузер Internet Explorer 6 некорректно определяет width как min-width. В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет ширину элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


word-break

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
5.5+ | 1.0+ |  |  | 15.0+ | 2.0+ | 2.0+

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://dev.w3.org/csswg/css3-text/#word-break

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Свойство word-break указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.

Синтаксис

word-break: normal | break-all | keep-all

Значения

normal
Используются правила переноса строк по умолчанию. Как правило, в этом случае строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега <br>).
break-all
Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. Значение не работает для текста на китайском, корейском или японском языке.
keep-all
Не разрешает перенос строк в словах на китайском, корейском или японском языке. Для остальных языков действует как normal.

Пример

HTML5CSS3IECrOpSaFx 15

<!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. Перенос длинных слов


word-spacing

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то свойство word-spacing не действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю.

Синтаксис

word-spacing: значение | normal | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.

normal
Устанавливает интервал между словами как обычно.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>word-spacing</title>
  <style>
   p {
    word-spacing: 20px;
   }
  </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.

Применение свойства word-spacing

Рис. 1. Применение свойства word-spacing

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


word-wrap

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 1.0+ | 10.5+ | 1.0+ | 3.5+ | 1.0+ | 1.0+

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

Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-text/#word-wrap

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.

Синтаксис

word-wrap: normal | break-word | inherit

Значения

normal
Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега <br>).
break-word
Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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. Перенос длинных слов


writing-mode

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

Значение по умолчанию | Нет
Наследуется | Да
Применяется | Ко всем элементам и генерируемому контенту
Процентная запись | Неприменима
Ссылка на спецификацию | http://dev.w3.org/csswg/css3-text-layout/#writing-mode

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает направление текста на странице. Свойство 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 | Арабского, вставленного в монгольский документ

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!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 cellspacing="0">
   <tr>
    <td style="writing-mode: lr-tb">Текст</td>
    <td style="writing-mode: rl-tb">Текст</td>
    <td style="writing-mode: tb-rl">Текст</td>
    <td style="writing-mode: bt-rl">Текст</td>
    <td style="writing-mode: tb-lr">Текст</td>
    <td style="writing-mode: bt-lr">Текст</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>

Браузеры

Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl, Internet Explorer 7.0 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.


z-index

Internet Explorer |  | Chrome | Opera | Safari |  |  | Android | iOS
6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К любым позиционированным элементам
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Синтаксис

z-index: число | auto | inherit

Значения

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>z-index</title>
  <style>
   #layer1, #layer2, #layer3, #layer4 {
    position: relative; /* Относительное позиционирование */
   }
   #layer1, #layer3 {
    font-size: 50px; /* Размер шрифта в пикселах */
    color: #000080; /* Синий цвет текста */
   }
   #layer2, #layer4 {
    top: -55px; /* Сдвигаем текст вверх */
    left: 5px; /* Сдвигаем текст вправо */
    color: #ffa500; /* Оранжевый цвет текста */
    font-size:70px;  /* Размер шрифта в пикселах */
   }
   #layer1 { z-index: 2; }
   #layer2 { z-index: 1; }
   #layer3 { z-index: 3; }
   #layer4 { z-index: 4; }
  </style>
 </head>
 <body>
  <p>Слой 1 наверху</p>
  <div id="layer1">Слой 1</div>
  <div id="layer2">Слой 2</div>
  <p>Слой 4 наверху</p>
  <div id="layer3">Слой 3</div>
  <div id="layer4">Слой 4</div>
 </body>
</html>

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

Применение свойства z-index

Рис. 1. Применение свойства z-index

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

[window.]document.getElementById("elementID").style.zIndex

Браузеры

Список, созданный с помощью тега <select>, в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto как 0.

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.


Фильтр Gradient

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает линейный градиент для элемента.

Синтаксис

filter: progid:DXImageTransform.Microsoft.Gradient(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
StartColorStr
Начальный цвет градиента. Цвет задаётся в формате 0xAARRGGBB, где АА — это шестнадцатеричное значение прозрачности, RR — красная компонента, GG — зелёная компонента, BB — синяя компонента.
EndColorStr
Конечный цвет градиента.
GradientType
Тип градиента. 1 — горизонтальный градиент, 0 — вертикальный.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   html, body { height: 100%; }
   body {
    margin: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcecfc',
            endColorstr='#ff7cd8',GradientType=0);
   }
  </style>
 </head>
 <body>
  <p></p>
 </body>
</html>

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


-moz-linear-gradient

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 3.6+ |  |

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Создаёт линейный градиент в браузере Firefox. Градиент это плавный переход от одного цвета к другому, он может идти под определённым углом к элементу и содержать более двух цветов.

Синтаксис

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

Значения

<угол>
См. угол.
<цвет>
Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция>
Для записи позиции применяются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать left top или 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 | От правого нижнего угла к левому верхнему. |

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .example {
    background: #e2e2e2;
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="example">Содержимое страницы</div>
 </body>
</html>


-moz-radial-gradient

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 3.6+ |  |

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Создаёт радиальный градиент в браузере Firefox.

Синтаксис

background-image: -moz-radial-gradient([<угол> || <позиция>,] [<форма> || <размер>,] <цвет> [, <цвет>]*);

Значения

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body {
    background: #feffff;
    background: -moz-radial-gradient(center, ellipse cover, #feffff 0%, #d2ebf9 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -o-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -ms-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <p>Содержимое страницы</p>
 </body>
</html>


-ms-linear-gradient

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 |  |  |  |  |  |

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Создаёт линейный градиент в браузере Internet Explorer.

Синтаксис

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

Значения

<угол>
См. угол.
<цвет>
Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция>
Для записи позиции применяются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать left top или 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 | От правого нижнего угла к левому верхнему. |

Пример

HTML5CSS2.1CSS3IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .example {
    background: #e2e2e2;
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="example">Содержимое страницы</div>
 </body>
</html>

Браузеры

IE до версии 10.0 поддерживает фильтр Gradient, с его помощью можно устанавливать линейные градиенты из двух цветов


-ms-radial-gradient

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
10.0 |  |  |  |  |  |

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Создаёт радиальный градиент в браузере Internet Explorer.

Синтаксис

background-image: -ms-radial-gradient([<угол> || <позиция>,] [<форма> || <размер>,] <цвет> [, <цвет>]*);

Значения

<угол>
См. угол. Влияет только при эллиптическом градиенте.
<позиция>

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

Пример

HTML5CSS2.1CSS3IE 10CrOp 12SaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body {
    background: #feffff;
    background: -moz-radial-gradient(center, ellipse cover, #feffff 0%, #d2ebf9 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -o-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -ms-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <p>Содержимое страницы</p>
 </body>
</html>


-o-linear-gradient

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 11.10+ |  |  |  |

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Создаёт линейный градиент в браузере Opera.

Синтаксис

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

Значения

<угол>
См. угол.
<цвет>
Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция>
Для записи позиции применяются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать left top или 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 | От правого нижнего угла к левому верхнему. |

Пример

HTML5CSS2.1CSS3IE 12CrOpSa 5.1Fx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .example {
    background: #e2e2e2;
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%,#fefefe 100%);
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="example">Содержимое страницы</div>
 </body>
</html>


-o-radial-gradient

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 12.0 |  |  |  |

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Создаёт радиальный градиент в браузере Opera.

Синтаксис

background-image: -o-radial-gradient([<угол> || <позиция>,] [<форма> || <размер>,] <цвет> [, <цвет>]*);

Значения

<угол>
См. угол. Влияет только при эллиптическом градиенте.
<позиция>

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

Пример

HTML5CSS2.1CSS3IE 12CrOp 12Sa 5.1Fx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body {
    background: #feffff;
    background: -moz-radial-gradient(center, ellipse cover, #feffff 0%, #d2ebf9 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -o-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -ms-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <p>Содержимое страницы</p>
 </body>
</html>


-webkit-linear-gradient

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 3.0+ |  | 5.1+ |  |  |

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Создаёт линейный градиент в браузерах Safari и Chrome.

Синтаксис

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

Значения

<угол>
См. угол.
<цвет>
Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция>
Для записи позиции применяются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать left top или 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 | От правого нижнего угла к левому верхнему. |

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .example {
    background: #e2e2e2;
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="example">Содержимое страницы</div>
 </body>
</html>


-webkit-radial-gradient

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 3.0+ |  | 5.1+ |  |  |

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Создаёт радиальный градиент в браузерах Safari и Chrome.

Синтаксис

background-image: -webkit-radial-gradient([<угол> || <позиция>,] [<форма> || <размер>,] <цвет> [, <цвет>]*);

Значения

<угол>
См. угол. Влияет только при эллиптическом градиенте.
<позиция>

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

Пример

HTML5CSS2.1CSS3IE 10CrOp 12SaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body {
    background: #feffff;
    background: -moz-radial-gradient(center, ellipse cover, #feffff 0%, #d2ebf9 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -o-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: -ms-radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    background: radial-gradient(center, ellipse cover, #feffff 0%,#d2ebf9 100%);
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <p>Содержимое страницы</p>
 </body>
</html>


scrollbar-3dlight-color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  |  |  |  |  |

Краткая информация
Значение по умолчанию | Зависит от браузера
Наследуется | Нет
Процентная запись | Не применима
Применяется | <applet>, <body>, <embed>, <object>, <select>, <table>, <textarea> или к элементу, у которого overflow задано как scroll или auto.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Свойство scrollbar-3dlight-color задает цвет светлой части кнопок и ползунка полосы прокрутки. На рис. 1 красным цветом выделены области, к которым применяется значение.

Рис. 1. scrollbar-3dlight-color

Синтаксис

scrollbar-3dlight-color: <цвет>

Значения

См. цвет

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>scrollbar-3dlight-color</title>
  <style>
   html, body {
    scrollbar-3dlight-color: #fc0;
    height: 100%;
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>


scrollbar-arrow-color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  |  |  |  |  |

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

Значение по умолчанию | Зависит от браузера
Наследуется | Нет
Процентная запись | Не применима
Применяется | <applet>, <body>, <embed>, <object>, <select>, <table>, <textarea> или к элементу, у которого overflow задано как scroll или auto.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Указывает цвет на направляющих стрелках активной полосы прокрутки (скроллбаре). Если скроллбар не активен, свойство scrollbar-arrow-color не применяется. На рис. 1 красным цветом выделены стрелки, к которым применяется значение.

Рис. 1. scrollbar-arrow-color

Синтаксис

scrollbar-arrow-color: <цвет>

Значения

См. цвет

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>scrollbar-arrow-color</title>
  <style>
   textarea.arrow {
    scrollbar-arrow-color: blue; /* Цвет стрелки */
    height: 70px; /* Высота текстового поля */
   }
  </style>
 </head>
 <body>
  <p><textarea cols="40" rows="20" class="arrow">

   Стрелка на скролбаре синего цвета.

  </textarea></p>
 </body>
</html>

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

Синие стрелки на полосе прокрутки в текстовом поле

Рис. 2. Синие стрелки на полосе прокрутки в текстовом поле


scrollbar-base-color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  |  |  |  |  |

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

Значение по умолчанию | Зависит от браузера
Наследуется | Нет
Процентная запись | Не применима
Применяется | <applet>, <body>, <embed>, <object>, <select>, <table>, <textarea> или к элементу, у которого overflow задано как scroll или auto.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Свойство scrollbar-base-color задает цвет кнопок полосы прокрутки, поверхности ползунка и частично фона под ползунком. На рис. 1 красным цветом выделены области, к которым применяется значение.

Рис. 1. scrollbar-base-color

Синтаксис

scrollbar-base-color: <цвет>

Значения

См. цвет

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>scrollbar-base-color</title>
  <style>
   html, body {
    scrollbar-arrow-color: #fff; /* Цвет стрелок */
    scrollbar-base-color: blue; /* Цвет полосы прокрутки */
    background: #000080; /* Цвет фона */
    color: #fff; /* Цвет текста */
    height: 100%;
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Синяя полоса прокрутки

Рис. 2. Синяя полоса прокрутки


scrollbar-darkshadow-color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  |  |  |  |  |

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

Значение по умолчанию | Зависит от браузера
Наследуется | Нет
Процентная запись | Не применима
Применяется | <applet>, <body>, <embed>, <object>, <select>, <table>, <textarea> или к элементу, у которого overflow задано как scroll или auto.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Рис. 1. scrollbar-darkshadow-color

Синтаксис

scrollbar-darkshadow-color: <цвет>

Значения

См. цвет

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>scrollbar-darkshadow-color</title>
  <style>
   html, body {
    scrollbar-darkshadow-color: maroon;  /* Цвет тени */
    height: 100%;
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Тень на полосе прокрутки

Рис. 2. Тень на полосе прокрутки


scrollbar-face-color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  |  |  |  |  |

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

Значение по умолчанию | Зависит от браузера
Наследуется | Нет
Процентная запись | Не применима
Применяется | <applet>, <body>, <embed>, <object>, <select>, <table>, <textarea> или к элементу, у которого overflow задано как scroll или auto.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Рис. 1. scrollbar-face-color

Синтаксис

scrollbar-face-color: <цвет>

Значения

См. цвет

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>scrollbar-face-color</title>
  <style>
   html, body {
    scrollbar-arrow-color: #fff; /* Цвет стрелок */
    scrollbar-face-color: blue; /* Цвет полосы прокрутки */
    background: #000080; /* Цвет фона */
    color: #fff; /* Цвет текста */
    height: 100%;
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Синяя полоса прокрутки

Рис. 2. Синяя полоса прокрутки


scrollbar-highlight-color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  |  |  |  |  |

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

Значение по умолчанию | Зависит от браузера
Наследуется | Нет
Процентная запись | Не применима
Применяется | <applet>, <body>, <embed>, <object>, <select>, <table>, <textarea> или к элементу, у которого overflow задано как scroll или auto.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Рис. 1. scrollbar-highlight-color

Синтаксис

scrollbar-highlight-color: <цвет>

Значения

См. цвет

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>scrollbar-highlight-color</title>
  <style>
   html, body {
    scrollbar-arrow-color: #fff; /* Цвет стрелок */
    scrollbar-base-color: #ffa12d; /* Цвет полосы прокрутки */
    scrollbar-shadow-color: #fed189; /* Цвет тени */
    scrollbar-highlight-color: #fff; /* Цвет светлых участков тени */
    background: #fed189; /* Цвет фона */
    height: 100%;
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>


scrollbar-shadow-color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  |  |  |  |  |

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

Значение по умолчанию | Зависит от браузера
Наследуется | Нет
Процентная запись | Не применима
Применяется | <applet>, <body>, <embed>, <object>, <select>, <table>, <textarea> или к элементу, у которого overflow задано как scroll или auto.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Рис. 1. scrollbar-shadow-color

Синтаксис

scrollbar-shadow-color: <цвет>

Значения

См. цвет

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>scrollbar-shadow-color</title>
  <style>
   html, body {
    scrollbar-arrow-color: #fff; /* Цвет стрелок */
    scrollbar-base-color: #ffa12d; /* Цвет полосы прокрутки */
    scrollbar-shadow-color: #fed189; /* Цвет тени */
    background: #fed189; /* Цвет фона */
    height: 100%;
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Тень на полосе прокрутки

Рис. 2. Тень на полосе прокрутки


scrollbar-track-color

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ |  |  |  |  |  |

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

Значение по умолчанию | Зависит от браузера
Наследуется | Нет
Процентная запись | Не применима
Применяется | <applet>, <body>, <embed>, <object>, <select>, <table>, <textarea> или к элементу, у которого overflow задано как scroll или auto.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает цвет основания полосы. На рис. 1 красным цветом выделена область, к которой применяется значение scrollbar-track-color.

Рис. 1. scrollbar-track-color

Синтаксис

scrollbar-track-color: <цвет>

Значения

См. цвет

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>scrollbar-track-color</title>
  <style>
   html, body {
    scrollbar-arrow-color: #fff; /* Цвет стрелок */
    scrollbar-base-color: #ffa12d; /* Цвет полосы прокрутки */
    scrollbar-shadow-color: #fed189; /* Цвет тени */
    scrollbar-highlight-color: #fff; /* Цвет светлых участков тени */
    background: #fed189; /* Цвет фона */
    height: 100%;
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Пример использования scrollbar-track-color

Рис. 2. Пример использования scrollbar-track-color


-ms-interpolation-mode

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
7.0 | 8.0+ |  |  |  |  |  |

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

Значение по умолчанию | nearest-neighbor для IE7; bicubic для IE8 и старше
Наследуется | Нет
Применяется | К изображениям

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

-ms-interpolation-mode указывает браузеру, какой алгоритм использовать при масштабировании картинок. Это нестандартное свойство и поддерживается только браузером Internet Explorer начиная с версии 7.0.

Синтаксис

-ms-interpolation-mode: bicubic | nearest-neighbor

Значения

biqubic
Повышает качество картинки за счет использования бикубического метода интерполяции. Это дает сглаженные границы и плавный тоновый диапазон цветов.
nearest-neighbor

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

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

Результат применения методов интерполяции

Рис. 1. Результат применения методов интерполяции

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-ms-interpolation-mode</title>
  <style>
   img { border: 1px solid #ccc; }
    .fast {
    -ms-interpolation-mode: nearest-neighbor;
   }
  </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>

Браузеры

Браузер Internet Explorer 7 применяет свойство -ms-interpolation-mode только к изображениям без прозрачности.


background-position-x

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
7.0 | 8.0+ | 1.0+ |  | 1.0+ |  |  | 1.0+

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает положение фонового изображения внутри элемента по горизонтали. Свойство background-position-x является нестандартным и не входит в спецификацию CSS.

Синтаксис

background-position-x: left | center | right | <проценты> | <значение>

Значения

left
Выравнивает фон по левому краю. Эквивалент записи 0 или 0%.
center
Выравнивает фон по центру горизонтали. Эквивалент записи 50%.
right
Выравнивает фон по правому краю. Эквивалент записи 100%.
проценты
Задает положение фона в процентах от ширины элемента. Значение 0% или 0 выравнивает левый край фонового изображения по левому краю элемента. Значение 100% выравнивает правый край рисунка по правому краю элемента.
значение
Задает положение фона в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. относительно левого края элемента.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-position-x</title>
  <style>
   body {
    background: #66806E url(images/clover.png) repeat-y;
    background-position-x: 95%; /* Положение фона */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Положение фона, заданное в процентах

Рис. 1. Положение фона, заданное в процентах

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

[window.]document.getElementById("elementID").style.backgroundPositionX


background-position-y

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
7.0 | 8.0+ | 1.0+ |  | 1.0+ |  |  | 1.0+

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает положение фонового изображения внутри элемента по вертикали. Свойство background-position-y является нестандартным и не входит в спецификацию CSS.

Синтаксис

background-position-y: top | center | bottom | проценты | значение

Значения

top
Выравнивает фон по верхнему краю. Эквивалент записи 0 или 0%.
center
Выравнивает фон по центру вертикали. Эквивалент записи 50%.
bottom
Выравнивает фон по нижнему краю. Эквивалент записи 100%.
проценты
Задает положение фона в процентах от высоты элемента. Значение 0% или 0 выравнивает верхний край фонового изображения по верхнему краю элемента. Значение 100% выравнивает нижний край рисунка по нижнему краю элемента.
значение
Задает положение фона в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. относительно верхнего края элемента.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-position-y</title>
  <style>
   html {
    height: 100%; /* Высота страницы */
   }
   body {
    background: url(images/mybg.png) no-repeat; /* Параметры фона */
    background-position-y: bottom; /* Положение фона */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Положение фона по вертикали

Рис. 1. Положение фона по вертикали

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

[window.]document.getElementById("elementID").style.backgroundPositionY


filter

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

filter: filter:progid:DXImageTransform.Microsoft.Фильтр(свойства)

Фильтры

Alpha
Настраивает прозрачность объекта.
BasicImage
Устанавливает параметры цвета, поворота изображения или прозрачности.
Blur
Размывает содержимое.
Chroma
Показывает определенные цвета прозрачными.
DropShadow
Отображает тень.
Emboss
Показывает содержимое объекта в виде барельефа.
Engrave
Показывает содержимое объекта в виде черно-белой гравюры.
Glow
Добавляет свечение вокруг краев.
Gradient
Создаёт линейный градиент.
ICMFilter
Преобразует цвета содержимого на основе профиля системы управления цветом (Image Color Management, ICM).
Light
Создает эффект лучей света.
MaskFilter
Показывает прозрачные пикселы как цветную маску, а непрозрачные пикселы наоборот, прозрачными.
Matrix
Изменяет размер, поворачивает или отражает объект на основе матричных преобразований.
MotionBlur
Размывает объект так, словно он быстро движется.
Shadow
Добавляет тень.
Wave
Вносит волнообразные искажения.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   img.semi {
    /* Прозрачность 50% */
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   }
  </style>
 </head>
 <body>
  <p><img src="example/images/igels.png" alt="Обычный ёжик">
  <img src="example/images/igels.png"
       alt="Полупрозрачный ёжик" class="semi"></p>
 </body>
</html>

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


hasLayout

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Для отображения элементов и учёта их взаимодействия между собой, разработчики IE внедрили в этот браузер уникальное свойство hasLayout, значением которого выступает true или false. «Установить hasLayout» означает задать ему значение true, а «убрать hasLayout» говорит о том, что это свойство не задано или у него значение false.

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

Элементы, у которых всегда установлено свойство hasLayout:

  • изображения (тег <img>);
  • таблицы (<table>), их строки (<tr>) и ячейки (<td>, <th>);
  • линии (<hr>);
  • структурные элементы (<html>, <body>);
  • фреймы (<frameset>, <frame>, <iframe>);
  • некоторые элементы форм (<button>, <fieldset>, <input>, <legend>, <select>, <textarea>);
  • объекты (<embed>, <object>) и апплеты (<applet>);
  • тег <marquee>.

hasLayout устанавливается автоматически, если для элемента задано одно из следующих свойств и значений:

  • display: inline-block;
  • position: absolute;
  • float: left | right;
  • width: любое значение кроме auto;
  • height: любое значение кроме auto;
  • writing-mode: tb-rl
  • zoom: 1.

В IE7 кроме перечисленных свойств hasLayout устанавливают следующие:

  • position: fixed;
  • overflow: hidden | scroll | auto;
  • overflow-x: hidden | scroll | auto;
  • overflow-y: hidden | scroll | auto;
  • min-width: любое значение кроме auto;
  • max-width: любое значение кроме auto;
  • min-height: любое значение кроме auto;
  • max-height: любое значение кроме auto.

Убрать hasLayout можно добавлением к элементу одного из следующих свойств и значений:

  • position: static;
  • float: none
  • width: auto;
  • height: auto;
  • overflow: visible;
  • writing-mode: lr-tb | rl-tb | bt-rl;
  • zoom: normal.

Свойство hasLayout оказывает следующее воздействие на элементы веб-страницы.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Ассортиментная политика</title>
  <style>
   .shadow {
    background: #fc0;
    padding: 10px;
    filter: progid:DXImageTransform.Microsoft.dropshadow
            (OffX=5, OffY=5, Color='gray', Positive='true');
    zoom: 1; /* Добавляем hasLayout */
   }
  </style>
 </head>
 <body>
  <div class="shadow">
   Ассортиментная политика предприятия подсознательно концентрирует
   конвергентный конкурент, учитывая результат предыдущих медиа-кампаний.
  </div>
 </body>
</html>

В данном примере чтобы работало свойство filter в IE6 и в IE7, добавлено zoom которое устанавливает hasLayout.


zoom

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 6.0+ |  | 4.0+ |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Изменяет масштаб объекта согласно заданному значению.

Синтаксис

zoom: <значение> | <проценты> | normal

Значения

значение
Число с плавающей запятой, значение 1.0 соответствует normal. Значения больше 1.0 увеличивают масштаб объекта, значения меньше 1.0 уменьшают масштаб.
проценты
Целое число, заданное в процентах. Указывает изменение масштаба относительно 100%, которое соответствует значению normal.
normal
Объект имеет исходный масштаб.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>zoom</title>
  <style>
   .zoom:hover { zoom: 3; }
  </style>
 </head>
 <body>
  <p><img src="images/ru.png" alt="RU" class="zoom">
     <img src="images/com.png" alt="COM" class="zoom"></p>
 </body>
</html>

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

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

[window.]document.getElementById("elementID").style.zoom

Браузеры

Браузер Internet Explorer с версии 8.0 понимает также свойство -ms-zoom.


-moz-background-clip

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.0+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-moz-background-clip: [padding | border] [, [padding | border]]

Значения

padding
Фон отображается внутри границ.
border
Фон выводится под границами.

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

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

Рис. 1а | Рис. 1а
padding | border

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-background-clip</title>
  <style>
   .example {
    background: url(images/gear.png) no-repeat,
    url(images/navigation-bg.png) repeat-x; /* Фоновый рисунок */
    border: 10px dotted maroon; /* Параметры рамки */
    -moz-background-clip: border; /* Фон под рамкой */
    padding: 10px; /* Поля */
    min-height: 47px; /* Минимальная высота */
   }
  </style>
 </head>
 <body>
  <div class="example">Содержимое страницы</div>
 </body>
</html>

Браузеры

Firefox с версии 4.0 поддерживает стандартное свойство background-clip.


-moz-background-origin

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.0+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-moz-background-origin: [padding | border | content] [, [padding | border | content]]

Значения

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

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

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

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

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-background-origin</title>
  <style>
   .example {
    border: 20px solid #fc0;
    padding: 20px;
    height: 200px;
    background: url(images/figure.jpg) no-repeat;
    -moz-background-origin: content; /* Для Firefox до версии 4.0 */
    background-origin: content-box; /* Для Firefox 4 */
   }
  </style>
 </head>
 <body>
  <div class="example">...</div>
 </body>
</html>

Браузеры

Firefox до версии 3.6 не поддерживает несколько значений для разных фоновых картинок.

Firefox 4.0 наряду с -moz-background-origin поддерживает стандартное свойство background-origin.


-moz-background-size

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 3.6+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам. -moz-background-size нестандартное свойство и поддерживается только браузером Firefox начиная с версии 3.6 и Fennec 1.0.

Синтаксис

-moz-background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения

значение
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
проценты
Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-background-size</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    border: 2px solid #000; /* Параметры рамки */
    background: url(images/book.png) 100% 100% no-repeat; /* Добавляем фон */
    -moz-background-size: contain; /* Масштабируем фон */
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

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

Результат использования -moz-background-size

Рис. 1. Результат использования -moz-background-size

Браузеры

Начиная с версии 4.0 Firefox использует стандартное свойство background-size.


-moz-border-bottom-colors

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.0+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Не применяется:

  • если значение border-style установлено как dashed или dotted;
  • к таблицам, у которых border-collapse задано как collapse.

Синтаксис

-moz-border-bottom-colors: [цвет]* цвет | none

Значения

none
Нет цвета или используется цвет, заданный свойством border-color.
цвет
Значение цвета в любом допустимом для CSS формате. Также можно использовать значение transparent для указания прозрачности.

Набор цветов пишется через пробел, начиная с цвета внешнего края и заканчивая цветом внутреннего края. Если заданная толщина больше установленного количества цветов, то оставшаяся часть линий заполняется цветом внутреннего края.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-bottom-colors</title>
  <style>
   .line {
    border: 10px inset #ffd700;
    -moz-border-radius: 10px;
    -moz-border-top-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
    -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
    -moz-border-left-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
    -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="line">
   Тем не менее как только ортодоксальность окончательно возобладает,
   даже эта маленькая лазейка будет закрыта.
  </div>
 </body>
</html>

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

Результат использования -moz-border-bottom-colors

Рис. 1. Результат использования -moz-border-bottom-colors

Браузеры

-moz-border-bottom-colors нестандартное свойство и поддерживается только браузером Firefox начиная с версии 1.0.


-moz-border-left-colors

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.0+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Не применяется:

  • если значение border-style установлено как dashed или dotted;
  • к таблицам, у которых border-collapse задано как collapse.

Синтаксис

-moz-border-left-colors: [цвет]* цвет | none

Значения

none
Нет цвета или используется цвет, заданный свойством border-color.
цвет
Значение цвета в любом допустимом для CSS формате. Также можно использовать значение transparent для указания прозрачности.

Набор цветов пишется через пробел, начиная с цвета внешнего края и заканчивая цветом внутреннего края. Если заданная толщина больше установленного количества цветов, то оставшаяся часть линий заполняется цветом внутреннего края.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-left-colors</title>
  <style>
   .line {
    border: 5px solid #ffa02d;
    -moz-border-top-colors: #000 #fc0 #000 #fc0 #000;
    -moz-border-left-colors: #000 #fc0 #000 #fc0 #000;
    -moz-border-right-colors: #000 #fc0 #000 #fc0 #000;
    -moz-border-bottom-colors: #000 #fc0 #000 #fc0 #000;
    background: #ffe;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="line">
   Тем не менее как только ортодоксальность окончательно возобладает,
   даже эта маленькая лазейка будет закрыта.
  </div>
 </body>
</html>

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

Результат использования -moz-border-left-colors

Рис. 1. Результат использования -moz-border-left-colors

Браузеры

-moz-border-left-colors нестандартное свойство и поддерживается только браузером Firefox начиная с версии 1.0.


-moz-border-radius

Internet Explorer | Chrome | Opera | Safari |  |  | Android | iOS
 |  |  |  | 1.0+ | 3.5+ |  |

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам, за исключением таблиц с border-collapse: collapse

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

-moz-border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значений | Результат
1 | Радиус указывается для всех четырех уголков.
2 | Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 | Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). Эта возможность работает только в Firefox 3.5 и старше.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-radius</title>
  <style>
   .radius {
    background: #fc0;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div style="-moz-border-radius: 50px 0 0 50px;" class="radius">
   -moz-border-radius: 50px 0 0 50px;
  </div>
  <div style="-moz-border-radius: 40px 10px;" class="radius">
   -moz-border-radius: 40px 10px;
  </div>
  <div style="-moz-border-radius: 10em/1em;" class="radius">
   -moz-border-radius: 13em/1em;
  </div>
  <div style="-moz-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;" class="radius">
   -moz-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;
  </div>
  <div style="-moz-border-radius: 8px; border: 1px solid black;" class="radius">
   -moz-border-radius: 8px; border: 1px solid black;
  </div>
 </body>
</html>

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

Результат использования -moz-border-radius с разными значениями

Рис. 1. Результат использования -moz-border-radius с разными значениями

Браузеры

-moz-border-radius нестандартное свойство и поддерживается только браузером Firefox начиная с версии 1.0.

Рамка со значениями dashed и dotted отображается в уголках сплошной линией.

-moz-border-radius не применяется к таблицам, у которых свойство border-collapse задано как collapse.

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


-moz-border-radius-bottomleft

Internet Explorer | Chrome | Opera | Safari |  |  | Android | iOS
 |  |  |  | 1.0+ | 3.5+ |  |

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления левого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

-moz-border-radius-topleft: <радиус> [<радиус>]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали. Эта возможность работает только для Firefox 3.5 и старше.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-radius-bottomleft</title>
  <style>
   .radius {
    background: #fc0;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div style="-moz-border-radius-bottomleft: 20px;" class="radius">
   -moz-border-radius-bottomleft: 20px;
  </div>
  <div style="-moz-border-radius-bottomleft: 70px 40px" class="radius">
   -moz-border-radius-bottomleft: 70px 40px
  </div>
 </body>
</html>

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

Варианты скругления левого нижнего уголка

Рис. 1. Варианты скругления левого нижнего уголка

Браузеры

Эллиптические уголки поддерживаются в браузере Firefox начиная с версии 3.5.

Рамка со значениями dashed и dotted отображается в уголке сплошной линией.


-moz-border-radius-bottomright

Internet Explorer | Chrome | Opera | Safari |  |  | Android | iOS
 |  |  |  | 1.0+ | 3.5+ |  |

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления правого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

-moz-border-radius-bottomright: <радиус> [<радиус>]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали. Эта возможность работает только для Firefox 3.5 и старше.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-radius-bottomright</title>
  <style>
   .radius {
    background: #fc0;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div style="-moz-border-radius-bottomright: 20px;" class="radius">
   -moz-border-radius-bottomright: 20px;
  </div>
  <div style="-moz-border-radius-bottomright: 70px 40px" class="radius">
   -moz-border-radius-bottomright: 70px 40px
  </div>
 </body>
</html>

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

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

Рис. 1. Варианты скругления правого нижнего уголка

Браузеры

Эллиптические уголки поддерживаются в браузере Firefox начиная с версии 3.5.

Рамка со значениями dashed и dotted отображается в уголке сплошной линией.


-moz-border-radius-topleft

Internet Explorer | Chrome | Opera | Safari |  |  | Android | iOS
 |  |  |  | 1.0+ | 3.5+ |  |

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления левого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

-moz-border-radius-topleft: <радиус> [<радиус>]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали. Эта возможность работает только для Firefox 3.5 и старше.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-radius-topleft</title>
  <style>
   .title {
    background: #000080; /* Цвет фона */
    color: #ffe; /* Цвет текста */
    padding: 7px; /* Поля вокруг текста */
    -moz-border-radius-topleft: 10px; /* Левый верхний уголок */
    -moz-border-radius-topright: 10px; /* Правый верхний уголок */
   }
   .content {
    border: 1px solid #000080;  /* Параметры рамки */
    background: #f0f0f0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    -moz-border-radius-bottomleft: 10px; /* Левый нижний уголок */
    -moz-border-radius-bottomright: 10px; /* Правый нижний уголок */
   }
  </style>
 </head>
 <body>
  <div class="title">Буквица</div>
  <div class="content">
   Буквица является художественным приемом оформления текста и
   представляет собой увеличенную первую букву, базовая линия
   которой ниже на одну или несколько строк базовой линии
   основного текста.
  </div>
 </body>
</html>

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

Скругление уголков у блока

Рис. 1. Скругление уголков у блока

Браузеры

Эллиптические уголки поддерживаются в браузере Firefox начиная с версии 3.5.

Рамка со значениями dashed и dotted отображается в уголке сплошной линией.


-moz-border-radius-topright

Internet Explorer | Chrome | Opera | Safari |  |  | Android | iOS
 |  |  |  | 1.0+ | 3.5+ |  |

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Да, относительно ширины блока
Применяется | Ко всем элементам

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления правого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

-moz-border-radius-topright: <радиус> [<радиус>]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали. Эта возможность работает только для Firefox 3.5 и старше.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-radius-topright</title>
  <style>
   .radius {
    background: #f0f0f0;
    border: 1px dashed #000;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div style="-moz-border-radius-topright: 10px" class="radius">
   -moz-border-radius-topright: 10px
  </div>
  <div style="-moz-border-radius-topright: 70px 40px" class="radius">
   -moz-border-radius-topright: 70px 40px
  </div>
 </body>
</html>

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

Варианты скругления правого верхнего уголка

Рис. 1. Варианты скругления правого верхнего уголка

Браузеры

Эллиптические уголки поддерживаются в браузере Firefox начиная с версии 3.5.

Рамка со значениями dashed и dotted отображается в уголке сплошной линией.


-moz-border-right-colors

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.0+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Не применяется:

  • если значение border-style установлено как dashed или dotted;
  • к таблицам, у которых border-collapse задано как collapse.

Синтаксис

-moz-border-right-colors: [цвет]* цвет | none

Значения

none
Нет цвета или используется цвет, заданный свойством border-color.
цвет
Значение цвета в любом допустимом для CSS формате. Также можно использовать значение transparent для указания прозрачности.

Набор цветов пишется через пробел, начиная с цвета внешнего края и заканчивая цветом внутреннего края. Если заданная толщина больше установленного количества цветов, то оставшаяся часть линий заполняется цветом внутреннего края.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-right-colors</title>
  <style>
   .gradient {
    border: 5px solid black;
    -moz-border-top-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    -moz-border-left-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    -moz-border-right-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    -moz-border-bottom-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    background: #ffe;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="gradient">
   Градиент это пошаговое изменение цвета от одной точки к другой.
  </div>
 </body>
</html>

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

Результат использования -moz-border-right-colors

Рис. 1. Результат использования -moz-border-right-colors

Браузеры

-moz-border-right-colors нестандартное свойство и поддерживается только браузером Firefox начиная с версии 1.0.


-moz-border-top-colors

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.0+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Не применяется:

  • если значение border-style установлено как dashed или dotted;
  • к таблицам, у которых border-collapse задано как collapse.

Синтаксис

-moz-border-top-colors: [цвет]* цвет | none

Значения

none
Нет цвета или используется цвет, заданный свойством border-color.
цвет
Значение цвета в любом допустимом для CSS формате. Также можно использовать значение transparent для указания прозрачности.

Набор цветов пишется через пробел, начиная с цвета внешнего края и заканчивая цветом внутреннего края. Если заданная толщина больше установленного количества цветов, то оставшаяся часть линий заполняется цветом внутреннего края.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-border-top-colors</title>
  <style>
   .gradient {
    border: 5px solid black;
    -moz-border-top-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    -moz-border-left-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    -moz-border-right-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    -moz-border-bottom-colors: #ffa02d #fdad41 #fabe5d #f7d17c #f4e298;
    background: #ffe;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="gradient">
   Градиент это пошаговое изменение цвета от одной точки к другой.
  </div>
 </body>
</html>

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

Результат использования -moz-border-top-colors

Рис. 1. Результат использования -moz-border-top-colors

Браузеры

-moz-border-top-colors нестандартное свойство и поддерживается только браузером Firefox начиная с версии 1.0.


-moz-box-shadow

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 3.5+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius (или -moz-border-radius) то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Синтаксис

-moz-box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Значения

none
Отменяет добавление тени.
inset
Тень выводится внутри элемента. Необязательный параметр.
сдвиг по x
Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y
Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие
Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение
Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет
Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-box-shadow</title>
  <style>
   .shadow {
    -moz-box-shadow: inset 5px 5px 10px #f0f0f0;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="shadow">Ля-минорной диатонической пентатоники не бывает,
   а бывает ля-минорная блюзовая гамма.
   Она отличается от ля-минорной пентатоники одной нотой.</div>
 </body>
</html>

Браузеры

Firefox начиная с версии 4.0 поддерживает стандартное свойство CSS3 box-shadow.


-moz-box-sizing

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.0+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Применяется для изменения алгоритма расчета ширины и высоты элемента. По своему действию -moz-box-sizing похож на свойство box-sizing, но является нестандартным и работает в браузере Firefox.

Синтаксис

-moz-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).

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-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; /* Параметры рамки */
    -moz-box-sizing: padding-box; /* Ширина блока с полями */
   }
  </style>
 </head>
 <body>
  <div class="box1">Ширина с учетом значения свойства width, полей и границ.</div>
  <div class="box2">Ширина равна значению свойства width плюс границы.</div>
 </body>
</html>

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 304 пиксела, она получается путем суммирования значений ширины контента (width) и толщины границ. При этом поля входят в ширину контента и на размер блока не влияют.

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

Рис. 1. Ширина блоков

Примечание

-moz-box-sizing не применяется к ячейкам таблицы.

Если для свойства -moz-box-sizing устанавливается значение border-box, то min-height и max-height не работают.


-moz-calc

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 4.0+ |  |

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

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

свойство: -moz-calc(выражение)

Значения

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

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

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

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

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


-moz-column-count

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.5+ |  |

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет количество колонок в многоколоночном тексте.

Синтаксис

-moz-column-count: <число> | auto

Значения

<число>
Целое число больше нуля, задающее оптимальное число колонок.
auto
Число колонок вычисляется автоматически на основе других свойств (-moz-column-width, -moz-column-gap).

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-column-count</title>
  <style>
   .book {
    -moz-column-count: 2;
   }
  </style>
 </head>
 <body>
  <div class="book">
<p>1. Lorem ipsum dolor sit amet consectetuer rutrum Aliquam et Maecenas
malesuada. Sem vitae tempus Curabitur condimentum velit pellentesque
nibh mauris et Vivamus. Curabitur pede vitae vitae mollis mauris
elit justo mauris Vestibulum interdum. Feugiat Ut condimentum
tincidunt Maecenas mauris sodales eleifend Mauris sapien felis.
Auctor elit penatibus convallis Ut magnis fames sem sed laoreet
vitae. Tempus Vivamus tellus commodo.</p>
<p>2. Curabitur pulvinar pretium adipiscing Pellentesque Curabitur nonummy
quis ipsum porttitor Sed. In Ut ipsum a Pellentesque eu Nam Nam rutrum
dignissim faucibus. Nec consectetuer aliquet convallis ipsum ipsum
tempor sapien Quisque nibh interdum. Nam pede et consectetuer Lorem
convallis et turpis dolor fringilla Vestibulum. Sed orci et Vestibulum
leo adipiscing justo Quisque Vestibulum urna risus. Magnis tristique et
Duis neque consequat turpis Sed Duis convallis Morbi. Eros sed.</p>
<p>3. Sed Cum In enim Ut dolor justo dolor enim wisi orci. Convallis
enim a in justo et orci dolor Curabitur quis eget. Nulla justo semper
scelerisque semper dictumst et interdum eu quis eget. Laoreet leo porta
Cras et id eros felis metus et dictumst. Eu ac facilisi tincidunt dui
Nam Quisque consectetuer fermentum leo fames. Laoreet amet Nam
sollicitudin tincidunt sed fames interdum accumsan tempus vitae.</p>
</div>
 </body>
</html>

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

Рис. 1. Две колонки текста


-moz-column-gap

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.5+ |  |

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

Значение по умолчанию | normal
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает расстояние между колонками в многоколоночном тексте.

Синтаксис

-moz-column-gap: <значение> | normal

Значения

<значение>
Значение ширины межколоночного интервала в единицах CSS (например, пикселах).
normal
Межколоночный интервал устанавливается браузером. Firefox 2.0 использует значение 0, старшие версии — 1em.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-column-gap</title>
  <style>
   .book {
    -moz-column-count: 3;
    -moz-column-width: 200px;
    -moz-column-gap: 2em;
   }
  </style>
 </head>
 <body>
  <div class="book">
<p>1. Lorem ipsum dolor sit amet consectetuer rutrum Aliquam et Maecenas
malesuada. Sem vitae tempus Curabitur condimentum velit pellentesque
nibh mauris et Vivamus. Curabitur pede vitae vitae mollis mauris
elit justo mauris Vestibulum interdum. Feugiat Ut condimentum
tincidunt Maecenas mauris sodales eleifend Mauris sapien felis.
Auctor elit penatibus convallis Ut magnis fames sem sed laoreet
vitae. Tempus Vivamus tellus commodo.</p>
<p>2. Curabitur pulvinar pretium adipiscing Pellentesque Curabitur nonummy
quis ipsum porttitor Sed. In Ut ipsum a Pellentesque eu Nam Nam rutrum
dignissim faucibus. Nec consectetuer aliquet convallis ipsum ipsum
tempor sapien Quisque nibh interdum. Nam pede et consectetuer Lorem
convallis et turpis dolor fringilla Vestibulum. Sed orci et Vestibulum
leo adipiscing justo Quisque Vestibulum urna risus. Magnis tristique et
Duis neque consequat turpis Sed Duis convallis Morbi. Eros sed.</p>
<p>3. Sed Cum In enim Ut dolor justo dolor enim wisi orci. Convallis
enim a in justo et orci dolor Curabitur quis eget. Nulla justo semper
scelerisque semper dictumst et interdum eu quis eget. Laoreet leo porta
Cras et id eros felis metus et dictumst. Eu ac facilisi tincidunt dui
Nam Quisque consectetuer fermentum leo fames. Laoreet amet Nam
sollicitudin tincidunt sed fames interdum accumsan tempus vitae.</p>
</div>
 </body>
</html>


-moz-column-rule

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 3.5+ |  |

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

Значение по умолчанию | medium none
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-moz-column-rule: <border-width> || <border-style> || <цвет>

Значения

Значение border-width определяет толщину линии. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили линии

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-column-rule</title>
  <style>
   .book {
    -moz-column-count: 3;
    -moz-column-width: 200px;
    -moz-column-rule: 1px solid #ccc;
   }
  </style>
 </head>
 <body>
  <div class="book">
<p>1. Lorem ipsum dolor sit amet consectetuer rutrum Aliquam et Maecenas
malesuada. Sem vitae tempus Curabitur condimentum velit pellentesque
nibh mauris et Vivamus. Curabitur pede vitae vitae mollis mauris
elit justo mauris Vestibulum interdum. Feugiat Ut condimentum
tincidunt Maecenas mauris sodales eleifend Mauris sapien felis.
Auctor elit penatibus convallis Ut magnis fames sem sed laoreet
vitae. Tempus Vivamus tellus commodo.</p>
<p>2. Curabitur pulvinar pretium adipiscing Pellentesque Curabitur nonummy
quis ipsum porttitor Sed. In Ut ipsum a Pellentesque eu Nam Nam rutrum
dignissim faucibus. Nec consectetuer aliquet convallis ipsum ipsum
tempor sapien Quisque nibh interdum. Nam pede et consectetuer Lorem
convallis et turpis dolor fringilla Vestibulum. Sed orci et Vestibulum
leo adipiscing justo Quisque Vestibulum urna risus. Magnis tristique et
Duis neque consequat turpis Sed Duis convallis Morbi. Eros sed.</p>
<p>3. Sed Cum In enim Ut dolor justo dolor enim wisi orci. Convallis
enim a in justo et orci dolor Curabitur quis eget. Nulla justo semper
scelerisque semper dictumst et interdum eu quis eget. Laoreet leo porta
Cras et id eros felis metus et dictumst. Eu ac facilisi tincidunt dui
Nam Quisque consectetuer fermentum leo fames. Laoreet amet Nam
sollicitudin tincidunt sed fames interdum accumsan tempus vitae.</p>
</div>
 </body>
</html>

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

Разделительная линия между колонками текста

Рис. 1. Разделительная линия между колонками текста


-moz-column-width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.5+ |  |

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-moz-column-width: <значение> | auto

Значения

<значение>
Значение ширины колонки в абсолютных единицах CSS (например, пикселах).
auto
Ширина колонок вычисляется автоматически на основе других свойств (-moz-column-count, -moz-column-gap).

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-column-width</title>
  <style>
   .book {
    -moz-column-count: 3;
    -moz-column-width: 200px;
   }
  </style>
 </head>
 <body>
  <div class="book">
<p>1. Lorem ipsum dolor sit amet consectetuer rutrum Aliquam et Maecenas
malesuada. Sem vitae tempus Curabitur condimentum velit pellentesque
nibh mauris et Vivamus. Curabitur pede vitae vitae mollis mauris
elit justo mauris Vestibulum interdum. Feugiat Ut condimentum
tincidunt Maecenas mauris sodales eleifend Mauris sapien felis.
Auctor elit penatibus convallis Ut magnis fames sem sed laoreet
vitae. Tempus Vivamus tellus commodo.</p>
<p>2. Curabitur pulvinar pretium adipiscing Pellentesque Curabitur nonummy
quis ipsum porttitor Sed. In Ut ipsum a Pellentesque eu Nam Nam rutrum
dignissim faucibus. Nec consectetuer aliquet convallis ipsum ipsum
tempor sapien Quisque nibh interdum. Nam pede et consectetuer Lorem
convallis et turpis dolor fringilla Vestibulum. Sed orci et Vestibulum
leo adipiscing justo Quisque Vestibulum urna risus. Magnis tristique et
Duis neque consequat turpis Sed Duis convallis Morbi. Eros sed.</p>
<p>3. Sed Cum In enim Ut dolor justo dolor enim wisi orci. Convallis
enim a in justo et orci dolor Curabitur quis eget. Nulla justo semper
scelerisque semper dictumst et interdum eu quis eget. Laoreet leo porta
Cras et id eros felis metus et dictumst. Eu ac facilisi tincidunt dui
Nam Quisque consectetuer fermentum leo fames. Laoreet amet Nam
sollicitudin tincidunt sed fames interdum accumsan tempus vitae.</p>
</div>
 </body>
</html>


-moz-orient

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 6.0+ |  |

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

Значение по умолчанию | horozontal
Наследуется | Нет
Применяется | К <progress>
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает положение индикатора прогресса — горизонтальное или вертикальное.

Синтаксис

-moz-orient: horizontal | vertical

Значения

horizontal
Горизонтальное положение.
vertical
Вертикальная ориентация

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>orient</title>
  <style>
   .vert {
    -moz-orient: vertical;
   }
  </style>
 </head>
 <body>
  <p>Горизонтальный индикатор прогресса</p>
  <progress max="100" value="75"></progress>
  <p>Вертикальный индикатор прогресса</p>
  <progress max="100" value="75" class="vert"></progress>
 </body>
</html>

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

Вид индикатора прогресса в зависимости от значения -moz-orient

Рис. 1. Вид индикатора прогресса в зависимости от значения -moz-orient


-moz-user-select

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.5+ |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-moz-user-select: none | text | -moz-none | all

Значения

none
Пользователь не может выделить текст и любые вложенные элементы.
text
Пользователь может выделить текст.
-moz-none
Текст внутри элемента не может быть выделен, но выделение для вложенных элементов может быть разрешено через -moz-user-select: text.
all
Двойной щелчок по элементу выделяет весь текст внутри его родителя.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-moz-user-select</title>
  <style>
   body { -moz-user-select: -moz-none; }
   .enable { -moz-user-select: text; }
  </style>
 </head>
 <body>
  <p>Этот текст нельзя выделить</p>
  <p><input type="text" value="Этот текст можно выделить" /></p>
  <p class="enable">Этот текст тоже можно выделить</p>
 </body>
</html>


Псевдокласс :-moz-placeholder

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 4.0+ |  |

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

Значение по умолчанию | Нет.
Наследуется | Да
Применяется | К <input>, <textarea>
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста созданного атрибутом placeholder. Совместно с :-moz-placeholder допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

Синтаксис

input:-moz-placeholder {...}
textarea:-moz-placeholder {...}

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <title>-moz-placeholder</title>
  <style>
   body { background: #053f38; }
   input[type="search"] {
    border: 1px solid #98baba; /* Параметры рамки */
    background: transparent; /* Прозрачный фон */
    padding: 1px 4px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
   }
   input[type="search"]:-moz-placeholder {
    color: #ffd595; /* Цвет подсказывающего текста */
   }
  </style>
 </head>
 <body>
  <form>
   <p><input type="search" placeholder="Поиск по сайту" name="q">
   <input type="submit" value="Найти"></p>
  </form>
 </body>
</html>

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

Использование псевдокласса :-moz-placeholder

Рис. 1. Использование псевдокласса :-moz-placeholder

Браузеры

Safari и Chrome поддерживают псевдокласс ::-webkit-input-placeholder.


Псевдоэлемент ::-moz-selection

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 1.0+ |  |

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

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Псевдоэлемент ::-moz-selection применяется к выделенному пользователем фрагменту документа. В правилах стилей допускается использовать только следующие свойства: color, background и background-color.

::-moz-selection нестандартный псевдоэлемент и поддерживается только браузером Firefox начиная с версии 1.0.

Синтаксис

элемент::-moz-selection { ... }

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <title>-moz-selection</title>
  <style>
   p::-moz-selection {
    color: #ffe; /* Цвет текста */
    background: #000080; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p>Пёс их знает бродяг, для какой они пользы, бродяги?</p>
  <p>По каким по таким ордерам принимать их в расчёт?</p>
  <p>В чём желательно было бы с ними сойтись? В чём не стоит?</p>
  <p>Да и есть ли они вообще? Кто их видел, бродяг? </p>
 </body>
</html>

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

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

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


image-rendering

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  |  |  | 3.6+ |  |

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

Значение по умолчанию | auto
Наследуется | Да
Применяется | К изображениям, фоновым картинкам, <video>, <canvas>

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера.

image-rendering нестандартное свойство и поддерживается только браузером Firefox начиная с версии 3.6 и Fennec 1.0.

Синтаксис

image-rendering: auto | optimizeSpeed | optimizeQuality | inherit | -moz-crisp-edges

Значения

auto
Соответствует optimizeQuality.
optimizeSpeed

Цель алгоритма — быстрое отображение картинки, для чего применяется метод интерполяции по ближайшим точкам. Он не создаёт сглаживания вокруг линий и его можно рекомендовать в тех случаях, когда требуется сохранить первоначальный набор цветов и резкость краёв.
optimizeQuality

Повышает качество картинки за счет использования бикубического метода интерполяции. Это даёт сглаженные границы и плавный тоновый диапазон цветов.
inherit
Наследует значение родителя.
-moz-crisp-edges

Соответствует optimizeSpeed.

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

Рис. 1. Результат применения методов интерполяции

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>image-rendering</title>
  <style>
   img { border: 1px solid #ccc; }
   .fast {
    image-rendering: optimizeSpeed;
   }
  </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 пикселов с использованием разных алгоритмов. Для левой картинки применяется алгоритм, заданный по умолчанию (билинейный), для правой — метод интерполяции по ближайшим точкам (рис. 2).

Результат использования image-rendering с разными значениями

Рис. 2. Результат использования image-rendering с разными значениями


-o-background-size

Internet Explorer | Chrome |  |  | Safari | Firefox | Android | iOS
 |  | 9.5+ | 10.60+ |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам. -o-background-size нестандартное свойство и поддерживается только браузером Opera начиная с версии 9.5.

Синтаксис

-o-background-size: [ <значение> | <проценты> | auto ]{1,2}

Значения

значение
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
проценты
Задает размер фоновой картинки в процентах от размеров элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-o-background-size</title>
   <style>
    html {height: 100%;}
    body {
     height: 200px; /* Высота блока */
     background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */
     -o-background-size: 40%; /* Масштабируем фон */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Рис. 1. Результат использования -o-background-size

Браузеры

Начиная с версии 10.60 свойство -o-background-size не поддерживается. Взамен используется свойство CSS3 background-size.


-o-object-fit

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 11.0+ |  |  |  |

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

Значение по умолчанию | fill
Наследуется | Нет
Применяется | К <img>, <video>, <object>, <input type="image">
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Управляет соотношением сторон заменяемых элементов, таких как <img> и <video>, когда у них задана ширина или высота, а также способом масштабирования. Свойство -o-object-fit может сохранять исходные пропорции элемента или наоборот, искажать пропорции, в угоду соблюдения размеров.

Синтаксис

-o-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. Фотографии с разным значением -o-fit-object

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-o-object-fit</title>
   <style>
    .dolphin img {
      -o-fit-object: cover;
      height: 400px;
      width: 300px
      background: #020509;
    }
  </style>
 </head>
 <body>
  <p class="dolphin"><img src="images/dolphin.jpg" alt="Дельфин"></p>
 </body>
</html>


-o-text-overflow

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 |  | 9.0+ |  |  |  |

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

Значение по умолчанию | clip
Наследуется | Нет
Применяется | К блочным, к встроенным элементам и ячейкам таблицы

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. -o-text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden.

-o-text-overflow нестандартное свойство и поддерживается только браузером Opera начиная с версии 9.0.

Синтаксис

-o-text-overflow: clip | ellipsis

Значения

clip
Текст обрезается по размеру области.
ellipsis
Текст обрезается и к концу строки добавляется многоточие.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-o-text-overflow</title>
  <style>
   p.clip {
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    background: #fc0; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    -o-text-overflow: ellipsis; /* Добавляем многоточие */
   }
  </style>
 </head>
 <body>
  <p class="clip">Магнитное поле ничтожно гасит большой круг небесной сферы,
  в таком случае эксцентриситеты и наклоны орбит возрастают.</p>
 </body>
</html>

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

Многоточие в конце текста

Рис. 1. Многоточие в конце текста


-webkit-background-clip

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 2.0+ |  | 3.1+ |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-webkit-background-clip: [padding|border|content|text] [, [padding|border|content|text]]

Значения

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

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

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

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

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

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-background-clip</title>
  <style>
   body { background: #333;}
   h1 {
    background: url(images/chrome-bg.png) 0 50% repeat-x; /* Фоновый рисунок */
    -webkit-background-clip: text; /* Фон под буквами */
    color: transparent; /* Прозрачный цвет */
    font: bold 26pt Arial; /* Параметры фона */
   }
  </style>
 </head>
 <body>
  <h1>Лучше жевать, чем курить</h1>
 </body>
</html>

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

Фоновый рисунок под текстом

Рис. 2. Фоновый рисунок под текстом

Браузеры

Chrome с версии 7.0 и Safari с 5.0 поддерживают стандартное свойство background-clip.


-webkit-background-origin

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.1+ |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-webkit-background-origin: [padding | border | content] [, [padding | border | content]]

Значения

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

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

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

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

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

Пример

HTML5CSS3IECrOpSaFx

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

Браузеры

Если фон задан один, а значений -webkit-background-original несколько, то браузеры Chrome и Safari создадут несколько фоновых рисунков.

Chrome c версии 3.0 и Safari c версии 4.0 поддерживают свойство CSS3 background-origin.


-webkit-background-size

Internet Explorer | Chrome | Opera |  |  | Firefox | Android | iOS
 | 3.0+ |  | 3.1+ | 4.1+ |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

-webkit-background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения

значение
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
проценты
Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-background-size</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    border: 2px solid #000; /* Параметры рамки */
    background: url(images/book.png) 100% 100% no-repeat; /* Добавляем фон */
    -webkit-background-size: cover; /* Масштабируем фон */
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

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

Результат использования -webkit-background-size

Рис. 1. Результат использования -webkit-background-size

Браузеры

Браузер Safari до версии 4.0 включительно не поддерживает значения cover и contain.

Chrome с версии 4.0 и Safari начиная с версии 5.0 также поддерживают свойство CSS3 background-size.


-webkit-border-radius

Internet Explorer | Chrome | Opera |  |  | Firefox | Android | iOS
 | 1.0+ |  | 3.0+ | 4.1+ |  |  |

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

Значение по умолчанию | 0
Наследуется | Нет
Процентная запись | Неприменима
Применяется | Ко всем элементам, за исключением таблиц с border-collapse: collapse

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

-webkit-border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате.

Табл. 1. Зависимость от числа значений
Число значений | Результат
1 | Радиус указывается для всех четырех уголков.
2 | Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 | Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки).

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-border-radius</title>
  <style>
   .radius {
    background: #fc0;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div style="-webkit-border-radius: 50px 0 0 50px;" class="radius">
   -webkit-border-radius: 50px 0 0 50px;
  </div>
  <div style="-webkit-border-radius: 40px 10px" class="radius">
   -webkit-border-radius: 40px 10px;
  </div>
  <div style="-webkit-border-radius: 10em/1em;" class="radius">
   -webkit-border-radius: 13em/3em;
  </div>
  <div style="-webkit-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;" class="radius">
   -webkit-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;
  </div>
  <div style="-webkit-border-radius: 8px; border: 1px solid black;" class="radius">
   -webkit-border-radius: 8px; border: 1px solid black;
  </div>
 </body>
</html>

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

Радиусы скругления в браузере Safari

Рис. 1. Радиусы скругления в браузере Safari

Браузеры

-webkit-border-radius нестандартное свойство и поддерживается только браузером Chrome 1.0 и Safari начиная с версии 3.0.

-webkit-border-radius не применяется к таблицам, у которых свойство border-collapse задано как collapse.

Safari до версии 4.0 включительно не понимает синтаксис со слэшем, эллиптическая рамка рисуются для всех четырех углов, если указано два значения через пробел.


-webkit-box-shadow

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.1+ |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius (или -webkit-border-radius) то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Синтаксис

-webkit-box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Значения

none
Отменяет добавление тени.
inset
Тень выводится внутри элемента. Необязательный параметр.
сдвиг по x
Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y
Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
размытие
Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение
Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет
Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.

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

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-box-shadow</title>
  <style>
   .shadow {
    -webkit-box-shadow: 5px 5px 10px #000;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="shadow">Ля-минорной диатонической пентатоники не бывает,
   а бывает ля-минорная блюзовая гамма.
   Она отличается от ля-минорной пентатоники одной нотой.</div>
 </body>
</html>

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

Вид тени в браузере Safari

Рис. 1. Вид тени в браузере Safari


-webkit-box-sizing

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.1+ |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Применяется для изменения алгоритма расчета ширины и высоты элемента. По своему действию -webkit-box-sizing похож на свойство box-sizing, но является нестандартным и работает в браузере Google Chrome и Safari.

Синтаксис

-webkit-box-sizing: content-box | border-box

Значения

content-box
Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box
Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-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; /* Параметры рамки */
    -webkit-box-sizing: border-box; /* Ширина блока с полями */
   }
  </style>
 </head>
 <body>
  <div class="box1">Ширина с учетом значения свойства width, полей и границ.</div>
  <div class="box2">Ширина равна значению свойства width.</div>
 </body>
</html>

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пиксела. Результат примера показан на рис. 1.

Рис. 1. Ширина блоков


-webkit-column-count

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.1+ |  |  |

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Определяет количество колонок в многоколоночном тексте.

Синтаксис

-webkit-column-count: <число> | auto

Значения

<число>
Целое число больше нуля, задающее оптимальное число колонок.
auto
Число колонок вычисляется автоматически на основе других свойств (-webkit-column-width, -webkit-column-gap).

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-column-count</title>
  <style>
   .book {
    -webkit-column-count: 2;
   }
  </style>
 </head>
 <body>
  <div class="book">
<p>1. Lorem ipsum dolor sit amet consectetuer rutrum Aliquam et Maecenas
malesuada. Sem vitae tempus Curabitur condimentum velit pellentesque
nibh mauris et Vivamus. Curabitur pede vitae vitae mollis mauris
elit justo mauris Vestibulum interdum. Feugiat Ut condimentum
tincidunt Maecenas mauris sodales eleifend Mauris sapien felis.
Auctor elit penatibus convallis.</p>
<p>2. Curabitur pulvinar pretium adipiscing Pellentesque Curabitur nonummy
quis ipsum porttitor Sed. In Ut ipsum a Pellentesque eu Nam Nam rutrum
dignissim faucibus. Nec consectetuer aliquet convallis ipsum ipsum
tempor sapien Quisque nibh interdum. Nam pede et consectetuer Lorem
convallis et turpis dolor fringilla Vestibulum. Sed orci et Vestibulum
leo adipiscing justo Quisque Vestibulum urna risus.</p>
<p>3. Sed Cum In enim Ut dolor justo dolor enim wisi orci. Convallis
enim a in justo et orci dolor Curabitur quis eget. Nulla justo semper
scelerisque semper dictumst et interdum eu quis eget. Laoreet leo porta
Cras et id eros felis metus et dictumst. Eu ac facilisi tincidunt dui
Nam Quisque consectetuer fermentum leo fames.</p>
</div>
 </body>
</html>

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

Две колонки текста

Рис. 1. Две колонки текста


-webkit-column-gap

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.1+ |  |  |

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Задает расстояние между колонками в многоколоночном тексте.

Синтаксис

-webkit-column-gap: <значение> | normal

Значения

<значение>
Значение ширины межколоночного интервала в единицах CSS (например, пикселах).
normal
Межколоночный интервал устанавливается браузером. По умолчанию используется значение 1em.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-column-gap</title>
  <style>
   .book {
    -webkit-column-count: 2;
    -webkit-column-gap: 2em;
   }
  </style>
 </head>
 <body>
  <div class="book">
<p>1. Lorem ipsum dolor sit amet consectetuer rutrum Aliquam et Maecenas
malesuada. Sem vitae tempus Curabitur condimentum velit pellentesque
nibh mauris et Vivamus. Curabitur pede vitae vitae mollis mauris
elit justo mauris Vestibulum interdum. Feugiat Ut condimentum
tincidunt Maecenas mauris sodales eleifend Mauris sapien felis.
Auctor elit penatibus convallis.</p>
<p>2. Curabitur pulvinar pretium adipiscing Pellentesque Curabitur nonummy
quis ipsum porttitor Sed. In Ut ipsum a Pellentesque eu Nam Nam rutrum
dignissim faucibus. Nec consectetuer aliquet convallis ipsum ipsum
tempor sapien Quisque nibh interdum. Nam pede et consectetuer Lorem
convallis et turpis dolor fringilla Vestibulum. Sed orci et Vestibulum
leo adipiscing justo Quisque Vestibulum urna risus.</p>
<p>3. Sed Cum In enim Ut dolor justo dolor enim wisi orci. Convallis
enim a in justo et orci dolor Curabitur quis eget. Nulla justo semper
scelerisque semper dictumst et interdum eu quis eget. Laoreet leo porta
Cras et id eros felis metus et dictumst. Eu ac facilisi tincidunt dui
Nam Quisque consectetuer fermentum leo fames.</p>
</div>
 </body>
</html>

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

Две колонки текста

Рис. 1. Две колонки текста


-webkit-column-rule

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.1+ |  |  |

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-webkit-column-rule: <border-width> || <border-style> || <цвет>

Значения

Значение border-width определяет толщину линии. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили линии

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

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-column-rule</title>
  <style>
   .book {
    -webkit-column-count: 3;
    -webkit-column-width: 200px;
    -webkit-column-rule: 1px solid #ccc;
   }
  </style>
 </head>
 <body>
  <div class="book">
<p>1. Lorem ipsum dolor sit amet consectetuer rutrum Aliquam et Maecenas
malesuada. Sem vitae tempus Curabitur condimentum velit pellentesque
nibh mauris et Vivamus. Curabitur pede vitae vitae mollis mauris
elit justo mauris Vestibulum interdum. Feugiat Ut condimentum
tincidunt Maecenas mauris sodales eleifend Mauris sapien felis.
Auctor elit penatibus convallis.</p>
<p>2. Curabitur pulvinar pretium adipiscing Pellentesque Curabitur nonummy
quis ipsum porttitor Sed. In Ut ipsum a Pellentesque eu Nam Nam rutrum
dignissim faucibus. Nec consectetuer aliquet convallis ipsum ipsum
tempor sapien Quisque nibh interdum. Nam pede et consectetuer Lorem
convallis et turpis dolor fringilla Vestibulum. Sed orci et Vestibulum
leo adipiscing justo Quisque Vestibulum urna risus.</p>
<p>3. Sed Cum In enim Ut dolor justo dolor enim wisi orci. Convallis
enim a in justo et orci dolor Curabitur quis eget. Nulla justo semper
scelerisque semper dictumst et interdum eu quis eget. Laoreet leo porta
Cras et id eros felis metus et dictumst. Eu ac facilisi tincidunt dui
Nam Quisque consectetuer fermentum leo fames.</p>
</div>
 </body>
</html>

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

Колонки текста c разделительной линией

Рис. 1. Колонки текста c разделительной линией


-webkit-column-width

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.1+ |  |  |

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

Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись | Неприменима

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-webkit-column-width: <значение> | auto

Значения

<значение>
Значение ширины колонки в абсолютных единицах CSS (например, пикселах).
auto
Ширина колонок вычисляется автоматически на основе других свойств (-webkit-column-count, -webkit-column-gap).

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-column-width</title>
  <style>
   .book {
    -webkit-column-count: 3;
    -webkit-column-width: 200px;
    -webkit-column-rule: 1px solid #ccc;
   }
  </style>
 </head>
 <body>
  <div class="book">
<p>1. Lorem ipsum dolor sit amet consectetuer rutrum Aliquam et Maecenas
malesuada. Sem vitae tempus Curabitur condimentum velit pellentesque
nibh mauris et Vivamus. Curabitur pede vitae vitae mollis mauris
elit justo mauris Vestibulum interdum. Feugiat Ut condimentum
tincidunt Maecenas mauris sodales eleifend Mauris sapien felis.
Auctor elit penatibus convallis.</p>
<p>2. Curabitur pulvinar pretium adipiscing Pellentesque Curabitur nonummy
quis ipsum porttitor Sed. In Ut ipsum a Pellentesque eu Nam Nam rutrum
dignissim faucibus. Nec consectetuer aliquet convallis ipsum ipsum
tempor sapien Quisque nibh interdum. Nam pede et consectetuer Lorem
convallis et turpis dolor fringilla Vestibulum. Sed orci et Vestibulum
leo adipiscing justo Quisque Vestibulum urna risus.</p>
<p>3. Sed Cum In enim Ut dolor justo dolor enim wisi orci. Convallis
enim a in justo et orci dolor Curabitur quis eget. Nulla justo semper
scelerisque semper dictumst et interdum eu quis eget. Laoreet leo porta
Cras et id eros felis metus et dictumst. Eu ac facilisi tincidunt dui
Nam Quisque consectetuer fermentum leo fames.</p>
</div>
 </body>
</html>


-webkit-user-select

Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS
 | 1.0+ |  | 3.1+ |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

-webkit-user-select: auto | none | text

Значения

auto
Пользователь может выделить элемент.
none
Пользователю запрещено выделять элемент.
text
Пользователь может выделить текст в элементе.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-user-select</title>
  <style type="text/css">
   body { -webkit-user-select: none; }
   .enable { -webkit-user-select: text; }
  </style>
 </head>
 <body>
  <p>Этот текст нельзя выделить</p>
  <p><input type="text" value="Этот текст можно выделить" /></p>
  <p class="enable">Этот <b>текст</b> тоже можно выделить</p>
 </body>
</html>


Фильтр Alpha

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает прозрачность элемента с разными характеристиками.

Синтаксис

filter: progid:DXImageTransform.Microsoft.Alpha(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
finishOpacity
Устанавливает значение прозрачности в конце градиента.
finishX
Задаёт горизонтальную позицию окончания градиента. Это целое число в процентах от ширины элемента. По умолчанию 0.
finishY
Задаёт вертикальную позицию окончания градиента. Это целое число в процентах от высоты элемента. По умолчанию 0.
opacity
Устанавливает значение прозрачности в начале градиента. 0 — полная прозрачность, 100 — непрозрачность элемента
startX
Задаёт горизонтальную начальную позицию градиента. Это целое число в процентах от ширины элемента. По умолчанию 0.
startY
Задаёт вертикальную начальную позицию градиента. Это целое число в процентах от высоты элемента. По умолчанию 0.
style
Стиль прозрачности. 0 — прозрачность применяется ко всему элементу. 1 — линейный градиент; начальная прозрачность указывается параметром opacity, конечная через finishOpacity, от начальной точки startX, startY к конечной точке finishX, finishY. 2 — радиальный градиент от центра к краю элемента. 3 — прямоугольный градиент, начинается с края элемента и идёт к его центру.

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

Пример 1

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   img.semi {
    /* Прозрачность 50% */
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Обычный ёжик">
  <img src="images/igels.png"
       alt="Полупрозрачный ёжик" class="semi"></p>
 </body>
</html>

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

Прозрачность всего изображения

Рис. 1. Прозрачность всего изображения

Пример 2

HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   img.semi {
    /* Градиентная прозрачность */
    filter:
      progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishOpacity=100, style=3);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Обычный ёжик">
  <img src="images/igels.png"
       alt="Полупрозрачный ёжик" class="semi"></p>
 </body>
</html>

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

Рис. 2. Градиентная прозрачность

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


background-clip

Internet Explorer | Chrome | Opera | Safari |  |  | Android | iOS
9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 4.0+ | 2.1+ | 1.0+

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

Значение по умолчанию | border-box
Наследуется | Нет
Применяется | Ко всем элементам
Процентная запись | Неприменима
Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-background-clip

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

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. Результат применения разных значений

Пример

HTML5CSS2.1CSSIECrOpSaFx

<!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>

Браузеры

В IE7 фон по умолчанию выводится как при значении padding-box.

Safari понимает только нестандартное свойство -webkit-background-clip, также с ним работает и Chrome.

Opera не поддерживает значение content-box.

Firefox до версии 4.0 поддерживает нестандартное свойство -moz-background-clip.


Фильтр BasicImage

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

filter: progid:DXImageTransform.Microsoft.BasicImage(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
grayScale
Цвета превращаются в оттенки серого. 1 — серые цвета, 0 — отображать исходные цвета.
invert
Инвертирует цвета элемента. 1 — инвертировать цвета, 0 — оставить исходные цвета.
mask
Устанавливает, что определённые цвета должны быть прозрачными. 1 — прозрачность меняется с помощью параметра maskColor, 0 — отображать исходные цвета.
mascColor
Устанавливает цвет, используемый как маска прозрачности содержимого элемента. Цвет задаётся в формате 0xAARRGGBB, где АА — это шестнадцатеричное значение прозрачности, RR — красная компонента, GG — зелёная компонента, BB — синяя компонента.
mirror
Зеркально отражает элемент. 1 — зеркально отобразить по горизонтали, 0 — оставить исходным.
opacity
Устанавливает значение прозрачности. 0 — полная прозрачность, 1.0 — непрозрачность элемента.
rotation
Вращает элемент. 0 — исходное положение, 1 — поворот на 90° по часовой стрелке, 2 — поворот на 180°, 3 — поворот на 270°.
xray
Цвета превращаются в оттенки серого с инвертированием цветов.

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

Пример 1

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .xray {
    /* «Рентген» */
    filter: progid:DXImageTransform.Microsoft.BasicImage(xray=1);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик">
  <img src="images/igels.png" alt="Ёжик" class="xray"></p>
 </body>
</html>

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

Использование параметра xray

Рис. 1. Использование параметра xray

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр Blur

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

filter: progid:DXImageTransform.Microsoft.Blur(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
makeShadow
Отображать содержимое элемента как тень. Значение true показывает содержимое как тень, false — исходный вид.
pixelRadius
Радиус размытия от 1 до 100.
shadowOpacity

Устанавливает уровень прозрачности тени, сделанной параметром makeShadow. 0 — полная прозрачность, 1 — непрозрачность элемента.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   img {
    /* Размытие */
    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=5);
   }
   img:hover {
    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=0);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик">
  <img src="images/igels.png" alt="Ёжик"></p>
 </body>
</html>

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

Рис. 1. Размытие картинки

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр Chroma

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Устанавливает область заданного цвета прозрачной.

Синтаксис

filter: progid:DXImageTransform.Microsoft.Chroma(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
color
Значение цвета, который должен быть прозрачным.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   body {
    background: #a9dc93 /* Цвет фона */
   }
   img {
    /* Задаём цвет #541c00 прозрачным */
     filter: progid:DXImageTransform.Microsoft.Chroma(color=#541c00);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик"></p>
 </body>
</html>

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

Прозрачные участки в изображении

Рис. 1. Прозрачные участки в изображении

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр DropShadow

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Добавляет к элементу тень, а также её направление и цвет.

Синтаксис

filter: progid:DXImageTransform.Microsoft.DropShadow(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
color
Цвет тени.
offX
Смещение тени по горизонтали. Положительное значение смещает тень вправо, отрицательное влево. По умолчанию равно 5.
offY
Смещение тени по вертикали. Положительное значение смещает тень вниз, отрицательное вверх. По умолчанию равно 5.
positive
Определяет, как должна отбрасываться тень. Значение true устанавливает тень от непрозрачных участков, false от прозрачных.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .opacity {
    border: 1px solid #000;
    /* Тень у первой картинки */
    filter: progid:DXImageTransform.Microsoft.DropShadow(color=#333333);
   }
   .transparent {
    margin-left: 20px;
    /* Тень от прозрачных участков у второй картинки */
    filter: progid:DXImageTransform.Microsoft.DropShadow(color=#cccccc, positive=false);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик" class="opacity">
  <img src="images/clover.png" alt="Клевер" class="transparent"></p>
 </body>
</html>

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

Рис. 1. Добавление тени

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр Emboss

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Отображает элемент в виде рельефной фигуры в серых тонах.

Синтаксис

filter: progid:DXImageTransform.Microsoft.Emboss(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
Bias
Процентное значение, добавляемое к каждой компоненте цвета. Может изменяться от -1 до 1. Чем больше значение, тем сильнее рельеф, на практике на рельеф также влияет контраст изображения.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   img {
    /* Рельеф */
    filter: progid:DXImageTransform.Microsoft.Emboss();
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик">
  <img src="images/igels.png" alt="Ёжик"></p>
 </body>
</html>

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

Рис. 1. Рельефное изображение

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр Engrave

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Отображает элемент в виде гравюры в серых тонах. Отличается от фильтра Emboss тем, что участки, которые казались «выдавлены» становятся «вдавленными».

Синтаксис

filter: progid:DXImageTransform.Microsoft.Engrave(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
Bias
Процентное значение, добавляемое к каждой компоненте цвета. Может изменяться от -1 до 1. Чем больше значение, тем сильнее рельеф.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .emboss {
    filter: progid:DXImageTransform.Microsoft.Emboss();
   }
   .engrave {
    filter: progid:DXImageTransform.Microsoft.Engrave();
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик" class="emboss">
  <img src="images/igels.png" alt="Ёжик" class="engrave"></p>
 </body>
</html>

Результат данного примера показан на рис. 1. Слева изображение с фильтром Emboss, а справа изображение с фильтром Engrave.

Рис. 1. Рельефное изображение

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр Glow

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

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

Синтаксис

filter: progid:DXImageTransform.Microsoft.Engrave(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
color
Цвет свечения.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .glow {
    color: #fff;
    filter: progid:DXImageTransform.Microsoft.Glow(color=blue, strength=6);
   }
   .shadow {
    filter: progid:DXImageTransform.Microsoft.Glow(color=#cccccc, strength=6);
   }
  </style>
 </head>
 <body>
  <p class="glow">Свечение вокруг текста.</p>
  <p><img src="images/igels.png" alt="Ёжик" class="shadow"></p>
 </body>
</html>

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

Свечение вокруг текста и картинки

Рис. 1. Свечение вокруг текста и картинки

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр ICMFilter

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Преобразует цвета содержимого на основе профиля системы управления цветом (Image Color Management, ICM). Этот фильтр имеет значение при отображении определённых изображений или имитации вывода устройств вроде принтеров или мониторов. Художникам также важно максимально точно передать цвета на фотографиях их картин, не зависимо от того, на каком устройстве они показываются. В таких случаях вместе с изображением передаётся файл цветового профиля, с помощью которого происходит преобразование цветов.

Синтаксис

filter: progid:DXImageTransform.Microsoft.IMCFilter(параметры)

Параметры

colorSpace
Устанавливает название цветового пространства или задаёт путь к файлу с профилем (он имеет расширение .icm). Значение sRGB используется по умолчанию.
intent
Указывает назначение элемента для наилучшего отображения в нём цветов. Picture — используется для картинок и фотографий; Graphic — для диаграмм и бизнес-графики, сохраняет насыщенность цветов, но не оттенок или яркость; Proof — выбор наиболее подходящего цвета, если гамма не поддерживает данный цвет, белый цвет при этом не обязан оставаться белым; Match — выбор наиболее подходящего цвета, если гамма не поддерживает данный цвет, белый цвет при этом остаётся белым.

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .icm {
    filter: progid:DXImageTransform.Microsoft.ICMFilter(intent=Picture);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик" class="icm"></p>
 </body>
</html>

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр Light

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

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

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Добавляет на элементе эффект освещения словно от источника света.

Синтаксис

filter: progid:DXImageTransform.Microsoft.Light(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.

Методы

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

addAmbient
Добавляет рассеянный свет.
addCone
Добавляет конус света.
addPoint
Добавляет точечный источник света, излучающий свет во всех направлениях.
changeColor
Изменяет цвет освещения.
changeStrength

Изменяет интенсивность света.
clear
Удаляет все источники света.
moveLight
Перемещает фокус для конуса света или точечного источника.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .light {
    filter: progid:DXImageTransform.Microsoft.Light();
   }
  </style>
  <script>
   window.onload = function() {
    igels.filters[0].addPoint(50, 50, 140, 255, 0, 0, 100);
   }
  </script>
 </head>
 <body>
   <p><img src="images/igels.png" alt="Ёжик">
   <img src="images/igels.png" alt="Ёжик" class="light" id="igels"></p>
 </body>
</html>

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

Источник света над картинкой

Рис. 1. Источник света над картинкой

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр MaskFilter

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

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

Значение по умолчанию | Нет.
Наследуется | Нет
Процентная запись | Не применима
Применяется | Ко всем элементам.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Показывает прозрачные пикселы как цветную маску, а непрозрачные пикселы наоборот, прозрачными.

Синтаксис

filter: progid:DXImageTransform.Microsoft.MaskFilter(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
color
Цвет, который будет отображаться на месте прозрачных участков.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .mask {
    filter: progid:DXImageTransform.Microsoft.MaskFilter(color=#a1d88b);
   }
  </style>
 </head>
 <body>
  <p><img src="images/clover.png" alt="Клевер">
  <img src="images/clover.png" alt="Клевер" class="mask"></p>
 </body>
</html>

Результат данного примера показан на рис. 1. Слева исходное изображение, а справа изображение с фильтром MaskFilter.

Изображение с маской

Рис. 1. Изображение с маской

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр Matrix

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

Краткая информация

Значение по умолчанию | Нет.
Наследуется | Нет
Процентная запись | Не применима
Применяется | Ко всем элементам.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Изменяет размер, поворачивает или отражает объект на основе матричных преобразований.

Синтаксис

filter: progid:DXImageTransform.Microsoft.Matrix(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
Dx
Устанавливает компонент X расширенной матрицы для линейного преобразования.
Dy
Устанавливает компонент Y расширенной матрицы для линейного преобразования.
FilterType
Задаёт метод интерполяции пикселов. bilinear — билинейный метод, даёт более сглаженные края и переходы, используется по умолчанию; nearest neighbor — метод по ближайшим точкам, результат менее сглаженный, но работает быстрее.
M11
Значение матрицы преобразования, располагается в первой строке первой колонки.
M12
Значение матрицы преобразования, находится в первой строке второй колонки.
M21
Значение матрицы преобразования, располагается во второй строке первой колонки.
M22
Значение матрицы преобразования, располагается во второй строке второй колонки.
SizingMethod
Определяет, как должен масштабироваться контейнер вокруг конечного изображения. clip to original — размер не изменяется, это значение по умолчанию; auto expand — контейнер изменяется согласно конечному изображению.

Сама матрица представлена на рис. 1.

Рис. 1. Матрица преобразований

В табл. 1 показаны некоторые распространённые преобразования с помощью этой матрицы.

Табл. 1. Преобразование элемента
Значения параметров | Преобразование | Описание
M11=2 | Изменение размера по горизонтали | Изменение размера по горизонтали. Значением является масштаб элемента.
M12=1 | Скос по вертикали | Скос по вертикали.
M21=1 | Скос по горизонтали | Скос по горизонтали.
M22=2 | Изменение размера по вертикали | Изменение размера по вертикали. Значением является масштаб элемента.
Dx=20 | Смещение по горизонтали в пикселах | Смещение по горизонтали в пикселах. Положительное значение сдвигает элемент вправо на заданное число пикселов, отрицательное значение влево.
Dy=20 | Смещение по вертикали в пикселах | Смещение по вертикали в пикселах. При положительном значении элемент опускается на заданное число пикселов вниз или вверх при отрицательном значении.
M11=-1, SizingMethod='auto expand' |  | Отражение по горизонтали.
M22=-1, SizingMethod='auto expand' | Отражение по вертикали | Отражение по вертикали.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .matrix {
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M22=-1,
            SizingMethod='auto expand');
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик">
  <img src="images/igels.png" alt="Ёжик" class="matrix"></p>
 </body>
</html>

Результат данного примера показан на рис. 2. Картинка справа отражена по вертикали и горизонтали.

Отражение рисунка с помощью матрицы преобразований

Рис. 1. Отражение рисунка с помощью матрицы преобразований

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр MotionBlur

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

Краткая информация

Значение по умолчанию | Нет.
Наследуется | Нет
Процентная запись | Не применима
Применяется | Ко всем элементам.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Размывает объект так, словно он быстро движется.

Синтаксис

filter: progid:DXImageTransform.Microsoft.MotionBlur(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
add
Сообщает, должен ли оригинал перекрывать размытое изображение. true — оригинал отображается поверх размытого изображения; false — размытое изображение выводится поверх оригинала.
direction
Направление смещения в градусах. Значением может быть число от 0 до 315 кратное 45 (0, 45, 90, 135, 180, 225, 270, 315). Числа меньше 0 и больше 360 конвертируются в значения в диапазоне от 0 до 315, например, -45 эквивалентно 315.
strength
Устанавливает смещение размытия в пикселах. По умолчанию 5.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .blur {
    filter: progid:DXImageTransform.Microsoft.MotionBlur(Direction=45, Strength=30);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик">
  <img src="images/igels.png" alt="Ёжик" class="blur"></p>
 </body>
</html>

Результат данного примера показан на рис. 1. Слева исходное изображение, а справа изображение с фильтром MotionBlur.

Изображение с размытием

Рис. 1. Изображение с размытием

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр Shadow

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

Краткая информация

Значение по умолчанию | Нет.
Наследуется | Нет
Процентная запись | Не применима
Применяется | Ко всем элементам.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Создаёт однотонный силуэт элемента, смещённый в заданном направлении, тем самым получая эффект тени.

Синтаксис

filter: progid:DXImageTransform.Microsoft.Shadow(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
Color
Цвет тени.
direction
Направление тени в градусах. Значением может быть число от 0 до 315 кратное 45 (0, 45, 90, 135, 180, 225, 270, 315). Числа меньше 0 и больше 360 конвертируются в значения в диапазоне от 0 до 315, например, -45 эквивалентно 315.
strength
Устанавливает смещение тени в пикселах. По умолчанию 5.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .shadow {
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=45);
    color: #fc0;
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик">
  <img src="images/igels.png" alt="Ёжик" class="shadow"></p>
  <p class="shadow">Пример текста</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

. Добавление тени к рисунку и к тексту

Рис. 1. Добавление тени к рисунку и к тексту

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.


Фильтр Wave

Internet Explorer |  | Chrome | Opera | Safari | Firefox | Android | iOS
6.0+ | 8.0+ |  |  |  |  |  |

Краткая информация

Значение по умолчанию | Нет.
Наследуется | Нет
Процентная запись | Не применима
Применяется | Ко всем элементам.

Версии CSS

CSS 1 | CSS 2 | CSS 2.1 | CSS 3

Описание

Вносит в элемент волнообразные искажения относительно вертикальной оси.

Синтаксис

filter: progid:DXImageTransform.Microsoft.Wave(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
add
Сообщает, должен ли оригинал перекрывать искажённое изображение. true — оригинал отображается поверх искажённого изображения; false — искажённое изображение выводится поверх оригинала.
freq
Устанавливает число волн. По умолчанию 3.
lightStrength
Задаёт разницу между освещением верхних и нижних волн. Значение указывается в процентах от 0 до 100. По умолчанию 100.
phase
Устанавливает смещение фазы, с которой начинается синусоида. Значение может быть от 0 до 100. По умолчанию 0.
strength
Устанавливает интенсивность волн в пикселах. По умолчанию 5.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .wave {
    filter: progid:DXImageTransform.Microsoft.Wave(strength=6,
            freq=3, lightStrength=20, add=0, phase=90);
   }
  </style>
 </head>
 <body>
  <p><img src="images/igels.png" alt="Ёжик">
  <img src="images/igels.png" alt="Ёжик" class="wave"></p>
  <p class="wave">Пример текста</p>
 </body>
</html>

Результат данного примера показан на рис. 1. Обратите внимание, что текст стал нечитаемым и появилась горизонтальная полоса прокрутки.

Добавление волн к рисунку и к тексту

Рис. 1. Добавление волн к рисунку и к тексту

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.