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

CSS (англ. CascadingStyleSheets -- каскадные таблицы стилей) -- технология описания внешнего вида документа, написанного языком разметки.

Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

Обзор

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

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

Авторские стили (информация стилей, предоставляемая автором страницы) в виде:

-Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.

- Встроенных стилей -- блоков CSS внутри самого HTML-документа.

- Внешних таблиц стилей, то есть отдельного файла.css, на который делается ссылкав документе.

Пользовательские стили

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

Стиль браузера

- Стандартный стиль, используемый браузером по умолчанию для представления элементов.

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

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

селектор, селектор {

свойство: значение;

свойство: значение;

свойство: значение;

}

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

Приоритеты рассчитываются таким образом (от большего к меньшему):

1. свойство задано при помощи!important;

2. стиль прописан напрямую в теге;

3. количество идентификаторов (#id) в селекторе (чем больше, тем больше приоритет);

4. количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе;

5. количество имён тегов в селекторе.

Кроме того, имеет значение относительный порядок расположения свойств -- свойство, указанное позже, имеет приоритет.

Примертаблицыстилей:

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.

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

История

CSS -- одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.

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

Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с БертомБосом он стал развивать CSS.

В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях.

В середине 1990-х Концорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Уровень 1 (CSS1)

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

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

Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.

Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)

Выравнивание для текста, изображений, таблиц и других элементов.

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

Уровень 2 (CSS2)

Рекомендация W3C, принята 12 мая 1998 года. Построена на CSS1 с сохранением обратной совместимости. Добавление к функциональности:

Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.

Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).

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

Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.

Расширенный механизм селекторов.

Указатели.

Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.

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

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

Уровень 3 (CSS3)

Разрабатываемая версия.

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

Включение в HTML

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

1.1. Ссылка в HTML, а сами CSS в отдельном файле:

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

1.2. Еще один способ подключить CSS, находящиеся в отдельном файле:

<style type="text/css" media="all">@import "style.css";</style>

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

<styletype="text/css">

body {

color: red;

}

</style>

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

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

XML

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

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

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

Наиболееполноподдерживающимистандарт CSS являютсябраузеры, работающиена Gecko (Mozilla Firefox идр.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera).

Бывший когда-то самым распространённым браузеромInternetExplorer 6 поддерживает CSS далеко не полностью.

Вышедший спустя 7 лет после своего предшественника InternetExplorer 7 хотя и значительно улучшил уровень поддержки CSS, но всё ещё содержит значительное количество ошибок

В InternetExplorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично -- CSS 3.

Для проверки поддержки браузером различных частей стандарта CSS был разработан тест Acid. Его вторая версия называется Acid2, а третья, соответственно, Acid3.

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

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

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

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

CSS-фильтры

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

/* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */

#someblock{ width: 80px; padding: 10px; }

/* Следующее правило применит только IE6. */

* html #someblock { width: 100px; padding: 10px; }

Ещё одним способом выборочного применения правил для InternetExplorer является

Безопасность

Все поддерживаемые версии InternetExplorerна конец 2010 года были уязвимы: при обработке браузером каскадных таблиц стилей (CSS) может возникнуть неинициализированная память, используемая затем для удаленного запуска на компьютере пользователя вредоносного кода

CSS Framework

CSS Framework, (также Webdesignframework) -- это заранее подготовленная css-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же как и библиотеки скриптовых языков программирования, CSS-фреймвёрки, обычно имеющие вид внешнего.css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя не искушенному в тонкостях вёрстки программисту или дизайнеру правильно создать xhtml-макет.

Расширения CSS. Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах. В стандартном CSS нет возможностей наследования стилей, вычисляемых значений и прочих зависимостей.

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

- во время запуска страницы на стороне клиента (средствами JavaScript)

- во время запуска страницы на стороне сервера

- во время вёрстки сайта средствами специального компилятора.