Mala šola CSS-ja II.: CSS osnove

CSS_sola_imageDrugi del Male šole CSS-ja bomo začeli z osnovami, ki jih moramo vedeti pri ustvarjanju stilov.

CSS stil lahko spletni strani določimo v sami datoteki oz. strani ali pa s pomočjo zunanje datoteke. CSS je ponavadi integriran v samo stran pri enostranskih straneh in newsletterjih. Če uporabljamo večje število strani oziroma se bodo stili uporabljali skozi več strani pa je priporočljiva uporaba zunanje datoteke. Uporaba zunanje datoteke posledično tudi pohitri nalaganje same strani.


Primer integrirane kode v samo stran:


...</title>
<style type="text/css" media="screen" >
<!--
p {color: #9999CC}
-->
</style>
</head>...

Povezovanje na datoteko:

...
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>...

V obeh primerih imamo dva atributa enaka, in sicer atribut “type” in “media”. Type določi tip stila – brskalnik tako ve za kakšen tip gre. Atribut media pa določi na katerem mediju se bodo stili prikazovali. Najpogostejši mediji so: screen(zaslon), print(tiskanje) in all(za vse). Če atributa media ni potem se prikazujejo stili na vseh medijih enako.
Če uporabljamo zunanjo datoteko imamo še dodatne atribute “link”, “rel” in “href”. Link – “<link” predstavlja začetek značke, ki jo zaključimo z “/>”. S pomočjo Rel atributa povemo relacijo stila (primarni, sekundarni,…). Ponavadi uporabljamo “StyleSheet”. Atribut “href” pa ponazarja povezavo oziroma pot do datoteke CSS.

 

Osnovni stili CCS-ja

V osnovi imamo nekaj standardnih značk, ki jim moramo določiti stil.
Osnovne značke so:

  • Body – določimo stil znački »body«. Tu ponavadi določamo tip pisave in barvo pisave, ozadje,… ,
  • P – paragraf stil. Tu lahko določamo pisavo, barvo, razmik med paragrafi in višino vrstice,
  • H1, H2, H3 in H4 – Headingi oz. naslovi. Določimo jim velikost, tip pisave, če je ta drugačna, kot je specificirana v body-ju,… in
  • a in a:hover – Atribut za povezavo. »a« – določimo tip povezave, ponavadi barva in podčrtava. »a:hover« – atribut za ukaz, ko uporabnik postavi miško na povezavo. Ponavadi uporabimo ukaz za odstranjevanje podčrtave.

 
Standardne značke zapisujemo v obliki

body {
background: white; font-family: Garamond, serif;
}

p {
font-family: Garamond, serif;
}

H1 {
font-size: 110%;
color: red;
}

a {
text-decoration: underline;
color: red;
}

a:hover {
text-decoration: none;
}

Posebni stili oziroma značke – CLASS
Posebnim značkam oziroma nestandardnim pa moramo na začetku pripisati piko.

.CLASS_ime {
color: white; font-family: Garamond, serif;
}

Določanje stilov preko parametra ID
HTML značkam, ki imajo atribut »ID«, lahko določimo stil s pomočjo znaka »#«.

#ID_ime {
color: white; font-family: Garamond, serif;
}

 
Dodatni viri:
http://htmlhelp.com/reference/css/style-html.html
http://www.w3schools.com/Css/default.asp
http://sl.wikipedia.org/wiki/CSS
http://www.w3.org/Style/Examples/011/firstcss
http://www.w3.org/TR/2004/CR-CSS21-20040225/

Komentiraj


*