Идентификаторы и классы
Идентификаторы
Каждый НТМL-элемент может иметь атрибут id. Он предназначен для идентификации какого-либо конкретного тега. В пределах всей HTML-страницы должен существовать только один тег с определенным значением атрибута id. Наличие нескольких элементов с одинаковым значением id не допускается и может привести к ошибке. Значение атрибута id может состоять из букв латинского алфавита, цифр, знака подчеркивания и дефиса. Причем значение атрибута может начинаться с латинской буквы или со знака подчеркивания (но не с цифры или другого символа). Кроме того, значения атрибута id чувствительны к регистру. Атрибут id называют глобальным, поскольку он может быть использован с любыми НТМL-элементами.
В CSS id-селектор содержит символ (#), непосредственно за которым следует значение атрибута id.
Например, следующий id-селектор сопоставляется элементу <h2>, значение атрибута id которого равно chapter7:
#chapter7 {background-color:#FF00FF;}После описания идентификатора его следует включить в состав тега:
<h2 id="chapter7">Заголовок второго уровня с id</h2>Пример: Применение идентификатора
Классы
Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута id, множеству элементов может быть присвоено общее имя класса. Присваивая элементам имя одного класса, вы можете применить стили ко всем таким элементам одновременно с помощью единственного правила стилей. Чтобы сделать это, следует воспользоваться атрибутом class. Его значение должно описывать, к какому классу принадлежит элемент.
Класс похож на идентификатор, но вместо символа (#) перед именем класса указывается точка (.):
<style>
h2.boldfont {font-weight: bold;}
h2.italicfont {font-style: courier;}
</style>После описания класса его следует включить в открывающий тег элемента:
<h2 class="boldfont">Заголовок второго уровня</h2>Пример: Применение атрибутов id и class
Заголовок второго уровня с id и class=test
Заголовок второго уровня с class=test
Заголовок второго уровня
Заголовок второго уровня с class=test orange
| Обратите внимание, что один и тот же элемент может иметь одновременно класс и идентификатор. Также любому тегу может быть присвоено сразу несколько классов. В этом случае они указываются через пробел в значении атрибута class. |
Задачи
-
Атрибут class
Примените класс test к элементу <div>.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> .test { background-color:blue; color:white; } </style>
</head>
<body> <div> <h2>Атрибуты id и class</h2> <p>Атрибут id (идентификатор) используется для идентификации.</p> <p>Атрибут class (класс) используется для классификации.</p> </div> </body>
</html>
-
Селектор класса
Создайте селектор класса с именем "test". Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элементов, к которым будет применен класс будет красным (red), а второе, что фон этих элементов будет желтым (yellow). Присвойте имя класса "test" заголовку <h2> и встроенному элементу <span>.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> ... </style>
</head>
<body> <h2>Атрибут class</h2> <p>Атрибут <span>class (класс)</span> используется для классификации.</p> </body>
</html>
-
Цвет для идентификатора
Напишите стилевое правило к абзацу с идентификатором id="red", благодаря которому цвет текста этого абзаца станет красным.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> ... </style>
</head>
<body> <h2>Это заголовок</h2> <p id="red">Этот параграф будет выделен красным цветом.</p> <p>Этот параграф НЕ будет выделен красным цветом.</p> </body>
</html>
-
Цвет для класса
Напишите стилевое правило для класса class="red", благодаря которому цвет текста элемента, к которому применен класс станет красным.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> ... </style>
</head>
<body> <h2>Это заголовок</h2> <p class="red">Этот параграф будет выделен красным цветом.</p> <p>Этот параграф НЕ будет выделен красным цветом.</p> </body>
</html>
-
Селектор идентификатора
Создайте селектор id с именем "redlow". Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элемента, к которым будет применен id будет красным (red), а второе, что фон этого элемента будет желтым (yellow). Присвойте id с именем "redlow" заголовку <h2>.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <style> ... </style>
</head>
<body> <h2>Атрибут id</h2> <p>Атрибут id (идентификатор) используется для идентификации, поэтому он на странице
только один.</p> </body>
</html>