Luettelotyyli - CSS-temppuja

Anonim

list-styleOmaisuus on lyhenne ominaisuus, joka asettaa arvot kolmelle eri listan liittyviä ominaisuuksia yhden ilmoituksen:

ul ( list-style: || || ; )

Tässä on esimerkki syntaksista:

ul ( list-style: square outside none; )

Mikä olisi sama kuin seuraava pitkäikäinen versio:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Lyhyesti sanottuna, jos arvot jätetään pois, ne palaavat alkuperäiseen tilaansa.

Arvot list-style-type

list-style-typeOminaisuus määrittelee tyypin luettelon asettamalla sisältö kunkin merkin, tai luodin, luettelossa. Hyväksyttävät avainsanojen arvot list-style-typeovat:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

MDN: llä on täydellisempi luettelo. Muut kuin avainsanan arvot otettiin käyttöön CSS3: ssa, ja ne alkavat nähdä jonkin verran tukea, kuten:

ul ( list-style-type: "→"; )

Seuraava esittely sisältää ryhmän järjestämättömiä luetteloita kunkin avainsanan arvon osoittamiseksi:

list-style-typeOmaisuus koskee kaikkia luetteloita, sekä kaikki kohteet, jotka on asetettu display: list-item.

Luettelomerkin väri on mikä tahansa elementin laskettu väri (määritetään ominaisuuden kautta color).

Arvot list-style-position

list-style-positionOminaisuus määrittelee, mihin asentoon listamerkin, ja se hyväksyy toisen kahdesta arvosta: insidetai sen ulkopuolella. Nämä on esitetty alla paddingpoistamalla luetteloista ja vasen punainen reunus lisätty:

Arvot list-style-image

list-style-imageOminaisuus määrittää, onko lista merkki on asetettu kuvan, ja hyväksyy arvo on ”ei mikään” tai URL-osoitteen, joka viittaa kuvan:

ul ( list-style-image: url(images/bullet.png.webp); )

Lisää demoja

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
Toimii Toimii Toimii Toimii Toimii Toimii Toimii

IE6 / 7 ei tue kaikkia avainsanojen arvoja, list-style-typeja siinä on myös vika, jossa kelluvat luettelokohdat eivät näytä luettelomerkintää. Tämä ratkaistaan ​​käyttämällä taustakuvaa (eikä list-style-image) luettelokohteissa.