След като видяхме какво най-общо представляват стиловете, сега ще се спрем върху въпроса как могат да се добавят те към HTML документа. Общо взето начините за това са четири:
Сега ще се спрем по-подробно на всеки един от тях.
Както се досещате под глава на документа в HTML се разбира онази част, която
е между <HEAD> и </HEAD> таговете.
Всъщност ние вече демонстрирахме този метод в предишния урок, но сега ще ви
припомня как изглеждаше той:
<HTML>
<HEAD>
<TITLE>Динозаврия</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
BODY { color: gray }
H1 { color: orange }
-->
</STYLE>
</HEAD>
<BODY>
<H1>Добре дошли в света на динозаврите!</H1>
<P>Тук ще научите колко наистина са били дебели
тези гущери.</P>
</BODY>
</HTML>
Добавените по този начин стилове ще се отнасят само за съответния документ. Ако искате да добавите същите стилове към друг документ ще трябва да ги препишете наново. Този метод е препоръчителен ако имате нужда да прибавите стил, който няма да ви трябва никъде другаде в сайта. В противен случай ще си спестите много усилия ако го добавите във външен CSS файл.
Особеното, което трябва да отбележите тук е, че (1) към
<STYLE> тага се добавя атрибута TYPE="text/css"
и (2) всички правила се заграждат с тагове за коментари.
Атрибутът TYPE="text/css" се добавя, защото по него браузърите
разбират как да интерпретират информацията в съответните тагове (в случая - като
cascading style sheets правила). Браузърите, които не го разбират просто ще го
прескочат без да успеят да нанесат някакви поражения.
Таговете за коментари (<!-- и -->) се добавят, защото някои от старите браузъри не се съобразяват с TYPE атрибута и ще покажат стиловете ви като част от текста на страницата. Кодът заграден с тагове за коментари не се показва на екрана и не се чете от браузърите. Подобен трик за заблуда на старите браузъри се използва и когато се добавят JavaScript-ове. Използвайте го винаги, ако не искате посетителите ви да се разбягат с писъци и сълзи на очи!
В този метод се крие силата на CSS. Когато имате голям сайт с много страници, просто добавяте връзка към един основен css файл, който определя правилата за стиловете. След това ако трябва да промените големината на шрифта заглавията, няма да ви се налага да редактирате всяка страница и всяко заглавие поотделно, а само да промените правилото в css файла. Това ще ви удължи живота и със сигурност ще ви спаси от артрита.
Добавянето на връзка към външен css файл е лесно. Вместо да добавяте
<STYLE> таг в главата на документа, използвайте
<LINK> по следния начин:
<HTML> <HEAD> <TITLE>Динозаврия</TITLE> <LINK rel=stylesheet type="text/css" href="styles.css"> </HEAD> <BODY> <H1>Добре дошли в света на динозаврите!</H1> <P>Тук ще научите колко наистина са били дебели тези гущери.</P> </BODY> </HTML>
В случая не се налага да използвате таговете за коментар, но трябва да
използвате TYPE елемента, както и "rel=stylesheet", за
да знаят браузърите накъде ще ги отведе дадената връзка и как трябва да се
държат с информацията там.
Следващата стъпка е да създадете файл с име styles.css и в него
да напишете правилата за стиловете. В случая нека бъдат:
H1 { color: orange; font-family: Impact }
P { background-color: yellow; font-family: courier }
Сега качете css файла, който създадохте, на сървъра си (точно както качвате и HTML страниците си). Когато посетите страницата си, ще видите, че тя е добила блясък и красота чрез стиловете указани във външния файл. Можете да правите връзки към един css файл от колкото си искате различни HTML документа.
Вмъкването (import) на външен css файл в документа действо по начин подобен на създаването на връзка, но на пръв поглед изглежда повече като добавяне на стилове в главата на документа, т.е. то е една комбинация между двете, която ви дава допълнителни възможности.
Вмъкването става чрез @import правило, което се добавя по следния начин към стиловете в главата на документа:
<HTML>
<HEAD>
<TITLE>Динозаврия</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
@import url(morestyles.css);
BODY { color: grey }
H1 { color: orange }
-->
</STYLE>
</HEAD>
@import правилото винаги трябва да предхожда всички останали правила и
задължително завършва с точка и запетая (;). Освен с
url(morestyles.css) можете да укажете адреса на файла, който искате
да вмъкнете, просто ограждайки го с кавички, т.е. цялото правило ще изглежда
така: @import "morestyles.css";.
Нека в morestyles.css имаме следните правила:
H1 { color: blue;
font-family: impact }
P { background-color: yellow;
font-family: courier }
В случая за заглавията ще имаме зададени две правила - чрез външния файл със стилове и чрез стиловете в главата на документа. Крайният резултат от това припокриване ще бъде следният:
Тук ще научите колко наистина са били дебели тези гущери.
В Cascading Style Sheets при подобни противоречия винаги печелят
по-конкретните правила или правилата, които са по-надолу в кода (зададени са
по-късно). Ето защо, въпреки че във morestyles.css зададохме син
цвят за заглавието, то се показва в оранжево, защото вътрешните стилове са след
@import правилото в самия код. Но правилото за абзаците се възприема без
проблеми, защото не си противоречи с друго.
Стилове могат да се добавят и към всеки елемент между
<BODY> и </BODY> таговете. Един такъв
пример ще изгледжда така:
<HTML>
<HEAD>
<TITLE>Динозаврия</TITLE>
</HEAD>
<BODY>
<H1 style="color: orange; font-family: Impact">Добре дошли
в света на динозаврите!</H1>
<P style="background-color: yellow; font-family: courier">Тук ще
научите колко наистина са били дебели тези гущери.</P>
</BODY>
</HTML>Когато използвате този метод няма нужда да пишете каквото и да било в главата
на документа. STYLE елементът дава на браузъра цялата информация,
която му е необходима.
Бедата при този начин за добавяне на стилове е, че важат единствено за
елемента, към който са приложени (за разлика от предишните методи, когато едно
правило се отнасяше за всички елементи от един и същи вид - например към
H1). Можете да използвате този метод, когато искате да оформите
някои елемент по специфичен начин и няма да ви се налага да използвате същото
оформление другаде.
Това е най-конкретният метод за добавяне на стилове към HTML документ. Това значи, че ако сте използвали някои от предишните и след това този, то в крайна сметка въхншният вид ще зависи от правилата указани в тялото на документа.
Помнете, че тези методи за добавяне на стилове към страниците ви не се изключват взаимно, а обратното - допълват се. Можете да ги използвате и всичките наведнъж, но и всеки един по отделно. И това е една от най-силните страни на CSS. Всеки един от тях има своите преимущества и недостатъци, но номерът е да се научите да ги комбинирате по такъв начин, че да създавате едни наистина внушителни (поне на външен вид) сайтове.