Интернет технологии -> HTML / DHTML -> Основы языка разметки гипертекста - HTML

3.6. Форматирование с использованием CSS

Cascading Style Sheets (Каскадные таблицы стилей - CSS) - это специальный язык описания стилей, который обладает гораздо более богатым и функциональным, по сравнению с HTML, набором средств форматирования и управления стилями элементов документа.

С момента разработки CSS, было принято две его спецификации: CSS 1 и CSS 2 (в настоящее время W3C ведет работы над проектом CSS 3). Мы не будем здесь подробно рассматривать язык CSS (для этого у меня нет ни времени, ни полноты знаний), а рассмотрим лишь его основные и часто применяемые элементы. Для детального изучения языка описания каскадных стилей вам необходимо ознакомиться с переводом материалов консорциума W3C, подготовленным на WEBCLUB.RU - Спецификация CSS level 2.

Итак переходим к предмету. Первоначально рассмотрим основные свойства CSS, используемые для управления стилями элементов HTML документов.

Свойства CSS

CSS позволяет манипулировать следующими свойствами элементов:

Свойства шрифта

• font-family - определяет используемый элементом шрифт. Если указать URL(file), то шрифт автоматически установится на компьютер пользователя;
• font-style - стиль шрифта (normal, italic);
• font-variant - варианты отображения шрифта (normal, small-caps);
• font-weight - жирность шрифта (normal, bold, bolder, lighter, значение от 100 до 900);
• font-size - размер шрифта (размер, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger);
• font - обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);

Свойства текста

• word-spacing - расстояние между словами (значение, normal);
• text-decoration - декорация текста (none, underline, overline, line-through, blink);
• letter-spacing - расстояние между буквами (значение, normal);
• vertical-align - позиционирование по отношению к другим элементам стоящим в одном ряду (baseline, sub, super, top-text, top, middle, bottom, bottom-text, %);
• text-transform - изменение текста (none, Capitalize, UPPERCASE, lowercase);
• text-align - положение текста (left, right, center, justify);
• text-indent - отступ (значение, %);
• line-height - отступ сверху (normal, значение, %);

Свойства фон и цвет

• color - цвет элемента (значение);
• backgroung-color - цвет фона элемента (значение);
• background-image - изображение фон (none, URL);
• background-repeat - варианты повторения фонового изображения (repeat, repeat-x, repeat-y, no-repeat);
• background-attachment - возможность прокрутки фонового изображения (scroll, fixed);
• background-position - положение фонового изображения (%ширины%высоты, top, middle, bottom, left, center, right);
• background -обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);

Свойства блока

• margin-top - определяет отступ сверху (значение, %, auto);
• margin-right - определяет отступ справа (значение, %, auto);
• margin-bottom - определяет отступ снизу (значение, %, auto);
• margin-left - определяет отступ слева (значение, %, auto);
• margin - обобщает все вышеперечисленные свойства;
• padding-top - отступ от верхнего border'а (значение, %);
• padding-right - отступ от правого border'а (значение, %);
• padding-bottom - отступ от нижнего border'а (значение, %);
• padding-left - отступ от левого border'а (значение, %);
• padding - обобщает все вышеперечисленные свойства;
• border-top-width - толщина верхнего border'а (значение, thin, medium, thick);
• border-right-width - толщина правого border'а (значение, thin, medium, thick);
• border-bottom-width - толщина нижнего border'а (значение, thin, medium, thick);
• border-left-width - толщина левого border'а (значение, thin, medium, thick);
• border-width - обобщает все вышеперечисленные свойства;
• border-color - Цвет border'а. (значение);
• border-style - стиль border'ов (none, dotted, dashed, solid, double, groove, ridge, inset, outset);
• border-top - обобщает вышеперечисленные свойства для верхнего border'а;
• border-right -обобщает вышеперечисленные свойства для правого border'а;
• border-left - обобщает вышеперечисленные свойства для левого border'а;
• border-bottom - обобщает вышеперечисленные свойства для нижнего border'а;
• border - обобщает все вышеперечисленные свойства;
• width - ширина элемента (значение, %);
• height - высота элемента (значение, %);
• float - расположение элемента (left, right, none);
• clear - расположение других элементов вокруг данного (left, right, both, none);

Классификационные свойства

• display - определяет, как будет отображаться элемент (none, block, inline, list-item);
• white-space - определяет, как будут отображаться пробелы между элементами (normal, pre, nowrap);
• list-style-type - определяет вид list-item маркера в списках (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none);
• list-style-image - задает вид list-item маркера из картинки (none, URL);
• list-style-position - определяет положение маркера в зависимости от list item элемента (inside, outside);
• list-style - обобщает вышеперечисленные свойства;

Свойства элемента

• position - определяет, как будет отображаться элемент по отношению к другим элементам документа (relative, absolute);
• top - определяет позицию элемента TOP относительно элемента родителя (значение, %);
• left - определяет позицию элемента LEFT относительно элемента родителя (значение,%);
• width - определяет ширину элемента (значение, %, auto);
• height - определяет высоту элемента (значение, %, auto);
• overflow - режим отображения содержимого элемента, при несоответствии размера элемента, размеру содержимого (non, clip, scroll);
• visibility - управление видимостью элемента в документе (hidden, " ");

Правила CSS

Лист стилей представляет собой набор правил CSS. Правила задаются в форме простых и групповых селекторов, ID селекторов, правил наследования и правил определения классов элементов, псевдоклассов и псевдоэлементов.

Селекторы

Простейшее правило CSS задается следующим образом:

Селектор { свойство CSS: значение }

Селектор это любой из рассмотренных нами ранее тегов HTML (например BODY, P, H1, LI). Далее в фигурных скобках декларируется значение свойств CSS определяющих стиль данного элемента в документе. Например:

H1 { color:red } - задает стиль заголовкам первого уровня.

Для удобства применения можно декларировать в одном правиле несколько свойств CSS для нескольких селекторов. Например:

BODY { background-color:white; color:black; font-family:Times New Roman; font-style:normal; font-size:10pt } - данное правило задет стиль всему телу документа (вместо атрибутов тега BODY).

H1, H2, H3, H4, H5, H6 { color:black; font-style:italic } - данное правило задает стиль заголовкам всех уровней в документе.

Правила наследования

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

Основной_селектор Вложенный_селектор { свойство CSS: значение }

Например:

P STRONG { color:red; font-weight:bold } - задает стиль для элементов STRONG заключенных в контейнере абзаца.

Кроме этого следует помнить о внутреннем наследовании стилей в документе. Например стиль элемента BODY (в части тех свойств CSS, значения которых не переопределены в персональных правилах вложенных элементов) распространяется на все дочерние элементы и без их перечисления в контекстных селекторах.

Классы элементов

В правилах CSS используется понятие класса. Класс элемента задается следующим образом:

Селектор.Класс { свойство CSS: значение }

Например:

H1.normal { color:black; font-style:normal; font-family:serif } - класс строгого стиля заголовка;

H1.funny { color:blue;font-style:italic; font-family:fantasy } - класс легкомысленного стиля заголовка;

Для использования в HTML документе элемента конкретного класса применяется атрибут CLASS:

<H1 CLASS=normal>Технические параметры устройства DJP67575</H1>

<H1 CLASS=funny>Свежие анекдоты про программистов</H1>

В CSS можно определять классы не связанные с конкретными элементами:

.Класс { свойство CSS: значение }

Например:

.red { color:red } - класс красного стиля элементов;

В HTML документе использование данного стиля выглядит так:

<p>Ничего не получается сказал он и набрал команду <kbd class=red>FORMAT C:</kbd></p>

Псевдоклассы и псевдоэлементы

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

Селектор:псевдокласс { свойство CSS: значение }

Селектор:псевдоэлемент { свойство CSS: значение }

Например вот так можно задать стили для псевдоклассов элемента А:

a:link { color:blue; text-decoration:none } - стиль непосещенных ссылок;

a:active { color:red; text-decoration:underline } - стиль активизированных ссылок;

a:visited { color:navy; text-decoration:none } - стиль посещенных ссылок;

a:hover { color:red; text-decoration:underline } - стиль ссылок над которыми находится курсор-указатель;

a:focus { background-color:silver } - стиль ссылок получивших фокус ввода;

Манипулируя свойствами псевдоклассов можно задать разные стиль для выделенных посещенных и выделенных непосещенных ссылок:

a:focus:visited { background-color:silver } - посещенные;

a:focus:link { background-color:grey } - непосещенные;

А вот так можно задать стиль псевдоэлементу first-letter элемента P:

p:first-letter { color:red; font-weight:bold } - стиль для первой буквы абзаца;

ID селекторы

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

#значение ID { свойство CSS: значение }

Например:

#sample { color:black; font-family:monospace } - id селектор sample

В HTML документе применение данного правила выглядит так:

<P ID=sample>Здесь должен быть программный код примера</p>

Использование листов стилей в документах

Со свойствами и правилами CSS разобрались, но как их применить к конкретному документу ? Рассмотрим три способа:

Внутренние стили

Применение внутренних стилей в документе, основано на использовании тегов <DIV>, <SPAN> и атрибута STYLE.

Атрибут STYLE применяется для определения стиля конкретного элемента HTML документа. Например, вот так можно задать выравнивание по обоим краям для абзаца текста:

<P STYLE="text-align:justify"> Здесь ровный по краям абзац</P>

А вот так можно определить стиль заголовка:

<H1 STYLE="color:red">Красный заголовок</H1>

Тег <DIV> используется для применения заданного в нем стиля на группу элементов документа. Например вот так можно задать левый отступ для фрагмента документа и выровнять фрагмент по обоим краям:

<DIV STYLE="margin-left:20pt;text-align:justify">
<H1>Заголовок 1</H1>
<p>Абзац 11
<p>Абзац 12
<H1>Заголовок 2</H1>
<p>Абзац 21
<p>Абзац 22
</DIV>

С помощью данного тега можно творить чудеса - делать многослойные документы. Многослойные документы можно создавать манипулируя свойствами CSS: position, left, top, visibility. Например вот так можно наложить два заключенных в контейнер <DIV>...</DIV> фрагмента, один на другой в HTML документе.

<DIV STYLE="position:absolute; left:100; top:100">
<H1>Заголовок нижнего слоя</H1>
<p>Абзац 11
<p>Абзац 12
</DIV>

<DIV STYLE="position:absolute; left:100; top:100">
<H1>Заголовок верхнего слоя</H1>
<p>Абзац 21
<p>Абзац 22
</DIV>

Подумайте какие возможности открываются разработчику, ведь элементом слоя может быть и графический файл - элемент <IMG>, а манипулируя свойством visibility слоев документа можно отображать в определенной области документа различное содержимое.

Тег <SPAN> используется для применения заданного в нем стиля на фрагмент элемента документа. Например вот так можно выделить разными цветами элементы предложения, в HTML документах используемых для образования в начальной школе:

<P><SPAN STYLE="color:red">Мы </SPAN><SPAN STYLE="color:blue">пошли</SPAN> за грибами.</P>

В окне броузера отобразится следующая cтрока: Мы пошли за грибами.

Глобальные таблицы стилей

Глобальные стили задаются в контейнере <STYLE>...</STYLE>, помещенным между заголовком и телом документа. Если тип языка описания стилей не задан в заголовке документа мета-записью Content-Style-Type (См. раздел 2.3.) то его необходимо задать при помощи атрибута TYPE, следующим образом:

<STYLE TYPE="text/css"> ... </STYLE>

Вот пример HTML документа с глобальной таблицей стилей. Язык описания стиля задан мета-записью.

<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html">
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Пример таблицы стилейCSS</title>
</head>
<style>
body {background-color:white; color:black;
font-family:Times New Roman, serif;
font-style:normal; font-size:10pt;
text-align:justify}
</style>
<body>
Пример CSS.
</body>
</html>

Связанные таблицы стилей

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

/* таблица стилей - my_style.css */
/* стили тела документа */
body { background-color:white; color:black;
font-family:Times New Roman, serif;
font-style:normal; font-size:10pt;
text-align:justify }
/* стили ссылок */
a:link { color:blue;text-decoration:none } /* ссылки */
a:active { color:red;text-decoration:underline } /* активные */
a:visited { color:navy;text-decoration:none } /* просмотренные */


Связывание файла стиля с документом осуществляется в заголовке документа при помощи тега <LINK> - (См. раздел 2.3.).

<LINK TYPE="text/css" REL="stylesheet" HREF="URL css-файла">

При использовании связанных стилей, можно создавать разные таблицы стилей, для разных форм представления документа. Например вы можете наряду со стандартной таблицей стилей - normal.css создать таблицу стилей c более компактными шрифтами и форматированием, предназначенную для печати - prn.css. Тогда линковка данных таблиц осуществляется следующим образом:

<LINK TYPE="text/css" REL="stylesheet" MEDIA="screen" HREF="style/normal.css">

<LINK TYPE="text/css" REL="stylesheet" MEDIA="print" HREF="style/prn.css">

Атрибут MEDIA указывает броузеру какую таблицу стилей использовать для печати, а какую для просмотра документа.

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

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

Пример 7. Использование CSS. [просмотр примера в окне]

<HTML>
<HEAD>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html">
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Демонстрация возможностей CSS</title>
</HEAD>
<!-- глобальная таблица стилей -->
<style type="text/css">
<!-- стиль ссылок -->
a:link { color:blue; text-decoration:none }
a:visited { color:navy; text-decoration:none }
a:hover { color:red; text-decoration:underline; background-color:#7DC0E8 }
a:active { color:red; text-decoration:underline }
<!-- стиль тела документа -->
body { background-color:white; color:black;
font-family:Times New Roman; font-style:normal; font-size:medium;
text-align:justify }
<!-- стили элементов -->
h1, h2, h3 { text-align:center; background-color:#7DC0E8; width:100% }
hr { color:#7DC0E8; text-align:center; height:4; width:100%}
OL li { list-style-type:decimal }
UL li { list-style-type:square }
#layout1 { position:absolute; left:38%;top:25%; width:173; height:224}
#layout2 { position:absolute; left:2%;top:4%}
<!-- классы элементов -->
p.pdef { text-align:center; font-weight:bold }
.mystyle { text-align:center; color:#7DC0E8; font-size:x-large; font-style:italic }
</style>
<BODY>
<img id=layout1 src="backl.gif" alt="задний план"> <!-- первый слой -->
<div id=layout2> <!-- второй слой -->
<h1>Вот немногое из того, что может CSS</h1>
<p>Кроме отделения содержания документа от формы представления, данный пример явлется наглядной демонстрацией многослойного HTML документа. Данный документ содержит два слоя, размещение которых описаны при помощи ID селекторов CSS в глобальной таблице стилей. <p>Первым слоем документа явлется графическое изображение, заданное в теге <b>IMG</b> c атрибутом <b>ID</b> равным ID селектору - <kbd>layout1</kbd>. Стиль данного элемента (<i>размер и положение на странице</i>) заданы свойствами CSS в ID селекторе - <kbd> layout1</kbd>.
<p>Элементами второго слоя, явлются все текстовое ссодержимое документа: вышепреведенный заголовок, содержимое абзацев, линия разделитель и строка содержащая ссылку на адрес вебмастера. Положение данного слоя на странице описано в ID селекторе - <kbd>layout2</kbd>, кроме этого т.к. данный слой является элементом тела документа, то его содержимое наследует свойства элементов тела документа, заданные в глобальной таблице стилей.
<p class=mystyle>Желаю успеха в изучении CSS !</p>
<hr>
<p class=pdef>© 2001 Вебмастер <A HREF="mailto:myname@mail.ru"><nobr>Свзатьс с вебмастером</nobr></A>
</div>
</BODY>
</HTML>


Сочетание знаний по использованию CSS с методами разработки интерактивных сценариев управления для Web-страниц (например на JavaScript) позволит вам разрабатывать интерактивные документы (См. раздел 5.2.) стандарта DHTML (Dinamic HTML).

В заключении отметим, что несмотря на то, что использование CSS рекомендовано W3C, а стандарты этого уважаемого органа должны выполнять современные броузеры, фирмы производители броузеров (Microsoft & Netscape) по разному трактуют важность и значимость многих свойств CSS. Одни свойства не работают в MSIE другие не поддерживаются Navigator`ом (это следствие нездоровой конкуренции - так спешат, что забывают о некоторых мелочах). Все это очень меня раздражает.