CSS Nimekirjad
CSS nimekirja omadused võimaldavad määrata nimekirja välimust
Nimekirjad jaotuvad tinglikult kaheks põhitüübiks: korrastamata ja korrastatud. Korrastatud nimekirjades kasutatakse teemade järjestamisel numbreid v. tähti.
Korrastamata nimekirjades aga täppe, ringe, ruute v.pilte.
Vaatame mõningaid nimekirjade kujundamisel kasutatavaid stiilielemente.
Kirjutame sellise koodi:
#rdot {
margin: 1.3em;
padding: 0;
}
#rdot li {
list-style: none;
background: url(red_dot.gif) no-repeat left center ;
padding-left: 1.2em;
}
Tulemus peaks olema selline:
- Teema 1
- Teema 2
- Teema 3
Pane tähele: pilt peab asuma samas kataloogis kus asub see nimekirjaga veebileht.
Siin on veel üks nimekiri mis on kujundatud nuppude abil. Kirjutame sellise koodi:
#button li {
list-style: none;
margin: 0.5em;
}
#button li a {
color: #000;
text-decoration: none;
display: block;
border-top: #ccc solid 3px;
border-left: #ccc solid 3px;
border-bottom: #000 solid 3px;
border-right: #000 solid 3px;
width: 10em;
background: #eee;
text-align: center;
}
#button li a:hover {
border-top: #000 solid 3px;
border-left: #000 solid 3px;
border-bottom: #ccc solid 3px;
border-right: #ccc solid 3px;
background: #666;
color: #fff;
}
Tulemus peaks olema selline:
Näited
Erinevad korrastamata nimekirjad.
Selles näites demonstreeritakse, kuidas luua erinevaid korrastamata nimekirju.
Erinevad korrastatud nimekirjad.
Selles näites demonstreeritakse, kuidas luua erinevaid korrastatud nimekirju.
Erinevad nimekirja stiilid.
Selles näites demonstreeritakse, kuidas luua css'i abil erinevaid nimekirjade stiile.
Pildid nimekirjas.
Selles näites demonstreeritakse, kuidas kasutada pilte nimekirja kujundamisel.
Nimekirja omadused ühes deklaratsioonis.
Selles näites demonstreeritakse, kuidas kirjutada kõik nimekirja omadused ühte deklaratsiooni.
| Omadus | Kirjeldus | Väärtus |
|---|---|---|
| list-style | Kõik nimekirja omadused ühes deklaratsioonis | list-style-type list-style-position list-style-image |
| list-style-image | Määratleb pildi nimekirja loetelu kujundamiseks | none url |
| list-style-position | Määratleb nimekirja loetelu kujundi positsiooni |
inside outside | list-style-type | Määratleb nimekirja loetelu kujundi tüübi |
none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
