Меню

Първи стъпки в правене на сайтове

Влез Излез

Основни CSS селектори

За да прилагаме стилове към елементите си в нашата HTML страница, трябва да знаем точно как да обозначим даден стил към какви тагове трябва да се отнася. Да започнем с някои по-глобални стилове и да преминем към по-конкретизирани.

Можем да използваме просто една звездичка, за да означим всички елементи:

* { margin: 0; }

Ако поясним, че margin е външното отстояние, което задаваме на елементите, то тогава дефиницията от примера просто прави това отстояние за всички елементи 0. Точно такава дефиниция ще видите в много сайтове, тъй като по подразбиране браузърите задават различен margin на някои елементи – h1 – h6 заглавия, p, ul, ol, blockquote и други. За да сме сигурни, че на различните браузъри няма да имаме някакъв неочакван margin на който и да е елемент, използваме горната дефиниция, за да ги „занулим“ (иначе казано да ги reset-нем).

Както в предния урок вече изяснихме, стилове можем да прилагаме и към всички тагове от даден тип като просто използваме името на тага:

h1 { font-size: 32px; }
h2 { font-size: 24px; }
p { font-size: 12px; }

Този кратък CSS се грижи за това всички заглавия от първо ниво да са с големина на шрифта 32 пиксела, заглавията от второ ниво – с 24, а абзаците да са с големине на шрифта 12.

По този начин обаче зададената големина на шрифта за абзаците не е по подразбиране за всички стилове и ако имаме списък, който не е вложен в <p> таг (както би трябвало, за да бъде HTML кодът ни валиден), тогава големината на неговия текст ще бъде различна. За да сме сигурни, че текстът ни ще бъде какъвто искаме е по-добре да зададем този стил на <body> тагът.

body { font-size: 12px; }

Поради факта, че абзаците се намират вътре в <body> тагът те унаследяват неговите стилове. В този случай, дори и да не бяхме задали големина на заглавията, те пак нямаше да са с шрифт с големина 12px, тъй като те имат собствени предварително зададени стилове от браузърите и по тази причина те не унаследяват font-size белегът на <body>-то.

Друг тип селектори, които бихме могли да използваме са селектори по клас. Те използват class атрибута на HTML елементите, за да назначим определен стил към тях. Синтаксисът на class selector-ът започва с точка (за да се различи от обикновен селектор по име на таг) и продължава с името на класа:

.red { color: #F00; }

По този начин оказваме, че искаме всички елементи, които имат клас red да са с червен цвят на текста. Ако искаме да ограничим само абзаците с клас red да са червени пишем комбинация от двата селектора:

p.red { color: #F00; }

По този начин този стил ще е валиден за таг <p class=“red“>, но няма да е валиден за <li class=“red“>.

Подобно на класовите селектори има и ID селектори, които разчитат на ID атрибута на таговете. За разлика от точка, както е при класовете, тези селектори използват диез (#):

#logo { color: #000; }

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

a#logo { background-image: url(logo.png); }
img#logo { margin: 5px; }

В примера задаваме за фоново изображение на елемента <a id=“logo“> да се използва картинката logo.png, а за <img id=“logo“ /> задаваме външно отстояние 5px – двата елемента може да се срещат на две отделни страници.

Имайки предвид тези селектори вече можете да пишете доста CSS. Или поне аз така си мислех преди 5 години, когато познанията ми се изчерпваха до тук. Топлата вода открих обаче, когато научих и тези, които следват:

#content p { color: #000; }
#sidebar p { color: #333; }

Отново се използва комбинация от селектори, но не за един елемент, а за вложени. Това е каскадността, която споменахме в предния урок, която се съдържа и в името CSS. С кода от последния пример задаваме цвета на текста на абзаците, които са вътрешни за елемент с id=“content“, да бъде черен, а на абзацити, които са вътрешни за елемент с id=“sidebar“ – да са тъмно сиви. Можем да влагаме неограничено много елементарни селектори, както и селектори от всеки тип. Освен това, можем да използваме по няколко селектора за една дефиниция, като отделяме селекторите със запетая:

#header h1,
#content a.external,
#sidebar .widget h3,
#footer ul.menu a { color: #00F; }

С този код задаваме син цвят на текста за елементи, които отговарят на едно от следните условия: заглавие от първо ниво в елемент с id=“header“, линкове с клас „external“ в елемент с id=“content“, заглавия от трето ниво разположени в елемент с class=“widget“, които са вътрешни за елемента с id=“sidebar“, връзки от неномериран списък с клас „menu“, разположен в елемент с id=“footer“.

До тук всичко работи дори и на Internet Explorer 6. Следват няколко селектора, които се поддържат от версия 7 нагоре, което лично според мене е напълно достатъчно, но държа да сте предупредени, че IE6 ще се счупи, ако използвате:

Селектор по атрибут:

a[target] { color: #F00; }

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

a[target="_blank"] { color: #F00; }

Така ще имаме червени връзки, само ако имат атрибут target, и този атрибут има стойност „_blank“.

По подобен начин можем да зададем и:

a[class="red"] { color: #F00; }

което обаче е тъпо, тъй като това е еквивалентно на a.red, което е по-кратко и което работи на повече браузъри (е… казахме, че с IE6 няма да се занимаваме, но все пак въпросът е принципен – защо зор-зорна да го чупим, достатъчно е, че го пренебрегваме). Единственият смислен случай да използваме това е когато искаме елементът да има само и единствено клас „red“.

Съществуват и други селектори по атрибут, като [attribute^=“start“], [attribute$=“end“], [attribute*=“partial“], като в първия случай обхващаме елементи, чиито атрибут започва със „start“, във втория – завършват на „end“, а в третия – съдържат „partial“ някъде в себе си. И трите селектора биха обхванали следния елемент:

<p attribute="start-partial end">Текст<p>

Атрибут „attribute“ не съществува, но го използваме само за примера. Забележете, че start и partial са разделени с тире, а partial и end – с интервал, което в конкретния случай няма никакво значение (нямаше да има значение, ако всичко беше въведено и като една цяла дума). Ако използваме обаче [attribute~=“end“] тогава ще имаме нужда съдържанието на атрибута да е отделено с интервал и тогава пак ще селектираме същия елемент. Можем да използваме и [attribute|=“start“], което ще търси елементи, чиито attribute атрибут съдържа думата start отделена с тире (така че това пак ще работи в предния случай). След като знаем това, вече можем да кажем, че следното е наистина тъпо:

a[class~="red"] { color: #F00; }

Селектор за няколко класа на един елемент:

.big.red { font-size: 18px; color: #F00; }

Въпреки, че примерът е частично неуместен, тъй като стиловете за класовете big и red можем да ги дефинираме поотделно, запазвайки големината на шрифта в единия, а цвета на текста – в другия, е важно да се отбележи, че можем да използваме по няколко класа като условие за даден стил. Повече смисъл би имал следния пример:

.big { font-size: 18px; }
.red { color: #F00; }
.big.red { font-weight: bold; }

Така правим елементите с клас big да са с едър шрифт, тези с клас red да са червени, а тези, които отговарят и на двете условия, освен всичко друго да са и удебелени, по някакви си там дизайнерски или други изисквания.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax