Listamerkin määrittäminen eri tavoilla. HTML-luettelot - luettelomerkitty luettelo - numeroitu luettelo - määritelmäluettelo - sisäkkäiset luettelot HTML:ssä

List-style-type-ominaisuus määrittää merkin tyypin. Tässä on taulukko tämän ominaisuuden kelvollisista arvoista:

Taulukkoon olen listannut kaksi hyvin epätavallista ominaisuutta: georgian ja cjk-ideographic. Näitä kiinteistöjä käytetään alueellisesti. Tällä ominaisuudella on useita muita samankaltaisia ​​mielenkiintoisia merkityksiä, esimerkiksi armenia tai hiragana, mutta niitä kaikkia on turha luetella.

Nyt esimerkki tämän ominaisuuden käytöstä:

1. Ensimmäinen kohta.
2. Toinen kohta.
3. Kolmas kohta.

Huomaa, että olemme kääntäneet numeroidun listan

merkittynä.

Kuva 1. List-style-tyyppinen ominaisuus.

Muista kiinnittää huomiota none-arvoon, tämä arvo poistaa merkit kokonaan. Tätä ominaisuutta käytetään usein luetteloiden muotoiluun CSS:n avulla.

List-style-tyyppinen ominaisuus on melko yksinkertainen, kuten muutkin luetteloiden kanssa työskentelyn ominaisuudet.

List-style-image-ominaisuus asettaa merkkisymbolin grafiikkatiedostoksi.

• Ensimmäinen kohta.
• Toinen kohta.
• Kolmas kohta.

Tässä on mitä näemme:

Kuva 3. Alusta lohko
.

On tärkeää kiinnittää huomiota siihen, että listamerkit ulottuvat elementtilohkon rajan yli

• kehystetty punaisella reunuksella. Tämä voi johtaa odottamattomiin tuloksiin, esimerkiksi nollaamme pehmusteen
  .
  • Ensimmäinen kohta.
  • Toinen kohta.
  • Kolmas kohta.

  Tämän saamme:

  Kuva 4. Alusta lohko
  .

  Luettelon merkit ovat nyt säilön ulkopuolella

  . Siten merkit voivat ylittää sen artikkelin säilön, johon luettelo kuuluu, mikä häiritsee sivuston ulkoasua.

  Olisi parempi sijoittaa ne säiliöön

  • . Tämä ratkaisisi tämän ongelman. Sitä varten listatyyli-sijaintiominaisuus on tarkoitettu.

    List-style-position-ominaisuus määrittää merkin sijainnin suhteessa lohkoon

  • . Tällä ominaisuudella on kaksi merkitystä:

    Oletusarvo on ulkopuolella.

    Sovelletaan tätä ominaisuutta esimerkkiimme ja sijoitetaan merkit lohkoon

  • asettamalla tämän ominaisuuden sisälle .
    • Ensimmäinen kohta.
    • Toinen kohta.
    • Kolmas kohta.

    Tässä on mitä saimme:

    Kuva 5. List-style-position -ominaisuus.

    Luettelomerkit ovat nyt sisäkkäisiä lohkon sisällä

  • .

    listatyylistä omaisuutta

    Luettelotyylinen ominaisuus on lyhennelmämuoto, jonka avulla voit käyttää kaikkien kolmen edellisen ominaisuuden arvoja.

    Esimerkki: tee kuva merkillä ja aseta merkintä luettelon kohdelohkon sisään.

    • Ensimmäinen kohta.
    • Toinen kohta.
    • Kolmas kohta.

    Tässä tulos:

    Kuva 6. Listatyylinen ominaisuus.

    Määritimme kaksi arvoa yhteen listatyyliseen ominaisuuteen: merkin sijainnin ja merkin graafisen tiedoston polun.

    Listatyyli-ominaisuutta käytetään useimmiten, jopa yksittäisen arvon asettamiseen. Se on lyhyt ja helppo kirjoittaa.

    Aiheeseen liittyviä CSS-reseptejä

    • Avattavan valikon tekeminen CSS:ssä, monimutkainen esimerkki varjoista.

    CSS:n avulla voit luoda luettelomerkittyjä ja numeroituja listoja sekä käyttää sopivaa kuvaa luettelomerkkinä.

    Taulukossa 1 listaa luetteloiden luomiseen ja muuttamiseen tarkoitettujen elementtien ominaisuudet.

    Pöytä 1. CSS-ominaisuudet, joilla ohjataan luettelon ulkoasua

    Omaisuus	Merkitys	Kuvaus	Esimerkki
    lista-tyylinen	levy ympyrä neliö desimaali alempi-roomalainen ylä-roomalainen alempi alfa ylempi alfa ei mitään	Merkin tyyppi. Kolmea ensimmäistä käytetään luettelomerkityn luettelon luomiseen, ja loput käytetään numeroidun luettelon luomiseen.	LI (luettelotyyli-tyyppi: ympyrä) LI (luettelotyylityyppi: ylempi alfa)
    listatyylinen kuva	ei mitään URL-osoite	Asettaa merkkisymbolin mihin tahansa kuvaan.	LI (list-style-image: url(check.gif))
    lista-tyylinen sijainti	ulkopuolella sisällä	Merkin sijainnin valitseminen suhteessa tekstirivien lohkoon.	LI (luettelotyylinen sijainti: sisällä)
    listatyyliin		Universaali ominaisuus, joka sisältää samanaikaisesti kaikki edellä mainitut ominaisuudet.

    Koska tag

  • perii tunnisteen tyyliominaisuudet
    tai
    joka toimii sen ylätasona, voit muotoilla sekä UL- että LI-valitsinta. Joten esimerkissä 1 käytetään UL-valitsinta ja sille asetetaan tyyliparametrit.

    Esimerkki 1: Luo luettelomerkitty luettelo

    Tämän esimerkin tulos on esitetty kuvassa. 1. Käytetään neliön muotoisia merkkejä ja niiden ulkoinen sijoittelu suhteessa tekstiin.

    Riisi. 1. Luettelonäkymää muokattu tyyleillä

    Jos haluat asettaa oman kuvasi merkiksi, käytä listatyylikuva-ominaisuutta esimerkin 2 mukaisesti.

    Esimerkki 2: Kuvien käyttäminen merkeinä

    • Otsikon tulee olla lyhyempi kuin kolme riviä.
    • Käytä osioiden nimeämisessä jo vakiintuneita termejä, kuten vieraskirja, chat, linkki, kotisivu ja muut.
    • Ennen kuin käytät teknistä termiä tai sanaa, päätä, ymmärtääkö lukija sen.

    Tämän esimerkin tulos on esitetty kuvassa. 2. Merkkeinä käytetään pientä kuvaa.

    

    Riisi. 2. Kuvat merkkeinä

    Taulukossa on esimerkkejä erilaisten luetteloiden luomisesta. 2.

    Pöytä 2. Mahdolliset luettelotyypit

    HTML-koodi	Esimerkki
    	Kaikki linkit toimivat tuki eri selaimille tekstin luettavuus
    	Asiat, jotka on otettava huomioon sivustoa testattaessa: Kaikki linkit toimivat tuki eri selaimille tekstin luettavuus
    	Asiat, jotka on otettava huomioon sivustoa testattaessa: Kaikki linkit toimivat tuki eri selaimille tekstin luettavuus
    	Numeroitu luettelo arabialaisilla numeroilla: ensimmäinen toinen kolmas
    	Numeroitu luettelo pienillä roomalaisilla numeroilla: ensimmäinen toinen kolmas
    	Numeroitu luettelo isoilla roomalaisilla numeroilla: ensimmäinen toinen kolmas
    	Numeroitu luettelo pienillä latinalaisilla kirjaimilla: ensimmäinen toinen kolmas
    	Numeroitu luettelo latinalaisten aakkosten isoilla kirjaimilla: ensimmäinen toinen kolmas

    - 4,5/5 2 äänen perusteella

    Hyvin usein tietyt verkkosivustolla olevat tiedot on esitettävä luetteloiden muodossa.

    Listojen avulla voit järjestää ja systematisoida erilaisia ​​tietoja ja esittää ne vierailijalle kätevässä muodossa.

    HTML-luetteloita on kolmea eri muotoa: luettelomerkityt luettelot, numeroidut luettelot ja määritelmäluettelot. Katsotaanpa, kuinka ne luodaan järjestyksessä.

    Ranskalaiset viivat.

    Tämän tyyppistä luetteloa käytetään useimmiten. Luettelomerkitty luettelo HTML:ssä luodaan tagien avulla

    • . Tässä tapauksessa jokaista luettelokohtaa vasten lisätään oletusarvoisesti merkki, se on ympyrän muotoinen merkki. Tagien avulla luodaan säilö, jonka sisällä listaelementit sijaitsevat: .

      Luettelomerkitty luettelokoodi näyttää tältä:

      • Tämä vaihtoehto on
      • Tämä vaihtoehto
      • Tällainen vaihtoehto

      Voit yrittää luoda HTML-sivun käyttämällä tätä koodia myös sinulle, tuloksena on seuraava luettelo:

      

      Kuten näet, jokainen luetteloelementti sijoitetaan uudelle riville, ja tietyt sisennykset luodaan vasemmalle, ylä- ja alapuolelle. Jokainen luettelokohde alkaa merkillä. Merkki voi olla täytetty ympyrä (oletusarvoisesti käytössä), ympyrä tai neliö. Tagilla

      On type-attribuutti, jota käytetään määrittämään merkin tyyli. Tällä attribuutilla on seuraavat merkitykset:
      • levy - ympyrä;
      • ympyrä - ympyrä;
      • neliö - neliö.

      Levyn arvo on oletusarvo.

      Esimerkki luettelomerkityn luettelon luomisesta ympyrämerkeillä:

      • Tämä vaihtoehto on
      • Tämä vaihtoehto
      • Tällainen vaihtoehto

      Tämän seurauksena luettelo on seuraavanlainen:

      

      Luettelomerkeillä varustetun luettelon luominen neliönmuotoisilla merkeillä:

      • Tämä vaihtoehto on
      • Tämä vaihtoehto
      • Tällainen vaihtoehto

      Lista näyttää tältä:

      

      Type-attribuuttia voidaan käyttää muuhunkin kuin pelkkään tunnisteeseen

      , mutta myös tagiin
      • . Tällä tavalla voit luoda luettelon, jossa on erilaisia ​​luettelomerkkejä.
        • Tämä vaihtoehto on
        • Tämä vaihtoehto
        • Tällainen vaihtoehto

        Tulos tulee olemaan seuraava:

        

        Numeroidut luettelot.

        Numeroidut luettelot HTML:ssä ovat luetteloita, joissa jokaisella kohteella on sarjanumero, ja ne luodaan tunnisteen avulla

        ja sisäkkäisiä sen tunnisteissa

        1. 1. Ensimmäinen linja
           2. Toinen linja
           3. Kolmas rivi

           Lista näyttää tältä:

           

           Oletusarvoisesti numerointi on arabialaisin numeroin. Mutta tunniste

           On type-attribuutti, jonka arvojen avulla voit numeroida isoilla (type="A") tai pienillä kirjaimilla (type="a") latinalaisilla kirjaimilla, roomalaiset numerot isoilla (type="I") ) ja alempi (type="i" ) rekisteri.

           Alla on lyhennetyt versiot koodista ja numerointityypistä, joka voi olla jossakin tapauksessa.

           Listanäkymä:

           Listanäkymä:

           

           Numerointi latinalaisten aakkosten pienillä kirjaimilla:

           Listanäkymä:

           

           Listanäkymä:

           

           Listanäkymä:

           

           Luettelo HTML-määritelmistä.

           Erityinen luettelotyyppi on määritelmäluettelot. Ne eroavat toisistaan ​​siinä, että kukin luetteloelementti koostuu kahdesta elementistä, termistä ja tekstistä, joka paljastaa sen merkityksen. Nämä luettelot luodaan tunnisteiden avulla

           . Tag

           luo säilön luettelolle, tunniste

           asettaa termin ja tunnisteen

           termin kuvaus tai määritelmä.

           Tämä lista on kirjoitettu seuraavasti:

           Termi 1

           Määritelmä 1

           Termi 2

           Termin 2 määritelmä

           Termi 3

           Määritelmä 3

           Tuloksena on seuraava luettelo:

           

           Kuten näet, tämä luo sopivan sisennyksen termille ja määritelmätekstiin.

           Sisäkkäiset tai monitasoiset luettelot HTML:ssä.

           Joskus on tarpeen sijoittaa toinen luettelo tietyntyyppisen luettelon yhteen elementtiin. HTML:ssä on mahdollista upottaa joitain listoja rajattomasti muiden luetteloiden elementteihin.

           Esimerkiksi tässä on koodi, joka sijoittaa numeroidut luettelot luettelomerkittyjen luettelokohteiden sisään.

           • Tämä vaihtoehto on
             1. Ensimmäinen linja
             2. Toinen linja
             3. Kolmas rivi
           • Tämä vaihtoehto
             1. Ensimmäinen linja
             2. Toinen linja
             3. Kolmas rivi
           • Tällainen vaihtoehto
             1. Ensimmäinen linja
             2. Toinen linja
             3. Kolmas rivi

           HTML-listat käytetään ryhmittelemään toisiinsa liittyviä tietoja. Listoja on kolmen tyyppisiä:

           ranskalaiset viivat —

           - jokainen luettelon elementti
           • merkitty merkillä,
             numeroitu luettelo —
             - jokainen luettelon elementti
             1. merkitty numerolla
                määritelmien luettelo- - koostuu termipareista
                —
                määritelmä.

                Jokainen lista on säilö, jossa luetteloelementit tai termimäärittelyparit sijaitsevat. Listaelementit käyttäytyvät kuin lohkoelementit, pinottuna toistensa alle ja vievät koko säiliölohkon leveyden. Jokaisen luettelokohteen sivulla on lisälohko, joka ei osallistu asetteluun.

                HTML-luetteloiden luominen

                1. Luettelomerkitty luettelo

                Ranskalaiset viivat on järjestämätön lista (englanninkielisestä Unordered List -listasta). Luotu käyttämällä parillista tagia

                . Listaelementin merkki on tarra, esimerkiksi täytetty ympyrä.

                Selaimet lisäävät oletusarvoisesti seuraavan muotoilun luettelolohkoon:

                Jokainen luetteloelementti luodaan käyttämällä parillista tagia

             2. (englanninkielisestä luettelokohdasta).
             saatavilla .
             • Microsoft
             • Google
             • Omena
             Riisi. 1. Luettelomerkitty luettelo

             2. Numeroitu luettelo

             Numeroitu luettelo luodaan käyttämällä parillista tagia. Jokainen luettelokohde luodaan myös elementin avulla

           • . Selain numeroi elementit järjestyksessä automaattisesti, ja jos poistat yhden tai useamman tällaisen luettelon elementin, loput luvut lasketaan automaattisesti uudelleen.

             Luettelolohkossa on myös oletusselaimen tyylit:

           • Arvo-attribuutti on käytettävissä, jonka avulla voit muuttaa valitun luettelokohteen oletusnumeroa. Jos esimerkiksi asettamasi luettelon ensimmäinen kohde
           • , sitten jäljellä oleva numerointi lasketaan uudelleen suhteessa uuteen arvoon.

             Tagille

             Seuraavat attribuutit ovat käytettävissä:
             Taulukko 1. Tunnisteen attribuutit

             Attribuutti	Kuvaus, hyväksytty arvo
             päinvastainen	Käänteinen attribuutti saa luettelon näyttämään käänteisessä järjestyksessä (esimerkiksi 9, 8, 7...).
             alkaa	Start-attribuutti määrittää alkuarvon, josta numerointi alkaa, esimerkiksi konstruktio ensimmäiselle tuotteelle annetaan sarjanumero "10". Voit myös määrittää numerointityypin samanaikaisesti, esim. .
             tyyppi	Type-attribuutti määrittää luettelossa käytettävän merkin tyypin (kirjaimet tai numerot). Hyväksytyt arvot: 1 — oletusarvo, desimaalinumerointi. A — luettelon numerointi aakkosjärjestyksessä, isot kirjaimet (A, B, C, D). a — luettelon numerointi aakkosjärjestyksessä, pienet kirjaimet (a, b, c, d). I - numerointi roomalaisilla isoilla numeroilla (I, II, III, IV). i — numerointi roomalaisin pienin kirjaimin (i, ii, iii, iv).

             1. Microsoft
             2. Google
             3. Omena
             Riisi. 2. Numeroitu luettelo

             3. Määritelmien luettelo

             Määritelmien luettelo luodaan tagilla

             . Lisää termi käyttämällä tunnistetta
             , ja lisätäksesi määritelmän - tunnisteen
             .

             Määritelmäluettelolohkossa on seuraavat oletusselaimen tyylit:

             Tunnisteita varten

             ,

             Ja

             saatavilla .

             Johtaja:

             Peter Tochilin

             Heittää:

             Andrei Gaidulyan

             Aleksei Gavrilov

             Vitali Gogunsky

             Marija Koževnikova

             Riisi. 3. Määritelmien luettelo

             4. Sisäkkäinen luettelo

             Usein yksinkertaisten luetteloiden ominaisuudet eivät riitä, esimerkiksi sisällysluetteloa luotaessa ei tule toimeen sisäkkäisiä kohteita. Sisäkkäisen luettelon merkintä olisi seuraava:

             • Kohta 1.
             • Kohta 2.
               • Alakohta 2.1.
               • Alakohta 2.2.
                 • Kohta 2.2.1.
                 • Alakohta 2.2.2.
               • Kohta 2.3.
             • Kohta 3.

             
             Riisi. 4. Sisäkkäinen luettelo

             5. Monitasoinen numeroitu luettelo

             Monitasoista luetteloa käytetään luettelon kohteiden näyttämiseen eri tasoilla eri sisennyksillä. Monitasoisen numeroidun luettelon merkintä olisi seuraava:

             1. kohta
             2. kohta
                1. kohta
                2. kohta
                3. kohta
                   1. kohta
                   2. kohta
                   3. kohta
                4. kohta
             3. kohta
             4. kohta

             Tämä oletusmerkintä luo uuden numeroinnin jokaiselle sisäkkäiselle luettelolle alkaen yhdestä. Sisäkkäisen numeroinnin luomiseksi sinun on käytettävä seuraavia ominaisuuksia:
             counter-reset nollaa yhden tai useamman laskurin ja määrittää nollattavan arvon;
             vastainkrementti määrittää laskurin inkrementin arvon, ts. millä askeleilla kukin seuraava kohta numeroidaan;
             sisältö - luotu sisältö, tässä tapauksessa se vastaa numeron näyttämisestä ennen jokaista luettelokohtaa.

             Ol ( /* poista vakionumerointi */ list-style: none; /* Tunnista laskuri ja anna sille nimi li. Laskurin arvoa ei ole määritetty - oletusarvoisesti se on 0 */ counter-reset: li; ) li :before ( /* Määrittelemme numeroitavan elementin - li Pseudo-elementti ennen tarkoittaa, että content-ominaisuuden avulla lisätty sisältö sijoitetaan ennen luettelon alkioita. Tässä asetetaan laskurin lisäyksen arvo (oletus on 1 */ laskurilisäys: li / * Sisältö-ominaisuus näyttää luettelokohteen numeron laskurit () tarkoittaa, että luotu teksti edustaa kaikkien laskurien arvoja lainausmerkeissä numeroiden väliin ja jokaisen luettelokohdan sisällön eteen lisätään piste */ content: counters(li,"") ".
             Riisi. 5. Monitasoinen numeroitu luettelo

           23.02.2017

           Ei vielä

           
           

           Hei kaikki!
           Tämän päivän opetusohjelmassa puhun siitä, kuinka voit hallita ulkonäköä CSS:ssä, eli luoda luettelomerkittyjä ja numeroituja listoja, suunnitella luettelomerkkejä kuvalla ja myös tarvittaessa poistaa kaikki luettelomerkityt merkinnät kokonaan.
           Yritän olla viivyttelemättä tätä oppituntia enkä kirjoita paljon tietoa. Mutta yritän vain nähdä kuinka käy.

           Merkin tyyppi luettelossa
           

           Omaisuus "LIST-STYLE-TYPE"
           List-style-type-säännön avulla voit asettaa merkin tyypin esimerkiksi näyttämään numeroita, kirjaimia, neliöitä, ympyröitä jne.

           Kiinteistö:

           • ei mitään – ilman merkkiä

           - luettelomerkityt luettelot:

           • levy– täytetyn ympyrän muodossa oleva merkki;
           • ympyrä– avoimen ympyrän muodossa oleva merkki;
           • neliö– täytetyn neliön muodossa oleva merkki;

           - numeroidut luettelot:

           • desimaali– tavalliset desimaaliluvut (1,2,3,4,5 jne.);
           • ylä-roomalainen– suuret roomalaiset numerot (I, II, III, IV, V jne.);
           • alempi-roomalainen– pienet roomalaiset numerot (i, ii, iii, iv, v jne.);
           • ylempi alfa– isot kirjaimet (A, B, C, D, E jne.);
           • alempi alfa– pienet kirjaimet (a,b,c,d,e jne.)

           Li ( list-style-type: circle; /* Merkit avoimen ympyrän muodossa */ )

           Koko esimerkki:

           • teksti nro 1
           • teksti nro 2

           Tulos:

           

           Jos haluat poistaa merkin luettelosta, käytä "ei mitään" -ominaisuutta:

           Li ( list-style-type: ei mitään; /* Poista merkit */ )

           Tulos:

           

           Merkin sijainti luettelossa
           

           Kiinteistö"LIST-TYYLI-SIJAINTI »
           "List-style-position" -sääntöä voidaan käyttää merkin sijainnin määrittämiseen.

           Kiinteistö:

           • ulkopuolella– luettelon päälohkon ulkopuolella;
           • sisällä– luettelon päälohkon sisällä.

           

           Li ( listatyylinen sijainti: sisällä; /* merkin sijainti */ )

           Lista merkin värit
           

           Kiinteistö"VÄRI »
           Tiedät jo "väri"-säännön, jolla voit muuttaa tekstin värin lisäksi myös merkin värin. Katso.

           • Teksti nro 1
           • Teksti nro 2

           Tulos:

           

           Kuva merkin sijaan luettelossa
           

           Kiinteistö"LIST-TYYLI-KUVA »
           Jos et pidä numeroitujen tai luettelomerkittyjen luetteloiden normaalista ulkoasusta, voit käyttää "list-style-image" -sääntöä ja käyttää kuvamerkkejä tavallisten luettelomerkkien sijaan.

           Syntaksi:

           List-style-image: url(image.png);

           LI ( list-style-image: url("marker1.png"); /* merkkikuva */ )

           "marker1.png" on merkin kuva.

           Tulos:

           

           Luettelon merkin sisennys
           

           Omaisuus "PADDING-LEFT"
           Jos sinun on sisennettävä luettelomerkki tekstistä, käytä "padding-left" -sääntöä.

           Li (täyttö-vasen: 30px; /* Sisennys merkistä tekstiin */ )

           Tulos:

           

           LAHJA niille, jotka LUKEVAT LOPPUN

           Listan numerointi mistä tahansa numerosta
           Sinun ei tarvitse tietää tätä, mutta päätin tehdä lahjan niille, jotka ovat lukeneet tähän asti. Jos sinun ei tarvitse numeroida luetteloa yhdestä, vaan esimerkiksi 6:sta, voit tehdä seuraavasti:

           Li ( list-style-type: none; /* Poista luettelosta alkunumerointi */ ) ul ( counter-reset: lista 5; /* Laskurin käynnistäminen */ ) ul li:before ( vastalisäys: lista; /* Kasvata laskurin arvoa */ content: counter(list) "." /* Tulosta numero */ )

           Tulos:

           

           Odotan innolla näkemistäsi seuraavilla tunneilla! Älä unohda tilata!

           Edellinen viesti
           Seuraava merkintä