|
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".
<head>
...
<style type="text/css">
@import url("/css/stil.css");
@import "/css/stil2.css";
@import "http://www.example.com/css/stil3.css";
</style>
...
</head>
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.
|
