Selektor je html element, klasa ili identifikator kojem želimo dodijeliti vrijednost css svojstva. Css svojstvo je točno predefinirana oznaka koja govori koje svojstvo mijenjamo.
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
Sintaksa CSS-a se razlikuje od sintakse HTML-a. Sastoji se samo od tri dijela:
selektor {
svojstvo: vrijednost;
}Selektor određuje na koje html elemente će se primijeniti nove vrijednosti css svojstva. Css svojstvo je točno predefinirana oznaka koja govori koje svojstvo html elementa mijenjamo. Vrijednost je oblikovanje koji dodjeljujemo tom svojstvu.
Unutar svakog selektora možemo mijenjati vrijednosti više css svojstava. Svojstvo i vrijednost su odvojeni dvotočkom : i nalaze se unutar vitičastih zagrada: { i }. Iza vrijednosti svojstva nalazi se graničnik točka-zarez ; kojim međusobno odvajamo css svojstva.
Višestruke vrijednosti jednog svojstva odvojene su zarezom, a ako vrijednost css svojstva ima više od jedne riječi stavljamo je unutar dvostrukih navodnika.
Slijedeći primjer dodjeljuje vrijednosti za dva css svojstva: veličinu fonta 14px (css svojstvo font-size) i vrstu fonta (css svojstvo font-family). Više vrijednosti vrste fonta međusobno su odvojene zarezom. Možemo vidjeti da se naziv fonta Times New Roman sastoji od više riječi i zato se nalazi unutar dvostrukih navodnika.
body {
font-size: 14px;
font-family: "Times New Roman", Times, serif;
}Kada u html dokumentu umećemo jedan html element unutar drugoga, taj postupak zovemo ugnježđivanje. Ugniježđeni html elementi mogu (ali i ne moraju) naslijediti vrijednosti css svojstva dodijeljenih html elementu roditelja. Neka css svojstva se nasljeđuju, dok se druga ne nasljeđuju. Vrijednosti css svojstava font-* se nasljeđuju.
Nasljeđivanje se ne će dogoditi za html elemente za koje smo zadali novu vrijednost tog css svojstva.
Css svojstvo font-size dodijeljeno html elementu <body> nasljeđuju svi potomci tog html elementa.
U slijedećem primjeru html elementi <h1> i <p> ne će naslijediti vrijednosti css svojstva font-size html elementa <body>, jer smo za njih zadali nove vrijednosti tog svojstva.
body {
font-size: 14px;
}
h1 {
font-size: 28px;
}
p {
font-size: 16px;
}Postoje svojstva čija se vrijednost ne nasljeđuje u ugniježđenim elementima. Primjer css svojstava koja se ne nasljeđuju su css svojstva modela kutije (engl. box model). Promjena vrijednosti širine i visine rubnice (css svojstvo margin) html elementa <body> ne će utjecati na vrijednosti širine i visine rubnice html elemenata potomaka.
body {
margin: 0;
}Želimo li istovremeno odrediti svojstva za više različitih selektora (u ovom slučaju selektora naziva html elementa), navodimo ih jedan iza drugoga odvojene zarezom.
Slijedi primjer dodjeljivanja plave (engl. blue) boje teksta (css svojstvo color) html elemenata <h1> do <h6>:
h1, h2, h3, h4, h5, h6 {
color: blue;
}Komentari služe opisivanju dijelova kôda u CSS datoteci. Oni nam služe radi kasnijeg lakšeg prisjećanja i razumijevanja zadaća pojedinih dijelova kôda. Web preglednici zanemaruju komentare prilikom prikazivanja web stranice.
Komentar počinje sa znakovima /*, a završava s */
Primjer:
/* Ovo je komentar u jednom retku */Primjer komentara koji se proteže kroz više redaka:
/* Ovo je komentar u CSS-u
koji se proteže kroz dva retka */