Каскадные таблицы стилей 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}

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