CSS - Каскадные Таблицы Стилей

Задание стиля страницы (Style Sheet) возможно либо в заголовке документа: в разделе <HEAD> с помощью команды <STYLE>, либо непосредственно в тексте с помощью дополнительного атрибута STYLE для команд разметки текста (<P>, <H1> и т.п.)

Синтаксис стиля

Синтаксис стиля не слишком сильно отличается от синтаксиса HTML, он записываются следующим образом:

 селектор {атрибут: значение}

Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары атрибут:значение, где ":" является заменителем знака "=".

Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее:

 H2 {color: red} 

Селекторы могут описывать следующие элементы:

В том случае, если свойств у команды предположительно много, то их разделяют точкой с запятой:

H2 {color: red;  font-size: 15pt}

Если какая либо команда в документе вставлена внутри другой команды, то она наследует все свойства, и для того, чтобы задать ей особые свойства необходимо использовать следующий синтаксис:

 H3 B {color: green} 

Здесь назначается зеленый цвет для текста выделенного командами <B> и </B>, если он является заголовком третьего уровня.

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

<HTML>
<HEAD>
<TITLE>Style Sheets</TITLE>
<STYLE TYPE="text/css" TITLE="Bright Colours">
BODY { background: #FFFFFF;}
P { color: blue;
    font-size: 12pt;
    font-family: Arial}

H1 { color: red;
     font-size: 18pt}

</STYLE
</HEAD>
<BODY>
...

Атрибуты TYPE и TITLE команды <STYLE> являются необязательными. Атрибут TYPE задает определение MIME (Content-Type: "text/css") а атрибут TITLE используется для задания названия соответсвующего стиля документа.

Демонстрация примера

Определение стиля обязатально требует задания начала и конца команды
<STYLE> ... </STYLE>

Основные команды

Задание цвета

P {color: #800000} /* RGB - color

Задание размера

P {font-size: 32pt} /* pt - point, px - pixel

Задание курсива

P {font-style: italic} 

Задание жирного шрифта

P {font-weight: bold} 

Задание семейства шрифтов

P {font-family: Arial} /* имя семейства шрифтов

Задание размещения

P {text-align: center} /* center/left/right

Задание отступов

P {margin-top: -10pt}
P {margin-left: -20pt}
P {margin-right: 15pt}
P {text-indent: 5em }  /* задание отступа в начале абзаца

Использование команды <LINK> позволяет задать внешний стиль документа, например,

<LINK REL="stylesheet" TYPE="text/css"
HREF="http://www.foo.org/sheet" TITLE="coolsheet">

Динамическое изменение стиля

Стиль соответсвующей команды языка HTML может быть изменен в ходе выполнения документа при помощи атрибута STYLE соответсующей команды разметки текста, например,

<H1 STYLE="color: #FF0000">Заголовок </H1>

Заголовок

<H1 STYLE="color: #00FF00; text-align: right">Заголовок 1</H1>

Заголовок 1

<H1 STYLE="text-align: left">Заголовок 2</H1>

Заголовок 2

<H1 STYLE="font-size: 26pt">Заголовок 3</H1>

Заголовок 3

Селекторы

Другой способ выбора стиля в документе связан с предопределением различных стилей в заголовке документа. Для выбора стиля используется два вида селекторов: CLASS и ID (идентификатор).

Использование селекторов зависет от способа декларации стиля в заголовке.

Селектор CLASS

Задание выбора стиля по методу CLASS мозможно двумя способами:

  1. Задание имени стиля конкретной команды, например,
    P.redtext { color: #FF0000}
    

    Тогда соответствующий стиль параграфа включается командой
    <P CLASS="redtext">text</P>
    

  2. Задание имени стиля, которй может быть использован для произвольной команды разметки, например,
    .redtext { color: #FF0000}
    

    Тогда соответствующий стиль включается командой
    <H1 CLASS="redtext">text</H1>
    

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

<HTML>
<HEAD>
<TITLE>Style Sheets</TITLE>
<STYLE>
  .t1 { color: darkmagenta;
          margin-left: 10pt;
          font-size: 30pt;
          font-weight: bold;
          font-family: Courier New }
  .t2 { margin-top: -37pt;
               margin-left: 8pt;
               color: magenta;
               font-size: 30pt;
               font-weight: bold;
               font-family: Courier New }
</STYLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<DIV CLASS="t1">Объявление</DIV>
<DIV CLASS="t2">Объявление</DIV>
<p>
<DIV class="t1">Объявление</DIV>
<P>&nbsp;
<p>
<DIV CLASS="t2">Объявление</DIV>

Демонстрация примера

Селектор ID

Принцип работы селектора ID аналогичен принципу работы селектора CLASS. Идентификатор ID должен быть уникальным и используется для задания имени стиля произвольной команды HTML (является более ранней командой языка HTML 3).

Определяется в заголовке документа
#redtext { color : #FF0000}

Соответствующий стиль включается командой

<P ID="redtext">some text</P> would be coloured red.

Команда SPAN

Команда SPAN позволяет менять стиль вывода текста внутри одной команды (внутри параграфа), например, следующий текст будет отбражен красным цветом. Это изменение сделано командой:

<SPAN STYLE="color: #FF0000">будет отбражен красным цветом</SPAN>

Комибинация стилей команды

Следующее определение в заголовке документа переопределяет стиль команды STRONG

STRONG { color: #00FF00}

И если в документе встречается текст в скобках

<STRONG> ... </STRONG>

То данный текст будет показан "зеленым" цветов и с соответвующим выделенем для команды STRONG (по-умолчанию - жирный текст)

Задание стиля
P STRONG { color: #00FF00}

устанавливает зеленый цвет для параграфа помеченного командой STRONG, между скобками
<P> ... <STRONG> ... </STRONG> ...</P>
Например:

<P><STRONG>Этот текст ярко зеленый</STRONG></P>
А этот - <STRONG>основного</STRONG> цвета.

Демонстрация примера

Подробнее об элементах CSS