CSS osnove

CSS osnove

CSS osnove

Č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


CSS osnove

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:

Dodajanje custom CSS – WordPress nasvet

Č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.

CSS osnove

Želiš nedeljske novičke? + brezplačen dostop do vseh freebies.
JA, SEVEDA! >>

Ni komentarjev

Komentiraj

Proti spamu uporabljam Akismet. Več....