Код

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

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

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

Войната на правилата

В Урок 2 разбрахте, че съществува определена йерархия на правилата в CSS. Съгласно тази йерархия едни правила могат да се окажат по-силни от други. Нека вземем един пример. За селектор използваме тага BODY. Правилата за неговото форматиране се намират и във външен css фаил и в стил в тялото на документа. Едното правило казва, че фонът на страницата ще е зелен, а другото - че ще е син. Кое правило трябва да спази браузърът?

Отговорът се крие в алгоритъма, според който браузърът прилага CSS правилата към документа. (cascading в Cascading Style Sheets означава точно това - начинът, по който се степенуват правилата за форматиране на един документа чрез стилове.) В общи линии алгоритъмът действа по следния начин:

  1. Търси всички правила отнасящи се към съдържанието на дадения документ. Тези правила могат да са:
    • всички онези онези стилове зададени по начините описани в Урок 3;
    • стандартните стилове на браузъра;
    • файл със стилове на потребителя (много браузъри могат да прилагат към докумнета css файлове, които са създадени от потребителите. Най-често това са хора, които имат проблеми със зрението и чрез стиловете, които сами са създали правят примерно размерите ан шрифта върху страницата достатъчно големи).
  2. Прилага правилата с най-голяма сила. Първите имат по-голяма сила, последните - най-малка:
    1. стиловете, директно добавени в кода на страницата;
    2. стиловете в главата на HTML документа (тези между <STYLE> и </STYLE> таговете);
    3. външен css файл, към който има връзка от вида <link href="style.css">;
    4. външен файл, вмъкнат в HTML документа чрез @import правило;
    5. файл със стилове на потребителя;
    6. стандартните стилове на браузъра.

Вероятно това ви изглежда безкрайно объркано и прекалено подробно. И наистина е. Затова просто го прочетете и не се задълбавайте много-много. После ще му отделим по-голямо внимание. Сега всичко ще бъде обяснено

По-просто

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

"Първо," - мисли си браузърът, - "трябва да използвам най-конкретните правила."

Пример:

BODY { color: green }
P { color: red }

"Значи цветът на текста в целия документ (всичко между <BODY> и </BODY> таговете) трябва да е зелен. Абзаците (<P> елементите) са деца на <BODY> елемента и затова трябва да наследят неговия зелен цвят. Но има и правило, което казва, че те трябва да са червени. То е по-конкретно. Значи ще използвам него!"

Нека сега изпитаме нашия малък приятел с въпроса: "Какво щеше да направиш ако нямаше по-конкретно правило?"

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

Пример 2:

P { color: green }
P { color: red }

"О, бедният аз! С какво заслужих такива смотани уеб разработчици? Какво да правя сега?" Сега браузърът трябва да избере кое от двете правила да използва. И понеже днешните браузъри не са много умни, те използват това, което им е най-близо до ума, т.е. това което са прочели последно. Ето защо браузърът ще предпочете да използва правилата в последователността, в която те се появяват в кода на страницата.

"Аха! Абзаците ще са червени. Точка!"

HTML срещу CSS

Както знаем в HTML има тагове, които са предназначени за оформяне на външния вид - такива са например <FONT> таговете. Резонен би бил въпросът "Какво ще стане ако в кода на страницата присъстват както стилове, така и HTML тагове?"

Пример:

I { font-family: serif }
<p>Пушенето е вредно за <i><font face="sans-serif">вашето</font></i> здраве!</p>

Виждаме, че има правило, което указва, че курсивният шрифт трябва да е серифен, но <FONT FACE> тагът указва, че курсивът трябва да е с безсерифен шрифт.

Според препоръките на W3C би трябвало да се приложи правилото в стила, а не да се изпълни HTML тага. Повечето днешни браузъри обаче правят точно обратното. Ето защо най-правилното решение е да не се използва HTML за оформяне на външния вид на документите.

 

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



<<< Към Урок 3 Допълнение към Част 5 >>>