Каскадни таблици със стилове дефинирайте външния вид на елемент на уеб страница, като закачите атрибутите, които прилагате към този елемент. Тези атрибути могат да бъдат ID или клас и, както всички атрибути, те добавят полезна информация към елементите, към които са прикачени.
В зависимост от това кой атрибут добавяте към елемент, можете да напишете CSS селектор, за да приложите необходими визуални стилове, които са необходими за постигане на външния вид на този елемент и уебсайта като цяло.
Докато идентификационните номера или класовете работят с цел да се свържат с тях с правилата на CSS, съвременният уеб дизайн методите отчасти предпочитат класовете пред идентификаторите, защото те са по-малко специфични и по-лесни за работа като цяло.
Един или повече класове в CSS?
В повечето случаи присвоявате атрибут на един клас на елемент, но всъщност не сте ограничени само до един клас, какъвто сте с идентификатори. Докато елемент може да има само един атрибут ID, можете да дадете на елемент няколко класа и в някои случаи това ще направи вашата страница по-лесна за оформяне и много повече гъвкав.
Ако трябва да присвоите няколко класа на елемент, добавете допълнителните класове и просто ги отделете с интервал във вашия атрибут.
Например този параграф има три класа:
Това би бил текстът на параграфа
Това задава следните три класа на етикета на абзаца:
- Публикувай
- Препоръчани
- Наляво
Забележете интервалите между всяка една от тези стойности на класа. Тези пространства ги определят като различни, индивидуални класове. Ето защо имената на класове не могат да имат интервали в себе си, тъй като това би ги поставило като отделни класове.
След като въведете стойностите на класа си в HTML, можете след това да ги присвоите като класове във вашия CSS и да приложите стиловете, които искате да добавите. Например.
.pullquote {... }
.известно {... }
p.left {... }
В тези примери CSS декларациите и двойките стойности се появяват във фигурните скоби, което е начинът, по който тези стилове ще бъдат приложени към подходящия селектор.
Ако ти задайте клас на определен елемент (например, стр. вляво), все още можете да го използвате като част от списък с класове; имайте предвид обаче, че това ще засегне само онези елементи, които са посочени в CSS. С други думи, стр. вляво стил ще се прилага само за абзаци с този клас, тъй като вашият селектор всъщност казва да го приложите за "абзаци със стойност на класа от наляво, "За разлика от това, другите два селектора в примера не посочват определен елемент, така че те ще се прилагат за всеки елемент, който използва тези стойности на класа.
Множество класове, семантика и JavaScript
Друго предимство на използването на няколко класа е, че увеличава възможностите за интерактивност.
Прилагайте нови класове към съществуващи елементи с помощта на JavaScript, без да премахвате някой от началните класове. Можете също да използвате класове, за да дефинирате семантика на елемент - добавете допълнителни класове, за да дефинирате какво означава този елемент семантично. Този подход е как Микроформати върши работа.
Предимства на множество класове
Наслояването на няколко класа може да улесни добавянето на специални ефекти към елементи, без да се налага да създавате изцяло нов стил за този елемент.
Например, за да плавате елементи наляво или надясно, можете да напишете два класа:
наляво.
и.
нали.
с просто.
плувка: ляво;
и.
плувка: вдясно;
в тях. След това, всеки път, когато имате елемент, който трябва да плавате наляво, просто ще добавите класа „наляво“ към списъка му с класове.
Тук обаче има фина линия за разходка. Не забравяйте, че уеб стандартите диктуват разделянето на стила и структурата. Структурата се обработва с помощта на HTML, докато стилът е в CSS. Ако вашият HTML документ е изпълнен с елементи, които всички имат имена на класове като "червено" или "ляво", които са имена, които диктувайте как трябва да изглеждат елементите, а не какви са те, вие пресичате тази граница между структура и стил.
Недостатъци на множество класове
Най-големият недостатък на използването на няколко едновременни класа на вашите елементи е, че това може да ги направи малко тромави за гледане и управление с течение на времето. Може да стане трудно да се определи кои стилове засягат даден елемент и дали някакви скриптове го засягат. Много от наличните днес рамки, като Bootstrap, използват интензивно елементи с множество класове. Този код може да излезе извън контрол и да се работи много бързо, ако не сте внимателни.
Когато използвате няколко класа, вие също рискувате стилът за един клас да замени стила на друг. Тогава този сблъсък може да затрудни разбирането защо вашите стилове не се прилагат, дори когато изглежда, че трябва. Не забравяйте за специфичност, дори с атрибутите, приложени към този един елемент.
Използвайки инструмент като инструментите за уеб администратори в Google Chrome, можете по-лесно да видите как вашите класове влияят на вашите стилове и да избегнете този проблем с противоречащи си стилове и атрибути.