CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки.
Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL. |
||
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
|
||
CSS при отображении страницы может быть взята из различных источников:
Авторские стили (информация стилей, предоставляемая автором страницы) в виде: Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе. Встроенных стилей — блоков CSS внутри самого HTML-документа. Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style. Пользовательские стили Локальный 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-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы. |