Cascading Style Sheets/Википедия

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология оформления веб-страниц, элемент концепции DHTML. Таблицы (точнее — списки) CSS служат для оформления преимущественно HTML- и XHTML-документов, но иногда используются и для других документов, структурированных с помощью XML (например, в браузере «Mozilla» для оформления элементов графического интерфейса, XUL).

Обзор

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

CSS при отображении страницы может быть взята из различных источников:

• Авторские стили (информация стилей, предоставляемая автором страницы) в виде:
  • Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.
  • Встроенных стилей — блоков CSS внутри самого HTML-документа.
  • Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.
• Пользовательские стили
  • Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.
• Стиль браузера
  • Стандартный стиль, используемый браузером по умолчанию для представления элементов.

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

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

Схематически это можно показать так:

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

Например:

 p {
   font-family: "Garamond", serif;
 }
 h2 {
   font-size: 110 %;
   color: red;
   background: white;
 }
 .note {
   color: red;
   background: yellow;
   font-weight: bold;
 }
 p#paragraph1 {
   margin: 0;
 }
 a:hover {
   text-decoration: none;
 }
 #news p {
   color: blue;
 }

Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.

В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например:

<p class="note">Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберет подчеркивание, когда курсор мыши находится над этими элементами.

Последнее, шестое правило применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

CSS-вёрстка

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

Преимущества CSS вёрстки:

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

История

Уровень 1 (CSS1)

Рекомендация W3C принята 17 декабря 1996, откорректирована 11 января 1999. Среди возможностей, предоставляемых этой рекомендацией были:

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

Уровень 2 (CSS2)

Рекомендация W3C принята 12 мая 1998. Построена на CSS1 с сохранением обратной совместимости.

Добавление к функциональности:

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

Уровень 2.1 (CSS2.1)

Рабочая версия W3C от 6 ноября 2006. Построена на CSS2, содержит исправления ошибок.

Уровень 3 (CSS3)

Рабочая версия.

Включение в HTML

CSS можно включать в HTML тремя способами:

• Лишь ссылка в HTML, а сами CSS в отдельном файле (наиболее предпочтителен):

 <link rel="stylesheet" type="text/css" href="style.css">

• Непосредственно в HTML-документе:

 <style type="text/css">
    body { 
        color: red;
    }
 </style>

• Непосредственно в элемент:

 <p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>

XHTML

Для включения CSS в XML существует ещё один способ:

 <?xml-stylesheet href="style.css" type="text/css"?>

Поддержка браузерами

К сожалению, самый распространенный на данный момент браузер Internet Explorer поддерживает CSS далеко не полностью. Намного лучше, хотя и не идеально обстоит положение у других браузеров, например Mozilla Firefox или Opera.

Различные блоковые модели

В стандартах CSS от Консорциума W3C используется модель, в которой свойство width определяет ширину содержимого блока, не включая в нее отступы и рамки. Распространенный браузер Internet Explorer же, реализует собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding) и рамки (border). Кроме Internet Explorer эту модель так же понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.

В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing, со значениями content-box для указания на использование стандартной модели W3C и border-box для использования модели IE.

В браузере Mozilla, при поддержке этого свойства, под собственным «рабочим» названием -moz-box-sizing, ввели еще одно значение — padding-box, таким образом создав третью блочную модель, в которой width это размер содержимого и отступов блока, не включая рамки.

CSS-фильтры

Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять (или не применять) стили к различным элементам. Например, известно, что Internet Explorer применяет правила, использующие селекторы вида * html селектор (фильтр, известный как «star html bug»). Тогда, чтобы заставить и браузеры, использующие блоковую модель W3C и IE, работающего в Quirks mode со своей блоковой моделью, отображать блок #someblock шириной в 100 пикселей и внутренними отступами в 10 пикселей можно написать такой код:

/* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */
#someblock { width: 80px; padding: 10px; }

/* Следующее правило применит только IE. */
* html #someblock { width: 100px; padding: 10px; }

Тем не менее, считается правилом хорошего тона не использовать эти фильтры. Вместо этого рекомендуется использовать условные комментарии (Conditional Comments) для написания специального кода, предназначенного Internet Explorer. Следующим образом, например, можно включить специальные правила CSS, предназначенные для этого браузера:

<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->

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

<!-- Включение стилей для Internet Explorer 5 -->
<!--[if IE 5]><link rel="stylesheet" type="text/css" href="ie5.css"><![endif]-->

<!-- Включение стилей для Internet Explorer меньше 6-й версии -->
<!--[if lt IE 6]><link rel="stylesheet" type="text/css" href="ie5.css"><![endif]-->

См. также

• HTML
• XHTML
• XML
• XSLT
• SGML
• DOM
• JavaScript

Ссылки

Англоязычные

• Описание CSS на официальном сайте W3C(англ.)
• Валидатор CSS(англ.)
• Демонстрация возможностей CSS-верстки(англ.)
• Основы CSS. Переводы(англ.)
• 40 типовых CSS-шаблонов страниц(англ.)
• Таблицы поддерживаемых браузерами возможностей CSS(англ.)
• Различные блоковые модели CSS(англ.)
• Описание условных комментариев для Internet Explorer на сайте Microsoft(англ.)
• Подборка ссылок на учебники, справочники, статьи, конструкторы и примеры форматирования в формате css(англ.)
• CSS3 Preview - Демонстрация новых возможностей CSS3.(англ.)

Русскоязычные

• Описание синтаксиса, типов данных, свойств и прочих конструкций CSS 2.0 (с примерами)(русск.)*
• Webmascon.com, раздел «Вёрстка». Статьи о правильном использовании CSS(русск.)
• HTML.net - Изучайте CSS(русск.) Рекомендован w3.org
• СSS-Арт - Рисование средствами CSS(русск.)
• HTML, CSS и создание сайтов(русск.)
• Статьи по CSS(русск.)
• Учебник по CSS1(русск.)
• Справочник по CSS(русск.) в формате wiki/html/chm
• Javascript, CSS, HTML в примерах и статьях(русск.)

Литература

• Энди Бадд, Камерон Молл, Саймон Коллизон Мастерская CSS: профессиональное применение Web-стандартов = CSS Mastery: Advanced Web Standards Solutions ‭. — М.: «Вильямс», 2007. — С. 272. — ISBN 1-59059-614-5^{о книге}
• Расс Уикли Освой самостоятельно CSS. 10 минут на урок = Sams Teach Yourself CSS in 10 Minutes ‭. — М.: «Вильямс», 2006. — С. 256. — ISBN 0-672-32745-7^{о книге}