https://help.superhosting.bg/css-selectors.html
  • bg

Хостинг, Домейни, Виртуални сървъри (VPS), Managed VPS, SSL сертификати

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

CSS
css selector, css selectors

Чрез 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;}

500px270px
SuperHosting.BG

Коментари

Все още няма коментари

avatar
  Абониране  
Уведоми ме при
Всички права запазени © 2005-2018 , www.superhosting.bg