CSS(Cascading Style Sheets) je temeljna komponenta spletnega razvoja, ki igra ključno vlogo pri nadzoru vizualnega videza elementov HTML na vašem spletnem mestu. Zagotavlja zmogljiv nabor pravil in lastnosti, ki določajo, kako so elementi prikazani, oblikovani in postavljeni, kar vam omogoča prilagajanje videza in občutka vaših spletnih strani.
Začnimo z razumevanjem koncepta selektorjev
Izbirniki se uporabljajo za ciljanje določenih elementov HTML za oblikovanje. Eden najosnovnejših izbirnikov je izbirnik elementov, ki izbere vse primerke določenega elementa HTML.
Naslednje pravilo CSS na primer cilja na vse odstavke v dokumentu:
p {
color: blue;
}
V tem primeru p izbirnik izbere vse <p> elemente in nastavi njihovo barvo besedila na modro.
Drug pogost izbirnik je izbirnik razreda
Razredi se uporabljajo za združevanje elementov s podobnimi lastnostmi. Če elementom HTML dodelite razred, jih lahko skupno ciljate in oblikujete.
Tukaj je primer:
.blue-text {
color: blue;
}
V tem primeru .blue-text izbirnik cilja na vse elemente z razredom blue-text in na njihovo besedilo uporabi modro barvo.
Poleg tega ID vam izbirnik omogoča ciljanje na določen element z njegovim edinstvenim identifikatorjem. ID so običajno dodeljeni posameznim elementom na strani.
Tukaj je primer:
#header {
background-color: gray;
}
V tem primeru #header izbirnik izbere element z ID header in zanj uporabi sivo barvo ozadja.
Če preidemo k sintaksi CSS, je vsako pravilo CSS sestavljeno iz izbirnika in deklaracijskega bloka
Deklaracijski blok je v zavitih oklepajih {} in vsebuje eno ali več deklaracij. Deklaracije so sestavljene iz lastnosti in njene ustrezne vrednosti.
Tukaj je primer:
h1 {
font-size: 24px;
color: #333;
}
V tem izrezku kode h1 izbirnik izbere vse <h1> elemente in nastavi njihovo velikost pisave na 24 slikovnih pik, barvo besedila pa na temno sivo(#333).
V tej seriji bomo raziskali in razložili različne lastnosti CSS, izbirnike in njihove kombinacije, kar vam bo omogočilo ustvarjanje vizualno privlačnih in dobro strukturiranih spletnih mest. Razumevanje CSS in njegove osnovne sintakse vam bo dalo osnovo za prevzem nadzora nad slogovnimi vidiki vaših spletnih strani, kar bo zagotovilo edinstveno in prilagojeno uporabniško izkušnjo. Potopimo se in odkrijmo neomejene možnosti CSS!