Izdelava spletnih strani 123

You are here: Home / Izdelava spletnih strani / Izdelava spletnih strani s CSS

Izdelava spletnih strani s CSS

by 1 Comment

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. Css says

    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