Če imaš spletno stran ali urejaš druge spletne strani, potem ti poznavanje osnov CSS-a lahko pride zelo prav. Nekateri izrazi pridejo prav že v osnovnem urejanju spletne strani.
V tem prispevku ti tako pokažem, kaj CSS sploh je, kako ga uporabljaš in nekaj najpogostejših uporab. Snameš pa lahko tudi brezplačen priročnik, ki ti bo služil kot “plonk listek” pri urejanju spletne strani.
CSS osnove
Kaj je CSS?
CSS (Cascading Style Sheets) je programski jezik, ki določa izgled spletne strani. Določa, kako se posamezni elementi prikazuje – posamezni elementi pa npr. so naslovi, besedila, opisi, slike, meniji… S CSS določimo, kakšne barve bodo, kakšen stil pisave naj se uporabi, kakšna naj bo velikost, kako se naj prikazujejo slike, kakšne bodo obrobe posameznega elementa…
Kako je sestavljen, kateri so njegovi deli?
CSS je sestavljen iz različnih delov, ki morajo biti zmeraj prisotni. Poenostavljen prikaz bi bil tako:
element {
blok: stil;
blok: stil;
}
Element
To je del, kjer specificiraš, kateri del želiš spremeniti. Torej na kaj se nanašajo spodnje spremembe. Npr. oblika se bo nanašala na naslov (h1), odstavek (p), linke (a), slike (img)…
{}
Vse, kar je v zavitih oklepajih, so vsa oblikovanja, ki jih želimo. Tukaj torej specificiraš, kakšne barve bo ta element, kakšne velikosti, kakšna bo postavitev… Vse kar je torej v zavitih oklepajih se nanaša na izbrani element.
Blok in stil
Blok je posamezno oblikovanje. V vsaki vrstici je posamezni blok – oblikovanje in specifikacija stila. Najlažje ti to pojasnim na primeru: blok je npr. barva (color), stil pa specifikacija barve (rdeča). Ta blok bi potem zgledal tako:
color: red;
Vsaka taka kombinacija (blok + stil) se zmeraj zaključita s podpičjem (;). Seveda pa lahko uporabiš več različnih blokov in stilov za posamezni element (v nadaljevanju najdeš nekaj najpogostejših primerov, ki ti bodo prišli prav).
Kateri so najpogostejši elementi za oblikovanje pisave?
Barva pisave
color: #40b7b8;
Barva pisave se določi si “color” in specifikacijo barve. Najpogosteje se za specifikacijo barve uporablja hex zapis (začne se z # in sledi 6-mestno število).
Poravna pisave
text-align: left;
Izbiraš lahko med osnovnimi poravnavami:
Left – poravnava besedila levo
Right – poravnava besedila desno
Center – sredinska poravnava besedila
Justify – obojestranska poravnava besedila
Velikost pisave
font-size:12px;
Velikost pisave lahko specificiraš v različnih enotah. Najlažje ti bo, če uporabiš px ali small (majhna), medium (srednja) ali large (velika).
Font
font-family: Arial, Helvetica, sans-serif;
Font oz. pisavo lahko izbereš s font-family in nato navedeš posamezno družino pisave. Seveda mora biti pisava na voljo na tvoji spletni strani. Zmeraj pa je priporočljivo navesti 2 ali 3 pisave, v primeru, da brskalnik ne prikaže predhodne.
Debelina pisave
font-weight: normal;
Debelino pisave lahko določiš na dva načina:
Z besedo: normal|bold|bolder|lighter
Ali številko: 100|200|300|400 (=normal)|500|600|700(=bold)|800|900
To so osnovni CSS ukazi za oblikovanje besedil, če te jih zanima še več, te vabim, da snameš ta brezplačni pdf, ki ti bo pomagal, da imaš ukaze zmeraj pri roki + nekaj dodatnih primerov.
Kam dodam svoj novi CSS?
V WordPressu se CSS zmeraj dodaja na za to določeno mesto in nikoli v osnovne file teme – s tem namreč lahko pri posodobitvi prevoziš vse zapisane spremembe. Kje to je, pa si lahko ogledaš v videu:
Če je sprememb veliko, pa je idealno, da narediš Childe temo – to je tema zgrajena na izbrani tebi, ki vsebuje le spremembe, ki jih želiš na že izbrani temi.
Komentiraj