CSS luettelot

Epäjärjestetty luettelo:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Järjestetty luettelo:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

HTML-luettelot ja CSS-listoimen attribuutit

HTML:ssä on kaksi päätyyppistä luetteloa:

  • Epäjärjestetty luettelo (ul-elementti) - luettelomerkit ovat merkkejä
  • Järjestetty luettelo (ol-elementti) - luettelomerkit ovat numeroita tai kirjaimia

CSS-listoimen attribuutit mahdollistavat sinun:

  • Aseta eri luettelomerkit numeroituun luetteloon
  • Aseta eri luettelomerkit luetteloon ilman numeroita
  • Aseta kuva luettelomerkiksi
  • Lisää taustaväri luetteloon ja luettelomerkkiin

Eri luettelomerkit

list-style-type Atribuutti määrittää luettelomerkin tyypin.

Seuraavassa esimerkissä näkyy joitakin käytettävissä olevia luettelomerkkejä:

Esimerkki

ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ol.c {
  list-style-type: upper-roman;
}
ol.d {
  list-style-type: lower-alpha;
}

Kokeile itse

Huomautus:Jotkut arvot käytetään luetteloissa ilman numeroita, ja jotkut arvot käytetään numeroituissa luetteloissa.

Kuva luettelomerkkinä

list-style-image Atribuutti määrittää kuvan luettelomerkin.

Esimerkki

ul {
  list-style-image: url('sqpurple.gif');
}

Kokeile itse

Luettelomerkin sijoittaminen

list-style-position Atribuutti määrittää luettelomerkin (merkin) sijainnin.

"list-style-position: outside;" ilmoittaa, että luettelomerkit sijaitsevat luettelon kohtien ulkopuolella. Luettelon kohtien rivien alku on vaakasuoraan tasattu. Tämä on oletus:

  • Coffee - valmistettu keitetystä kahvikannusta
  • Tea
  • Coca-cola

"list-style-position: inside;" Tämä tarkoittaa, että projektimerkki näkyy listaan kohteessa. Koska se on osa listaan kohtea, se tulee osaksi tekstiä ja työntää tekstin alaspäin:

  • Coffee - valmistettu keitetystä kahvikannusta
  • Tea
  • Coca-cola

Esimerkki

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Kokeile itse

Poista oletusasetukset

list-style-type:none Ominaisuus voidaan myös käyttää poistamaan merkki/projecttilista. Huomaa, että lista sisältää myös oletusarvoiset reunat ja sisennykset. Poistaaksesi nämä, lisää <ul> tai <ol> -merkkeihin: margin:0 ja padding:0 :

Esimerkki

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Kokeile itse

Lista - lyhennetty ominaisuus

list-style Ominaisuus on lyhennetty ominaisuus. Se käytetään kaikkien listan ominaisuuksien asettamiseen yhdessä lauseessa:

Esimerkki

ul {
  list-style: square inside url("sqpurple.gif");
}

Kokeile itse

Kun käytetään lyhennettyjä ominaisuuksia, ominaisuuksien arvojen järjestys on:

  • list-style-type(Jos list-style-image on määritelty ja kuva ei näy jostain syystä, näytetään tämän ominaisuuden arvo)
  • list-style-position(Määritä, tulisiko listan kohteen merkki näkyä sisällä vai ulkopuolella sisällön virrassa)
  • list-style-image(Määritä kuva listan kohteen merkiksi)

Jos yksi tai useampi yllä olevista ominaisuuksista puuttuu, lisätään puuttuvan ominaisuuden oletusarvo (jos sitä on).

Aseta listan värityyli

Voimme myös käyttää värejä asettaaksemme listan tyyliä, jotta ne näyttävät hauskemmilta.

Kaikki lisätyt tyylit <ol> tai <ul> -merkkien alle vaikuttavat koko listaan, kun taas <li> -merkkien ominaisuudet vaikuttavat yksittäisiin listaan kohtiin:

Esimerkki

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

Tulos:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Kokeile itse

Lisää esimerkkejä

Punaisella vasen reunaviivalla varustettu mukautettu lista
Tämä esimerkki näyttää, kuinka luodaan lista, jossa on punainen vasen reunaviiva.
Täysiverkkoleveyden reunalistat
Tämä esimerkki näyttää, miten luodaan ilman numerointia oleva reunallinen luettelo.
Kaikki luettelon eri kohteen merkinnät
Tämä esimerkki näyttää CSS:n kaikkia eri luettelon kohteen merkintöjä.

Kaikki CSS-luettelo-ominaisuudet

Ominaisuus Kuvaus
list-style Yhdistetty ominaisuus. Asettaa luettelon kaikkien ominaisuuksien arvon yhdessä lauseessa.
list-style-image Määrittää kuvan luettelon kohteen merkinnänä.
list-style-position Määrittää luettelon kohteen merkinnän sijainnin.
list-style-type Määrittää luettelon kohteen merkinnän tyyppi.