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

Дополнительные селекторы CSS

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

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

Универсальные селекторы выбирают каждый элемент на странице для применения к ним стилей оформления. Например, следующее правило определяет, что для каждого элемента на странице должна быть добавлена сплошная черная граница толщиной 1 пиксель:

* {
border: 1px solid #000000;
}

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

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

img[alt] {
  border: 1px solid #000000;
}

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

Можно выбирать элементы также и по значению атрибута, а не только по названию атрибута. Следующее правило задает все изображения с атрибутом src со значением alert.gif:

img[src="alert.gif"] {
border: 1px solid #000000;
}

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

Селекторы потомков элементов

Можно использовать селектор потомка для выбора только определенных элементов, которые являются потомками других определенных элементов. Например, следующее правило задает цвет текста только тех strong элементов, которые являются потомками элементов h3, как green, но не для других элементов strong:

h3 > strong {
  color: green;
}

Селекторы потомков не поддерживаются в браузере IE 6 (и более младших версиях).

Селекторы нижележащих элементов

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

<div>
  <em>Привет</em>
  <p>и сразу же 
    <em>Пока</em>.
  </p>
</div>

В этом фрагменте элемент div является предком всех других элементов. Он имеет двух потомоков, em и p. Элемент p имеет один элемент потомок, еще один em.

Селекторы смежных одноуровневых элементов

Эти селекторы позволяют выбирать определенный элемент, который следует непосредственно после другого определенного элемента на том же уровне в иерархии элементов. Например, если вы хотите выбрать элементы p, которые следуют непосредственно после элементов h2, но никакие другие элементы p, можно воспользоваться следующим правилом:

h2 + p {
 ...
}

Селекторы смежных одноуровневых элементов не поддерживаются в браузере IE 6 (и более младших версиях).

Псевдо-классы

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

Список ниже представляет различные псевдо-классы и описание состояния ссылки, которое они выбирают:

Следующие правила CSS определяют что:

a:link{
 color: blue;
}

a:hover{
 text-decoration: none;
}

a:visited{
 color: gray;
}

a:active{
 font-weight: bold;
}

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

Можно выделить поле ввода, которое содержит активный мигающий курсор с помощью следующего правила:

input:focus {
 border: 2px solid black;
 background-color: lightgray;
}

Псевдо-элементы

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

p:first-letter {
  font-weight: bold;
  font-size: 250%
  background-color: red;
}

Чтобы сделать первую строку каждого параграфа жирной, можно использовать следующее правило:

p:first-line {
  font-weight: bold;
}

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

a:after{
  content: " " url(flower.gif);
}

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

a:after{
  content: "(" attr(href) ")";
}

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

Эти селекторы не поддерживаются в IE 6 (и более младших версиях).

Сокращенная запись 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 - наименее.

После небольшого подсчета можно получить строку из этих четырех компонентов, определяющую специфичность для любого правила. Объявления 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 поддерживает таблицы для конкретных носителей, так что авторы могут создавать представление своих документов для визуальных браузеров, звуковых устройств, принтеров, брайль-устройств, ручных портативных устройств и т.д. Данная спецификация поддерживает также позиционирование содержимого, загружаемые шрифты, отображение таблиц, возможности интернационализации, автоматические счетчики и нумерацию и некоторые свойства, относящиеся к пользовательскому интерфейсу.

Источники

Введение в стандарты