3.6. Идентификаторы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.

Синтаксис использования идентификатора следующий.

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

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

Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример 7.1). Символ решетки при этом уже не указывается.

<!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">

#help {

position: absolute; /* Абсолютное позиционирование */

left: 160px; /* Положение элемента от левого края */

top: 50px; /* Положение от верхнего края */

width: 225px; /* Ширина блока */

height: 180px; /* Высота блока */

background: #f0f0f0; /* Цвет фона */

}

</style>

</head>

<body>

<div id="help">

Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.

</div>

</body>

</html>

В данном примере определяется стиль тега <DIV>, для которого указан селектор help через параметр id (рис. 3.4).

Рис. 3.4. Результат применения идентификатора

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

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

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

<!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">

P {

color: green; /* Зеленый цвет текста */

font-style: italic; /* Курсивное начертание текста */

}

P#opa {

color: red; /* Красный цвет текста */

border: 1px solid #666; /* Параметры рамки */

background: #eee; /* Цвет фона */

padding: 5px; /* Поля вокруг текста */

}

</style>

</head>

<body>

<p>Обычный параграф</p>

<p id="opa">Параграф необычный</p>

</body>

</html>

Результат данного примера показан на рис. 3.5.

Рис. 3.5. Вид параграфов после применения стиля

В данном примере вводится стиль для тега <P> и для такого же тега, но с указанием идентификатора «opa».

3.7. Правила создания стиля

При написании достаточно объемного CSS-файла следует придерживаться некоторых общих рекомендаций, которые помогут избежать ошибок, сделать код понятным и удобным:

• Пишите все правила для каждого селектора в одном месте. Допускается для каждого селектора добавлять каждый стилевой параметр и его значение по отдельности, как это показано в следующем примере:

TD { background: olive; }

TD { color: white; }

TD { border: 1px solid black; }

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

TD {

background: olive;

color: white;

border: 1px solid black;

}

Форма написания — в одну строку или несколько — зависит от воли автора. Заметим только что, когда каждый параметр занимает отдельную строку, проще отыскивать взглядом нужное значение. Соответственно, быстрее и удобнее происходит редактирование кода CSS.

• Имеет приоритет значение, указанное в коде ниже. Если для селектора вначале задается параметр с одним значением, а затем тот же параметр, но уже с другим значением, то применяться будет значение, которое в коде установлено ниже:

P { color: green; }

P { color: red; }

В данном примере для селектора P цвет текста вначале устанавливается зеленым, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к параметру color.

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

• Начинайте с селекторов верхнего уровня. Учитывая, что многие стилевые свойства элементов наследуются от своих родителей, начинать таблицу стилей лучше именно с селекторов, которые выступают контейнерами для других элементов. В частности, это BODY, TABLE, UL, OL и т.д. Если требуется задать гарнитуру шрифта для всего текста веб-страницы, то надо применить параметр font-family к селектору BODY, как показано в следующем примере.

BODY {

font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта */

font-size: 110%; /* Размер шрифта */

}

Наследование свойств позволяет не повторять многократно одни и те же параметры, если они заданы для селекторов верхнего уровня. Только учтите, что не все атрибуты наследуются и к некоторым из них вроде border, все же приходится обращаться несколько раз.

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

#col1, #col2, #col3 {

font-family: Arial, Verdana, sans-serif; /* Гарнитура шрифта */

font-size: 90%; /* Размер шрифта */

font-weight: bold; /* Нормальное начертание */

color: white; /* Цвет текста */

}

/* Цвет фона для каждого слоя */

#col1 { background: #ebe0c5; }

#col2 { background: #bbe1c4; }

#col3 { background: #add0d9; }

• Используйте идентификаторы и классы. Классы или идентификаторы удобно использовать, когда нужно применить один стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и т.д. Если тег перед именем класса не установлен, то он может добавлять к любому тегу:

.new {

... /* Этот стиль можно использовать с любыми тегами */

}

P.new {

... /* Этот стиль работает только для тега <P> */

}

Класс new в данном примере хотя и один, но стиль определяет для разных элементов, поэтому он различается.

• Применяйте универсальные стилевые параметры. Универсальные параметры задают одновременно сразу несколько значений. Примеры таких свойств: border (вид границы), padding (поля вокруг элемента), margin (отступы вокруг элемента).

Так, параметр padding определяет поля одновременно для всех четырех сторон элемента. Поэтому использование padding: 10px короче и понятнее, чем последовательное добавление аргументов padding-left, padding-top, padding-right и padding-bottom, определяющих поля для каждой стороны. Через padding также можно задать разные значения сверху, справа, снизу и слева. В следующем примере показано использование универсального стилевого атрибута margin.

P {

margin-top: 10px;

margin-right: 30px;

margin-bottom: 5px;

margin-left: 0;

}

P {

margin: 10px 30px 5px 0;

}

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