Идентификаторы - Самоучитель CSS - WEB - Статьи

Главная » Статьи » WEB » Самоучитель CSS

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

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

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

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

При описании идентификатора вначале указывается символ решетки (#), затем идет имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

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

Пример 9.1. Использование идентификатора

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!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=utf-8">
 <title>Идентификаторы</title>
 <style type="text/css">
 #help {
 position: absolute; /* Абсолютное позиционирование */
 left: 160px; /* Положение элемента от левого края */
 top: 50px; /* Положение от верхнего края */
 width: 225px; /* Ширина блока */
 padding: 5px; /* Поля вокруг текста */
 background: #f0f0f0; /* Цвет фона */ 
 }
 </style>
 </head> 
 <body> 
 <div id="help">
 Этот элемент помогает в случае, когда вы находитесь в осознании того
 факта, что совершенно не понимаете, кто и как вам может помочь. Именно
 в этот момент мы и подсказываем, что помочь вам никто не сможет.
 </div>

 </body> 
</html>

В данном примере определяется стиль тега <div> через идентификатор с именем help (рис. 9.1).

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

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

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

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

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

Пример 9.2. Применение идентификатора совместно с тегом

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!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=utf-8">
 <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>

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

Вид текста после применения стиля

Рис. 9.2. Вид текста после применения стиля

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

Категория: Самоучитель CSS | Добавил: expert1 (31.01.2013)

Просмотров: 337 | Теги: CSS, Самоучитель | Рейтинг: 0.0/0

Всего комментариев: 0

Главное меню

Вход

Статистика

Стихи

Рекомендуем

Загрузки

Проекты