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

Использование каскадных таблиц стилей (CSS – Cascading Style Sheets) позволяет существенно расширить возможности HTML. С использованием таблиц стилей можно определить практически все – от начертания шрифта до положения рисунка на странице. Основное преимущество использования таблиц стилей является отделения представления (внешнего вида) HTML документа от его содержания (структуры документа). Таблицы стилей позволяют существенно уменьшить количество используемых тегов, отвечающих за представление документа, что улучшает “прозрачность” HTML документа и облегчает его редактирование.

Преимущество использования таблиц стилей можно продемонстрировать на следующем примере. Например, в HTML документе используются различные абзацы, имеющие различное выравнивание, начертание, размер и цвет шрифта. Без использования таблиц стилей для каждого абзаца необходимо привести набор соответствующих необходимых тегов.

<P ALIGN=”CENTER”><I><FONT FACE=”Arial” COLOR=”red”>

Первый абзац </FONT></I></P>

<P ALIGN=”RIGHT”><B><I><FONT FACE=”Tahoma” COLOR=”green”>

Второй абзац </FONT></B></I></P>

<P ALIGN=”CENTER”><I><FONT FACE=”Arial” COLOR=”red”>

Третий абзац </FONT></I></P>

<P ALIGN=”RIGHT”><B><I><FONT FACE=”Tahoma” COLOR=”green”>

Четвертый абзац </FONT></B></I></P>

Можно вынести определения внешнего вида текста в заголовок документа, пометив их, например, как style_1 и style_2.

<STYLE>

P.style_1 {color: ”red”; font-family: ”Arial”;

font-style: italic; text-align: ”center”}

P.style_2 {color: ”green”; font-family: ”Tahoma”;

font-style: italic; font-weight: ”bold”;

text-align: ”right”}

</STYLE>

В результате в теле документа останутся только теги логического форматирования текста.

<P CLASS=”style_1”>Первый абзац</P>

<P CLASS=”style_2”>Второй абзац</P>

<P CLASS=”style_1”>Третий абзац</P>

<P CLASS=”style_2”>Четвертый абзац</P>

Парный тег <STYLE>…</STYLE> определяет таблицу стилей. Он может содержать необязательный атрибут TYPE, который принимает обязательное значение “text/css”.

Определение стиля может содержать несколько атрибутов, которые отделяются друг от друга точкой с запятой (;).

Стиль можно создать, не привязывая его ни к какому тегу:

.style_3 {color:”blue”; font-size: 14pt}

И теперь его можно использовать в любых тегах.

<P CLASS=”style_3”>Это абзац</P>

<I CLASS=”style_3”>Наклонный текст</I>

<CENTER CLASS=”style_3”>Выравнивание по центру</CENTER>

Таблицу стилей можно вынести в отдельный файл (как правило, с расширением css) и использовать сразу в нескольких документах. При этом в заголовке HTML документа необходимо разместить тег LINK с атрибутом REL= “stylesheet”:

<LINK REL=”stylesheet” HREF=”Адрес файла таблицы стилей”>

Дата добавления: 2015-07-10