Type a search term to find related articles by LIMS subject matter experts gathered from the most trusted and dynamic collaboration tools in the laboratory informatics industry.
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.
Style sheet u CSS-u sastoji se od nekoliko pravila. Svako pravilo sastoji se od selektora i deklaracijskog bloka.
Selektor (engl. selector) označava dio markupa na koji se primjenjuje stil. Selektor može biti:
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 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]
CSS možemo pisati unutar same HTML stranice, na dva načina:
<style type="text/css"> h1 { color: blue } </style>
<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>
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.
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 |