Tutorial CSS 2 Class i ID
Evo ukratko šta treba uraditi. Napraviti linkove koji će biti lepo formatirani i imati hover akciju.
Otvorite novi notepad i krenite sa kucanjem ili kopiranjem :)
Evo prvo da makenmo belu pozadinu….. evo recimo može ovaj kod
body {
background-color: #236371;
}
Potom da napravimo klasu za naslov stranice.... recimo klasu nazovemo naslov
.naslov {
text-align: center;
color: white;
font: bolder 20px 'Trebuchet MS', Arial, sans-serif;
text-decoration: underline;
}
Centrirali smo tekst, definisali belu boju i odradili brzo konfigurisanje fonta, podebljan veličine 20px i određene vrste fontova. Dodali smo posle i dekoraciju podvučenu liniju.
Sad za promenu nećemo praviti klasu vec id za navigaciju.
#navigacija {
background-color: #000000;
color: #FFFFFF;
width: 140px;
font: bolder 16px 'Trebuchet MS', Arial, sans-serif;
border: 2px solid #747474;
text-indent: 10px;
}
Dakle pozadina boja fonta širina, podebljan font 16px veličine i određeni font.
Na kraju smo rekli da ograniči sa svih strana (običan border menja border-top, border-bottom, border-left, border-right.... mogli smo i ovo da kucamo u 4 reda ali ovako je pravilnije ako želimo istu boju i veličinu u px) 2px veličine liniju određene boje.
Text-indent: 10px služi za pomeranje teksta u desno za 10px. Ovo je jako slično kao i padding-left ali sa paddingom možemo imati problema zbog nekompatibilnosti browsera.
Potom pravimo link
a {
display: block;
width: 140px;
text-indent: 25px;
background-color: #2175bc;
font: normal 12px Tahoma, serif;
color: white;
text-decoration: none;
border-top: 1px solid #FFFFFF;
}
display: block; nam služi da prikažemo blok i to širine 140px, pomeramo tekst za 25px u levo, određene boje pozadine, odredjenog fonta, stila i boje, bez dekoracije i stavljamo 1px liniju iznad zapisa bele boje.
Pravimo a:hover i menjamo samo boju pozadine.
a:hover {
background-color: #2586d7;
}
Ostalo ostaje isto jer je sve ostalo preuzeto od definicije a taga.
To bi bilo to sto se tiče pravljenja css-a.
Sada se okrećemo body tagu i koristimo definisane stvari.
Radićemo bez tabele, a klase i id ubacujemo u div tagove.
<div class="naslov">Pravljenje navigacije u css-u, ovo je kao neki naslov</div>
<div id="navigacija">Navigacija
<a href="http://www.google.com" target="_blank">Google</a>
<a href="http://www.yahoo.com" target="_blank">Yahoo</a>
<a href="http://www.msn.com" target="_blank">MSN</a>
<a href="http://www.alltheweb.com" target="_blank">All the web</a>
<a href="http://www.ask.com" target="_blank">Ask</a>
<a href="http://www.puskice.info" target"_blank">Puskice</a>
</div>
Sačuvajte stranu i pokrenite preko bilo kog browsera. Rezultat bi trebao da se vidi.
Ceo kod:
Savetujem Vam da ovaj kod probate tako što ćete obrisati CSS iz head taga i da vidite razliku.
Inače radili smo CSS u samom html kodu jer jednostavno imamo jedan jedini fajl. Ako bi smo hteli da koristimo ovaj CSS kod i za druge strane onda bi bilo mnogo lakše i praktičnije da napravimo eksterni css file i da ga samo linkujemo na svaku novu stranu, nego da kopiramo ceo CSS kod na svaku stranu.
Evo kako bi to trebalo uraditi.
Otvorite notepad i kopirajte ceo css kod. Napomena, ovde ne treba stavljati tagove <style type…>
Ovaj kod sačuvajte kao glavni.css (pazite da notepad ne doda na kraju ekstenziju .txt)
Otvorite notepad i sačuvajte sledeći html kod gde ćemo i ubaciti eksterni css file.
Sačuvajte ovu stranu kao html file i pokrenite.
Gotovu navigaciju možete preuzeti ovde
Vazno !
Ovim putem se izvinjavam za greške koje su možda slučajno promakle kao i za stopostotnu ispravnost teksta.
Pedja
Nazad na početak
OET 1