Приложение на class атрибута 1
Сподели урока
След като подробно разгледахме същността на id е време да обърнем нужното внимание и на class атрибута. В този урок ще се опитам да включа най-важното, което трябва да знаеш за него. Ще разгледаме приликите и разликите между id и class. Накрая ще завършим с кратко упражнение, в което ще приложим всичко от урока. Хайда да започваме.
Структура на урока
- Какво представлява class атрибута?
- Къде да използвам class атрибута?
- Структура и начин на прилагане
- Използване на class като CSS селектор
- Упражнение
Какво представлява 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 не прави изключение. Визуално това изглежда така:
Добра практика е стойността на атрибута да започне с буква, която може да бъде последвана от комбинация от букви (a-z или A-Z), цифри (0-9), тирета (-), долни черти (_), две точки (:) или точки (.).
Напълно валидно е използването на няколко стойности в един 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. Ето така:
В този случай имаме 2 класа – “orange” и “paragraph”. Винаги, когато искаме текст от нашата страница да бъде оранжев, можем да използваме “orange”. Винаги, когато искаме текста в даден параграф да бъде с размер 16px, можем да използваме “paragraph”. А ако ги комбинираме, ще направим текста оранжев и с колемина 16px.
Надявам се, че всичко до тук ти е ясно. Ако имаш въпроси, задай ги след урока.
Време е да видим как ще изглежда всичко това в едно кратко упражнение.
Упражнение
Условието на това упражнение ще бъде подобно на упражнението от урока за id.
Имаме 5 текстови параграфа, които първоначално ще изглеждат напълно еднакво. След това ще приложим един и същ стил върху три произволни параграфа и ще анализираме резултата. Хайде да започваме.
Стъпка 1
Създай нов html документ и добави в него 5 текстови параграфа с произволно съдържание. Не забравяй да прикачиш външен css файл, защото ще ни трябва. Ако имаш съмнения как да го направиш, разгледай урока “Прилагане на CSS чрез външен файл”. Моят резултат изглежда така:
index.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
body {
width:400px;
font-family:Verdana,Arial,sans-serif;
}
h2 {
text-transform:uppercase;
}
p {
font-size:20px;
}
Всичко това трябва да ти е познато. Този стил ще ограничи ширината на страницата до 400px и ще промени шрифта. Заглавието h2 ще стане изцяло с главни букви, а текста на всеки параграф ще се увеличи до 20px. Резултата е следния:
Стъпка 3
Сега решаваме, че параграфите 1, 3 и 5 трябва да бъдат с различен стил. Може би информацията в тях е много важна и искаме да бъдем сигурни, че посетителите на нашия сайт ще я забележат. Това е момента, в който class атрибута ще ни бъде от полза.
Върни се в html файла и промени кода по следния начин:
<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 файла и се опитай да приложиш наученото до сега. Не се притеснявай да опитваш, това ще ти помогне да усвоиш нещата много по-бързо. Ето го моето решение:
.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
Преди <p class="paragraph">Текстов параграф 3</p> След <p class="paragraph zelen-fon">Текстов параграф 3</p>
Резултата от това ще бъде следния:
Определено това не е най-красивата страница, но добре илюстрира начина на работа.
Това е основното, което трябва да знаеш за работата на атрибута class. Надявам се, че откри много полезна информация и обогати знанията си.
Какъв е твоя опит с class атрибута? Kакви съвети би споделил/-а? Ще се радвам, ако споделиш мнението си в коментарите по-долу.
Полезни линкове
Кога използваме Class и кога ID?
Използвани снимки
Снимка към урока: O Palsson
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Затова е по-добре да се използват класове пред id-та. Защо ли? Може да се използват едни и същи + други класове наведнъж, а id-то само по 1 път на една страница :)
Добър урок.