Создание сайта. CSS по шагам. Идентификаторы

Работа в интернете, работа на дому. Интернет обучение.

Шаг 7. Идентификаторы

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#help {
position: absolute; /* Абсолютное позиционирование */
left: 160px; /* Положение элемента от левого края */
top: 120px; /* Положение от верхнего края */
width: 225px; /* Ширина блока */
height: 180px /* Высота блока */
}
</style>
</head>

<body>
<p id="help">
Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.
</p>

</body>
</html>

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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>

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

Обычный параграф

Параграф необычный

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

Использование идентификатора дает возможность изменять некоторые параметры элемента, например, делать его невидимым или видимым по желанию с помощью скриптов (пример 7.3).

Пример 7.3. Изменение видимости слоя

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#descr {
position: relative; /* Относительное позиционирование */
visibility: hidden /* Прячем содержимое слоя */
}
</style>

<script type="text/javascript">
function hiddenLayer() {
document.getElementById("descr").style.visibility = "hidden";
}

function showLayer() {
document.getElementById("descr").style.visibility = "visible";
}
</script>
</head>
<body>

<table width="90%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td width="20%" align="center"><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img src="button.gif" width="98" height="33" border="0"></a></td>
<td>
<p id="descr">Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</p>
</td>
</tr>
</table>

</body>
</html>

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

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

HTML по шагам

• Любой может сделать сайт.
• Шаг 1. Основные понятия
• Шаг 2. Создание HTML-документа
• Шаг 3. Особенности HTML
• Шаг 4. Структура HTML-кода
• Шаг 5. Теги HTML
• Шаг 6. Работа с текстом
• Шаг 7. Ссылки
• Шаг 8. Якоря
• Шаг 9. Изображения
• Шаг 10. Списки
• Шаг 11. Таблицы

CSS по шагам

• Шаг 1. Что такое CSS
• Шаг 2. Подключение CSS
• Шаг 3. Типы носителей
• Шаг 4. Базовый синтаксис
• Шаг 5. Селекторы тегов
• Шаг 6. Классы
• Шаг 7. Идентификаторы
• Шаг 8. Комментарии
• Шаг 9. Контекстные селекторы
• Шаг 10. Соседние селекторы
• Шаг 11. Дочерние селекторы
• Шаг 12. Селекторы атрибутов
• Шаг 13. Универсальный селектор
• Шаг 14. Группирование
• Шаг 15. Наследование
• Шаг 16. Псевдоклассы
• Шаг 17. Псевдоэлементы
• Шаг 18. Правила создания стиля