CSS Част 3

nma трудност:

видян: 13473

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

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

Страници: 1 2 »

Сподели |

CSS Част 3

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