Izdelava spletnih strani 123

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.

Reader Interactions

Comments

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

Dodaj odgovor