Kuidas kujundada loendeid CSS-iga

HTML-i loendite kokkuvõte

HTML-is on kahte tüüpi loendeid - järjestatud ja järjestamata .

In Tellitud nimekirjad (

    ), on loendiüksuste järjekord oluline. Üksused võivad ilmuda järjestuses numbri, rooma numbri, tähtnumbri või muu tüüpi markerite järgi. Tellitud loendite vaikimarker on number (või decimal):

    In Järjestamata nimekirjad (

      ), pole loendiüksuste järjekord oluline. Üksused kuvatakse täppivormingus. Korrastamata loendite vaikimarker on ümmargune täpp või disc.

      Iga järjestatud või järjestamata loendis olev loendiüksus luuakse märgendiga.

      Loendipõhised stiilid

      On kolm ühist omadused omased styling nimekirjad: list-style-type, list-style-positionja list-style-image. Samuti on olemas lühikirjeldus, mis hõlmab kõiki kolme.

      list-style-type

      Järjestatud ja järjestamata loendites kuvatavaid markereid (või täppe) saab kujundada mitmel viisil. CSS-i omadus markeri tüübi kujundamiseks on list-style-type. Vaikimisi list-style-typeväärtus tellitud nimekiri on decimal, arvestades vaikimisi järjestamata loend on disc.

      Tellitud loendi näide:

      /* css */ ol { list-style-type: upper-roman; }

      Tellimata loendi näide:

      /* css */ ul { list-style-type: square; }

      Markeri näidet pole:

      /* css */ ul { list-style-type: none; }

      Atribuudi aktsepteeritud väärtuste list-style-typehulka kuuluvad:

      Tellimata:

      • plaat ( vaikimisi )
      • ring
      • ruut

      Tellitud:

      • kümnendkoht ( vaikimisi )
      • kümnendkoht-juhtiv-null
      • alumine rooma keel
      • ülemine rooma keel
      • alam-kreeklane
      • alumine ladina keel
      • ülemine ladina keel
      • armeenia
      • gruusia
      • alam-alfa
      • ülemine alfa

      Muu:

      • mitte ühtegi

      Märkus: kõiki ülaltoodud atribuutide väärtusi saab kasutada nii järjestatud kui ka järjestamata loendite kujundamiseks (nt: loenditähistega järjestatud squareloend).

      list-style-position

      list-style-positionkontrolli, kas loendilooja ilmub või väljaspool iga loendi kirje element ( ). Atribuut aktsepteerib kahte väärtust outside(vaikimisi) või inside.

      Paigutage outsideloendiüksuse elemendi marker ja iga loendiüksuse kõik tekstiread ja alamjooned joonduvad vertikaalselt:

      /* css */ ul { list-style-position: outside; /* default */ }

      Paigutage marker insideja iga loendiüksuse esimene tekstirida taandub, et teha markerile ruumi. Sama loendiüksuse kõik alaread joondatakse markeriga, mitte esimese tekstireaga:

      /* css */ ul { list-style-position: inside; }

      list-style-image

      list-style-imageVara nõustub pildi url asemel loendilooja. Selle atribuudi vaikeväärtus on none.

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Lühike

      list-styleon kolme ülaltoodud stiiliomaduse lühikirjeldus. Järjekord väärtused list-styleaktsepteerib on list-style-type, list-style-positionja list-style-image. Kui mõni väärtus jäetakse välja, kasutatakse selle atribuudi vaikeväärtust.

      Näide:

      /* css */ ul { list-style: circle inside none; }

      Loendispetsiifilisem stiil

      Järjestatud loendimärgendid aktsepteerivad ka atribuute, mis kontrollivad loendiüksuste voogu, loendit või konkreetseid markeriväärtusi. Nendeks start, reversedja valueatribuute. Lisateavet leiate allpool loetletud MDN-i ressurssidest.

      Üldine stiil

      Loendi sisu saab kujundada nagu muud pvõi divelemendid. color, font-family, margin, paddingVõi borderon vaid mõned näited omadused, mida saab lisada kas ul, olvõi lielemente.

      Pange tähele, et kõik elemendile ulvõi olelemendile lisatud stiilid mõjutavad kogu loendit. Otse lielementidele lisatud stiilid mõjutavad loendi üksikuid üksusi. Allpool toodud näites on äärise ja taustavärvi atribuudid loendi ja loendiüksuse elementide vahel erinevalt kujundatud:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      Loendi vahe

      Kui see list-style-typeon seatud, võite märgata loendikirjete ees lisatühikuid none. Seadistamine padding, et 0(või mis iganes vahet eelistatakse) nimekirja element tühistavad selle vaikimisi polster.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Allikad:

      Sellest artiklist leitud teabe koostamisel viidati allpool olevatele linkidele. Selle teema kohta lisateabe saamiseks külastage neid.

      Rohkem informatsiooni:

      MDN - stiililoendid

      W3Koolid - CSS-i loendid

      CSSi trikid - loendistiilis