CSS Osnove

Eksterno zapisivanje CSS-a

Eksterno zapisivanje CSS-a podrazumeva kreiranje posebnog tekstualnog dokumenta koji će biti kreiran i pozivan iz HTML dokumenta. On se poziva tako što se u samom HTML dokumentu navodi putanja ka njemu a koja govori pretraživaču da ga učita i primeni stilska pravila koja su u njemu definisana na HTML elemente koje ima u daljem kodu. Tag koji se stavlja u head sekciju dokumenta izgleda ovako:

<head>
<link rel=”stylesheet” type=”text/css” href=”stil.css”>
</head>

Kao što vidimo, za ovo se koristi poseban link tag a najbitniji parametar/atribut koji se navodi je href. U njemu je sadržana relativna putanja ka CSS dokumentu kao i njegovo ime.

Ovaj link je samozatvarajući.

rel=”stylesheet” pojašnjava pretraživaču u kakvom su odnosu dokument koji se uvozi i HTML dokument.

type=”text/css”   je više informativnog tipa. Označava vrstu sadržaja koji se uvozi (MIME tip).

Inače, zbog kompletnosti, MIME predstavlja način klasifikovanja dokumenata na Internetu, nezavisno od operativnog sistema na kome se koriste. MIME tip je koristan aplikacijama kao što su Web server i pretraživač. MIME se zapisuje iz dva dela odvojena kosom crtom (/). U našem slučaju text znači da se radi o tekstualnom dokumentu a css da je unutar njega css kod. Danas većina pretraživača ima ugradjeno prepoznavanje svih tipova dokumenata pa im ovaj podatak više nije potreban. Ovaj parametar se uglavnom stavlja zbog kompatibilnosti sa starijim verzijama pretraživača.

href=”stil.css” – CSS dokument koji učitavamo zove se stil.css i nalazi se u istom folderu gde i HTML dokument koji ga poziva. Sam CSS dokument je najobičniji tekstualni dokument i može se kreirati u bilo kom tekst editoru, čak i u Notepad-u.

Razlika ovog načina zapisivanja u odnosu na inline i interni način je u tome što u slučaju eksternog fajla, ne postoji style tag nigde u dokumentu jer ne postoji potreba razdvajanja CSS i HTML koda. Sam način pozivanja putem taga link i imena fajla koji ima ekstenziju .css je pretrazivaču dovoljan da zna šta u okviru tog fajla treba da očekuje, a to je – CSS kod. Da bi vizuelno lakše objasnili, eksterni CSS fajl izgleda ovako:

body{

margin: 0 auto;

padding: 0;

background-color: #EBEBEB;

}

.Main{

position: absolute;

width: 100%;

left: 0;

top: 0;

}

.PageBackgroundSimpleGradient{

background-image: url(‘images/Page-BgSimpleGradient.jpg’);

background-repeat: repeat-x;

height: 500px;

}

.cleared{

float: none;

clear: both;

margin: 0;

padding: 0;

border: none;

font-size:1px;

}

NAPOMENA: Ovde možete primetiti kako prazan prostor u okviru CSS pravila nema nikakav značaj za ispravnost koda. Ovo je najčešći način zapisivanja gde se u okviru jedne linije definiše pojedinačni atribut.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn