Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Slogi CSS

Delite vsebino na Facebooku
Delite vsebino na Twitterju
  V tej lekciji bomo spoznali sloge CSS, ki so uporabni pri izdelovanju spletnih strani. Vse to pa bomo naredili v obliki spletne strani.
 
 
1
 
 

V urejevalniku Notepad++  si najprej pripravimo strukturo, ki jo bomo potrebovali.









 
 
2
 
 

Na začetek dokumenta vstavimo deklaracijo DOCTYPE, da se bo spletna stran v vseh brskalnikih prikazovala enako.

 
 
3
 
 

V znački style bomo najprej določili ozadje spletne strani in pa tip pisave.

body {
background-color:#C0C0C0;
font-family: Calibri;
}

Ozadje bo svetlo sive barve, pisava pa Calibri.

 
 
4
 
 

Zdaj ustvarimo div z imenom glavni-del,  v katerem se bo nahajal prostor za logotip, navigacijo in tekstovni del.

#glavni-del {
margin:auto;
width:970px;
padding:10px;
background-color:#787878;
}

Stran postavimo na sredino, ji določimo širino 970px, vsi elementi, ki jih bo vseboval glavni del, bodo odmaknjeni od roba tega dela vsaj 10px. Izberemo še barvo ozadja glavnega dela.

 
 
 
 
 
5
 
 

 

Ta del, ki smo ga ustvarili v znački style, moramo vnesti še v telo kode (body).

 

Ta del še ne bo viden, saj mu zgoraj nismo določili višine, ta pa se bo spreminjala glede na velikost vsebine.

 
 
6
 
 

 

Na podoben način kot glavni del, bomo ustvarili prostor za logotip.

#logo {
width:300px;
height:100px;
padding-top:20px;
text-align:center;
background-color:#585858;
color:#FFFFFF;
}

Prostoru določimo širino 300px in višino 100px. Tekst bo od vrha dela odmaknjen za 20px ter poravnan na sredino. Ozadje bo nekoliko temnejše sive barve, barva pisave pa bo bela.

 
 
7
 
 

 

V telo kode vstavimo del logo. Tokrat ga vstavimo v div, ki smo ga ustvarili v 4. In 5. koraku, torej v div glavni-del.

Dodali smo mu še besedilo, označeno kot glavni naslov.
Če zdaj odpremo stran, bi že morali imeti obliko kakršno vidite tukaj.

 
 
8
 
 

 

Zdaj je na vrsti navigacija.

#navigacija {
float:right;
margin-top:-50px;
width:570px;
height:20px
padding:15px;
background-color:#585858;
}

Postavimo jo na desno stran glavnega dela, jo dvignemo za 50px, nastavimo širino in višino. Tekst bo od roba navigacije odmaknjen vsaj 15 px, ozadje pa bo temno-sivo.

 
 
9
 
 

 

V telesu kode nastavimo kodo div-a navigacija pod kodo div-a logo.

Trenutno stanje

 
 
10
 
 

 

Povezavam v navigaciji, ki jih pa še ni, bomo najprej določili razmik in poravnavo, v naslednjem koraku pa jih bomo dodali kot bloke.

#navigacija li {
float:left;
width:100px;
display:block;
}

Vnose v znački li (list item) bomo poravnali od leve proti desni, med njimi nastavili prazen prostor, ki bo velik 100px ter vnose postavili v bloke.

 
 
11
 
 

 

Sedaj so na vrsti vnosi v znački li (list item), ki jih bomo dodali v div navigacija.
Dodamo 5 povezav.

 

 

 

 

 

Trenutno stanje

 
 
12
 
 

 

Ker povezave še ne zgledajo dobre, jih bomo malo spremenili s tem, da ustvarimo dva razreda.

.razred-navigacija a:link {
color:#C9C9C9;
text-decoration:none;
}

.razred-navigacija a:hover {
color:#FFFFFF;
text-decoration:underline;
}

V prvem razredu ustvarimo lastnosti za povezavo, ki ni prekrita z miškinim kazalcem. Barva je malo temnejša od bele, povezava pa ni podčrtana, ni ležeča in ni odebeljena.
V drugem razredu ustvarimo lastnosti za povezavo, ko bo na njej miškin kazalec. Barva se spremeni na belo, povezava pa se podčrta.

 
 
13
 
 

 

V tem koraku dodamo v v div navigacija razred, ki smo ga pravkar izdelali. Povezave morajo biti znotraj razreda!


POVEZAVE

Če grete zdaj z miško preko povezav, opazite, da se te spreminjajo.

Trenutno stanje

 
 
14
 
 

 

Izdelajmo še del, v katerem se bo nahajala vsebina spletne strani.

#vsebina {
width:950px;
margin-top:20px;
padding:10px;
background-color:#585858;
color:#FFFFFF;
clear:both;
}

Nastavimo širino 950px, ta del bom odmaknjen 20px nižje od dela logo in navigacija, tekst bo od vsakega roba tega dela odmaknjen vsaj 10px, barva ozadja bo ista kakor v delih logo in navigacija, barva pisave bo bela. Na koncu še za vsak slučaj uporabimo clear, da se vsebina slučajno nebi znašla za deloma logo in navigacija.

 
 
15
 
 

 

Na koncu dodamo div vsebina še v div glavni-del, pod navigacijo in v njega napišemo nekaj teksta.

 
 
16
 
 

Tako, ustvarili smo spletno stran s slogi CSS.

 
 
Komentiraj
 
 
 
 
 
3.10.2011, 17:23
Pisava Calibri ni med privzetimi pisavami za uporabo na spletu. Uporaba te pisave na takšen način torej ni ustrezna, če želiš, da je prikazana na vseh računalnikih. Z ustreznimi orodji in nekaj kode pa seveda lahko omogočimo, da se tudi take pisave prikažejo povsod brez problemov.

Na spodnji povezavi pa najdete primerne pisave, ki naj bi bile podprte:
http://www.ampsoft.net/webdesign-l/Windo....
 
 
 
 
18.10.2011, 20:42
EDIT: sem že popravil


Vseno, zelo koristna lekcija!


spremenil: pndrec1 (18.10.2011 ob 20.57.23)
 
 
 
 
12.1.2012, 21:45
sam bi naredil tako, da bi izbirnik, domov... razdelil vsakega v svoj okvirček in ko bi šel z miško čez ta kvadratek oz. povezavo bi le ta spremenil ozadje v odtenek med uporabljenima dvema odtenkoma
 
 
 
 
28.2.2012, 20:51
Ali ste prepričani da to res tako deluje koker je tuki koda ?ne vem če bo glih držalo...
 
 
 
 
28.2.2012, 20:56
Geek94:
Ali ste prepričani da to res tako deluje koker je tuki koda ?ne vem če bo glih držalo...

Kakšne pomisleke konkretno pa imaš glede same kode?
 
 
 
 
28.2.2012, 21:02
koda do koraka 7 ne postavi okvirčka Logo v sredinski okvir...
 
 
 
 
28.2.2012, 21:14
Sem šel po lekciji in v lekciji ni napake oz. pripelje do identičnega rezultata, kot je prikazan na zadnji povezavi.
 
 
 
 
28.2.2012, 21:16
potem se pa opravičujem za nejastnosti
 
 
 
 
17.2.2014, 9:34
Zelo koristna lekcija. Še več takšnih
 
 
 
 
4.10.2015, 18:24
Kako narediš da se na robu prelomi v novo vrstico
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!