Чрез CSS може да се приложи определен стил на точно определен елемент в документа, описан с маркиращ език като HTML. Когато стилът се прилага за елементи на HTML кода, за селектор се използва дадения HTML таг. В CSS съществуват няколко вида селектори.
Класови селектори
CSS позволява да задавате собствени класове за различните селектори. След като един клас е дефиниран, после всички селектори, на които е присвоен този клас, ще показват един и същ ефект.
Например клас за заглавия h1 да са с червен цвят и клас за параграфите p, чиито текст да се позиционира вдясно.
Синтаксисът на класовите селектори е:
селектор.клас {свойство: стойност;}
В първия случай селектора ще бъде h1 – това е HTML тага за най-голямо заглавие. Названието на класа може да бъде напълно произволно, но понеже искаме да направим червено заглавие, за удобство може да наречем класа red. Тогава целия код ще изглежда така:
h1.red {color: #ff0000;}По аналогичен начин изглежда кода за параграф, който да се появява в дясната част на страницата:
p.right {text-align: right;}Така класовете са дефинирани и трябва да се поместят в секцията head на вашата HTML страница, като се затворят между таговете <style> и </style>:
<style type="text/css">
h1.red {color: #ff0000;}
p.right {text-align: right;}
</style>След това, когато в тялото на страницата (body) желаете да използвате някои от дефинираните класове, например червеното заглавие, е нужно да напишете следното:
<h1 class="red">Червено Заглавие</h1>Колкото пъти използвате този код, толкова пъти ще имате в страницата си червено заглавие.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>класови селектори</title>
<style type="text/css">
h1.red {color: #ff0000;}
p.right {text-align: right;}
</style>
</head>
<body>
<h1 class="red">Червено Заглавие</h1>
<p class="right">Параграф, чийто текст се появява отдясно.</p>
<h1>Обикновено Заглавие</h1>
<h1 class="red">Отново Червено заглавие</h1>
</body>
</html>Горният пример дава представа и за това как изглежда т.нар. Internal Style Sheet, за който беше споменато в 1-ва страница, т.е. CSS, при който чрез елементи, поставени в секцията head и затворени между таговете <style type=“text/css“> и </style> се определя външния вид на целия HTML документ.
Класовете могат да бъдат декларирани и по друг начин, а именно – без да е необходимо да се обвързват с конкретен селектор. В този случай синтаксисът на CSS кода е:
.клас {свойство: стойност;}
Т.е. отсъства самия селектор. Така например вместо да се пише
h1.red {color: #ff0000;}
p.right {text-align: right;}може да се напише следния код:
.red {color: #ff0000;}
.right {text-align: right;}Всичко останало е като в горния пример, при което ефектът в HTML страницата ще бъде същият.
Групиране на селектори
Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. свойства с еднакви стойности. Синтаксисът при групирането е:
селектор1,селектор2,селектор3,… {свойство: стойност;}
Пример:
<title>групиране на селектори</title>
<style type="text/css">
h1,h2,h3,p,del {color: #ff0000;}
</style>В случая са подредени селекторите (таговете от HTML) за първите 3 по големина заглавия, за параграф и за зачертаване на текст, като на всички тях е зададен червен цвят. Ако след това в body на HTML документа напишете например:
<del>червен и зачеркнат текст</del>този текст ще се покаже не само зачеркнат, какъвто е по принцип ефекта от тага del, но и в червен цвят.
ID селектори
Чрез ID селекторите могат да се декларират допълнителни параметри, които не са указани в декларираните класове. Разбира се същия ефект може да се постигне и чрез деклариране на нов клас, но за по-голямо удобство това може да стане чрез ID селектор.
Синтаксисът на ID селектора е
#id {свойство: стойност;}
/ или също селектор#id {свойство: стойност;} /
Например вече имаме деклариран клас за позициониране в дясната част на страницата. Можем да добавим примерно следния id в секцията head, между таговете <style type=“text/css“> и </style>:
<head>
<title>css</title>
<style type="text/css">
.right {text-align: right;}
#bluebold {color:#0000ff; font-weight:bold;}
</style>
</head>Ефекта от него ше бъде удебелен текст със син цвят. В случая названието bluebold е произволно и е избрано само за да подсказва какъв е ефекта, а може да бъде и всякакво друго, например bb и т.н.
Ако сега напишем в body на HTML страницата следния код
<p class="right" id="bluebold">Син и удебелен текст, който ще се покаже вдясно</p>ще имаме като ефект параграф в дясната част на страницата със син и удебелен текст.
В нашия пример параграфа може да се въведе и без декларирания клас:
<p id="bluebold">Параграф със син и удебелен текст</p>В такъв случай ефектът ще бъде син и удебелен текст, но без позициониране на параграфа вдясно.
Контекстни селектори
Контекстовите селектори посочват елементи, според тяхното местоположение спрямо други елементи в структурното дърво на документа.
Контекстовите селектори представляват комбинация от няколко селектора, като зададеният ефект на стила се проявява в зависимост от това дали е изпълнено условието.
Синтаксисът на контекстните селектори е:
1-ви селектор 2-ри селектор… {свойство: стойност;}
Например в секцията head може да напишем кода:
<style type="text/css">
p strong em {color:#10ad18;font-size:16px;}
</style>Ако след това в body напишем:
<p><strong><em>Текст, който се намира в контекста</em></strong> и текст, извън контекста</p>ефектът ще бъде удебелен и наклонен зелен текст за текста, заключен между <strong><em> и </em></strong> и стандартен текст за останалата част от текста в параграфа. Трябва да се спазва последователността на декларираните селектори, в противен случай ефектът няма да се прояви, т.е. ако напишем:
<p><em><strong>Текст</strong></em></p>няма да се получи като ефект зелен цвят, тъй като е нарушена декларираната последователност на селекторите p и strong.
Контекстовите селектори може да посочват различни елементи, според типа на елемента, класовия атрибут, ID атрибута или комбинация от тях:
div p {font: small sans-serif;}
.reddish h1 {color: red;}
#x78y code {background: blue;}
div.sidenote h1 {font-size: large;}Вижте още:
🔗 Какво е CSS и как се използва в HTML? | Help
🔗 Стилови правила в CSS | Help
