A listajelölő beállítása különböző módokon. Meg akarom változtatni a jelölő típusát egy másik szimbólumra

CSS listák- a listák kialakításáért felelős tulajdonságok összessége. A HTML-listák használata nagyon gyakori a webhely navigációs sávjainak létrehozásakor. A listaelemek blokkelemek halmazát jelentik.

A szabványos CSS-tulajdonságok használatával megteheti változás kinézet listajelző, adjon hozzá képet a jelölőhöz, és változtassa meg a jelölő helyét. A jelölőblokk magassága a line-height tulajdonsággal állítható be.

Stíluslisták CSS-stílusokkal

1. List marker type list-style-type

A tulajdonság megváltoztatja a jelölő típusát ill eltávolítja a jelzőt pontozott és számozott listákhoz. Örökölt.

Szintaxis

Ul (lista-stílus-típus: nincs;) ul (lista-stílus-típus: négyzet;) ol (lista-stílus-típus: nincs;) ol (lista-stílus-típus: alsó-alfa;) Rizs. 1. Példa a felsorolásjeles és számozott listák kialakítására

2. Képek a lista-stílusú képelemekhez

A képek és a színátmenetes kitöltések használhatók listaelem-jelölőkként. Örökölt.

Szintaxis

Ul (listastílusú kép: url("images/romb.png");) ul (listastílusú kép: lineáris színátmenet (#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Rizs. 2. Felsorolásos lista készítése képpel
Rizs. 3. Felsorolásos lista stílusa színátmenettel

3. List marker location list-style-position

Ez a tulajdonság lehetővé teszi a jelölő elhelyezését a listaelem tartalmán kívül vagy belül. Örökölt.

Két népszerű módja van a golyók színének megváltoztatásának, hogy azok eltérjenek a szöveg színétől.

Használat

Minden elem belsejében

hozzon létre egy dizájnt

Ebben az esetben a markerek színét a li választó színstílus tulajdonsága határozza meg, a szöveg színét pedig az span választó (1. példa).

1. példa: Beágyazott címkék használata

• Hegedű
• Gitár
• Duda
• kintorna
• Celesta

A példa eredménye az alábbiakban látható (1. ábra).

Rizs. 1. Jelölők, amelyek színükben különböznek a törzsszövegtől

Az egyszerűsége ellenére a módszer kényelmetlen, különösen nagy listák esetén, mert most minden listaelemhez hozzá kell adni .

Használat::előtte

Az ötlet az, hogy eltávolítsuk az eredeti listajelölőket a list-style-type tulajdonságon keresztül, és hozzáadjuk a saját markereinket a ::before pszeudoelemen és a content tulajdonságon keresztül. Egy ilyen hivatkozás lehetővé teszi, hogy ebben az esetben bármilyen szöveget vagy karaktert beszúrjon az elem elé

1. példa: Beágyazott címkék használata

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Hegedű
• Gitár
• Duda
• kintorna
• Celesta

A példa eredménye az alábbiakban látható (1. ábra).

Rizs. 1. Jelölők, amelyek színükben különböznek a törzsszövegtől

Az egyszerűség ellenére a módszer kényelmetlen, főleg nagy listák esetén, mert most minden listaelemhez címkét kell adni . Ezért trükkös módon fogunk elemezni, teljes mértékben a CSS munkája alapján.

Az ötlet az, hogy eltávolítsuk az eredeti listajelölőket a list-style-type tulajdonságon keresztül, és hozzáadjuk a saját markereinket a :before pszeudoelemen és a content tulajdonságon keresztül. Ez az összerendelés lehetővé teszi bármilyen szöveg vagy karakter beszúrását egy elem elé, ebben az esetben az LI . Ezenkívül a szöveg típusa (szín, betűtípus, háttér stb.) stílusokkal is szabályozható, amit a 2. példa szemléltet. Itt a ¶ bekezdésszimbólum jelölőként használatos.

2. példa: A pszeudo-elem:befor használata

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Északi
• Déli
• nyugat
• Keleti

Ennek a példának az eredménye az ábrán látható. 2.

Rizs. 2. Stílusokkal létrehozott jelölők

A felsorolásjelek színének módosítása a HTML-listában a tartomány használata nélkül (6)

Nekem a legjobb lehetőség CSS pszeudoelemeket kell használni, tehát a lemez pont így néz ki:

ul ( list-style-type: none; ) li ( pozíció: relatív; ) li:befor ( tartalom: ""; kijelző: blokk; pozíció: abszolút; szélesség: 5 képpont; /* állítsa be az igényeinek megfelelően */ magasság: 5 képpont; /* igazítás az Ön igényei szerint */ szegélysugár: 50%; bal: -15 képpont; /* igazítás az Ön igényei szerint */ felül: 0,5 em; háttér: #f00; /* igazítás az Ön igényei szerint * / )

• első
• második
• harmadik

• a szélességnek és a magasságnak egyenlőnek kell lennie, hogy a mutatók lekerekítve maradjanak
• beállíthatja a határ sugarát nullára, ha négyzet alakú felsorolásokat szeretne használni

További bullet stílusokhoz használhat más css-alakzatokat is https://css-tricks.com/examples/ShapesOfCSS/ (ezt válassza, amely nem igényel pszeudoelemeket, például háromszögeket)

Azon tűnődtem, hogy van-e mód a listában szereplő golyók színének megváltoztatására.

Van egy listám:

• ház
• kert

A li-be nem lehet semmit beszúrni, például "span" és "p". Meg tudom-e változtatni a golyók színét, de a szöveget nem okos módon?

Ha tudsz képet használni, akkor tudod. Kép nélkül pedig csak a golyók színét nem tudod megváltoztatni, a szöveget nem.

Képhasználat

Li ( listastílusú kép: url(képek/képed.jpg); )

Kép használata nélkül

Ezután szerkeszteni kell HTML jelölésés tartalmazza a span belül a listát, valamint a li és a span színt különböző színekkel.

Nagyon tetszett Mark válasza is – szükségem van egy sor különböző színű UL-re, és nyilvánvalóan egyszerűbb lenne egy osztályt használni. A narancshoz például a következőket használtam:

ul.orange ( listastílus: nincs; kitöltés: 0px; ) ul.orange > li:before ( tartalom: "\25CF "; betűméret: 15px; szín: #F00; jobb margó: 10px; kitöltés: 0px ; sor magassága: 15 képpont; )

Azt is megállapítottam, hogy a „tartalom:” hexadecimális kódja eltér Marcétól (ez a hexadecimális kör túl magasnak tűnt). Az általam használt, úgy tűnik, tökéletesen illeszkedik a közepére. Számos más formát is találtam (négyzetek, háromszögek). , körök stb.)

Kombinálhatjuk a list-style-image-t az svg-vel, amit tehetünk css-be ágyazva! Ez a módszer hihetetlen kontrollt kínál a "golyók" felett, amelyek bármivé válhatnak.

A piros kör eléréséhez használja a következő css-t:

"); }

De ez még csak a kezdet. Ez lehetővé teszi számunkra, hogy bármilyen őrült dolgot megtegyünk ezekkel a golyókkal. A körök vagy téglalapok egyszerű, de bármi, amit svg-vel rajzolhat, ráfér! Nézze meg az alábbi almafa példát:

ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-image: url("data:image/svg+xml, "); ) ul.multi-color ( list-style-image: url("data:image/svg+xml, "); }

• nagy körök!
  • Nagy téglalapok!
  • b
    • Kis körök!
    • c
      • Kis téglalapok!

• bikák
• szemek.

• Több
• szín

Szélesség/Magasság attribútum

Egyes böngészőkben a szélesség és magasság attribútumokat be kell állítani

Kódolások

A @Marc és a @jessica megoldásokra építve az általam használt megoldás:

Li ( pozíció:relatív; ) li:before ( tartalom:""; kijelző: blokk; pozíció: abszolút; szélesség: 6 képpont; magasság: 6 képpont; szegélysugár: 6 képpont; bal: -20 képpont; felül: 0,5 em; háttér- szín: #000;)

Én az em-t használom a betűméretekhez, így ha 0,5 em-re állítja a tetejét, az mindig a szöveg első sorának közepére kerül. Bal:-20px-et használtam, mert ez az alapértelmezett bal:-20px pozíció a böngészőkben: szülő padding/2

Tudom, hogy ez egy nagyon-nagyon régi kérdés, de eljátszottam ezzel, és egy olyan módszerre jutottam, amit nem láttam. Adjon színt a listának, majd írja felül a szöveg színét a::first-line selector::first-line segítségével. Nem vagyok szakértő, így lehet, hogy valami nem stimmel ezzel a megközelítéssel, amit hiányolok, de úgy tűnik, működik.

li ( szín: kék; ) li::first-line ( szín: fekete; )

• ház
• kert

Feladat

Módosítsa a jelölők megjelenését a listában, és cserélje ki őket egy másik szimbólumra.

Megoldás

VAL VEL HTML használatával vagy CSS-ben háromféle marker beállítható: korong (pont), kör (kör), négyzet (négyzet). Ezeket az értékeket hozzá kell adnia a list-style-type style tulajdonsághoz, amely az UL vagy LI választóhoz van megadva (1. példa).

1. példa Szabványos markerek

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cseburaska
• Krokodil Gena
• Shapoklyak

BAN BEN ezt a példát jelölőként négyzetet használunk (1. ábra).

Rizs. 1. Jelölők típusa

A saját marker karakter kiválasztása és beállítása nagyon sajátos módon, a :before pszeudoelemen keresztül történik. Először teljesen távolítsa el a felsorolásjeleket a listából úgy, hogy a list-style-type style tulajdonságot none értékre állítja, majd hozzáadja a :before pszeudoelemet az LI választóhoz. Maga a karakterkiadás a tartalom tulajdonság használatával történik, amelynek értéke a kívánt szöveg vagy karakter (2. példa).

2. példa: A :before és a content használata

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cseburaska
• Krokodil Gena
• Shapoklyak

Ebben a példában az alapértelmezett jelölő el van rejtve, és helyette egy szimbólum kerül hozzáadásra (2. ábra).

Rizs. 2. Szimbólumjelzők

Ha valamilyen trükkös karaktert szeretne beállítani jelölőként, használhatja Microsoft program Szó vagy karakter táblázat az szabványos program tartalmazza Windows készlet. A kódkódolásnak UTF-8-nak kell lennie.