Способы включения CSS в (X)HTML

Тема 5-6. Каскадные листы стилей (CSS).

1. Общие сведения о CSS.

2. Стандарты CSS.

3. Базовый синтаксис.

4. Способы включения CSS в (X)HTML.

5. Единицы измерения размеров.

6. Типы селекторов.

7. Правила каскадирования.

8. div и span-блоки

9. Основные свойства

10. Псевдоклассы

Общие сведения о CSS.

CSS (Cascading Style Sheets, каскадные листы/таблицы стилей) — это язык для описания стилей, которые задают внешний вид документов, написанных при помощи языков разметки, в частности при помощи языка (X)HTML.

CSS позволяет устанавливать цвета, шрифты, отступы, фоны, размеры, управлять местоположением (позиционированием) и обтеканием элементов, реализовывать различные оформительские решения.

Как известно, (X)HTML также имеет возможности управления внешним видом документа, но CSS предоставляет намного больше возможностей и позволяет описывать оформление документа более систематизировано.

Идея использования (X)HTML совместно с CSS состоит в разделении структуры и оформления документа.

При этом (X)HTML используется только для описания логической структуры документа (выделения структурных частей, заголовков, подзаголовков, абзацев, таблиц, гиперссылок и других базовых логических элементов), а внешний вид (цвета, фоны, шрифты, размеры, отступы и т.п.) описывается при помощи стилей CSS.

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

Разделение оформления и структуры документа дает такие преимущества:

· возможность параллельной разработки/модификации документа и его оформления/дизайна.

· расширенные возможности по сравнению с (X)HTML;

· возможность одновременного изменения внешнего вида множества документов при помощи одной таблицы стилей;

· возможность установки различного форматирования для различных носителей информации (экран, печать и т. п.).

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

Стандарты CSS.

При разработке стандарта CSS Консорциум Всемирной паутины принял решение классифицировать новые стандарты CSS не по версиям, как принято в разработке программного обеспечения, а по уровням.

Стандарты CSS классифицируются по уровням.

Каждый новый уровень CSS представляет собой более развернутый предыдущий уровень и, следовательно, включает все предыдущие уровни.

Существующие на сегодняшний день уровни CSS перечислены в таблице ХХ.

Таблица ХХ. Уровни CSS

Уровень CSS	Статус документа W3C	Дата принятия документа
CSS1 (уровень1)	рекомендация	17 декабря 1996 г., отредактирована 11 апреля 2008 г.
CSS2 (уровень 2)	рекомендация	12 мая 1998 г.
CSS2.1 (уровень 2, редакция 1)	кандидат на рекомендацию	19 июля 2007 г.
CSS3 (уровень 3)	в стадии разработки

Стандарт СSS1 предоставляет следующие возможности:

· установка параметров шрифтов (гарнитура, размер, жирный и курсивный стиль, цвет);

· выбор цвета текста, фона, рамок и других элементов документа;

· установка атрибутов текста (межсимвольный интервал, расстояние между словами, высота строки);

· свойства блоков (высота, ширина, величина внутренних и внешних отступов, толщина, стиль и цвет рамки);

· свойства позиционирования и обтекания элементов;

Стандарт CSS2 построен на основе CSS1, следовательно включает все возможности стандарта CSS1 и предоставляет такие нововведения:

· блочная верстка документов (абсолютное, относительное, фиксированное позиционирование);

· установка различного форматирования для различных типов носителей (монитор, принтер, мобильное устройство);

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

· установка различного форматирования при печати для четных и нечетных страниц;

· установка минимальной и максимальной высоты и ширины объектов;

· выбор внешнего вида курсора мыши для элементов документа;

Стандарт CSS2.1 представляет собой CSS2 с исправлениями найденных в стандарте ошибок.

CSS3 на текущий момент находится в стадии разработки. Новый стандарт будет включать:

· селекторы нового типа, позволяющие форматировать объекты в зависимости от выполнения некоторых условий (например, возможность применять стиль только к первому абзацу, следующему после заголовка);

· улучшенные средства управление цветом, включая гамма-коррекцию;

· возможность размещения комментариев при использовании японского и неко­торых других азиатских языков;

· возможность отображения данных в виде нескольких колонок;

· новые свойства, предназначенные для создания пользовательского интерфейса;

· свойства, ориентированные на работу с мобильными устройствами;

· расширенные средства поддержки масштабируемой векторной графики (Scalable Vector Graphics - SVG);

· дополнительные стили для форматирования списков на различных языках;

· многочисленные новшества, предназначенные для управления размещением фоновых изображений, отображения текстов, форматирования строк и т.д.

Кроме уровней, стандарты CSS также классифицируются по профилям. Профиль – это совокупность правил CSS, которые предназначены для определенных типов устройств. Например, существуют профили для принтеров, мобильных и TV-устройств (таблица ХХ).

Таблица ХХ. Профили CSS

Профиль CSS	Статус документа W3C	Дата принятия документа
CSS Mobile Profile 2.0 (для мобильных устройств)	рекомендация	1 августа 2008
CSS Print Profile (для принтеров)	в стадии разработки
CSS TV Profile (для ТВ-устройств)	кандидат на рекомендацию	14 мая 2003

 

Базовый синтаксис.

Каждый CSS-документ состоит из описания стилей. Стиль – это набор параметров, задающих представление некоторого элемента веб-страницы, например конкретного тега.

Стили описываются в такой форме:

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

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

…

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

Селектор – это имя стиля.

Пример CSS-документа:

body { font-family: Arial;

background: URL(foto-bg.jpg); }

h1, h2 { text-align: center; }

p { text-align: justify; }

strong { text-decoration: underline; }

Способы включения CSS в (X)HTML.

Описание таблиц стилей может располагаться в отдельном файле с расширением CSS или непосредственно в (X)HTML-документе.

Таблицы стилей, размещаемые в (X)HTML-документе называют локальными, а хранящиеся в отдельных файлах – внешними.

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

Имеется три основных способа применения CSS-стилей к (X)HTML-документу. Перечислим их в порядку предпочтения:

1. Подключение внешнего CSS-файла.

Существуют три способа применения таблиц стилей к (X)HTML-документе:

1. использование внешних таблиц стилей;

2. использование внутренних таблиц стилей;

3. использование встраиваемых стилей.

Место определения	Синтаксис
Внешний CSS-файл	<head> … <link rel="stylesheet" type="text/css" href="имя файла.css"> … </head>
Внешний CSS-файл	<head> … <style type="text/css" media="all">@import "имя файла.css"; </style> … </head>
В (X)HTML-файле	<head> … <style type="text/css"> body { color: red; } </style> … </head>
Непосредственно в теге	<p style="font-size: 21px; color: green;">Текста абзаца</p>

Типы селекторов.

В качестве селекторов (имен стилей) могут использоваться:

· универсальный селектор

· (X)HTML-теги;

· классы определяемые пользователем;

· идентификаторы, определяемые пользователем;