Kuinka luoda luetteloita CSS: llä

HTML-luetteloiden yhteenveto

HTML: ssä on kahta päätyyppiä - järjestetty ja järjestämätön .

In Tilattu luetteloissa (

    ), luettelokohtien järjestys on tärkeä. Kohteet voivat näkyä järjestyksessä numeron, roomalaisen numeron, aakkosnumeron tai muun tyyppisten merkkien mukaan. Järjestettyjen luetteloiden oletusmerkki on numero (tai decimal):

    In Järjestämätön luetteloissa (

      ), luettelokohtien järjestyksellä ei ole merkitystä. Kohteet näkyvät luettelomuodossa. Järjestämättömien luetteloiden oletusmerkki on pyöreä luettelomerkki tai disc.

      Jokainen järjestetyn tai järjestämättömän luettelon kohde luodaan tunnisteella.

      Luettelokohtaiset tyylit

      On olemassa kolme yhteistä ominaisia ominaisuuksia muotoilu luettelot: list-style-type, list-style-positionja list-style-image. On myös lyhyt ominaisuus, joka sisältää kaikki kolme.

      list-style-type

      Järjestetyissä ja järjestämättömissä luetteloissa olevat merkit (tai luettelomerkit) voidaan muotoilla monin eri tavoin. CSS-ominaisuus merkintätyypin muotoiluun on list-style-type. Järjestetyn list-style-typeluettelon decimaloletusarvo on , kun taas järjestämättömän luettelon oletusarvo on disc.

      Esimerkki järjestetystä luettelosta:

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

      Järjestämätön luetteloesimerkki:

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

      Ei merkkiesimerkkiä:

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

      list-style-typeOminaisuuden hyväksyttyjä arvoja ovat:

      Järjestämätön:

      • levy ( oletus )
      • ympyrä
      • neliö-

      Tilattu:

      • desimaali ( oletus )
      • desimaalin tarkkuudella johtava nolla
      • alempi roomalainen
      • ylempi roomalainen
      • alempi kreikkalainen
      • alempi latinalainen
      • ylempi latinalainen
      • armenialainen
      • georgialainen
      • alempi alfa
      • ylempi alfa

      Muu:

      • ei mitään

      Huomaa: kaikkia yllä lueteltuja ominaisuusarvoja voidaan käyttää sekä järjestettyjen että järjestämättömien luetteloiden muotoilussa (esim. Järjestetty luetteloluetteloiden squareluettelo).

      list-style-position

      list-style-positionohjaa, näkyykö luettelomerkintä kunkin luetteloelementin sisällä (tai ulkopuolella ). Ominaisuus hyväksyy kaksi arvoa outside(oletus) tai inside.

      Sijoita outsideluettelokohde-elementin merkki , ja kunkin luettelokohdan kaikki tekstirivit ja alirivit kohdistuvat pystysuoraan:

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

      Aseta merkki paikalleen inside, ja jokaisen luettelokohdan ensimmäinen tekstirivi sisennetään, jotta merkille mahtuu tilaa. Kaikki saman luettelokohteen alirivit kohdistuvat merkkijonoon ensimmäisen tekstirivin sijaan:

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

      list-style-image

      list-style-imageOmaisuuden hyväksyy kuvan url sijasta listamerkin. Tämän ominaisuuden oletusarvo on none.

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

      list-style Shorthand

      list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.

      Example:

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

      More List-Specific Styling

      Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.

      General Styling

      List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.

      Huomaa, että kaikki elementtiin ultai olelementtiin lisätyt tyylit vaikuttavat koko luetteloon. Suoraan lielementteihin lisätyt tyylit vaikuttavat yksittäisiin luettelokohteisiin. Alla olevassa esimerkissä reunan ja taustavärin ominaisuudet on tyyliltään erilainen luettelo- ja luettelokohde-elementtien välillä:

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

      Luetteloväli

      Saatat huomata ylimääräisiä välilyöntejä luettelokohteiden edessä, kun list-style-typeasetus on none. Asetus paddingon 0(tai mitä väli on edullinen) luettelossa elementti oletustoiminto täyte.

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

      Lähteet:

      Alla oleviin linkkeihin viitattiin tässä artikkelissa olevia tietoja koottaessa. Käy heillä saadaksesi lisätietoja tästä aiheesta.

      Lisää tietoa:

      MDN - tyyliluettelot

      W3Schools - CSS-luettelot

      CSS-temput - luettelotyylinen