Оценка на читателите: / 18
Слаба статияОтлична статия 

CSS - каскади и приоритети

CSS каскади

Една съществена особеност, отразена и в самото име на CSS, е възможността стилове да се задават на няколко нива, като всяко следващо ниво може да допълва или измества командите от предишното:

  1. стил по подразбиране, който задава всеки браузър
  2. стилове в отделен CSS файл;
  3. CSS команди в главата (head) на HTML документа
  4. стилове в отделните 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 - мерни единици

 

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

+добави в любими.ком Елате в .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт!!!

Ако желаете да оставите коментар към статията, трябва да се регистрирате.