U prva dva slučaja pretpostavljamo da postoji zaseban dokument – datoteka pohranjena pod imenom stil.css, a u kojoj se nalazi navedeni CSS stil, i to bez ikakvih dodatnih oznaka:
p { font-family: "Courier New", Courier, mono; } .naglaseno { color: #9b5c98; font-size: 24px; font-weight: bold; }
Povezivanje na vanjski dokument
Povezivanje na vanjski dokument izvodi se oznakom <link> koja se dodaje u zaglavlje HTML dokumenta – između oznaka <head> i </head>.
Oznaka <link> sastavni je dio HTML standarda i služi povezivanju s vanjskim dokumentima. Završna oznaka </link> ne postoji.
Uz oznaku <link> postoji više atributa od kojih su nam najbitnija sljedeća tri:
- rel – definira odnos između oznake i odredišnog dokumenta. Može poprimiti nekoliko vrijednosti, a kad služi za povezivanje CSS-a, poprima vrijednost stylesheet;
- type – definira tip odredišnog dokumenta. U ovom slučaju tip dokumenta je text/css;
- href – URI dokumenta koji se povezuje.
Dakle, naš dokument povezao bi se sljedećim kôdom:
<head> ... <link rel="stylesheet" type="text/css" href="stil.css"> ... </head>
- Podsjetimo se: URI – Uniform Resource Identifier. Kod atributa href dopuštena je upotreba apsolutne i relativne putanje, sa stazom zapisanom u odnosu na smještaj HTML dokumenta ili u odnosu na korijen web sjedišta.
- Npr:
href="http://www.primjer.com/css/stil.css" ili href="stil.css" ili href="/css/stil.css".
Uvoz vanjskog dokumenta
Uvoz CSS-a obavlja se putem ključne riječi @import. Ona se upisuje u zaglavlju dokumenta i to unutar oznake <style>. U oznaku <style> obavezno se postavlja atribut tipa: type="text/css".
Uvoz CSS datoteke (@import) autoru omogućava isto što i povezivanje HTML datoteke s CSS datotekom (<link>). Razlika je u činjenici da se putem ključne riječi @import stilovi mogu uvoziti u druge CSS datoteke.
- Pri povezivanju CSS-ova iz vanjskih datoteka, bez obzira na metodu, bitno je pripaziti na redoslijed uvezenih stilova. Ukoliko su na više mjesta definirane različite vrijednosti svojstava istog selektora, zbog kaskadnih svojstava CSS-a nadvladava posljednja definicija. Više o tome u lekciji Kaskade.
|