CSS-селектор и неговата роля при форматирането на html документи

Чрез създаването на вашия сайт и попълването му с определени елементи на уеб страница, всеки със сигурност ще се натъкне на концепция като CSS селектор. Тя служи за точно определяне на всички елементи на html файла, техния дизайн и място на страницата. За да направите това, създайте CSS документ, който предписва тези или други селектори и параметри за тяхното форматиране: цвят, размер, позиция и други. Всеки уеб дизайнер трябва да знае и да може правилно да въведе желаните селектори. Те са разделени на типове, основните от които ще разгледаме по-долу.

Видове селектори в CSS

В зависимост от кой html елемент се прилага форматирането, селекторът на CSS може да се отнася до една от следните групи:

• селектора на маркерите;
• клас селектор;
• ID-селектор;
• селектор на атрибути.

Селективен етикет

Нарича се също така "селектор тип" или "по елемент", той е най-простият и най-често срещан. Името му в CSS документа са имената на онези елементи от html файла, които описваме. Например, ако трябва да посочим стил на параграф, ние посочваме свойствата и техните стойности за елемента p {background: x-color: y-size: z}. В този случай всички параграфи на уеб страницата ще имат същото форматиране (цвят на фона, текст, размер и т.н.).

Селектор на класа

И какво, ако трябва да зададете свой собствен стил различен за другите за всеки параграф? За това има селектор на класове.

Документът за CSS в този случай ще съдържа следния запис: p.first {color: x-font-size: y}. По този начин задаваме свойствата "цвят" и "размер" само за първия параграф от класа.

В html документа в този случай първо въведете атрибута class с името на стила. Класовете могат да бъдат толкова, колкото стиловете, които искате да приложите към елементи от уеб страница.

Селектор с идентификатор

Често има нужда да се дефинира стила още по-точно, например, на един елемент от страницата или на извадката. В тази ситуация и-селекторът идва на помощ. В html файла ние назначаваме името на желания елемент, като го идентифицираме сред останалите. Например, елементът, който искаме да различим от другия стил, ще бъде заглавието на статията.

След това в html-документа ние присвояваме h1 заглавието идентификатор, например articlename. И в CSS файла задайте стила, като добавите решетка преди името на идентификатора: #articlename {color: blue-text-align: center}. Сега заглавието ни ще има син цвят и подравняване в центъра.

Всеки от горните типове може да се нарече "прост CSS-селектор". Те дефинират форматирането за конкретен параметър на html документа: колекция от подобни елементи (например всички абзаци на една статия), един клас (например само първият абзац) или конкретен елемент (например заглавието на една статия).

Избор на атрибут

В допълнение към горното, има селектори на атрибути на CSS - по-сложен начин за прилагане на стилове. Той ви позволява да форматирате HTML елементи от избрания атрибут или неговата стойност. Има няколко разновидности на този селектор:

• от присъствието на атрибут;
• с точната си стойност;
• чрез стойност на частичния атрибут;
• със своето специфично значение.

Нека разгледаме подробно всеки от тези сортове:

1. Първият случай. Форматирането се използва, ако има специфичен атрибут в html-кода (те могат да бъдат p, div, header и други). Ако липсва, използва се универсален стил за всички елементи. Например за елементи, които имат заглавие (Подсказка).
2. Вторият случай. Стилът се прилага само за тези html елементи, които имат точни съвпадения на стойностите на атрибутите. Например към тези входни елементи, чиято стойност на атрибута тип е равна на представяне.
3. Третият случай. Форматирането е ограничено до елементи със специфична дума в списъка с стойности. Например, sidebar в атрибута "class" на div елементи.
4. Четвъртият случай. Стилът е посочен само за елементите на html документа, за които определен атрибут има определена стойност и започва с него. Например, приложението на зададения цвят на всички елементи, чийто език на атрибутите е английски (това може да бъде en, ​​en-rus, en-au и т.н.).

По този начин, използвайки конкретен CSS-селектор, можете да проектирате най-добре цялата уеб страница и да опишете нейните отделни елементи.