Приложение на class атрибута

След като подробно разгледахме същността на id е време да обърнем нужното внимание и на class атрибута. В този урок ще се опитам да включа най-важното, което трябва да знаеш за него. Ще разгледаме приликите и разликите между id и class. Накрая ще завършим с кратко упражнение, в което ще приложим всичко от урока. Хайда да започваме.

Структура на урока

Какво представлява class атрибута?

Class атрибута ни позволява да зададем една или повече стойности към даден html елемент. Тези стойности се използват най-често за селектори в CSS или от JavaScript (чрез DOM (Document Object Model)) за манипулиране на елемент или група от елементи (например промяна на стила, поведението и т.н.).

Докато стойностите на id трябва да бъдат уникални в документа, при class е точно обратното. Стойностите на class могат да се повтарят многократно.

Също така е важно да отбележа, че атрибута class не трябва да бъде прилаган върху следните елементи: <base>, <head>, <html>, <meta>, <param>, <script>, <style> и <title>.

Къде да използвам class атрибута?

Най-честата употреба на class e в случаите, когато искаме група елементи да изглеждат (или работят) по идентичен начин.

Пример за това може да бъде таблица с 10 реда, на която искаме фона на всеки четен ред да бъде различен. В този случай можем да сложим class със стойност “cheten” на 2, 4, 6, 8 и 10 ред и да използваме тази стойност за стилизиране на точно тези редове.

В упражнението към урока за id атрибута разгледахме случай, в който имаме 5 параграфа и целта ни бе да приложим уникален стил върху един от тези параграфи. Използването на id в този случай е най-правилното решение. Като извод на упражнението установихме, че ако искаме да приложим същия стил върху два други параграфа, използването на id не е най-добрия подход. В следващото упражнение ще видим как бихме решили проблема с използване на class.

Структура и начин на прилагане

Всички атрибути се прилагат в отварящия таг на елемента. Class не прави изключение. Визуално това изглежда така:

Структура на class атрибута

Добра практика е стойността на атрибута да започне с буква, която може да бъде последвана от комбинация от букви (a-z или A-Z), цифри (0-9), тирета (-), долни черти (_), две точки (:) или точки (.).

Напълно валидно е използването на няколко стойности в един class атрибут. За да направим това, трябва да разделим всяка стойност с разстояние. Ето така:

Задаване на повече от една стойност на class

В този случай “paragraph” и “orange” са два отделни класа и всеки от тях може да бъде използван като селектор в CSS.

Стойностите на class са чувствителни към малки и големи букви т.е. class със стойност “paragraph_1” се счита за различна от class със стойност “Paragraph_1”.

Кратък лист с валидни стойности:

glavno-menu
sidebar
snimka-urok
header.top
novina5
paragraph orange

Съвет: Доста ще се улесниш, ако използваш стойности, които да ти подсказват за същността или поведението на елемента. Това, освен че ще направи кода ти по-лесен за четене, ще те подсеща и за работата/мястото на елемента. Например, група елементи с class=“sidebar-tags” ще ти даде много по-ясна информация за местоположението (sidebar) и типа на елементите (tags), отколкото безсмислена стойност като class=“tekst-44”.

Започни да използваш стойности, които имат смисъл и ще видиш колко голяма е ползата от това.

Използване на class като CSS селектор

Вече знаеш как да използваш id за селектор. Сега ще научиш как да използваш и класове, а това е също толкова лесно.

Всичко, което трябва да направиш е да използваш точка (.) преди стойността на class. Ето така:

Използване на стойностите на class като селектори

В този случай имаме 2 класа – “orange” и “paragraph”. Винаги, когато искаме текст от нашата страница да бъде оранжев, можем да използваме “orange”. Винаги, когато искаме текста в даден параграф да бъде с размер 16px, можем да използваме “paragraph”. А ако ги комбинираме, ще направим текста оранжев и с колемина 16px.

Надявам се, че всичко до тук ти е ясно. Ако имаш въпроси, задай ги след урока.

Време е да видим как ще изглежда всичко това в едно кратко упражнение.

Упражнение

Условието на това упражнение ще бъде подобно на упражнението от урока за id.

Имаме 5 текстови параграфа, които първоначално ще изглеждат напълно еднакво. След това ще приложим един и същ стил върху три произволни параграфа и ще анализираме резултата. Хайде да започваме.

Стъпка 1

Създай нов html документ и добави в него 5 текстови параграфа с произволно съдържание. Не забравяй да прикачиш външен css файл, защото ще ни трябва. Ако имаш съмнения как да го направиш, разгледай урока “Прилагане на CSS чрез външен файл”. Моят резултат изглежда така:

index.html

copyИзчистенПрозорец

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; 
            charset=utf-8" />
        <title>Работа с атрибута class</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <h2>Работа с атрибута class</h2>
        <p>Текстов параграф 1</p>
        <p>Текстов параграф 2</p>
        <p>Текстов параграф 3</p>
        <p>Текстов параграф 4</p>
        <p>Текстов параграф 5</p>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; 			charset=utf-8" />		<title>Работа с атрибута class</title>		<link href="style.css" rel="stylesheet" type="text/css" />	</head>	<body>		<h2>Работа с атрибута class</h2>		<p>Текстов параграф 1</p>		<p>Текстов параграф 2</p>		<p>Текстов параграф 3</p>		<p>Текстов параграф 4</p>		<p>Текстов параграф 5</p>	</body></html>

Ако запазиш файла и го отвориш в браузър ще видиш, че резултата не е нещо специално. Просто базов стил, който браузъра прилага по подразбиране.

Браузъра използва стил по подразбиране

Стъпка 2

Тъй като в момента стила изглежда наистина неестествен, нека малко го променим.

Отвори css файла, който създаде (ако не си го все още сега е момента да го направиш) и добави следния стил:

style.css

copyИзчистенПрозорец

body {
    width:400px;
    font-family:Verdana,Arial,sans-serif;
}
h2 {
    text-transform:uppercase;
}
p {
    font-size:20px;
}

body {	width:400px;	font-family:Verdana,Arial,sans-serif;}h2 {	text-transform:uppercase;}p {	font-size:20px;}

Всичко това трябва да ти е познато. Този стил ще ограничи ширината на страницата до 400px и ще промени шрифта. Заглавието h2 ще стане изцяло с главни букви, а текста на всеки параграф ще се увеличи до 20px. Резултата е следния:

Промяна на стила с няколко css декларации

Стъпка 3

Сега решаваме, че параграфите 1, 3 и 5 трябва да бъдат с различен стил. Може би информацията в тях е много важна и искаме да бъдем сигурни, че посетителите на нашия сайт ще я забележат. Това е момента, в който class атрибута ще ни бъде от полза.

Върни се в html файла и промени кода по следния начин:

copyИзчистенПрозорец

<h2>Работа с атрибута class</h2>
<p class="paragraph">Текстов параграф 1</p>
<p>Текстов параграф 2</p>
<p class="paragraph">Текстов параграф 3</p>
<p>Текстов параграф 4</p>
<p class="paragraph">Текстов параграф 5</p>

<h2>Работа с атрибута class</h2><p class="paragraph">Текстов параграф 1</p><p>Текстов параграф 2</p><p class="paragraph">Текстов параграф 3</p><p>Текстов параграф 4</p><p class="paragraph">Текстов параграф 5</p>

Стъпка 4

Сега отвори css файла и се опитай да приложиш наученото до сега. Не се притеснявай да опитваш, това ще ти помогне да усвоиш нещата много по-бързо. Ето го моето решение:

copyИзчистенПрозорец

.paragraph {
    font-weight:bold;
    font-size:24px;
    color:orange;
}
.zelen-fon {
    background-color:green;
}

.paragraph {	font-weight:bold;	font-size:24px;	color:orange;}.zelen-fon {	background-color:green;}

Както виждаш няма нищо сложно. Селектора “.paragraph” ще приложи желания стил върху всички елементи с class=”paragraph”. В момента това са параграфите 1,3 и 5. A pезултата е следния:

Използване на класове за прилагане на стил

Стъпка 5

Страхотно. Надявам се забеляза допълнителния селектор “.zelen-fon”. Него можеш да го използваш, когато искаш да доразвиеш стила още повече (или да презапишеш някои от предишните декларации). В такъв случай просто добави този стил към останалите стойности на атрибута class. Ето така:

index.html

copyИзчистенПрозорец

Преди
<p class="paragraph">Текстов параграф 3</p>
След
<p class="paragraph zelen-fon">Текстов параграф 3</p>

Преди<p class="paragraph">Текстов параграф 3</p>След<p class="paragraph zelen-fon">Текстов параграф 3</p>

Резултата от това ще бъде следния:

Използване на повече от един клас за прилагане на стил

Определено това не е най-красивата страница, но добре илюстрира начина на работа.

Това е основното, което трябва да знаеш за работата на атрибута class. Надявам се, че откри много полезна информация и обогати знанията си.