Tel: +372 5596 5762
e-mail: info@digipo.eu

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

 

Группирование элементов с помощью class
Предположим, у нас есть два списка меню учебника - для CSS и для HTML. В документе HTML-код может быть таким:
    <p>Учебник по CSS</p>
    <ul>
    <li><a href="#">Введение</a></li>
    <li><a href="#">Основы</a></li>
    <li><a href="#">Код</a></li>
    </ul>

    <p>Учебник по HTML</p>
    <ul>
    <li><a href="#">Введение</a></li>
    <li><a href="#">Основы</a></li>
    <li><a href="#">Код</a></li>
    </ul>    

Пример
Пример как это выглядит с помщью HTML

Попробуем сделать ссылки для CSS одним цветом, а для HTML другим. Для достижения этой цели мы разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class.
Попробуем установить классы для предыдущего примера:

    <p>Учебник по CSS - все ссылки желтые</p>
    <ul>
    <li><a href="#" class="css">Введение</a></li>
    <li><a href="#" class="css">Основы</a></li>
    <li><a href="#" class="css">Код</a></li>
    </ul>

    <p>Учебник по HTML - все ссылки бордовые</p>
    <ul>
    <li><a href="#" class="html">Введение</a></li>
    <li><a href="#" class="html">Основы</a></li>
    <li><a href="#" class="html">Код</a></li>
    </ul>    
    
    
Далее мы можем определить специальные свойства для ссылок css и html, соответственно.

    a {color: blue;}
    a.css {color: #FFBB00;}
    a.html {color: #800000;}

Настройка class
Пример с настройка классов в СSS

Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа.
Идентификация элемента с помощью id
Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id.
Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибут class. Теперь взглянем на пример использования id:

<h1>Глава 1</h1>
<h2>Глава 1.1</h2>
<h2>Глава 1.2</h2>
<h1>Глава 2</h1>
<h2>Глава 2.1</h2>
<h3>Глава 2.1.2</h3>   
    
Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе:

<h1 id="style1">Глава 1</h1>
<h2 id="style1-1">Глава 1.1</h2>
<h2 id="style1-2">Глава 1.2</h2>
<h1 id="style2">Глава 2</h1>
<h2 id="style2-1">Глава 2.1</h2>
<h3 id="style2-1-2">Глава 2.1.2</h3>    
    
Заголовок, скажем, Глава 1.2, должена быть красным. Это делается в соответствии с CSS:

#style1-2{color: red;}   


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

Задание

Сделайте свои class для списка и id для заголовков.

В предыдущем уроке рассматривали стили списка

В следующем уроке рассмотрим span и div