CSS - каскади и приоритети
CSS каскади
Една съществена особеност, отразена и в самото име на CSS, е възможността стилове да се задават на няколко нива, като всяко следващо ниво може да допълва или измества командите от предишното:
- стил по подразбиране, който задава всеки браузър
- стилове в отделен CSS файл;
- CSS команди в главата (head) на HTML документа
- стилове в отделните HTML елементи
За да стане по-ясно, ще използвам следната аналогия: можем да оприличим CSS командите на заповедите на един главнокомандващ. Той може да напише писмо със заповеди, което да размножи и изпрати към отделните началници на армии. Освен това, генералът може да даде специфични за дадена армия инструкции като например изпрати телеграма до съответния офицер. Заповедите в телеграмата ще допълват и евентуално ще отменят противоречащи заповеди, описани в общото писмо.
Накрая, генералът може да се обади лично по телефона на редови войник и да му даде специфични инструкции. Последните ще допълват всички останали заповеди, но ще имат най-висок приоритет и именно те ще бъдат изпълнени, ако има противоречие със заповеди в писмото или телеграмата.
Браузърът постъпва точно по този начин в определяне на крайния резултат-стил. Най-общи инструкции за стил са вградени в самия браузър и те ще бъдат изпълнени, ако няма нещо друго зададено (в нашата аналогия това са примерно традициите в армията - сходни, но не и идентични - браузърите също имат малки различия във вградените стилове, които ползват).
Външен CSS файл с инструкции прилича на писмото на генерала по това, че може да се размножи и изпрати до повече от една страници. Стил, указан в главата на HTML страницата, съответства на телеграмата до отделна армия: инструкциите се отнасят само за коннкретната страница и допълват, като евентуално обезсилват общите инструкции на външния CSS файл.
Стилът, указан в отделен елемент, има приоритет над всичко останало, точно както личното обаждане на генерала може както да допълни, така и да отмени всички предишни инструкции. И за да завършим тази аналогия, напълно в духа на армията всяка заповед е предпоследна. Ако например напишете
h1 {color: red} и веднага след това
h1 {color: blue}
валидна ще бъде втората команда и цветът на заглавието h1 ще бъде не червен, а син.
Стилове във външен CSS файл
Съхраняването на CSS команди във външен файл дава възможност един и същи стил да се наложи над произволен брой страници. Достатъчно е в главата на HTML страницата, за която искате да е валиден дадения стил, да укажете използването на съответния CSS файл:
<head>
<link rel="stylesheet" type="text/css" href="stil1.css" />
</head>
CSS файлът съдържда само CSS команди (няма HTML тагове), например:
h1 {color:red}
p {text-indent:1em;}
th {background-color:#DD2599}
Понеже CSS файловете са по същество текстови файлове, можете да ги създавате и редактирате с обикновен текстов редактор. Когато избирате име на CSS файла, не забравяйте да сложите за разширение .css
Указване на стил в главата на HTML
Когато създавате уникален стил, който ще бъде използван само за една страница, най-добре е да го укажете като вътрешен стил: в главата на HTML документа. За целта се узползват таговете <style> и </style>, между които се разполагат CSS командите са стил. Ето един пример:
<head>
<style>
h1 {color:red}
p {text-indent:1em;}
th {background-color:#DD2599}
</style> </head>
Стил в самия HTML елемент
Ако искате да зададете специфичен стил за един конкретен елемент, можете да го направите по следния начин:
<p style="text-indent:1em; color:green">
Това ще зададе отстъп за началото на параграфа, както и ще направи цвета на текста зелен.
С подобно указване на стил се губи гъквавостта, която имате с използване на CSS и по възможност е по-добре да го избягвате. Помислете за изразходваното време и сметката за телефон на злополучния генерал, който трябва да се обажда лично на всеки един от войниците си при промяна в стратегията...
Следва: CSS - мерни единици
Ако решите, че "как се прави сайт" ръководството може да бъде полезно и за други хора, моля гласувайте за сайта:
