A listák a mindennapi élet részét képezik. A tennivalók listája határozza meg, hogy mit kell tenni. A navigációs útvonalak az útvonaltervek lépésenkénti listáját kínálják. A receptekhez szükség van az összetevők listájára és az utasítások listájára. A listák szinte mindenhol megtalálhatók, így könnyen belátható, miért is népszerűek az interneten.

Ha listát szeretnénk használni egy webhelyen, a HTML három különböző típus közül választhat: felsorolásjeles, számozott és leírási lista. A tartalomtól és a szemantikailag legmegfelelőbb megjelenítési lehetőségtől függ, hogy milyen típusú listát használjunk, és egyáltalán használjunk-e listát.

A HTML-ben elérhető három különböző típusú listán kívül számos módja van ezeknek a listáknak a CSS-en keresztüli stílusának. Például kiválaszthatjuk, hogy milyen típusú felsorolást adjunk meg a listához. A jelölő lehet négyzet, kör, szám, betű vagy esetleg egyik sem. Ezen kívül eldönthetjük, hogy a lista hogyan jelenjen meg – függőlegesen vagy vízszintesen. Mindezek a lehetőségek fontos szerepet játszanak weboldalaink stílusának kialakításában.

Felsorolásos listák

A felsorolásjeles vagy rendezetlen lista egyszerűen olyan kapcsolódó tételek listája, amelyeknél a sorrend nem számít. A felsorolásjeles lista létrehozása HTML-ben egy blokklista elem használatával történik

. A lista minden egyes eleme egy elemmel van megjelölve
• .

  Alapértelmezés szerint a legtöbb böngésző függőleges margót és bal oldali kitöltést ad az elemhez

  , és minden elem előtt
  • egyszínű pontot tesz. Ezt a pontot listajelölőnek nevezik, és CSS segítségével módosítható.
    • Narancs
    • Zöld
    • Kék

    Felsorolásos lista megjelenítése

    Számozott listák

    Számozott vagy rendezett tétellista

    Nagyon hasonló a felsorolásjeles listához, az egyes felsoroláspontok ugyanúgy jönnek létre. A listák közötti fő különbség az, hogy egy rendezett listánál az elemek megjelenítési sorrendje számít.

    Mivel a sorrend számít, a számozott lista a pont helyett számokat használ alapértelmezett felsorolásként.

    1. Sétáljon végig a Sárgabarack utcán
    2. Forduljon rá erre: Vinogradnaya

    Számozott lista bemutató

    A számozott listák egyedi attribútumokkal is rendelkeznek, beleértve a startot és a fordítottat.

    start attribútum

    A start attribútum azt a számot adja meg, amelynél a számozott lista kezdődjön. Alapértelmezés szerint a listák 1-től kezdődnek, de előfordulhatnak olyan helyzetek, amikor a listának 30-tól vagy más számtól kell kezdődnie. Amikor a start attribútumot használjuk egy elemen

    , akkor pontosan meg tudjuk határozni, hogy melyik számtól induljon a számozott lista számlálása.

    A start attribútum csak egész értékeket fogad el, bár számozott listákban használható különböző rendszerek számozás, például római számok.

    30. Sétáljon végig a Sárgabarack utcán
    31. Forduljon rá erre: Vinogradnaya
    32. Álljon meg a Shady Streeten

    A start attribútum bemutatása

    fordított attribútum

    A fordított attribútum elemhez adva

    lehetővé teszi a lista megjelenítését fordított sorrendben. Az 1-től 5-ig számozott öt elemből álló lista megfordítható és 5-től 1-ig számozható.

    A fordított attribútum egy logikai attribútum, és mint ilyen, nem vesz fel semmilyen értéket. Lehet igaz vagy hamis. False az alapértelmezett érték, az érték akkor válik igazzá, amikor a fordított attribútum megjelenik az elemen

    .
    1. Sétáljon végig a Sárgabarack utcán
    2. Forduljon rá erre: Vinogradnaya
    3. Álljon meg a Shady Streeten

    A fordított tulajdonság bemutatása

    érték attribútum

    Az érték attribútum az egyes elemekre alkalmazható

    1. számozott listában, hogy módosítsa az értékét a listában. Az érték attribútummal rendelkező listaelemek alatt megjelenő listaelemek száma ennek megfelelően újraszámításra kerül.

       Például, ha a második listaelem érték attribútuma 9-re van állítva, akkor az adott listaelem száma úgy jelenik meg, mintha a kilencedik lenne. Minden további listaelem 9-től kezdve számozásra kerül.

       1. Sétáljon végig a Sárgabarack utcán
       9. Forduljon rá erre: Vinogradnaya
       10. Álljon meg a Shady Streeten

       Érték attribútum bemutatása

       Leírási listák

       Egy másik típusú lista, amelyet az interneten láthat (de nem olyan gyakran, mint a felsorolásjeles vagy számozott listák), a leírások listája. Az ilyen listák számos kifejezés azonosítására és leírásaik azonosítására szolgálnak, például egy szószedetben.

       A leíráslista létrehozása HTML-ben egy blokk elem használatával történik

       . Az elem használata helyett

       A listaelemek megjelöléséhez a leírási listának két blokkelemre van szüksége:

       kifejezésre és

       leíráshoz.

       A leíráslista sok kifejezést és leírást tartalmazhat, egymás után. Ezenkívül egy ilyen lista leírásonként több kifejezést, valamint kifejezésenként több leírást is tartalmazhat. Egyetlen kifejezésnek több jelentése is lehet, és több leírás is alávethető. Ezzel szemben egy leírás több kifejezést is tartalmazhat.

       Leíró listaelem hozzáadásakor

       az elemhez kell mennie

       . A kifejezés és az azt közvetlenül követő leírás összefügg egymással. Ezért fontos ezeknek az elemeknek a sorrendje.

       Alapértelmezés szerint elem

       függőleges párnázást, például elemeket tartalmaz

       És
       . Ezen kívül az elem
       alapértelmezés szerint tartalmazza a bal margót.
       tanulmányok
       Időt és figyelmet szentelve az oktatott tárgy ismereteinek megszerzésére, különösen könyveken keresztül.
       projekt
       Beküldött terv vagy rajz, amely bemutatja, hogyan fog kinézni és működni egy épület, ruházat vagy egyéb tárgy, mielőtt megépítené vagy elkészítené.
       Meglévő célok, tervek vagy szándékok, mielőtt azok egy kézzelfogható tárgyban megtestesülnének vagy megvalósulnának.
       üzleti
       Munka
       Egy személy szokásos foglalkozása, foglalkozása vagy mestersége.
       Leírási lista bemutatása
       Beágyazott listák
       A listákat a beágyazási funkció teszi nagyon erőssé. Minden lista beágyazható egy másik listába, és többször egymásba ágyazható. De a listák végtelen beágyazásának képessége nem ad erre szabadságot. A listákat kifejezetten ott kell fenntartani, ahol megőrzik a leginkább szemantikai jelentésüket.
       A listák egymásba ágyazásának trükkje az, hogy tudjuk, hol kezdődnek és végződnek az egyes listák és listaelemek. Ha kifejezetten a felsorolásjeles és számozott listákról beszélünk, az egyetlen olyan elem, amely közvetlenül megjelenhet benne
       És
       egy elem
       1. . Ismételjük meg - az egyetlen elem, amelyet az elemek közvetlen leszármazottjaként tehetünk
          És
          , van
          1. .

             Az elemen belül azonban

          2. szabványos elemkészlet hozzáadható, beleértve bármilyen elemet
             vagy
             .

             Lista beágyazásához a listaelem bezárása előtt indítson új listát. Miután a beágyazott lista elkészült és bezárult, zárja be a mellékelt listaelemet, és folytassa az eredeti listával.

             1. Sétáltatni a kutyát
             2. Hajtsa be a ruhaneműt
             3. Menj el a boltba és vásárolj:
                • Tej
                • Kenyér
                • Sajt
             4. Nyírd le a füvet
             5. Főzz vacsorát

             Beágyazott listák bemutatása

             Mivel a beágyazott listák kissé zavaróak lehetnek, és nemkívánatos stílusokat jelenítenek meg, ha helytelenül teszik őket – vessünk egy pillantást rájuk. Elemek

             És
             csak elemeket tartalmazhat
             1. . Elem
             2. bármely kívánt szabályos elemet tartalmazhat. Azonban az elem
             3. bármelyik elem közvetlen leszármazottjának kell lennie
                , vagy
                .

                Azt is érdemes megjegyezni, hogy ha a listák más listákba vannak beágyazva, a jelölőik a beágyazás mélységétől függően változnak. Az előző példában a számozott listába ágyazott felsorolásjeles lista pont helyett kört használ jelölőként. Ez a változás azért következik be, mert a felsorolásjeles lista egy szinttel a számozott listán belül van beágyazva.

                Szerencsére bármilyen szinten szabályozhatjuk, hogy a felsoroláspontok hogyan nézzenek ki, amit a következőben nézünk meg.

                Styling listaelemek

                A felsorolásjeles és számozott listák alapértelmezés szerint listaelemeket használnak. A felsorolásjeles listáknál ezek általában egyszínű pontok, míg a számozott listáknál ezek általában számok. Használatával CSS stílusés ezeknek a jelzőknek a helyzete állítható.

                lista-stílus típusú tulajdonság

                A list-style-type tulajdonság a listaelem-jelölő tartalmának beállítására szolgál. A rendelkezésre álló értékek négyzettől ig terjednek decimális számok akár örmény számozás és stílus CSS-ben is hozzáadható az elemekhez

                ,
                vagy
                1. .

                   A listastílus típusú tulajdonság bármely értéke hozzáadható egy felsorolásjeles vagy számozott listához. Ezt szem előtt tartva használhatja a számozást a felsorolásjeles listákban, és a nem numerikus felsorolásjeleket a számozott listákban.

                   • Narancs
                   • Zöld
                   • Kék

                   Ul (lista-stílus-típus: négyzet; )

                   A listastílus típusú tulajdonság bemutatása

                   lista-stílus típusú értékek

                   Mint korábban említettük, a listastílus típusú tulajdonság egy maroknyi különböző értéket tartalmaz. A következő táblázat ezeket az értékeket és a hozzájuk tartozó tartalmat mutatja.

                   Kép használata listajelölőként

                   Előfordulhat, hogy a listastílus típusú tulajdonság alapértelmezett értékei nem elegendőek, és saját listajelölőt szeretnénk definiálni. Ez leggyakrabban úgy történik, hogy minden elemhez háttérképet helyezünk el.

                2. .

                   A folyamat során eltávolítunk minden alapértelmezett listastílus-típusú tulajdonságértéket, és háttérképet és margókat adunk az elemhez.

                3. .

                   További részletek – ha a listastílus-típus tulajdonságot none értékre állítja, akkor a meglévő listajelzők törlődnek. A háttértulajdonság beáll háttérképet helyzetével és szükség esetén ismétlésével együtt. A padding tulajdonság pedig helyet biztosít a szöveg bal oldalán a háttérkép számára.

                   • Narancs
                   • Zöld
                   • Kék

                   Li ( háttér: url("arrow.png") 0 50% no-repeat; list-style-type: none; padding-left: 12px; )

                   Kép megjelenítése jelölőként

                   lista stílusú pozíció tulajdonság

                   Alapértelmezés szerint a listajelek az elem tartalmától balra helyezkednek el

                4. . Ezt a pozicionálási stílust kívülről írják le, ami azt jelenti, hogy az összes tartalom közvetlenül jobbra, a listajelölőn kívül jelenik meg. A list-style-position tulajdonsággal megváltoztathatjuk a külső alapértelmezett értékét inside-re vagy inherit-re.

                   Az kívül a listajelzőt az elem bal oldalán helyezi el

                5. és ne engedjen semmilyen tartalmat e jelző alá. A belső érték (amit ritkán használunk és látható) az elem első sorába helyezi a listajelzőt
                6. és szükség esetén lehetővé teszi, hogy a tartalom a marker köré tekerjen.
                   • Cupcakes...
                   • Permetezés...

                   Ul ( lista stílusú pozíció: belül; )

                   Lista-stílusú pozíció tulajdonbemutató

                   Általános tulajdonságlista-stílus

                   A közelmúltban tárgyalt listatulajdonságok, a list-style-type és a list-style-position , kombinálhatók egyetlen általános tulajdonsággá, a list-style-ba. Ebben a tulajdonságban használhatjuk egy vagy az összes listában szereplő tulajdonságértéket egyszerre. Az értékek sorrendje a következő legyen: list-style-type, majd list-style-position .

                   Ul (lista-stílus: kör belül; ) ol (lista-stílus: alsó-római; )

                   Vízszintes lista megjelenítés

                   Néha a listákat vízszintesen, nem pedig függőlegesen szeretnénk megjeleníteni. Talán több oszlopra szeretnénk osztani a listát, hogy létrehozzunk egy navigációs listát, vagy több listaelemet helyezzünk el egy sorban. A tartalomtól és a kívánttól függően megjelenés Számos módja van a listák egyetlen sorként történő megjelenítésének, például az elemek megjelenítési tulajdonságának értékének figyelembevételével

                7. mint az inline vagy inline-block vagy a float tulajdonságon keresztül.

                   Lista megjelenítése

                   Legtöbb gyors út lista megjelenítése egy sorban – ez az elemek beállítására szolgál

                8. display tulajdonság inline vagy inline-block értékkel. Ezzel minden elemet elhelyezünk
                9. egy sorban az egyes listaelemek között egyenlő távolsággal.

                   Ha az elemek közötti szóközök

                10. problémákat okoznak, eltávolíthatók ugyanazokkal a technikákkal, amelyeket a Tartalom elhelyezése című 5. leckében tárgyaltunk.

                    Sokkal gyakrabban használjuk az inline-block értéket a belső érték helyett. Az inline-block érték megkönnyíti a függőleges párnázás és egyéb tér hozzáadását az elemekhez

                11. , míg a soron belüli érték nem.

                    Ha a megjelenítési tulajdonság értéke inline vagy inline-block értékre módosul, a listajelölő, legyen az pont, szám vagy egyéb, el lesz távolítva.

                    • Narancs
                    • Zöld
                    • Kék

                    Li (kijelző: soron belüli blokk; margó: 0 10 képpont; )

                    Lista bemutatása soron belüli blokkal

                    Listák úszókkal

                    A megjelenítési tulajdonság inline-re vagy inline-blockra váltása gyors, de eltávolítja a listajelölőket. Ha szükség van rájuk, akkor minden elemhez adjunk hozzá egy úszót

                12. van a legjobb lehetőség mint a megjelenítési tulajdonság megváltoztatása.

                    Telepítés minden elemhez

                13. A float tulajdonságok, mint a bal oldali, minden elemet vízszintesen igazítanak
                14. közvetlenül egymás mellett, hézag nélkül. Amikor az úszót használjuk
                15. , a listajelző alapértelmezés szerint megjelenik, és az elem tetejére kerül
                16. mellette. Annak megakadályozása, hogy a listajelölő megjelenjen a többi elem tetején
                17. , vízszintes margót vagy párnázást kell hozzáadni.
                    • Narancs
                    • Zöld
                    • Kék

                    Li ( lebegés: balra; margó: 0 20 képpont; )

                    Lista bemutatása úszóval

                    Mint minden lebegtetett elem esetében, ez is megszakítja az oldal áramlását. Nem szabad megfeledkeznünk a float törléséről és az oldal normál áramlásáról való visszaállításáról - a leggyakoribb módszer a clearfix.

                    Példa a navigációs listára

                    Gyakran tervezünk és találunk olyan navigációs menüket, amelyek rendezetlen listákat használnak. Ezeket a listákat általában vízszintesen állítják fel a korábban említett két módszer valamelyikével. Itt van például egy vízszintes navigációs menü egy rendezetlen lista segítségével, amelyben az elemek

                18. soron belüli blokkként jelennek meg.

                    Navigation ul ( betűtípus: félkövér 11px "Helvetica Neue", Helvetica, Arial, sans-serif; margó: 0; kitöltés: 0; szövegátalakítás: nagybetűs; ) .navigation li ( kijelző: inline-block; ) .navigation a ( háttér: #395870. háttér: #314b60 box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3 ) .navigation li:first-child a ( border-radius: 4px 0 0 4px; ) .navigation li: utolsó gyermek a (szegély jobbra: 0; szegélysugár: 0 4px 4px 0; )

                    Navigációs lista bemutató

                    Gyakorlatban

                    Most, hogy tudjuk, hogyan hozhatunk létre listákat HTML-ben és CSS-ben, vessünk egy pillantást a Styles Conference webhelyre, és nézzük meg, hol használhatjuk a listákat.

                    Most navigációs menük elemekben

                    És