Css listák - megváltoztatni, törölni, cserélje markerek, francia

Ebben a fejezetben:

Az a lehetőség, CSS tulajdonságokat formázó listák

  • Megváltoztatása a standard marker számozott listák
  • Beállítása marker típusú felsorolások
  • Állítsa helyett képet markere elemek listáját

A kétféle lista segítségével lehet létrehozni HTML-címkék markerek: felsorolásjeles és számozott. Alapértelmezés szerint a legtöbb böngésző jeleníti Ugyanígy felsorolások formájában egy kört, és a markerek vannak számozva számok formájában sorrendben. CSS lehetővé teszi, hogy változtatni a kinézetét a standard markerek. További példák lesz látható különböző típusú jelzőt, amellyel meg lehet változtatni a megjelenését a listákat.

Szerkesztése és törlése markerek

Változtatni az alapértelmezett CSS egy külső marker típusát a tulajdonság list-style-type. mint a megadott érték az a fajta marker, amely le akarja cserélni a standard.

Példa mutatja néhány fajta számozott listákat markerek:

  1. Kattintson az ingatlan értéke list-style-type
  2. Figyelje meg a markerek
  3. A legmegfelelőbb markerek listáit

ol # mylist list-style-type: tizedes;
>

Kattints bármelyik ingatlan értékét, hogy az eredmény

Mert a felsorolások, már csak háromféle markerek segítségével állítható értékek kör, a lemez és squred:

Melynek értéke none, akkor távolítsa el a jeleket elem a listán, de a bal margó ugyanakkor továbbra is:

Csere markerek képek

Ha nem illenek az egyik alapértelmezett az adott marker, a CSS lehetőséget ad arra, hogy cserélje ki őket olyan képet, ez segít list-style-image tulajdonság. a értelmében, amely szükséges beállítani az elérési utat a kiválasztott képet.

Vegyük figyelembe azt a tényt, hogy a kép automatikusan átméretezi, és egy lista jelenik meg a saját méretét, így akkor ki kell választani a megfelelő képméretet, vagy szerkeszteni egy már meglévő, csökkenteni vagy növelni, hogy akár a jobb:

francia lista

Ha eltávolítja a markerek a tételek listáját is megszüntesse, vagy csökkentse a méretét a bal margó, az alapértelmezett böngésző. Ahhoz, hogy teljesen eltávolítani a behúzás kell használni az ingatlan padding-balra. amely lehetővé teszi, hogy módosítsa a belső padding:

A példában már teljesen eltávolították a bemélyedés a bal oldalon, így a tételeket a listán már laposan a szélén a böngésző ablakot. És mint látható a példa egy felsorolás jelenik pontosan úgy, ahogy tervezték, de a markerek eltűntek sorszámozott listát. Az ok abban rejlik, hogy nagyon tokenek - alapértelmezett markerek nem része a lista tartalmának tételeket, így ha kiveszi a bal margó nem mozog együtt a elemek tartalmát

  • , hanem egyszerűen mögé a szélén a böngésző ablakot.

    Az ingatlan list-style-position határozza meg, hogy a jelölő belül vagy kívül helyezkedik a lista elemeket. Ez a tulajdonság két értéke:

    • kívül - marker a bal oldalon a tartalom (alapértelmezett érték)
    • belül - a jelölő belül található lista elem a tartalom

    Most már tudjuk átírni az előző példában, hogy a bemélyedés a bal oldalon eltávolítjuk, de a jelölők elhagyása nélkül szélén a böngésző:

    A példában a keret adtunk minden elemet a listán, hogy mutatják a határait a lista elemeket.

    Kapcsolódó cikkek