Основни селектори, уроци, WebReference
Основите включват селектори на елементи, класове, идентификатори, универсален селектор и селектори на атрибути.
Селектори на елементи
Селекторът е името на всеки HTML елемент, но без изписване на ъглови скоби. Например селекторът p задава стила на всички елементи
, които се срещат в HTML кода. Пример 1 показва как да промените цветовете на фона и текста на уеб страница с помощта на селектора за тяло.
Пример 1: Използване на селектора на тялото
Резултатът от този пример е показан на фиг. 1.
Ориз. 1. Променете цвета на фона и текста на уеб страница
Трябва да се разбере, че докато стилът може да се приложи към всеки елемент, ефектът ще бъде видим само за тези елементи, които са директно изобразени в .
Селекторите на елементи определят стила на всички избрани елементи наведнъж, докато уебсайтовете често изискват стилизиране на отделни елементи. За такива задачи се използват класове. За да може CSS да разбере, че даден клас в стиловете е предшестван от точка, тогава веднага без интервали идва произволно име на клас.
Тук името на класа е зададено като .block , а в HTML кода атрибутът class се добавя към желаните елементи и името на класа се изписва като стойност, но без водещата точка.
Има специални изисквания за името на класа:
- класът не трябва да започва с число - не може да се пише .1block, но е допустимо .block1;
- класът не трябва да съдържа български букви, а само латински — не може да се използва .button, може .knopka;
- допустимо е използването на тире (-) и долна черта (_) в името на класа - например .view-design-block и .search_form_button;
- класът може да започва с тире и долна черта - .__error__ например;
- класовете са чувствителни къмрегистър - .Red, .RED и .red са различни имена.
Пример 2 добавя класа cite към елемент
Пример 2: Използване на клас
Резултатът от този пример е показан на фиг. 2.
Ориз. 2. Изглед на абзац, стилизиран с клас
Първият параграф използва тъмночервен цвят на текста, а следващият параграф, към който е приложен клас с име cite, се показва в тъмно синьо с линия вляво.
Класовете могат да се комбинират с елементи, в който случай селекторът ще бъде написан по следния начин.
Първо се изписва името на елемента, след това името на класа, разделено с точка без интервали. Селекторът p.cite ще стилизира само елементи
с цитирания клас. На свой ред стилът няма да се прилага само към елементи
без никакъв клас, до елементи
с всеки друг клас, с всички други елементи, дори с класа cite. Пример 3 показва използването на различни класове.
Пример 3 Използване на класове
Резултатът от този пример е показан на фиг. 3. Имайте предвид, че селекторът span.term променя стила на термин елемента и не засяга елементите и.
Ориз. 3. Изглед на елементи, украсени с класове
Комбинацията от елемент и клас обикновено се използва за увеличаване на предимството на стила. Селекторът p.cite има предимство пред .cite, който от своя страна има предимство пред селектора на елемент p. Така че p.cite > .cite > стр. Ще се върнем към този въпрос в раздела за каскадиране.
Можете да добавите няколко класа към всеки елемент едновременно, като ги посочите в атрибута class, разделени с интервал. В този случай към елемента се прилага стилът, описан в правилата за всеки клас. Тъй като при добавяне на множество класовете могат да съдържат същите стилови свойства, но с различни стойности, тогава стойността се взема от класа, който е описан в CSS кода по-долу. В самия атрибут на класа редът, в който са изброени класовете, няма значение.
Пример 4 показва използването на различни класове за създаване на многоцветни бутони.
Пример 4: Цветни бутони
Резултатът от този пример е показан на фиг. 4. Към елемента се добавя класът btn, който определя общия стил на бутоните, а фонът и цветът на текста на отделните бутони се променят чрез класовете btn-success, btn-info и btn-warning.
Ориз. 4. Цветни копчета
Идентификатори
Идентификаторът определя уникалното име на елемента, което се използва за промяна на неговия стил и препращане към него чрез скриптове. Идентификаторите също се използват за създаване на котви, така че да можете бързо да навигирате до желания раздел на уеб страница.
В CSS, когато се описва идентификатор, първо се посочва знакът за паунд (#), след което следва произволното име на идентификатора.
Тук името на идентификатора е зададено като #s >id и името на идентификатора е написано като стойност, но без хеш знака.
За разлика от класовете, всеки идентификатор трябва да бъде уникален, с други думи, трябва да се среща само веднъж в кода на документа.
За имената на идентификаторите важат същите правила като за класовете - името не трябва да започва с цифра, да съдържа български букви и др.
Пример 5 показва промяната на стила за идентификатора #help.
Пример 5: Използване на идентификатор
Резултатът от този пример е показан на фиг. 5. Обърнете внимание, че можем безопасно да комбинираме class и id в един и същи елемент, като стилът за id винаги има предимство пред стила за класа.
Ориз. 5. Резултатът от прилагането на идентификатора
Универсален селектор
Понякога трябва да зададете един и същ стил за всички елементи на уеб страница едновременно, например да зададете шрифта или стила на текста. В този случай ще помогне универсалният селектор, който отговаря на всеки елемент от уеб страницата.
Знакът звездичка (*) се използва за обозначаване на универсален селектор.
В този случай нормалният стил на текст е зададен за всички елементи. По този начин удебелените елементи по подразбиране (като
) губят своята „мазнина“.
Универсалният селектор обикновено се използва за нулиране на CSS. Целта на нулирането е стиловете на различните браузъри да бъдат еднакви. За всеки елемент браузърът задава стил по подразбиране и може да има малки разлики в показването на елемента в различните браузъри. За да се премахнат тези разлики, се прилага нулиране. Всъщност въпросът дали да се използва нулиране на CSS или не е спорен, всеки го решава по свой начин.
Пример 6 показва задаване на свойството margin на нула за всички елементи на уеб страницата.
Пример 6: Използване на универсалния селектор
Резултатът от този пример е показан на фиг. 6.