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

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

CSS - одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название "стандарты Web".

Уровень 1 (CSS1)

Это рекомендация W3C была принята в 1996 году и откорректирована в 1999 году. Основные возможности, предоставляемых этой рекомендацией:

• Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля - обычного, курсивного или полужирного.
• Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
• Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
• Выравнивание для текста, изображений, таблиц и других элементов.
• Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

Уровень 2 (CSS2)

Это рекомендация W3C была принята в 1998 году. Она построена на CSS1 с сохранением обратной совместимости. Среди новых возможностей можно назвать следующие:

• Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
• Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
• Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
• Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
• Расширенный механизм селекторов.
• Указатели.
• Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.

Уровень 2.1 ( CSS 2.1 )

Рабочая версия W3C от 8 сентября 2009 года. Построена на CSS2, в ней исправлен ряд ошибок.

CSS-верстка

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Использование CSS дает следующие преимущества:

• Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
• Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и кешируется.
• Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
• Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Известны также и недостатки:

• Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.
• Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

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

Таким образом, CSS не является ни языком программирования, ни языком разметки.

Определение правил стилей

Базовым конструкцией в CSS является правило следующего вида:

селектор {
свойство1: значение;
свойство2: значение;
свойство3: значение;
}

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

Фигурные скобки {} содержат пары свойство/значение, которые разделяются между собой точкой с запятой; свойства отделяются от своих соответствующих значений двоеточием.

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

Значения являются теми конкретными характеристиками, которые вы хотите задать каждому свойству выделенных элементов. Эти значения зависят от свойства.

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

Рассмотрим конкретный пример:

p {
  margin: 10px;
  font-family: Times New Roman;
  color: green;
}

Это правило выбирает HTML элемент p, и для каждого элемента p в документах HTML, которые используют этот код CSS, будет применяться это правило, если только не будут существовать применяемые к ним более конкретные правила, которые будут переопределять это правило. Данное правило влияет на свойства, которые определяют поля вокруг параграфа (margin), шрифт текста в параграфе (font-family), и цвет этого текста (color). Поля задаются размером в 10 пикселей, шрифт задается как Times New Roman, а цвет текста задается как green.

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

Комментарии CSS.

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

Селекторы объединения в группу

Можно также объеднить в группу различные селекторы. Предположим, что вы хотите применить одинаковое оформление к h2 и p, тогда можно было бы написать следующий CSS:

h2 {color: red}
p {color: red}

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

h2, p {color: red}

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

Дополнительные селекторы 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 (и более младших версиях).