Izdelava spletnih strani s CSS

S CSS (Cascading Style Sheets) oblikujemo HTML dokument. Znanje HTML je prepogoj za izdelavo spletnih strani s CSS. O izdelavi spletnih strani s HTML5 smo že pisali. Če HTML še ne znate, si pred člankom o izdelavi spletnih strani s CSS preberite slednjega.

Namen izdelave spletnih strani s CSS

S pomočjo CSS slogov oblikujemo HTML dokument oz. posamezne HTML elemente. Glavna prednost izdelave spletnih strani s CSS je, da ločimo delo delo programerjev od oblikovalcev.

Vstavljanje CSS slogov v HTML dokument

CSS slog lahko v HTML vstavimo na 3 načine.

Vstavljanje CSS sloga preko zunanje datoteke – CSS na ta način vstavimo znotraj <head> HTML značke. Datoteka v katero zapišemo stil, mora imeti končnico .css. Datoteko v HTML dokument vstavimo s spodnjo kodo.

<head>
...
<link rel="stylesheet" type="text/css" href="oblika.css" />
...
</head>

Vstavljanje CSS sloga preko HTML značke <style> – tudi v tem primeru CSS slog vstavimo znotraj HTML značke <head>. Primer kode.

<head>
...
<style type="text/css">
     p {
        color: blue;
       }
</style>
...
</head>

Vstavljanje CSS sloga preko atributa “style” posameznega HTML elementa – V primeru vstavitve CSS sloga preko atributa HTML elementa, slednjega ne zapišemo znotraj HTML značke <head> temveč na mestu, kjer se HTML element nahaja. Oglejmo si spodnji primer.

<head>
...
</head>

<body>
...
     <div style="color: blue;">
          <p>Besedilo</p>
     </div>
...
</body>

CSS sintaksa

Spodaj si bomo ogledal osnovno CSS sintakso. Sintaksa je sestavljena iz selektorja, vrednosti ter lastnosti.

p {
     color: blue;
}

V zgornjem primeru selektor p izbere vse HTML elemente z značko <p> (odstavek) ter jim dodeli barvo pisave rdečo (color je v našem primeru lastnost, blue pa vrednost).

CSS selektor

S CSS selektorjem izberemo HTML element, ki ga želimo oblikovati. Na voljo imamo več vrst selektorjev, ki bodo prestavljeni v nadaljevanju.

Univerzalni selektor – univerzalni selektor označimo z *.

* {color: blue;}

Selektor HTML elementov – za izbiro vseh posameznih HTML elementov dokumenta. Primer:

p {color: blue}

Selektor elementov izbranega razreda – zapišemo piko ter ime razreda.

.moj-razred {color: blue;}

Selektor elementov z določenim Id. Zapišemo # ter Id ime HTML elementa. Primer:

#mojId {color: blue;}

CSS lastnosti in vrednosti

Oglejmo si nekaj lastnosti, ki jih lahko dodelimo besedilu.

color – barva besedila
text-align – poravnava besedila
text-shadow – osenčenje besedila
font-family – tip pisave besedila
font-size – velikost pisave
font-style – oblikovanje besedila
font-weight – odebelitev besedila
…

Lastnosti ozadja

background-color – barva ozadja
background-image – slika ozadja
background-size – velikost slike ozadja
…

Lastnosti okvirja

border-color – barva okvirja
border-style – oblika okvirja (solid, dashed, dotted…)
border-width – debelina okvirja

Ostale lastnosti

margin – odmik od roba (vrednost v px, em…)
padding – odmik do roba (vrednost v px, em…)
position – pozicioniranje HTML elementov (static, fixed, relative, absolute)
left / right – pozicioniranje elementov
float – plavajoči elementi (left, right)
clear – preprečevanje plavajočih elementov (both, left, right)
…

Seveda obstaja še veliko več lastnosti. V članku smo predstavili le nekaj osnovnih. Na vas pa je, da pridobiljene znanje utrdite z izdelavo preproste spletne strani.

Če potrebujete pomoč, smo vam na voljo v komentarjih.

Comments

Css says
14. marec, 2019 at 21:35

Brez CSS je praktično nemogoče izdelati sodobno ali karšno koli spletno stran. Mogoče bi lahko vse skupaj še razširili in opisali še več css lastnosti. S css 3 je prišlo res veliko naprednih zmožnosti grafičnega urejanja spletnih strani… animacije, senčenje, ozadja in se in še… moderni brskalniki vse to že podpirajo.

Odgovori