Ідентифікатор (званий також « ID селектор ») визначає унікальне ім'я елемента, яке використовується для зміни його стилю і звернення до нього через скрипти.
Синтаксис застосування ідентифікатора наступний.
При описі ідентифікатора спочатку вказується символ решітки (#), потім йде ім'я ідентифікатора. Воно повинно починатися з латинської символу і може містити в собі символ дефіса (-) і підкреслення (_). Використання російських букв в іменах ідентифікатора неприпустимо. На відміну від класів ідентифікатори повинні бути унікальні, іншими словами, зустрічатися в коді документа лише один раз.
Звернення до ідентифікатора відбувається аналогічно класам, але в якості ключового слова у тега використовується атрибут id, значенням якого виступає ім'я ідентифікатора (приклад 9.1). Символ решітки при цьому вже не вказується.
Приклад 9.1. Використання ідентифікатора
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Ідентифікатори </title>
<style>
#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.2 показано використання ідентифікатора стосовно тегу <p> .
Приклад 9.2. Ідентифікатор спільно з тегом
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Ідентифікатори </title>
<style>
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.
В даному прикладі вводиться стиль для тега <p> і для такого ж тега, але із зазначенням ідентифікатора opa .
Питання для перевірки
1. В яких ситуаціях імена ідентифікаторів і класів можна називати однаково?
- Ніколи, це неприпустимо.
- У будь-якому випадку.
- Тільки, якщо вони застосовуються до одного елементу.
- Тільки, якщо вони застосовуються до різних елементів.
- Тільки, якщо в коді вони зустрічаються один раз.
2. Яке ім'я ідентифікатора написано неправильно?
- id_1id1
- aaa-1-1-1
- L0g0
- bla-bla
- кrevedko
3. Яка помилка міститься в наступному коді?
<div class="frame1"> <div id="_nav"> <a href="209.html"> Підключення до MySQL через PHP </a> </div> <div id="_nav"> <a href="213.html"> Створення таблиць в phpMyAdmin </a> </div> <div id="_nav"> <a href="211.html"> Структура бази даних </a> < ;/div> </div>
- Ім'я класу написано невірно.
- Імена ідентифікаторів написані невірно.
- Неправильне вкладення тегів.
- повторюються ідентифікатори.
- Різні ідентифікатори для однотипних елементів.
4. Як коректно задати стиль для тега <div> з ідентифікатором loom?
- loom {font-size: bold; }
- div {font-size: bold; }
- .loom {font-size: bold; }
- #loom #{font-size: bold; }
- #loom {font-size: bold; }
Відповіді
1. У будь-якому випадку.
2. кrevedko
3. Повторювані ідентифікатори.
5. #loom {font-size: bold; }