Код

CSS - пълно ръководство (част 4)

От Георги Варзоновцев · 2003-08-20

След като вече можете да добавяте стилове към документа е време да научите и някои други хитрини.

В урок номер 2 разбрахте, че стилове могат да се задават за всеки 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="...">), то това правило ще се отнася до него.

IMG#banner { margin: 20px }

Коментари

Създавайки таблиците си със стилове, понякога е добре да оставяте някой и друг коментар, разясняващ какво точно сте направили. Това може да се окаже много полезно, когато по-късно разглеждате кода си или ако някой друг се опитва да го разчете. В CSS коментарите се поставят така: 


         P.bright { font-color: grey;
                    text-align: right }  /* абзацът с
                описанието на снимката ще бъде с 
                по-светъл цвят и подравнен отдясно. */

И ако след всичко това още не сте се отегчили, то има голяма вероятност съвсем скоро да се превърнете в истински CSS джедай, който може да използва всички техники и трикове на стиловете. Дръжте се близо и няма опасност да се окажете заблудени от тъмната страна. Нека силата бъде с вас (и в следващите уроци)!

<<< Към Урок 3 Към Урок 5 >>>