Головна Реєстрація Вхід
Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика
Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук
Вітаю Вас, Гість · RSS 19.04.2024, 01:48
На головну » Підручники » Підручник CSS » Урок 7: Ідентифікація та групування елементів (class і id) - Підручник CSS
Урок 7: Ідентифікація та групування елементів (class і id)

Іноді вам потрібно буде застосувати особливий стиль до певного елемента або конкретній групі елементів. У цьому уроці ми детально розберемо, як можна використовувати class і id для специфікуваня властивостей вибраних елементів.

Як змінити колір конкретного заголовка окремо від інших заголовків на вашому web-сайті? Як групувати посилання по категоріях і задавати для кожної категорії особливий стиль? Це лише приблизні питання, на які ми відповімо в цьому уроці.

Групування елементів за допомогою class

Припустимо, у нас є два списки посилань сортів винограду - для білого і для червоного вина. HTML-код може бути таким:

<p>Виноград для білого вина:</p>
<ul>
<li><a href="ri.htm">Рислінг</a></li>
<li><a href="ch.htm">Шардоне</a></li>
<li><a href="pb.htm">Піно Блан</a></li>
</ul>

<p>Виноград для червоного вина:</p>
<ul>
<li><a href="cs.htm">Каберне Совіньон</a></li>
<li><a href="me.htm">Мерло</a></li>
<li><a href="pn.htm">Піно Нуар</a></li>
</ul>

Показати приклад

Далі, ми хочемо, щоб посилання на біле вино були жовтого кольору, на червоне вино - червоного, а інші посилання на цій же сторінці залишалися синіми.

Для досягнення цієї мети ми розділимо посилання на дві категорії за допомогою присвоєння класу кожному посиланні атрибутом class.

Спробуємо встановити класи для попереднього прикладу:

<p>Виноград для білого вина:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Рислінг</a></li>
<li><a href="ch.htm" class="whitewine">Шардоне</a></li>
<li><a href="pb.htm" class="whitewine">Піно Блан</a></li>
</ul>

<p>Виноград для червоного вина:</p>
<ul>
<li><a href="cs.htm" class="redwine">Каберне Совіньон</a></li>
<li><a href="me.htm" class="redwine">Мерло</a></li>
<li><a href="pn.htm" class="redwine">Піно Нуар</a></li>
</ul>

Далі ми можемо визначити спеціальні властивості для посилань whitewine і redwine, відповідно.

a {
color: blue;
}

a.whitewine {
color: #FFBB00;
}

a.redwine {
color: #800000;
}

Показати приклад

Як показано в прикладі, ви можете визначати властивості для елементів, що належать до певного класу, за допомогою . імя_класса в таблиці стилів документа.

Ідентифікація елемента за допомогою 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="c1">Глава 1</h1>
...
<h2 id="c1-1">Глава 1.1</h2>
...
<h2 id="c1-2">Глава 1.2</h2>
...
<h1 id="c2">Глава 2</h1>
...
<h2 id="c2-1">Глава 2.1</h2>
...
<h3 id="c2-1-2">Глава 2.1.2</h3>
...

Тема, скажімо, Глава 1.2, повинна бути червоною. Це робиться відповідно до CSS:

#c1-2 {
color: red;
}

Показати приклад

Як показано в попередньому прикладі, ви можете визначати властивості конкретного елемента за допомогою #id у таблиці стилів документа.

Резюме

У цьому уроці ми розібрали, як, за допомогою селекторів class і id , ви можете специфікувати властивості конкретних елементів.

У наступному уроці ми розберемо два HTML-елемента, які широко використовуються в поєднанні з CSS: <span> і <div>.
<< Урок 6: Посилання
Всього коментарів: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]