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

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

Каждый НТМ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

Заголовок второго уровня

Заголовок второго уровня

Классы

Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута 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>