Структура и понятия в CSS: 2-ра част (Видове селектори)

taffch0 трудност:

видян: 15446

ВИДОВЕ СЕЛЕКТОРИ

В CSS съществуват няколко вида селектори:

1. Класови селектори

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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>класови селектори</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />

<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 страницата ще бъде същия.

2. ID селектори

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

Синтаксисът на ID селектора е

#id {атрибут: стойност} /или също селектор#id {атрибут: стойност}/

Например вече имаме деклариран клас за позициониране в дясната част на страницата. Можем да добавим примерно следния id в секцията head, между таговете <style type="text/css"> и </style>:

<head>
<title>css</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />

<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>

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

3. Контекстуални селектори

Контекстуалните селектори представляват комбинация от няколко селектора, като зададения ефект се проявява в зависимост от подредбата им.

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

1-ви селектор 2-ри селектор... {атрибут: стойност}

Например в секцията head може да напишем кода

<head>
<title>css</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />

<style type="text/css">

p i b {color:#00ff00}

</style>

</head>

Ако след това в body напишем

<p> <i><b>Наклонен и удебелен ЗЕЛЕН текст</b></i>Стандартен текст</p>

ефекта ще бъде удебелен и наклонен зелен текст за текста, заключен между <i><b> и </b></i> и стандартен текст за останалата част от текста в параграфа. Трябва да се спазва последователността на декларираните селектори, в противен случай ефекта няма да се прояви, т.е. ако напишем

<p><b><i>Текст</b></p></i>

няма да се получи като ефект зелен цвят, тъй като е нарушена декларираната последователност на селекторите i и b.

4. Групиране на селектори

Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при групирането е:

селектор1,селектор2,селектор3,... {атрибут: стойност}

ПРИМЕР:

<head>
<title>групиране на селектори</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />

<style type="text/css">

h1,h2,h3,p,del {color: #ff0000}

</style>

</head>

В случая са подредени селекторите (таговете от HTML) за първите 3 по големина заглавия, за параграф и за зачертаване на текст, като на всички тях е зададен червен цвят. Ако след това в body на HTML документа напишете например

<del>ЧЕРВЕН ЗАЧЕКНАТ ТЕКСТ</del>

този текст ще се покаже не само зачеркнат, какъвто е по принцип ефекта от тага del, но и в червен цвят.

КОМЕНТАРИ В CSS

Тага за коментар в HTML e 
В CSS коментара трябва да е затворен между наклонена черта със "звезда" и "звезда" с наклонена черта:

/*Това е CSS коментар*/

Преписването е забранено.

Сподели |

Структура и понятия в CSS: 2-ра част (Видове селектори)

Регистрирайте се, за да добавите коментар