CSS-luettelot ovat erittäin hyödyllisiä joko numeroitujen tai luettelomerkittyjen pisteiden saavuttamisessa. Tässä artikkelissa kerrotaan, kuinka hallita tyypin, sijainnin, tyylin CSS: n avulla. Seuraavat viitteet käsitellään täällä,
- CSS-ominaisuudet
- Luettelotyyppinen ominaisuus
- CSS-luettelot: Näyteohjelma
- MerkkiarvotLuettelotyylisessä sijainnissa
Joten aloitetaan sitten,
CSS-luettelot
CSS-ominaisuudet
CSS-ominaisuuksia on viisi erilaista, joissa voit käyttää sitä luetteloiden hallintaan:
- List-style-type: Sen avulla voimme hallita merkin muotoa tai ulkonäköä.
- List-style-position: Se määrittää, että tarvitaan pitkä piste käärimään toiselle riville tai sen tulee kohdistaa ensimmäisen rivin kanssa tai aloittaa merkillä.
- List-style-image: Siinä määritetään, että merkki on lisättävä tai tehtävä houkuttelevammaksi kuin luettelomerkit tai numeroidut pisteet.
- Luettelotyyli: Se näyttää lyhenteen edellisille ominaisuuksille.
- Marker-offset: Se määrittää etäisyyden merkinnän ja luetteloon syötetyn tekstin välillä.
Tässä yleisimmin käytetyt luettelot ovat: list-style-type ja list-style-position. Se on selitetty alla
mitkä ovat rajoituksia sql: ssä
Siirtyminen tähän artikkeliin CSS-luetteloissa
Luettelotyyppinen ominaisuus
Luettelotyylityyppisessä ominaisuudessa se antaa sinun hallita luettelomerkkien tai -merkkien muotoa ja tyyliä järjestämättömässä luettelotapauksessa. Järjestetyssä luettelotapauksessa se on numerointi.
Järjestämättömien luetteloiden taulukon alapuolella:
| Arvo | Kuvaus |
| Ei mitään | NA |
| Levy | Se on täytetty ympyrä. (Oletusarvo) |
| Ympyrä | Se on tyhjä ympyrä. |
| Neliö | Se on täytetty neliöllä. |
Järjestetyn luettelon alla olevan taulukon alapuolella:
| Arvo | Kuvaus | Esimerkki |
| Desimaali | Se on numero | 1,4,3 |
| Desimaalin tarkkuudella nolla | 0 ennen varsinaista lukua | 01, 04, 03 |
| Ala-alfa | Se on pieniä aakkosnumeerisia merkkejä. | a, b, c, d |
| Ylä-alfa | Se on isoja aakkosnumeerisia merkkejä. | A, B, C, D |
| Ala-roomalainen | Sen pienet roomalaiset numerot. | i, ii, iii, iv, v |
| Ylä-roomalainen | Se on isoja roomalaisia numeroita. | I, II, III, IV, V |
| Ala-kreikkalainen | Marker on alikreikan kielellä | alfa, gamma |
| Ala-latinalainen | Marker on latinankielinen | a, b, c, d |
| Ylempi latina | Marker on latinankielinen | A, B, C, D |
Siirtyminen tähän artikkeliin CSS-luetteloissa
CSS-luettelot: Näyteohjelma
- Java
- Python
- Kulmikas
- Java
- Python
- Kulmikas
- Java
- Python
- Kulmikas
- Java
- Python
- Kulmikas
- Java
- Python
- Kulmikas
Tuotos
Siirtyminen tähän artikkeliin CSS-luetteloissa
Luettelo-tyylinen-sijainti-ominaisuus
Merkkiarvot Luettelotyylisessä sijainnissa
List-style-position -ominaisuudessa se osoittaa, että merkin tulisi näkyä luettelopisteiden sisältävän ruudun sisällä tai ulkopuolella. Tällä voi olla yksi kahdesta arvosta:
| Arvo | Kuvaus |
| Ei mitään | NA |
| Sisällä | Tässä tapauksessa, jos teksti menee toisella rivillä, teksti kiertyy merkinnän alle, ja se näyttää myös, mistä teksti olisi alkanut, jos luetteloissa olisi valle ulkopuolella. |
| ulkopuolella | Tässä tapauksessa, jos teksti menee toiselle riville, teksti kohdistetaan ensimmäisen rivin alkuun. |
Esimerkki:
- Matematiikka
- Yhteiskuntatieteet
- Fysiikka
- Matematiikka
- Yhteiskuntatieteet
- Fysiikka
- Matematiikka
- Yhteiskuntatieteet
- Fysiikka
- Matematiikka
- Yhteiskuntatieteet
- Fysiikka
Tuotos
Tämä tuo meidät tämän CSS-luetteloita koskevan artikkelin loppuun.
Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuerystä, Angularista, NodeJS: stä, ExpressJS: stä ja MongoDB: stä.
Onko sinulla kysymys meille? Mainitse se artikkelin kommenttiosassa ja palaamme sinuun.