CSS

Материал из Википедии — свободной энциклопедии

HTML
XHTML Каскадные таблицы стилей (CSS) Кодировки символов Сравнение движков отображения Динамический HTML Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Скрипты в HTML Юникод и HTML Цвета в Web (Web colors) WWW-Консорциум (W3C)

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

Содержание

1 Обзор
2 CSS-вёрстка
3 История
4 Включение в HTML
- 4.1 XHTML
5 Поддержка браузерами
- 5.1 Различные блоковые модели
- 5.2 CSS-фильтры
6 См. также
7 Ссылки
8 Литература

[править] Обзор

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

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

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

Стандарт 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 от 11 Апреля 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]-->

[править] См. также

[править] Ссылки

[править] Литература

Категории: Языки разметки | Языки стилей | Стандарты Интернета

CSS