Otisni ovo poglavljeOtisni ovo poglavlje

Elementi CSS-a

CSS iz vanjskog dokumenta

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.

   
CARNet