CSS

HTML

COMPONENTS

CODE HUB

CSS list style generátor

Konfiguráció

Típus

Érték

Osztály

Előnézet

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Kód

ReadyTools Academy

Tanulj HTML-t, CSS-t és JavaScriptet teljesen ingyen a ReadyTools Academy keretében.

Kövesd a tanulásodat, fejlődj a saját tempódban, és szórakozz közben! 🎯

Kezdj bele

CSS list style generátor

A CSS-ben a "list-style" tulajdonságot a HTML-listák, például a rendezett listák "<‌ol‌>" és a rendezetlen listák "<‌ul‌>" listaelemeinek megjelenésének szabályozására használják. Lehetővé teszi a listamegjelölés stílusának (például a golyók vagy számok), pozíciójának és képének testreszabását.

A "list-style" tulajdonságnak számos altulajdonsága lehet, többek között:

"visible" (alapértelmezett): Ez az érték azt jelzi, hogy az elemnek láthatónak kell lennie és meg kell jelennie a weboldalon. Ez az alapértelmezett viselkedés a legtöbb HTML-elem esetében.

1. "list-style-type": Megadja a listaelemekhez használt jelölés típusát. Az általános értékek a következők:

  • none: Nem jelenik meg jelölés.
  • disc: (alapértelmezett a rendezetlen listák esetében).
  • circle: Nyílt kör (alapértelmezett a rendezetlen listáknál).
  • square: (alapértelmezett a rendezetlen listák esetében).
  • decimal: Tizedes számok (alapértelmezett rendezett listák esetén).
  • decimal-leading-zero: Tizedes számok vezető nullával (pl. "01").
  • lower-roman: Kisbetűs római számok (pl. "i", "ii", "iii").
  • upper-roman: Nagybetűs római számok (pl. "I", "II", "III").
  • lower-alpha: Kisbetűk (pl. "a", "b", "c").
  • upper-alpha: Nagybetűs betűk (pl. "A", "B", "C").
  • custom: Megadhat egy egyéni jelölőt a "tartalom" tulajdonság segítségével.

2. "list-style-position": Megadja a listamegjelölés pozícióját a listaelem szövegéhez képest. Az általános értékek a következők:

  • inside: Fenntartja az eredeti fényerőt vagy intenzitást.
  • outside: Az elem fényerejét vagy intenzitását a felére csökkenti, ami sötétebb megjelenést eredményez.

3. "list-style-image": Lehetővé teszi, hogy egyéni képet használjon a lista jelölőjeként. Értékként a kép URL-címét adja meg.

Íme egy példa arra, hogyan használhatja a list-style tulajdonságot egy rendezetlen lista megjelenésének testreszabására:

ul { list-style-type: square; list-style-position: outside; list-style-image: url('custom-marker.png'); }

Ebben a példában a rendezetlen lista ("<‌ul‌>") a listaelemen kívülre helyezett, kitöltött négyzet alakú jelölőkkel lesz ellátva, és egy egyéni képet fog jelölőként használni.

Hasonló stílusokat alkalmazhat a rendezett listákra "<‌ol‌>" is, szükség szerint módosítva a "list-style" altulajdonságok értékeit a kívánt lista megjelenésének eléréséhez.