|
Uz razmještanje elemenata na stranici, izbor boja i dodavanje ukrasa pripadaju poslu web dizajnera. Ovdje se može vidjeti snaga CSS-a, jer web dizajner,
bez obzira na napisan kôd, mijenjanjem CSS-a u potpunosti može promijeniti izgled
popisa.
Popis ćemo obojiti plavom bojom, znakove ćemo podebljati, a kao ukras i podlogu
za dinamički efekt, koristit ćemo lijevu granicu linka. Postavit ćemo je na debljinu
od 6 piksela za linkove glavnog izbornika, odnosno 4 piksela za linkove podizbornika,
definirati liniju (vrijednost solid) i postaviti joj boju koju smo dodijelili
slovima.
ul, li {
list-style: none;
margin: 0px;
padding: 0px;
}
ul li a, ul li a:visited {
display: block;
text-decoration: none;
margin: 1px;
padding: 2px 0px 2px 5px;
width: 120px;
color: #336;
/* boja linkova */
font-weight: bold;
/* podebljana slova */
border-left: 6px solid #336;
/* granica */
}
ul ul li a, ul ul li a:visited {
display: block;
text-decoration: none;
margin: 1px 1px 1px 15px;
padding: 2px 0px 2px 5px;
width: 108px;
color: #336;
/* boja linkova */
font-weight: bold;
/* podebljana slova */
border-left: 4px solid #336;
/* granica */
}
Predefinirana vrijednost širine granice linka je 0 piksela, tako da ovdje
trebamo postaviti debljinu samo lijeve granice. Ovim smo dobili sljedeći prikaz:
Oblikovani popis je tu. Ono što nam slijedi je završavanje dodavanjem dinamičkog
efekta.
-
 Znate
li sad zašto su u definiciju stila uvrštene pseudoklase
a:visited? Ako sad to ne možete otkriti,
isprobajte definiciju stila bez tih pseudoklasa.
-
|
