Prijeđi na sadržaj

CSS

Izvor: Wikipedija
Ovo je glavno značenje pojma CSS. Za druga značenja pogledajte CSS (razdvojba).

CSS je kratica od (eng.) Cascading Style Sheets. Radi se o stilskom jeziku, koji se rabi za opis prezentacije dokumenta napisanog pomoću markup (HTML) jezika.[1]

Kako se web razvijao, prvotno su u HTML ubacivani elementi za definiciju prezentacije (npr. tag <font>), ali je dovoljno brzo uočena potreba za stilskim jezikom koji će HTML osloboditi potrebe prikazivanja sadržaja (što je prvenstvena namjena HTML-a) i njegovog oblikovanja (čemu danas služi CSS). Drugim riječima, stil definira kako prikazati HTML elemente. CSS-om se uređuje sam izgled i raspored stranice.

Sintaksa

[uredi | uredi kôd]

Style sheet u CSS-u sastoji se od nekoliko pravila. Svako pravilo sastoji se od selektora i deklaracijskog bloka.

Selektor

[uredi | uredi kôd]

Selektor (engl. selector) označava dio markupa na koji se primjenjuje stil. Selektor može biti:

  • svi elementi istog tipa, npr. svi h2 elementi
  • elementi određenog id ili class atributa:
    • id: jedinstven element
    • class: može obuhvaćati više od jednog elementa
  • elementi u odnosu na druge elemente u DOM-u

Pseudoklase su klase koje omogućuju opisivanje informacija koje nisu dostupne u DOM-u poput :hover koji identificira sadržaj samo ako korisnik drži pokazivač nad sadržajem.

Deklaracijski blok

[uredi | uredi kôd]

Deklaracijski blok su vitičaste zagrade unutar kojih se nalaze deklaracije. Svaka deklaracija sastoji se od svojstva, dvotočke (:) i vrijednosti. Između svake dvije uzastopne deklaracije mora se nalaziti točka zarez (;).[2]

Vrijednosti mogu biti ključne riječi poput "center" (sredina) i "inherit" (naslijedi), brojčane vrijednosti poput 100 (debljina fonta), 200px (200 piksela), 50vw (50 % širine viewporta) ili 80% (80 % širine prozora). Vrijednosti boja mogu biti ključne riječi (npr. "red" za crveno), heksadecimalne vrijednosti (npr. #FF0000 ili #F00), RGB vrijednosti od 0 do 255 (npr. rgb(255, 0, 0)), RGBA vrijednosti koje uključuju i alpha prozirnost (npr. rgba(255, 0, 0, 0.8)) ili HSL/HSLA vrijednosti (npr. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).[3]

Primjeri

[uredi | uredi kôd]

CSS možemo pisati unutar same HTML stranice, na dva načina:

  • kao stilove u zaglavlju HTML dokumenta (tj. između <style> i </style> elementa)
   <style type="text/css">
     h1 { color: blue }
   </style>
  • unutar samih HTML tagova, npr. <p style="color: magenta;">Neki tekst</p> što daje:

    Neki tekst

ili ga možemo definirati u posebnom dokumentu, i rabiti pomoću poziva:

  • <link rel="stylesheet" href="xyz.css" type="text/css">

ili pak:

   <style type="text/css">
     @import url(http://www.neki.url/neki_stil[neaktivna poveznica]);
   </style>

Izvori

[uredi | uredi kôd]

Informacija se u CSS-u može primiti na nekoliko načina. Izvori tih informacija mogu biti preglednik, korisnik i autor.

Različiti izvori imaju različite prioritete. U konačnici se prikazuje izvor s najvišim prioritetom. To se zove cascading.

Shema prioriteta u CSS-u (od najvišeg do najnižeg)
Prioritet Izvor Opis
1 Importance Bilješka ‘!important’ ima najviši prioritet
2 Inline Stil primijenjen na HTML element preko ‘style’ HTML atributa
3 Medijski upit Definicija nekog svojstva primjenjuje se na sve medije (računalo, mobitel, ispis, ...), osim ako
je definiran poseban CSS za taj medij
4 Definirano od strane korisnika Većina preglednika ima značajku pristupačnosti: korisnički definiran CSS
5 Specifičnost selektora Posebni kontekstualni selektor (#heading p) ima prioritet nad općenitim (samo #heading)
6 Redoslijed pravila Posljednje deklarirano pravilo ima najviši prioritet
7 Nasljeđivanje od roditelja Ako svojstvo nije deklarirano, nasljeđuje se od roditelja
8 CSS svojstvo unutar HTML dokumenta CSS stil ima prednost pred vrijednosti koju definira sam preglednik
9 Zadano u pregledniku Najniži prioritet ima vrijednost već deklarirana u samom pregledniku određena prema W3C specifikacijama zadanih vrijednosti

Povijest

[uredi | uredi kôd]

Izvori

[uredi | uredi kôd]
  1. CSS developer guide. Mozilla Developer Network. Pristupljeno 24. rujna 2015.
  2. W3C CSS2.1 specification for rule sets, declaration blocks, and selectors (engleski). World Wide Web Consortium. 7. lipnja 2011. Pristupljeno 20. lipnja 2009.
  3. CSS Color (engleski). Mozilla Developer Network. 28. lipnja 2016. Pristupljeno 23. kolovoza 2016.

Vanjske poveznice

[uredi | uredi kôd]
Nedovršeni članak CSS koji govori o računarstvu treba dopuniti. Dopunite ga prema pravilima Wikipedije.