Class и Id

Идентификация и группирование элементов (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

О нас

Добро пожаловать в каталог продукции DigiPortfoolio OÜ.

Начиная с 2001 года мы обучались и развивались в сфере мультимедийного дизайна. На данный момент мы предлагаем услуги по созданию интернет дизайна, печатного дизайна, разработки рекламы, создание сайтов, туров 360 градусов.

Так же мы можем сделать печать на различных материалах и размерах. Изготовляем наклейки, визитки, roll-up стенды, сувенирную продукцию, печать на футболках.

В каталоге Вы найдете предлагаемые варианты, так же Вы можете связаться с нами по телефону +372 5596 5762 или прислать свой заказ на электронную почту info@digipo.eu

Ищите нас в социальных сетях:      

Мы в соцсетях

Смотрите нас в соцсетях, там мы буликуем готовые работы.