Краткий обзор механизма задания стилей

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

Следующий пример демонстрирует задание стиля в заголовке документа: 
<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 используется для задания названия соответсвующего стиля документа. Принципиально предполагается, что просмотрщики WWW страниц (browsers) могут выбирать соответсвующие стили документа из заданных (пока правда они этого делать не умеют).

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

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

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

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

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

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

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

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

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

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

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

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

P {margin-top: -38pt}
P {margin-left: -38pt}
P {margin-right: 38pt}

Использование отступов позваляет сделать наложение текста друг на друга как это сделано в следующем примере: 

<HTML>
<HEAD>
<TITLE>Style Sheets</TITLE>
<STYLE>
  .t1 { color: blue;
          margin-left: 10pt;
          font-size: 28pt;
          font-family: Arial Black }
  .t2 { margin-top: -38pt;
          margin-left: 8pt;
          color: darkblue;
          font-size: 28pt;
          font-family: Arial Black }
</STYLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<DIV CLASS="t1">Объявление</DIV>
<DIV CLASS="t2">Объявление</DIV>

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

Использование команды <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>

Селектор 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, между скобками 

	<STRONG> ... </STRONG>
	<P> ... 	</P>
Например: 
<P><STRONG>This will be lime green</STRONG></P>
This <STRONG>other bit</STRONG> won’t be.
Демонстрация примера

Стиль данной страницы

<STYLE TYPE="text/css">
  BODY {margin-left: 2%;
        margin-right: 2%;
        background: #FFFFFF;
        color: black;
        font-family: sans-serif;}

  H1 {  clear: left;
        margin-top: 2em;
        text-align: center;  }

  PRE { font-family: monospace;}
</STYLE>