Hogyan készítsünk számozott listát css-ben. Listastílus CSS-ben. Felsorolásos listák HTML-ben

A szerzőtől: A webböngészők lehetővé teszik a változtatást kinézet sok elem az oldalon CSS használatával. De amikor az oldal egyes elemeit rendereli, a böngészők makacsul megtagadják a design megváltoztatását. Például az olyan űrlapelemek, mint a legördülő listák (kiválasztás), a rádiógombok (rádió) és a jelölőnégyzetek (jelölőnégyzet) mindegyikben saját megjelenéssel rendelkeznek. operációs rendszer, és a böngészők általában ezt a megjelenést kényszerítik ki a webes űrlapokon.

A webböngészők azt is meghatározzák, hogy a rendezetlen és számozott listák hogyan jelenjenek meg. Például a böngészők nagyon megnehezítik a felsorolásjelek megjelenésének megváltoztatását a rendezetlen listáknál és a számok megjelenését a számozott listáknál. Természetesen számos CSS-tulajdonság létezik a listákkal való munkavégzéshez, mint például a list-style-type, a list-style-image és a list-style-position. De még az olyan egyszerű műveletek elvégzéséhez is, mint a számok színének megváltoztatása a listában, néhány divatos HTML/CSS megoldásra van szükség.

Szerencsére néhány kevésbé ismert CSS-tulajdonság kombinálásával megadhatja a számozott listának a kívánt megjelenést és hangulatot. Valójában ennek az oktatóanyagnak az elolvasása után módosíthatja a betűtípusokat, a színeket és a számok szinte bármely más attribútumait egy számozott listában.

Az egész titoknak két összetevője van: először, hogy teljesen elrejtse a szabványos (alapértelmezett) számokat a számozott listából, másodszor pedig használja a pszeudoelemet::mielőtt ezeket a számokat visszaadja.

1. Adjon hozzá egy osztályt vagy azonosítót (ID) a számozott listához. Ez egy jó ötlet, amely lehetővé teszi, hogy a későbbiekben azonosítsa azokat a listákat, amelyekhez egyéni számlálókat szeretne létrehozni:

1. Ez az első elem
2. Ez a második elem
3. Ez a harmadik elem
4. Ez a negyedik elem
5. Ez az ötödik elem
6. Ez a hatodik elem

Ha csak olyan címkeválasztókat használ, mint az ol vagy a li, akkor ugyanazok a számozott listaszámlálók fognak megjelenni az oldalon, ugyanolyan megjelenéssel.

2. Törölje az alapértelmezett listajelölő megjelenítését. Először is meg kell győződnie arról, hogy a böngésző nem adja hozzá a számlálók alapértelmezett kialakítását. A következő szabály segít ebben:

Egyéni számláló (margó balra: 0; kitöltés jobbra: 0; listastílus típusa: nincs; )

Ez a szabály eltávolítja azt a behúzást is, amelyet a böngészők a számozott listák elejére adnak. Mivel egyes böngészők margót, mások pedig kitöltést használnak, mindkét tulajdonságot nullára kell állítania.

3. Nevezze meg a listaelemek ellen-növekmény tulajdonságát!. A CSS-nek van egy counter-increment nevű tulajdonsága. Lehetővé teszi, hogy nevet adjon a számlálónak. Ez nem ad nekünk semmi különöset, kivéve, hogy a számlálónkat a::before pszeudoelem használatával azonosíthatjuk (amit a következő lépésben fogunk megtenni). Íme egy egyszerű kódpélda a számlálónév megadására:

Egyéni számláló li ( számlálónövekmény: lépésszámláló; )

Ebben a példában a lépésszámláló név nem jelent semmi különöset. Ez nem egy CSS tulajdonság értéke, és nem más. Ez csak egy név, amelyet mostantól fogunk használni. Bármilyen nevet kitalálhat: lépcső, pult, vagy akár üveggyökér-sör-a-falon.

4. Használja a pszeudo-elem::before-t a számlálószámok hozzáadásához és stílusához:

Egyedi számláló li::before ( tartalom: számláló (lépésszámláló); jobb margó: 5 képpont; betűméret: 80%; háttérszín: rgb(200 200 200); szín: fehér; betűsúly: félkövér; kitöltés : 3 képpont 8 képpont; szegélysugár: 3 képpont; )

A pszeudoelem::befor lehetővé teszi a tartalom beszúrását egy elem elé. Esetünkben beszúrja a tartalmat a listaelem elé. Ön használ CSS tulajdonság tartalmat, hogy megmondja a böngészőnek, hogy milyen tartalmat helyezzen el a listaelem elejére. Ezek lehetnek valódi szavak vagy a böngésző által automatikusan generált dolgok.

Itt a counter() értéket használjuk, amely paraméterként a counter-increment tulajdonságból kapott azonosítót veszi fel. Ne feledje, hogy a 2. lépésben megadtuk a lépésszámláló nevet a számlálónövekedés tulajdonsághoz, nevet adva a számlálónak, és megmondva a böngészőnek, hogy a számlálót használja minden listaelemhez. A számláló a lista minden eleménél eggyel nő, azaz. ennek eredményeként az 1-es szám a lista első eleme előtt, a 2-es szám a lista második eleme előtt lesz, és így tovább.

Természetesen a böngészők általában ezt teszik. A pszeudo-elem::before használatával azonban ezeket a számokat úgy is formázhatjuk, ahogy ez a szabványos számozott listaelemeknél nem lenne lehetséges. Lényegében a fenti szabályban szereplő összes többi tulajdonságot arra használjuk, hogy egyszerűen hűvös megjelenést kölcsönözzünk a számlálónak (pl. háttérszín, lekerekített sarkok, eltérő betűszín stb.). Ezek a stílusok csak néhány módot mutatnak be a számok megjelenésének megváltoztatására a számozott listákon. És még ennél is többet tehet, ezért nyugodtan használja az Ön által ismert CSS-trükköket érdekes, szórakoztató és gyönyörű számozott listák létrehozásához.

Ennek a technikának a használatára egy kész működő példát láthat az oldalon.

A következő CSS-szabályok a HTML használatával létrehozott listákhoz tartoznak.

lista-stílusú

Listajelet vagy számozást ad meg a type attribútum helyett a HTML-kódban. A felsorolásjeles listák tulajdonságértékei a következők lehetnek:

• korong- kör, alapértelmezés szerint beállítva.
• kör- kör.
• négyzet- négyzet.

Számozott listák esetén a tulajdonsághoz általában a következő értékeket rendelik:

• decimális- Arab számok, az érték alapértelmezés szerint van beállítva.
• alsó római- kis római számok.
• felső római- nagy római számok.
• alsó-alfa- kisbetűs latin betűk.
• felső-alfa- latin nagybetűk.

Ezenkívül bármely listatípusnál a list-style-type tulajdonságot none értékre lehet állítani, ami teljesen eltávolítja a jelölőt.

A számozott listákhoz más értékek is rendelkezésre állnak, pl. cjk-ideográfiai ideográfiai számozást állít be, örmény- hagyományos örmény, és decimális-vezető-nulla római számokra állítja be a számozást, de kezdő nullával: 01, 02, 03… 09, azonban a gyakorlatban ezeket és hasonló értékeket ritkán használják.

Az alábbi példa három listát jelenít meg: hagyományos örmény számozással számozva, körrel felsorolva, és számozott, amelyek elemei ideográfiai számozással vannak ellátva.

1. Első pont
2. Második pont
3. Harmadik bekezdés

• Első pont
• Második pont
• Harmadik bekezdés

1. Első pont
2. Második pont
3. Harmadik bekezdés

Eredmény.

A markerek színe megegyezik a tulajdonság által megadott listában szereplő szöveg színével szín.

lista-stílus-kép

Lehetővé teszi, hogy saját képét állítsa be listajelölőként. Például, ha a listaoldalt tartalmazó mappa tartalmazza a fájlt marker.png, amelyet használni szeretne, akkor a tervezési kód a következő lesz:

Ul ( list-style-image: url("marker.png"); )

lista-stílus-pozíció

Meghatározza a marker pozícióját: vagy a listaelemen kívülre kerül ( lista-stílus-pozíció: kívül), vagy a szöveg körbeveszi ( lista-stílus-pozíció: belül).

Az alábbi példa bemutatja az értékek közötti különbséget. Az első esetben a jelölő a listán belül van, a második esetben a listán kívül.

• Csak nézd meg a különbséget a belső és a külső között.
• A belső esetében a marker közvetlenül illeszkedik a listába, anélkül, hogy túllépne rajta, és nem zavarná az elrendezést. A szöveg körbeveszi, a marker úgy tűnik, hogy benne van.
• A külső érték kiveszi a jelölőt a listából.

Az eredmény egy ehhez hasonló oldal:

lista stílusa

Lehetővé teszi a kód lerövidítését úgy, hogy mindhárom felsorolt ​​tulajdonságot egy sorba írja. A szabályok szóközzel vannak írva:

Ul (lista-stílus: belül négyzet; )

Vegyünk egy példát egy három listát tartalmazó oldalra. Az első 01, 02 formátumú számokkal van számozva, a második egyedi mintával (marker.png fájl az oldallal rendelkező mappában), a harmadik lista jelölője le van tiltva.

A HTML kód lent látható.

1. Első pont
2. Második pont
3. Harmadik bekezdés

• Első pont
• Második pont
• Harmadik bekezdés

1. Első pont
2. Második pont
3. Harmadik bekezdés

A böngésző a következő oldalt jeleníti meg.

A számozott listák sorozatszámukkal ellátott elemek halmaza. A számozás típusa és típusa a címke attribútumaitól függ

, amely a lista létrehozására szolgál. A számozott lista minden elemét egy címke azonosítja
1. az alábbiak szerint.
   1. Első pont
   2. Második pont
   3. Harmadik bekezdés

   Ha nem ad meg további attribútumokat, és csak írjon egy címkét

   , akkor alapértelmezés szerint az arab számokat tartalmazó lista (1, 2, 3,...) kerül felhasználásra, ahogy a 11.3. példában is látható.

   11.3. példa. Hozzon létre egy számozott listát

   Munka az idővel

   1. pontosság megteremtése (soha nem fog elkésni semmiről);
   2. gyógyír a pontosságra (soha nem fogsz rohanni sehova);
   3. változás az idő és az órák érzékelésében.

   Eredmény ezt a példátábrán látható. 11.3.

   Rizs. 11.3. Számozott listanézet

   Vegye figyelembe, hogy a számozott lista automatikus behúzást is hozzáad a szöveg tetejéhez, aljához és bal oldalához.

   A számozási elemek lehetnek a következő értékeket:

   • arab számok (1, 2, 3, ...);
   • latin nagybetűk (A, B, C, ...);
   • kisbetűs latin betűk (a, b, c, ...);
   • nagybetűs római számok (I, II, III, ...);
   • kisbetűs római számok (i, ii, iii, ...).

   A címke type attribútuma a számozott lista típusának jelzésére szolgál.

   . Lehetséges értékeit a táblázat tartalmazza. 11.2.
   Tab. 11.2. Számozott listatípusok

   Lista típusa	HTML kód	Példa
   Arab számok		1. Cseburaska 2. Krokodil Gena 3. Shapoklyak
   A latin ábécé nagybetűi		A. Cseburaska B. Krokodil Gena C. Shapoklyak
   A latin ábécé kisbetűi		a. Cseburaska b. Krokodil Gena c. Shapoklyak
   Római számok be nagybetűs		I. Cseburaska II. Krokodil Gena III. Shapoklyak
   Római számok kisbetűvel		én. Cseburaska ii. Krokodil Gena iii. Shapoklyak

   A lista egy adott értékkel történő indításához használja a címke start attribútumait

   . Nem számít, hogy melyik listatípus van beállítva a type -vel, a start attribútum ugyanúgy működik mind a római, mind az arab számoknál. A 11-4. példa bemutatja, hogyan kell listát készíteni nyolccal kezdődő nagybetűs római számokkal.

   11.4. példa. Lista számozás

   8. Magnum király XLIV
   9. Szigfrid király XVI
   10. Zsigmond király XXI
   11. I. Husbrandt király

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

   

   Rizs. 11.4. Számozott lista római számokkal

   
   

   Elég gyakran kell számozást használni: különféle listák, listák készítésekor, tartalomjegyzék vagy tartalom tervezésénél stb.

   A CSS számlálókat használ a számozási folyamat automatizálására.

   Kezdjük egy egyszerű példával. Ezután már nehezebb – létrehozunk egy beágyazott listát az elemek és az altételek automatikus számozásával.

   Mérőazonosító

   Először azonosítania kell a számlálót.

   A counter-reset tulajdonság a számlálónak nevet és nevet ad kezdő érték. A név bármi lehet, de nem kezdődhet számmal.

   Kódrészlet:

   Ez a bejegyzés ezt írja a címkére be van állítva egy szám nevű számláló és a kezdeti érték 3.

   Alapértelmezés szerint a számláló kezdeti értéke 0.

   Számláló növekmény

   Erre szolgál az ellennövekmény tulajdonság. A számláló növekményeinek megadására is szolgál – ez a szám, amellyel a számláló értéke növekedni fog.

   Kódrészlet:

   test ( ellen nullázás : 3. szám ;)
   test p ( ellennövekmény : 3. szám ; }

   Ez a kódrészlet azt mondja, hogy a bekezdések ( címke

   ) a dokumentum törzsében a számszámlálóval lesz számozva 3-as lépésekben.

   Az első bekezdés 6-os lesz, mert a számláló 3-mal kezdődik, és 3-mal növekszik.

   A számláló lépéseinek alapértelmezett értéke 1.

   Most a számláló összes szükséges paramétere be van állítva: név, kezdeti érték, növekmény és a számozott elem. További....

   Számláló kijelző

   Most meg kell jelenítenie a számláló értékét, és be kell állítania a helyére vonatkozó szabályokat. Ez a tartalom tulajdonság és az előtte és utána pszeudoelemek használatával történik.

   A tartalom tulajdonság legfeljebb ( előtt) vagy után ( után) a megadott elemről.

   Kódrészlet:

   test ( ellen nullázás : 3. szám ;)
   test p:after ( ellennövekmény : 3. szám ; content : " egyenlő "számláló(szám) "." ;)

   Tehát az előző kódrészlethez hozzáadtunk egy tartalomtulajdonságot, amely az "egyenlő" szót adja ki, majd a számszámláló értékét és egy pontot "." . Mindez bekerül az oldalra a bekezdés tartalma után ( címke

   ), amint azt az after pszeudoelem jelzi.

   Végül is...

   Az alábbiakban egy példát ismertetünk.

   Kódrészlet:

   
   
   
   
   

   
   

   2 alkalommal 3

   
   

   3 alkalommal 3

   
   

   4 alkalommal 3

   
   

   5 alkalommal 3

   
   

   Eredmény:

   Beágyazott listák automatikus számozással

   Nézzünk egy példát a számlálók használatára a beágyazott listaszámozás automatizálására.

   Mind a HTML-ből, mind a CSS-ben a listák tanulmányozása során tudnia kell, hogy a listaelemek automatikusan számozásra kerülnek. De ez a számozás a legegyszerűbb.

   Mi a helyzet az olyan alelemek automatikus számozásával, mint az 1.1, 1.2, 2.1, 2.2 stb.?

   Ezt a problémát számlálók segítségével oldják meg, amelyek lehetővé teszik a beágyazott listák számozásának automatizálását.

   Kódrészlet:

   
   
   
   
   

   
   

   1. Első elem a listán
   
   
   1. Az 1. bekezdés első albekezdése
   
   
   2. Az 1. bekezdés második albekezdése
   
   
   2. Második elem a listán
   
   
   1. A 2. bekezdés első albekezdése
   
   
   2. A 2. bekezdés második albekezdése
   
   
   3. Harmadik elem a listán
   
   
   1. A 3. bekezdés első albekezdése
   
   
   2. A 3. bekezdés második albekezdése
   
   
   3. A 3. bekezdés harmadik albekezdése
   
   

   
   

   Eredmény:

   Így automatizálódik a beágyazott listaszámozás!

   Ha valaha is megpróbálta megváltoztatni a sorszámok (számok) css stílusát rendezett listákban

   , akkor bizonyosan problémákkal szembesült. Ezeknek az elemeknek a stílusát nem lehet elérni css választókkal. De az interfész kialakítása gyakran magában foglalja a szín, a háttér, a méret stb. megváltoztatását.

   Íme a stílus nélküli lista legegyszerűbb példája:

   html

   1. Fát ültetni
   2. Házat építeni
   3. fiat nevelni

   Nézzünk meg néhány módszert a fenti probléma megoldására.

   Hagyományos ügyetlen módszer.

   A probléma megoldásának hagyományos módja a böngésző által automatikusan elhelyezett sorszámok elrejtése. Ez a tulajdonságlista-stílust használja: none; .

   css

   li( listastílus: nincs; ) .num( szín: fehér; háttér: #2980B9; kijelző: soron belüli blokk; szöveg igazítása: középen; margó: 5 képpont 10 képpont; vonalmagasság: 40 képpont; szélesség: 40 képpont; magasság: 40 képpont ;)

   html

   1. 1 Fát ültetni
   2. 2 Házat építeni
   3. 3 fiat nevelni

   Egyetértek, feleslegesnek tűnik és nem rugalmas. Az automatikusan elhelyezett sorszámokat elrejtjük és kézzel megadott értékekkel helyettesítjük, eltömítjük az elrendezést stb.

   Nézzük meg, hogyan érhetjük el ugyanazt az eredményt az elrendezés eltömődése és a pszeudoelem::before és a css tulajdonságok content , counter-increment , counter-reset használata nélkül.

   Szép és korrekt módszer.

   Először megadjuk a kódot és a demót, majd kitaláljuk, mi az.

   css

   ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); szín: fehér; háttér: #2980B9; kijelző: inline-block; szövegigazítás: középre; margó: 5 képpont 10 képpont; vonalmagasság: 40 képpont; szélesség: 40 képpont; magasság: 40 képpont; )

   html

   1. Fát ültetni
   2. Házat építeni
   3. fiat nevelni

   Amint látja, a html kód tiszta és szép marad. Ebben az esetben a listaelemek összes stílusa átkerül a css-be.

   Bontsuk pontról pontra:

   • li::előtte- létrehoz egy pszeudoelemet a listán belül, amely az első gyermek helyét foglalja el.
   • counter-reset:myCounter;- alaphelyzetbe állítja a css számlálót a myCounter mindegyiken belül
     .
     1. ellennövekmény: myCounter;- növeli a css számláló myCounter értékét minden pszeudoelemnél::befor.
     2. content:counter(myCounter);- Megjeleníti a myCounter számláló aktuális értékét a::before pszeudoelemen belül.

   A css-számlálókról bővebben itt olvashat