Ідентифікація і групування елементів
Атрибут class вказує, що елемент є членом певного класу. Для прикладу візьмемо документ в якому є два списки посилань, але треба щоб кольори посилань цих списків відрізнялися.
<p>Список №1:</p>
<ul>
<li><a href="link1_1.htm">Посилання 1,1</a></li>
<li><a href="link1_2.htm">Посилання 1,2</a></li>
<li><a href="link1_3.htm">Посилання 1,3</a></li>
</ul>
<p>Список №2:</p>
<ul>
<li><a href="link2_1.htm">Посилання 2,1</a></li>
<li><a href="link2_2.htm">Посилання 2,2</a></li>
<li><a href="link2_3.htm">Посилання 2,3</a></li>
</ul>
<a href="index.htm">На головну</a>
Щоб досягти нашої мети розділимо посилання на дві категорії за допомогою привласнення класу кожному посиланню атрибутом class.
У файлі з html-кодом додамо class="classname" в тег до якого ми будемо застосовувати клас.
<p>Список №1:</p>
<ul>
<li><a href="link1_1.htm" class="list1">Посилання 1,1</a></li>
<li><a href="link1_2.htm" class="list1">Посилання 1,2</a></li>
<li><a href="link1_3.htm" class="list1">Посилання 1,3</a></li>
</ul>
<p>Список №2:</p>
<ul>
<li><a href="link2_1.htm" class="list2">Посилання 2,1</a></li>
<li><a href="link2_2.htm" class="list2">Посилання 2,2</a></li>
<li><a href="link2_3.htm" class="list2">Посилання 2,3</a></li>
</ul>
<a href="index.htm">На головну</a>
У файлі style.css опишемо властивості класів для посилань. Синтаксис опису класу має наступний вигляд:
|
селектор. |
ім’я класу |
{властивість: значення;} |
a {
color: blue;
}
a.list1 {
color: #FFBB00;
}
a.list2 {
color: #800000;
}
Окрім групування елементів вам може знадобитися ідентифікувати один унікальний елемент. Це можна реалізувати за допомогою атрибуту id.
Особливість id в тому, що в документі не може бути більш за один елемент з даним конкретним id. Кожен id має бути унікальним. У інших випадках треба використовувати атрибут class. Розглянемо приклад використання id:
<h1>Частина 1</h1>
...
<h2>Глава 1,1</h2>
...
<h2>Глава 2,1</h2>
...
<h1>Частина 2</h1>
...
<h2>Глава 1,2</h2>
...
<h3>Глава 2,2</h3>
Призначимо id кожній частині та главі.
<h1 id="p1">Частина 1</h1>
...
<h2 id="ch1-1">Глава 1,1</h2>
...
<h2 id="ch2-1">>Глава 2,1</h2>
...
<h1 id="p2">>Частина 2</h1>
...
<h2 id="ch1-2">Глава 1,2</h2>
...
<h3 id="ch2-2">>Глава 2,2</h3>
Оформлення ідентифікатора у css-файлі буде мати наступний вигляд:
#p1{
color: blue;
}
#ch1-1{
color: #FFBB00;
}
Групування елементів (span і div).
Елемент span можна назвати нейтральним елементом, який нічого не додає до вмісту документа. Але, у поєднанні з CSSspan може використовуватися для візуальних ефектів застосовуваних до окремих блоків тексту.
У файлі style.css створимо правило для елементів span.
span.citata{
color: blue;
}
span.citata1{
color: green;
background-color: yellow;
font-style: italic;
font-weight: bold;
}
<html>
<head>
<title>Приклад №9</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>Елемент span можна назвати <span class="citata">нейтральним елементом,</span> <span class="citata1">який нічого не додає до вмісту документа.</span></p>
</body>
</html>
На відміну від елементу span, який використовується в елементах рівня блоку, елемент div застосовується для групування одного або більш блок-елементів.
Окрім цієї відзнаки, групування з допомогою div працює більш менш аналогічно. Поглянемо на приклад - два списки згрупованих за їх категоріями.
#list1{
color: blue;
}
#list2{
color: green;
}
<html>
<head>
<title>Приклад №10</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="list1">
<p>Список №1:</p>
<ul>
<li><a href="link1_1.htm">Посилання 1,1</a></li>
<li><a href="link1_2.htm">Посилання 1,2</a></li>
<li><a href="link1_3.htm">Посилання 1,3</a></li>
</ul>
</div>
<div id="list2">
<p>Список №2:</p>
<ul>
<li><a href="link2_1.htm">Посилання 2,1</a></li>
<li><a href="link2_2.htm">Посилання 2,2</a></li>
<li><a href="link2_3.htm">Посилання 2,3</a></li>
</ul>
</div>
</body>
</html>