3.2.2. Таблица глобальных стилей

При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>, как показано в следующем примере.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Глобальные стили</title>

<style type="text/css">

H1 {

font-size: 120%;

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #336;

}

</style>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

В данном примере определен стиль тега <H1>, который затем можно повсеместно использовать на данной веб-странице.

Отметим, что таблица глобальных стилей в принципе может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.

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

Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут тега style, а его значения указываются с помощью языка таблицы стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Внутренние стили</title>

</head>

<body>

<h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;

color: #336">Заголовок</h1>

</body>

</html>

В данном примере стиль тега <H1> задается с помощью параметра style, в котором через точку с запятой перечисляются стилевые атрибуты.

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

Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис.

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

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в следующем примере показаны две разновидности оформления селекторов и их правил:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Использование стилей</title>

<style type="text/css">

h1 { color: #a6780a; font-weight: normal; }

H2 {

color: olive;

border-bottom: 2px solid black;

}

</style>

</head>

<body>

<h1>Заголовок 1</h1>

<h2>Заголовок 2</h2>

</body>

</html>

В данном примере свойства селектора H1 записаны в одну строку, а для селектора H2 каждый параметр находится на отдельной строке. Во втором случае легче отыскивать параметры и править их по необходимости, но при этом незначительно возрастает объем данных за счет активного использования пробелов и переносов строк.

Отметим, что имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры,например — terminator4, Titanic2, extra.