CSS
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология оформления веб-страниц, элемент концепции DHTML. Таблицы (точнее — списки) CSS cлужат для оформления преимущественно HTML- и XHTML-документов, но иногда используются и для других документов, структурированных с помощью XML (например, в браузере «Mozilla» для оформления элементов графического интерфейса, XUL).
CSS вёрстка
До появления CSS оформление веб-страниц размечалось внутри самого содержимого веб-страниц. С появлением CSS стало возможным принципиальное отделение информации документа от его оформления. За счёт этого нововведения стало возможно лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Преимущества CSS вёрстки:
- Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет расчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
- Уменьшение размеров страниц. Поскольку CSS-файл кешируется браузером, загружается только сама страница, которая значительно меньше по размерам, нежели при применении табличной вёрстки.
- Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
- Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при скроллинге страницы.
История
Уровень 1 (CSS1)
Рекомендация Консорциума Всемирной паутины (W3C) принята 17 декабря 1996, пересмотрена 11 января 1999.
Уровень 2 (CSS2)
Рекомендация W3C принята 12 мая 1998. Построена на CSS1 с сохранением обратной совместимости.
Добавленние к функциональности:
- Блочная верстка. Появились относительное, абсолютное и фиксированное позицирование. Позволяет управлять размещением элементов по странице без табличной верстки
- Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК)
- Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта)
- Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати
- Расширенный механизм селекторов
- Курсоры
- Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента
- И другое…
К сожалению, самый распространённый на данный момент браузер Internet Explorer поддерживает CSS2 не полностью.
Уровень 2.1 (CSS2.1)
Возможная рекомендации W3C от 25 февраля 2004. Построена на 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>
Для включения CSS в XML существует ещё один способ:
<?xml-stylesheet href="style.css" type="text/css"?>