Списание за дизайн, визуална култура и Новата медия.
Вече сме в петия урок от поредицата и мога да ви уверя, че след като прочете и него ще имате всички основни знания свързани с CSS - граматиката на езика. Останалото са просто думите, които ще зазубряте като нови думи. Но няма да е фатално ако не ги запомняте, защото винаги има справочници, в които можете да погледнете - важното е да познавате основите. И затова нека продължим.
В Урок 2 разбрахте, че съществува определена йерархия на правилата в CSS.
Съгласно тази йерархия едни правила могат да се окажат по-силни от други.
Нека вземем един пример. За селектор използваме тага BODY.
Правилата за неговото форматиране се намират и във външен css фаил и в стил
в тялото на документа. Едното правило казва, че фонът на страницата ще е
зелен, а другото - че ще е син. Кое правило трябва да спази браузърът?
Отговорът се крие в алгоритъма, според който браузърът прилага CSS правилата към документа. (cascading в Cascading Style Sheets означава точно това - начинът, по който се степенуват правилата за форматиране на един документа чрез стилове.) В общи линии алгоритъмът действа по следния начин:
<STYLE>
и </STYLE> таговете); <link href="style.css">;Вероятно това ви изглежда безкрайно объркано и прекалено подробно. И наистина е. Затова просто го прочетете и не се задълбавайте много-много. После ще му отделим по-голямо внимание. Сега всичко ще бъде обяснено
Нека сега влезнем в главата на малкия измъчен браузър и видим в най-общ план, какво търси той, когато пред него се изправи една страница с всички онези стилове, които изброихме по-горе.
"Първо," - мисли си браузърът, - "трябва да използвам най-конкретните правила."
Пример:
BODY { color: green }
P { color: red }
"Значи цветът на текста в целия документ (всичко между <BODY>
и </BODY> таговете) трябва да е зелен. Абзаците (<P>
елементите) са деца на <BODY> елемента и затова трябва
да наследят неговия зелен цвят. Но има и правило, което казва, че те трябва
да са червени. То е по-конкретно. Значи ще използвам него!"
Нека сега изпитаме нашия малък приятел с въпроса: "Какво щеше да направиш ако нямаше по-конкретно правило?"
"Тогава щях да приложа наследеното правило, разбира се!" - казва браузърът и е прав. В случай че нямаме конкретно зададено правило, браузърът използва наследеното правило, т.е. цветът на абзаците щеше да е зелен. Но нека вземем
Пример 2:
P { color: green }
P { color: red }
"О, бедният аз! С какво заслужих такива смотани уеб разработчици? Какво да правя сега?" Сега браузърът трябва да избере кое от двете правила да използва. И понеже днешните браузъри не са много умни, те използват това, което им е най-близо до ума, т.е. това което са прочели последно. Ето защо браузърът ще предпочете да използва правилата в последователността, в която те се появяват в кода на страницата.
"Аха! Абзаците ще са червени. Точка!"
Както знаем в HTML има тагове, които са предназначени за оформяне на външния
вид - такива са например <FONT> таговете. Резонен би
бил въпросът "Какво ще стане ако в кода на страницата присъстват както
стилове, така и HTML тагове?"
Пример:
I { font-family: serif }
<p>Пушенето е вредно за <i><font face="sans-serif">вашето</font></i>
здраве!</p>
Виждаме, че има правило, което указва, че курсивният шрифт трябва да е
серифен, но <FONT FACE> тагът указва, че курсивът трябва
да е с безсерифен шрифт.
Според препоръките на W3C би трябвало да се приложи правилото в стила, а не да се изпълни HTML тага. Повечето днешни браузъри обаче правят точно обратното. Ето защо най-правилното решение е да не се използва HTML за оформяне на външния вид на документите.
В следващия урок ще се спрем по-подробно върху същата тема, защото тя е от съществено значение за правилното освояване на основите на CSS. Дотогава смилайте внимателно и спокойно информацията. И най-важното - експериментирайте!