CSS luettelo

CSS luettelomäärittelyt mahdollistavat luettelokerrosten merkkinen, muuttaminen tai kuvan käyttäminen luettelokerroksen merkkinä.

CSS luettelo

Jossain mielessä mikä tahansa ei-kuvaileva sisältö voidaan pitää luettelona. Kansantaloustilastot, auringon järjestelmä, sukututkimus, vierasmenuu, jopa kaikki ystävät voitetaan esittää listana tai listana listojen.

Koska luettelot ovat niin moninaisia, tämä tekee luettelostyyleistä erittäin tärkeitä, joten on todella valitettavaa, että CSS:ssä luettelostyylejä ei ole tarjolla monipuolisemmin.

Luettelotyyppi

Vaikuttaa luettelostyyleihin helpoimmin (ja laajimmin tuettuna) on muuttaa merkkin tyyppiä.

Esimerkiksi, järjestetyssä luettelossa luettelomerkin (marker) on osoittava jokaisen luettelokerroksen viereen. Järjestämättömässä luettelossa merkki voi olla kirjain, numero tai muu laskettu merkkijärjestelmä.

Muuttaa luettelomerkin tyyppiä voidaan käyttää ominaisuutta: list-style-type:

ul {list-style-type: square}

Yllä oleva lause asettaa luettelomerkin (marker) nelikulmioksi.

Luettelokerroksen kuva

Joskus tavalliset merkit eivät riitä. Voit haluta käyttää eri kuvaa jokaiselle merkille, mikä voidaan tehdä käyttämällä: list-style-image ominaisuus:

ul li {list-style-image: url(xxx.gif)}

On mahdollista käyttää kuvaa merkkinä yksinkertaisesti käyttämällä url() arvoa:

Luettelomerkin sijainti

CSS2.1 voi määrittää, näytetäänkö merkki luettelokerroksen sisällä vai ulkopuolella. Tämä tehdään käyttämällä: list-style-position Valmis.

Yksinkertainen luettelostyylejä

Yksinkertaisuuden vuoksi voidaan yhdistää yllä olevat kolme luettelostyylejä ominaisuudeksi, joka on helppokäyttöinen:list-styleAivan niin:

li {list-style: url(example.gif) square inside}

list-style:n arvot voidaan luetella millä tahansa järjestyksellä, ja nämä arvot voidaan jättää huomiotta. Kun annetaan arvo, muut täytetään oletusarvoilla.

CSS luettelo esimerkki:

Järjestämättömässä luettelossa eri tyyppisten luettelomerkkien merkinnät
Tämä esimerkki näyttää, kuinka CSS:ssä on erilaisia luettelon kohteen merkintöjä.
Järjestetyssä luettelossa eri tyyppisten luettelokerrosten merkinnät
Tämä esimerkki näyttää, kuinka CSS:ssä on erilaisia luettelon kohteen merkintöjä.
Kaikki luettelo tyypit
Tämä esimerkki näyttää, kuinka CSS:ssä on erilaisia luettelon kohteen merkintöjä.
Aseta kuva luettelon kohteen merkinnäksi
Tämä esimerkki näyttää, kuinka asettaa kuvan luettelon kohteen merkinnäksi.
Aseta luettelon merkinnät
Tämä esimerkki näyttää, missä asettaa luettelon merkinnät.
Määritä kaikki luettelo ominaisuudet yhdessä lausekkeessa
Tämä esimerkki näyttää, kuinka kaikki luetteloon liittyvät ominaisuudet asetetaan yhdessä lyhenteessä.

CSS luettelo ominaisuudet(list)

Ominaisuus Kuvaus
list-style Yhteenveto. Käytetään kaikkien luetteloon liittyvien ominaisuuksien asettamiseen yhdessä lausekkeessa.
list-style-image Asettaa kuvan luettelon kohteen merkinnäksi.
list-style-position Asettaa luettelossa olevan luettelon kohteen merkinnän sijainnin.
list-style-type Asettaa luettelon kohteen merkinnän tyypin.
marker-offset