Elementi CSS-a

Osnove sintakse CSS-a, priključivanje stilova web stranici, određivanje elemenata na koje će pojedine definicije stilova djelovati. Usput, tu su i neka svojstva o kojima će više riječi biti u posebnoj knjizi.

CSS u dokumentu

 

CSS se piše u dokumentu ako se odnosi samo na taj dokument ili još manje, samo na pojedini element.

Umetanje CSS-a u zaglavlje dokumenta

CSS se može definirati u zaglavlju dokumenta u oznaci <style> uz uporabu atributa type="text/css".

<head>
...
<style type="text/css">
p {
font-family: "Courier New", Courier, mono;
}
.naglaseno {
color: #CC0000;
font-size: 24px;
font-weight: bold;
}
</style>
...
</head>

Primjećujete da je navedeni način umetanja jako sličan opisanom uvozu CSS-a. Ustvari, moguće ih je i kombinirati, tako da se, ispod linija za uvoz CSS-a, nadopišu lokalne definicije CSS-a.

<head>
...
<style>
@import "/css/stil.css";
p {
font-family: "Courier New", Courier, mono;
}
</style>
...
</head>

Dodavanje CSS-a u liniji atributom style

Stilovi za pojedinačnu HTML oznaku u dokumentu mogu biti definirani atributom style. Ovaj se atribut može definirati za gotovo sve HTML oznake u tijelu dokumenta – izuzetak su oznake <script> i <param>.

<p style="font-size:10px">...tekst...</p>

Ovako definiran stil vrijedi samo za oznaku unutar koje je definiran. Budući da od stilova očekujemo da djeluju na slične elemente cijelog dokumenta, pa i web sjedišta, ovakva se definicija stila u pravilu upotrebljava vrlo rijetko, samo kad treba oblikovati unikatni dio teksta.

  • Dodavanje CSS-a u liniji atributom style se kosi s idejom o razdvajanju sadržaja od dizajna jer se podaci o dizajnu ponovno nalaze u HTML datoteci. Njegova je primjena isključivo na mjestima u kojima nema drugog rješenja.
  • Pogledajte sami jednu situaciju u kojoj se upotrebljava atribut style: nađite neki CMS u kojem možete objavljivati članke, neki LMS u kojem možete slati poruke na forum ili slično. Napišite neki tekst, obojite nekoliko riječi, te pogledajte kôd napisanog priloga. Najčešće sadrži ili zastarjele HTML oznake (<font>) ili atribut style.

CARNet