ISSN 1312-0379
За сайта | Карта на сайта | Контакт | F.A.Q.

Главна > Статии > Код

CSS - пълно ръководство (допълненение към част 5). От Георги Варзоновцев.

В петия урок от поредицата се занимавахме йерахията на правилата в CSS. Тук ще се спрем по-подробно върху този въпрос понеже е от съществено значение при работата със стилове. Това допълнение / уточнение към Урок 5 е малко по-сложно и ако не сте много навътре в цялата тази работа ви препоръчвам просто да го пропуснете. И така

По-сложно

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

Общото правило е, че стиловете на автора на страницата са най-важни и най-силни. Следващи по сила са стиловете на потребителя, а най-хилави са тези на браузъра (използват се само в случаите, когато нито авторът на страницата, нито потребителят са указали собствени стилове).

Стилове на автора на уеб страницата

Те са основно четири вида и върху тях се спряхме в урок 2, когато разглеждахме различните начини за добавяне на стилове към документа. Сега просто ще отбележим последователността, в която се спазват правилата зададени в тях.

Пример:

<HTML>

<HEAD>
<TITLE>Динозаврия</TITLE>
<LINK REL="Stylesheet" type="text/css" href="styles.css">
<STYLE TYPE="TEXT/CSS">

<!--
@import: url("extended.css");
BODY     { color: gray }
H1       { color: orange }
-->
</STYLE>
</HEAD>
<BODY>
<H1 style="font-size: 200%">Добре дошли в света
 на динозаврите!</H1>
<P>Тук ще научите колко наистина са
 били дебели тези гущери.</P>

</BODY>
</HTML>

Където styles.css съдържа две правила:

BODY { color: black}
H1 { color: red }

а extended.css:

H1 { color: green;
font-size: 150% }
P { color: gray;
text-align: justify }

В този пример към HTML документа са добавяни стилове по всички възможни начини. И ако се чудите в края на краищата какъв цвят ще са заглавието и абзаца. може би еще добре да проследим какво прави браузърът в процеса на прилагане на различните стилове.

Първо браузърът проследява добавената чрез <link връзка css файл. Което означава, че ако спре до тук ще трябва да покаже заглавието в черно и абзаца в червено. Но той продължава и стига до @import правило, което е по-силно от предишното. В extended.css се указва, че заглавията трябва да се зелени с размер на шрифта 150%, а абазът - сив и подравнен от двете страни. Но след @import правилото следват и три други, които от своя страна са с още по-голяма сила. От тях следва, че загалвието в края на краищата ще е сиво, а абзаците - оранжеви. Но явно в последствие авторът на документа е решил, че специално това заглавие трябва да бъде с размер на шрифта не 150%, а 200%. Затова и указва чрез style атрибута това ново правило, което е най-специфично и в същото време с най-голяма сила.

Стилове на потребителя

По настоящем потребителите използващи Internet Explorer и Opera имат възможността сами да добавят стилове към документа. (IE: от менюто избирате Tools -> Internet Options; в полето General има бутон Accessibility... ; в полето User style sheet се задава път до css файла на потребителя; Opera: File -> Preferncies -> Page Style). Странното при IE е, че стиловете, които задава потребителя се оказват по-силни от тези на автора на документа, но какво да се прави - Microsoft...

Тук е мястото да споменем един трик, който е създаден от W3C, за да осигурява баланс между стиловете на автора и стиловете на потребителя. Този трик се състои в използването на "!important" декларацията (декларация, която съсъдржа ключовите думи "!" и "important").

Декларация "!important" е по-силна от обикновена декларация. !important декларация в стиловете на потребителя са с по-голяма сила от такава в стиловете на автора на документа.

Пример: 

/* От стиловете на потребителя */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* От стиловете на автора */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

Първото правило в стиловете на потребителя съдържа "!important" декларация, която е по-силна от съответсватщата декларация в стиловете на автора. Втората декларация също ще "спечели", защото също е "!important". Третото правило в стиловете на потребителя, обаче, не е "!important" и затова "губи" от второто правило в стиловете на автора. Освен това третото правило зададено от автора ще се окаже по-слабо от второто, понеже второто съдържа "!important" декларация. Това показва, че "!important" декларациите имат функции и в стиловете на автора.

 

Целта на тодопълнение / уточнение беше да покаже различните възможности за комбиниране на правила добавяни към HTML документа по различни начини и от различни "агенти" (не се хилете! Това е терминът, който изпозват W3C). Доколко целта е постигната имам известни съмнения - кашата наистина е голяма и то не само заради мъгливите препоръки, но и заради различния наичн, по който отделните браузъри се справят с този проблем. В крайна сметка, единственият истински начин да разберете кое действа и как действа е да експериментирате. Така че - хващайте се за клавиатурите...

<<< Към Урок 5