След като вече можете да добавяте стилове към документа е време да научите и някои други хитрини.
В урок номер 3 разбрахте, че стилове могат да се задават за всеки HTML елемент (от сорта на H1, P, LI и т.н.). Но често се случва така, че се налага един и същи елемент да изглежда по различен начин в различните части на документа. Понякога един абзац трябва да е с черни букви и подравнен отляво, друг път - със светли букви и подравнен от дясно. Ето къде на помощ идват т. нар.
За да решим подобен проблем, трябва да създадем няколко различни класа за един и същи елемент. В нaшия случай ще бъдат два класа за елемента P:
P.black { font-color: black; text-align: left } P.bright { font-color: grey; text-align: right } HTML кодът ще изглежда така:
<p class="black">Абзац с черен цвят и подравнен от ляво.</p> <p class="bright">Абзац с по-светъл цвят и подравнен от дясно.</p>
Класовете могат да имат каквото име ви хрумне, но е важно да запомните, че пред името винаги има точка.
Можете да създавате класове, които не са свързани с точно определен HTML елемент:
.bright { color: grey }Те могат да се добавят към всеки таг като по този начин дават още по-голяма гъвкавост. Това е полезно например, когато искате да прилагате едно специфично оформление към различни структурни елементи (заглавия, параграфи, списъци и др.). Например ако искате целият текст в докумнета да е по-светъл BODY тагът ще изглежда така:
<BODY class="bright">
Какво ще стане ако например искате удебеленият шрифт да се оцветява в кафяво, но само в контекста на обикновения абзац? "Няма начин" си мислите в този момент и аха да се пресегнете към любимите <FONT> тагове, когато ви плясвам през ръцете и ви показвам следния трик:
P B { color: brown }Не, няма грешка. На обикновен български това правило звучи така: Ако удебеленият текст "B" се намира в обикновен абзац "P", то той ще има кафяв цвят "{ color: brown }". Пример:
<h1>Премиера на <b>Дебилни от пръв поглед</b></h1><p>Вчера се състоя премиерата на новия рекламен клип на мандри "Щастлива крава". Главно действащо лице по традиция е <b>една щастлива крава</b>.</p>
Което изглежда така:
Вчера се състоя премиерата на новия рекламен клип на мандри "Щастлива крава". Главно действащо лице по традиция е една щастлива крава.
Удебеленият шрифт в заглавието се показва както трябва, но този в абзаца е кафяв. За това се грижат контекстуалните селектори, които са селектори, чиито декларации се изпълняват само при положение, че вече е изпълнено някакво условие.
Ето какви други контекстуални селектори има:
| Условие | Описание | Пример |
| * | Отнася се за всички елементи | DIV * P Всеки елемеnт P, който се намира в елемент DIV. |
| Е | Отнася се до всички елементи Е | Спомнете си примера от урок 2. |
| Е F | Отнася се до елемент F, който се намира в контекста на елемент E | Този случай разгледахме малко по-горе. |
| E > F | Отнася се до елемент F, който е дете на родителския елемент E | Въпросът за децата и родителите разгледахме в Урок 2.BODY > P |
| E + F | Отнася се до елемент F, който следва незабавно след E | H1 + LIСписък незабавно след заглавието ще бъде форматиран съгласно това правило. |
| E#myid | Отнася се до елемент Е, който има id="myid" | Ако някъде в HTML кода сте указали id на някой таг(напр. <img id="banner" src="...">), то това правило ще се отнася до него. |
Създавайки таблиците си със стилове, понякога е добре да оставяте някой и друг коментар, разясняващ какво точно сте направили. Това може да се окаже много полезно, когато по-късно разглеждате кода си или ако някой друг се опитва да го разчете. В CSS коментарите се поставят така:
P.bright { font-color: grey; text-align: right } /* абзацът с описанието на снимката ще бъде с по-светъл цвят и подравнен отдясно. */И ако след всичко това още не сте се отегчили, то има голяма вероятност съвсем скоро да се превърнете в истински CSS джедай, който може да използва всички техники и трикове на стиловете. Дръжте се близо и няма опасност да се окажете заблудени от тъмната страна. Нека силата бъде с вас (и в следващите уроци)!