Каскадные таблицы стилей CSS

Сокращенная запись CSS

Можно объединить несколько связанных свойств CSS в одно свойство, чтобы сэкономить время и свои усилия.

Сравнение индивидуальных и сокращенных значений

Рассмотрим следующее правило для полей (сокращения для заполнения и границы работают таким же образом):

div.foo {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 2em;
  margin-left: 2.5em;
}

Это правило можно записать короче:

div.foo {
  margin: 1em 1.5em 2em 2.5em;
}

Задание менее четырех значений для сокращенного свойства

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

Справочник сокращений

  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: black;

  font-size: 1.5em;
  line-height: 200%;
  font-weight: bold;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif

font: 1.5em/200% bold italic Georgia,"Times New Roman",serif;

  background-color: #000;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;

background:#000 url(image.gif) no-repeat top left;

list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif) ;

list-style: circle inside url(bullet.gif);

Применение CSS к HTML

Существует три способа применения CSS к документу HTML:

• строковые;
• вложенные;
• внешние таблицы стилей.

Строковые стили

Можно применить таблицу стилей к элементу, используя атрибут style следующим образом:

<p style="background:blue; color:white; 
    padding:5px;">Hello</p>

Внутри этого атрибута перечисляются все свойства CSS и их значения.

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

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

Кроме проблем с обслуживанием, вы не получите никаких преимуществ самой в существенной части CSS: каскадировании.

Вложенные стили

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

<style type="text/css" media="screen">
p {
  color:white;
  background:blue;
  padding:5px;
}
</style>

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

Внешние таблицы стилей

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

<link rel="stylesheet" href="styles.css"
  type="text/css" media="screen">

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

Импорт таблиц стилей

Существует и другой способ импорта внешних таблиц стилей в файлы HTML - оператор @import. Он вставляется во вложенную таблицу стилей, таким же образом, как показанный выше вложенный код CSS. Синтаксис выглядит следующим образом:

<style type="text/css" media="screen">
  @import url("styles.css");
  другие операторы импорта или стили CSS.
</style>

Двумя фундаментальными концепциями CSS являются наследование и каскадирование. Наследование связано с тем, как элемент в разметке HTML наследует свойства своих элементов предков (в которых он содержится) и передает их своим потомкам, в то время как каскадирование имеет дело с объявлениями CSS, которые применяются к документу, и как конфликтующие правила переопределяют друг друга.

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

Наследование в CSS является механизмом, с помощью которого определенные свойства передаются от элемента предка его элементам потомкам.

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

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

Каскадирование

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

• Важность
• Специфичность
• Порядок исходного кода

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

Важность

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

• Таблицы стилей агента пользователя
• Обычные объявления в таблицах стиля пользователя
• Обычные объявления в таблицах стиля автора
• Важные объявления в таблицах стиля автора
• Важные объявления в таблицах стиля пользователя

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

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

Таблица стилей автора является тем, что обычно и называется "таблица стилей". Это таблица стилей, которую автор документа (или, более вероятно, дизайнер сайта) написал и присоединил (или включил).

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

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

Специфичность

Специфичность опеределяют как меру того, насколько конкретным является селектор некоторого правила. Селектор с низкой специфичностью может соответствовать многим элементам (такой как *, который соответствует каждому элементу в документе), в то время как селектор с высокой специфичностью может соответствовать только одному элементу на страницу (такой как #nav, который соответствует только элементу с id совпадающим с nav).

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

Специфичность имеет четыре компоненты, которые можно обозначить как a, b, c и d. Компонента a является наиболее разграничивающим, d - наименее.

• Компонента a определяется очень просто: это 1 для объявления атрибута style, иначе это 0.
• Компонента b является числом селекторов id в селекторе (тех, которые начинаются с#).
• Компонента c является числом селекторов атрибутов, включая селекторы классов - и псевдо-классов.
• Компонента dявляется числом типов элементов и псевдо-элементов в селекторе.

После небольшого подсчета можно получить строку из этих четырех компонентов, определяющую специфичность для любого правила. Объявления CSS в атрибуте style не имеют селектора, поэтому их специфичность всегда будет 1,0,0,0.

В таблице приведены некоторые примеры.

Стоит отметить, что соединяющие символы (такие как >, + и пробел) не влияют на специфичность селектора. Универсальный селектор (*) также не влияет на специфичность.

Имеется значительная разница в специфичности между селектором id и селектором атрибута, который ссылается на атрибут id. Хотя они соответствуют одному элементу, они имеют очень разную специфичность. Специфичность #nav будет 0,1,0,0, в то время как специфичность [id="nav"] будет только 0,0,1,0.

Порядок исходного кода

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

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

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

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

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

Эта спецификация определяет Каскадные таблицы Стилей, уровень 2 (CSS2). CSS2 - это язык таблиц стилей, позволяющий авторам и пользователям подключать стили (например, шрифты, пробелы и звуковые сигналы) в структурированные документы (например, документы HTML и приложения XML). CSS2 упрощает создание и обслуживание Web-сайта путём разделения структуры и стиля представления документов.

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

Источники

Введение в стандарты Web / Переводчик О.Д. Труфанов - http://www.intuit.ru/department/internet/operawebst/4/1.html