CSS list style generátor BÉTA

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:

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.