Какво е CSS клас (стилов клас)?
CSS клас (css class) е вид селектор в Cascading Style Sheets езика за стилизиране, чрез който за определени елементи от HTML може да се зададе определено оформление (стил).
Казано по друг начин, CSS клас означава, че към една „ключова дума“ са поставени няколко стилови правила. Тази ключова дума може да се използва върху даден (HTML) елемент, като параграф „<p>“ например, за да се приложат тези стилови правила.
Стиловият клас съдържа правила и параметри за стила и начина, по който ще се визуализира дадения елемент от съдържанието. Тези параметри може да са цвят на текста, размер, шрифт и много други.
Синтаксисът на CSS класа е:
.клас {свойство: стойност;}
Например задаване на определен шрифт за даден параграф може да се извърши с вграден (inline) стил по този начин:
<p style=“font-family: Ubuntu,sans-serif;“>Това е параграф с текст в шрифт Ubuntu.</p>
Тези стилови правила може да се запишат в стилов клас с име „ubfont“ например:
.ubfont {font-family: Ubuntu,sans-serif;}
След това задаването на CSS класа към определен HTML елемент се извършва като в тага му се добави class=“името-на-стиловия-клас“. Например:
<p class=“ubfont“>Това е параграф с текст в шрифт Ubuntu.</p>
CSS класовете се записват в стилов файл (style.css), който се прилага към дадената уеб страница. Например CSS класове се използват за стилизиране на темите за WordPress. Най-често стиловият файл на дадена WordPress тема е с име style.css и се намира в директорията на темата (например /wp-content/themes/twentyten/style.css).
Вижте още:
⇒ Начини за прилагане на CSS стил в HTML документа
CSS селектори
CSS селекторите се използват за „намиране“ (или избор) на HTML елементите, които искате да оформите.
Можем да разделим CSS селекторите на пет категории:
- Прости селектори (селектирайте елементи въз основа на име, идентификатор, клас)
- Комбинаторни селектори (селектирайте елементи въз основа на конкретна връзка между тях)
- Селектори на псевдоклас (селектирайте елементи въз основа на определено състояние)
- Селектори на псевдоелементи (изберете и стилизирайте част от елемент)
- Селектори на атрибути (селектирайте елементи въз основа на атрибут или стойност на атрибута)
Тази страница ще обясни най-основните CSS селектори.
Селекторът на CSS елемент
Селекторът на елементи избира HTML елементи въз основа на името на елемента.
Пример
Тук всички <p> елементи на страницата ще бъдат подравнени по центъра, с червен цвят на текста:
p {
text-align: center;
color: red;
}Избирачът на CSS id
Селекторът на id използва атрибута id на HTML елемент, за да избере конкретен елемент.
Идентификаторът на елемент е уникален в рамките на страница, така че селекторът на идентификатор се използва за избор на един уникален елемент!
За да изберете елемент с конкретен идентификатор, напишете хеш (#) знак, последван от идентификатора на елемента.
Пример
Правилото CSS по-долу ще бъде приложено към HTML елемента с id = "para1":
#para1 {
text-align: center;
color: red;
}Забележка: Името на идентификатора не може да започва с номер!
Селекторът на CSS клас
Селекторът на клас избира HTML елементи със специфичен атрибут на класа.
За да изберете елементи с конкретен клас, напишете знак (.), Последван от името на класа.
Пример
В този пример всички HTML елементи с class = "center" ще бъдат червени и подравнени по центъра:
.center {
text-align: center;
color: red;
}Можете също така да посочите, че само определени HTML елементи трябва да бъдат засегнати от клас.
Пример
В този пример само <p> елементите с class = "center" ще бъдат червени и подравнени по центъра:
p.center {
text-align: center;
color: red;
}HTML елементите също могат да се отнасят до повече от един клас.
Пример
В този пример елементът <p> ще бъде оформен според class = "center" и към class = "large":
<p class="center large">This paragraph refers to two classes.</p>Забележка: Името на класа не може да започва с число!
Универсалният селектор на CSS
Универсалният селектор (*) избира всички HTML елементи на страницата.
Пример
Правилото CSS по-долу ще засегне всеки HTML елемент на страницата:
* {
text-align: center;
color: blue;
}Селекторът за групиране на CSS
Селекторът за групиране избира всички HTML елементи с еднакви дефиниции на стил.
Погледнете следния CSS код (елементите h1, h2 и p имат еднакви дефиниции на стил):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}Ще бъде по-добре да групирате селекторите, за да минимизирате кода.
За да групирате селектори, отделете всеки селектор със запетая.
Пример
В този пример сме групирали селекторите от горния код:
h1, h2, p {
text-align: center;
color: red;
}Изпробвайте се с упражнения!
Всички CSS прости селектори
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |
