Общие сведения о языке CSS

CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Возможности языка CSS

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

Правила языка CSS

Правила языка CSS состоят из селектора и блока объявлений. Селектор — это код элемента языка HTML, к которому будет применено правило стиля. Блок объявлений помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком точка с запятой. Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком двоеточие. Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

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

Селектор h1 отвечает за заголовки h1 языка HTML, а объявление состоит из свойства color и значения red. Это правило изменяет цвет текста элементов h1 на красный.

Типы таблиц стилей

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

Способы добавления стилей

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

• Внедренный стиль — этот стиль управляет представлением одного документа и размещается внутри тега-контейнера style в разделе документа head.

• Связанный стиль — это отдельный файл с расширением .css, в котором размещаются все CSS-правила (но без тегов языка HTML). Любой HTML-файл, к которому нужно применить стили, описанные в этой таблице, можно связать с ней, используя тег link в разделе документа head.

• Импортированный стиль — этот тип похож на связанные стили, однако позволяет импортировать стили в связанную таблицу стилей или непосредственно в документ. Он полезен для реализации обходных путей и для управления множеством документов. Импортированный стиль (как и связанный) представляет собой код, записанный в отдельном файле с расширением .css. Импортировать содержимое CSS-файла можно в связанную таблицу стилей или непосредственно в html-документ с помощью правила, которое указывается в начале связанной таблицы стилей или блока <style> html-документа соответственно.

Каскад

Каскад определяет способ применения правил, в случае с типами таблиц стилей:

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

Например, в связанной таблице стилей (файле my_style.css) содержатся правила: первое определяет цвет абзаца — зеленый, второе задает цвет заголовка — желтый:

В html-документе используются три таблицы стилей: связанная, внедренная и встроенная. Во внедренном стиле определен красный цвет абзаца, а во встроенном (встроенная таблица применяется к первому абзацу) — синий.

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