CSS Част 3

nma трудност:

видян: 13511

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 коментара трябва да е затворен между наклонена черта със "звезда" и "звезда" с наклонена черта

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

Сподели |

CSS Част 3

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