CSS

Izvor: Wikipedija
Skoči na: orijentacija, traži
Disambig.svg Ovo je glavno značenje pojma CSS. Za druga značenja, pogledajte CSS (razdvojba).

CSS je kratica od (eng.) Cascading Style Sheets. Radi se 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 VE | uredi]

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

Selector[uredi VE | uredi]

Selector označava dio markupa na koji se primjenjuje stil. Selector 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 VE | uredi]

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 VE | uredi]

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);
   </style>

Izvori[uredi VE | uredi]

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 primjenjen na HTML element preko ‘style’ HTML atributa
3 Media Type A property definition applies to all media types, unless a media specific CSS is defined
4 Definirano od strane korisnika Većina preglednika ima značajku pristupačnosti: korisnički definiran CSS
5 Selector specificity A specific contextual selector (#heading p) overwrites generic definition
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 property definition in HTML document CSS rule or CSS inline style overwrites a default browser value
9 Zadano u pregledniku Najniži prioritet ima vrijednost već deklarirana u samom pregledniku određena prema W3C initial value specifications

Povijest[uredi VE | uredi]

CSS1[uredi VE | uredi]

CSS2[uredi VE | uredi]

CSS3[uredi VE | uredi]

Izvori[uredi VE | uredi]

  1. CSS developer guide. pristupljeno 2015-09-24
  2. W3C CSS2.1 specification for rule sets, declaration blocks, and selectors (engleski). World Wide Web Consortium (7 June 2011). pristupljeno 2009-06-20
  3. CSS Color (engleski). Mozilla Developer Network (2016-06-28). pristupljeno 2016-08-23

Vanjske poveznice[uredi VE | uredi]


Desktop computer clipart - Yellow theme.svg Nedovršeni članak CSS koji govori o računarstvu treba dopuniti. Dopunite ga prema pravilima Wikipedije.