Az ol címke html -ben azt jelenti. Hogyan rendezhetem vízszintesen a listaelemeket? Címkemarkerek megváltoztatása CSS segítségével

A hipertext jelölőnyelv HTML -ben van egy címke

    felsorolásos listák létrehozására használják. Mindenki támogatja modern böngészőkés lehetővé teszi az elemek számozást nem igénylő sorrendben való megjelenítését. Például nagyon gyakran megjeleníti a menüpontokat és mindent, ami az oldalon található listákkal kapcsolatos: ételek, termékek, berendezések, eszközök és még sok más, amit fel kell sorolni anélkül, hogy ennek vagy annak a tételnek a prioritását jelezné.

    Címke szintaxisa

      • 1. tétel
      • 2. tétel
      • 3. tétel
      • ...

      Ezt a kódot a webhely felsorolás szerinti listájává alakítja át:

      • 1. tétel
      • 2. tétel
      • 3. tétel

      Címke

        megköveteli a végcímke kötelező használatát
      .

      A párosított címke listaelemek létrehozására szolgál. A nyitó és záró címkék között egyes szavak, kifejezések, bekezdések, képek, kódrészletek és még sok más található, amelyek egy felsorolásos lista tartalma.

      Mi lehet a felsorolásos lista tartalma?

      Ez sokféle szöveg lehet, beleértve az egyes szavakat, kifejezéseket és bekezdéseket, képeket, beágyazott listákat, php -kóddarabokat és még sok mást, amelyek egyszerű címkézést igényelnek.

      Minden listázott listaelem alapértelmezés szerint 40 képponttal jobbra van behúzva. A CSS stílusok használatával megváltoztathatjuk a megjelenítést ennek a listának saját belátása szerint. Címke

        blokk alapú, ezért a rendelkezésére álló teljes területet elfoglalja, korlátozva a képernyő szélével, a tábla keretével vagy más oldalelemekkel.

        A lista-listában mellékletek megengedettek

        Például

        • 1. tétel
          • 2-1. Tétel
          • 2-2. Tétel
          • Tétel # 2-3
        • 3. tétel
        • ...

        Címke attribútumok és tulajdonságok

          Széles körben használt címke attribútum

            típusú attribútum, amely jelzi, hogyan fog kinézni a listajelző. A következő értékeket veheti fel

            1. type = "disc" - jelölő kitöltött kör formájában (ez az érték az alapértelmezett). A lemez példája éppen fent volt.

            2. típus = "kör" - átlátszó kör alakú jelölő

            Például:

            • 1. tétel
            • 2. tétel
            • 1. tétel
            • 2. tétel

            3.type = "square" - négyzet alakú jelölő

            Például:

            • 1. tétel
            • 2. tétel

            És így néz ki az oldalon:

            • 1. tétel
            • 2. tétel
            1. megjegyzés

            A CSS-ben a jelölő típusa a list-style-type attribútum segítségével adható meg:

            • ...

            Nézzük meg, milyen értékeket vehet fel a lista-stílusú típus:

            • lemez - kör alakú jelölő (a példa fent volt)
            • kör - jelölő átlátszó kör formájában (a példa fent volt)
            • négyzet - négyzet alakú jelölő (a példa fent volt)
            • tizedes - jelölő számozott lista formájában arab számokkal: 1, 2, 3, ...
            • tizedes-vezető-nulla-jelölő számozott lista formájában arab számokkal, első nullával: 01, 02, 03, ...
            • alsó -római - jelölő számozott lista formájában a római ábécében kis betűkkel: i, ii, iii, iv, v
            • felső római - golyó számozott lista formájában a római ábécében nagy betűkkel: I, II, III, IV, V
            • alsó latin - jelölő lista formájában a latin ábécében kis betűkkel: a, b, c, d, ...
            • felső latin - jelölő lista formájában a latin ábécében nagybetűvel: A, B, C, D, ...
            • alsó -görög - jelölő lista formájában a görög ábécében kis betűkkel
            • felső -görög - jelölő lista formájában a görög ábécében nagybetűvel
            Jegyzet 2

            Az attribútum maga a címke is hozzárendelhető

              és címkék
            • ... Amikor attribútumot állít be egy címkéhez
                az összes listaelem az attribútum jelzése szerint jelenik meg. De beállíthatjuk saját kijelzőnket erre vagy arra az elemre. Példa a képen:

                A kód így néz ki:

                • 1. tétel
                • 2. tétel
                • 3. tétel
                • 1. tétel
                • 2. tétel
                • 3. tétel

                A címkejelzők megváltoztatása
                  CSS használatával

                Felsorolt ​​listaelemek Címke által létrehozva

                  , tetszőleges képekkel jelölhető. A CSS a marker típusának megváltoztatására szolgál. Például

                  • 1. tétel
                  • 2. tétel
                  • 3. tétel

                  És így néz ki az oldalon:

                  • 1. tétel
                  • 2. tétel
                  • 3. tétel

                  C CSS használatával más típusú marker kijelzést is definiálhatunk. De ne feledje, hogy a címke bármilyen stílusának beállításakor

                    , a lista minden elemére vonatkozik.

                    Helló kedves olvasók! Ma a "html alapjai" címszó alatt folytatott cikksorozat folytatásaként szeretném Önöket megismertetni a létrehozás algoritmusával html listák segítséggel címkék ul és li (rendezetlen lista), ol és li (számozott lista), dl, dt, dd (definíciós lista).

                    Most továbbra is megismertetem Önökkel a leggyakrabban használt html -címkéket, amelyeket listák létrehozására használnak a webhely oldalain. Ha valaki nem tudja, miről van szó, akkor az alábbi információk után biztosan megérti, miről van szó, mivel az anyag ilyen megjelenítési formája nagyon gyakori.

                    HTML felsorolásos listák - ul és li címkék

                    A felsorolásos listát az ul címke határozza meg. A listaelemek a nyitó és záró ul címkék között helyezkednek el, amelyek tartalmának viszont a nyitó és záró li címkék között kell elhelyezkednie. Azonnal megjegyzem, hogy az ul címke párosítva van (nyitó és záró címkék jelenléte), valamint blokk, azaz konténert képez, amely elemeket (karakterláncokat) tartalmaz, amelyeket minden alkalommal a li címke hoz létre. Ennek megfelelően a li tag párosítva és kisbetűs.

                    Alapértelmezett megjelenés jelölőt egy kitöltött kör jelzi. Azonban megváltoztathatja a megjelenését a type attribútum alkalmazásával, amelynek a következő értékei vannak: lemez, kör, négyzet. A lemez értéke (amely meghatározza a kitöltött körjelző megjelenését) az alapértelmezett. Vagyis, ha a type attribútum nincs megadva, akkor a marker megjelenése kitöltött körnek tűnik. Ha ezeket az attribútumokat hozzáadjuk az ul címkéhez, a következő lehetőségeket kapjuk:

                    Természetesen minden jelző egyéni elem A felsorolásos listát testreszabhatja a type attribútum megfelelő értékeinek megadásával.

                    Számozott HTML listák - ol és li címkék

                    Most nézzük meg, hogyan alakul egy számozott lista ol címkékkel (blokk és párosított címkék, hasonlóan az ul -hez). A li tag egyben címke is, amely meghatározza a számozott html lista elemeit. A számozott lista számozott tételek gyűjteménye. A számozás típusát a type attribútum határozza meg, amely a következő értékeket veheti fel:

                    • A - nagy latin betűk;
                    • a - kisbetűs latin betűk;
                    • I - nagybetűs római számok;
                    • i - kisbetűs római számok;
                    • 1 - Arab számok
                    1. 1 elem a számozott listában
                    2. 2 elem a számozott listában
                    3. 3 elem a számozott listában
                    1. 1 elem a számozott listában
                    2. 2 elem a számozott listában
                    3. 3 elem a számozott listában
                    1. 1 elem a számozott listában
                    2. 2 elem a számozott listában
                    3. 3 elem a számozott listában
                    1. 1 elem a számozott listában
                    2. 2 elem a számozott listában
                    3. 3 elem a számozott listában
                    1. 1 elem a számozott listában
                    2. 2 elem a számozott listában
                    3. 3 elem a számozott listában
                    1. 1 elem a számozott listában
                    2. 2 elem a számozott listában
                    3. 3 elem a számozott listában
                    1. 1 elem a számozott listában
                    2. 2 elem a számozott listában
                    3. 3 elem a számozott listában
                    1. 1 elem a számozott listában
                    2. 2 elem a számozott listában
                    3. 3 elem a számozott listában
                    1. 1 elem a számozott listában
                    2. 2 elem a számozott listában
                    3. 3 elem a számozott listában

                    Megadhat egy számozott listát is, ahol az elemek fordított sorrendben vannak számozva, például: 3, 2, 1. Ez az ol címke tartalék attribútumának használatával történik.

                    Az is lehetséges, hogy 1 helyett bármely más számmal indítsunk felsorolásos listát. Ehhez használhatja a start attribútumot, és egyáltalán nem mindegy, hogy milyen típusú attribútum van beállítva. Tekintsen meg egy példát a name attribútum együttes használatára a type attribútum különböző értékeivel (1 és I):

                    HTML definíciós listák - dl, dd, dt címkék

                    A html listák másik fajtája a definíciós lista. A következőképpen képződik. A lista tartalma a tárolót alkotó nyitó és záró dl -címkék között található. A dt címke egy kifejezést határoz meg, a dd pedig a kifejezés leírását.

                    Amint láthatja, a dt címke tartalma, amely egy kifejezés, balra tolódik, és a dd címke tartalma, amely e kifejezés definíciója, dőlt betűvel íródik. Mindezt különféle css stílusok használatával érik el, amelyekről minden bizonnyal beszélni fogunk a következő kiadványokban.

                    Egyébként a modern realitások olyanok, hogy html nyelv nem tekinthetők meg külön-külön, ezért annak érdekében, hogy ne hagyja ki ezeket az alapvető anyagokat, iratkozzon fel a blogfrissítésre RSS-hírcsatornán vagy e-mailben. Ezzel lezárjuk a mai cikk témáját, ha megkaptad szükséges információ, ne utasítsa el a közösségi média gombok használatát.

                    HTML listák a kapcsolódó információk egyesítésére szolgál. Háromféle lista létezik:

                    felsorolásos lista —

                      - a lista minden eleme
                    • jelzővel jelölt,
                      számozott lista —
                        - a lista minden eleme
                      1. számmal jelölt,
                        definíciós lista- - kifejezéspárokból áll
                        —
                        meghatározás.

                        Minden lista egy tároló, amely listaelemeket vagy kifejezésmeghatározási párokat tartalmaz. A listaelemek blokk -elemekként viselkednek, egymás alá halmozva, és a konténerblokk teljes szélességét elfoglalva. Minden listaelem egy kiegészítő mezővel rendelkezik az oldalon, amely nem vesz részt az elrendezésben.

                        HTML listák létrehozása

                        1. Felsorolt ​​lista

                        Felsorolt ​​lista rendezetlen lista (az angol rendezetlen listáról)... Párosított címke használatával jött létre

                        ... A listaelem jelölője egy címke, például egy kitöltött kör.

                        A böngészők alapértelmezés szerint a következő formázást adják hozzá a listamezőhöz:

                        Minden listaelem páros címke használatával jön létre

                      2. (angol listaelemből).
                        elérhető.
                      • Microsoft
                      • Google
                      • alma
                      Rizs. 1. Felsorolt ​​lista

                      2. Számozott lista

                      Számozott lista párosított címke használatával jön létre. Minden listaelem az elem használatával is létrejön

                    • ... A böngésző automatikusan számozza az elemeket, és ha töröl egy vagy több elemet egy ilyen listából, akkor a többi szám automatikusan újraszámításra kerül.

                      A listában alapértelmezett böngészőstílusok is találhatók:

                    • az érték attribútum elérhető, amely lehetővé teszi a kiválasztott listaelem alapértelmezett számának megváltoztatását. Például, ha a lista első eleméhez a beállított
                    • , akkor a számozás többi része újraszámításra kerül az új értékhez képest.

                      Címkére

                        a következő attribútumok állnak rendelkezésre:

                        1. táblázat. Címkejellemzők
                        Tulajdonság Leírás, elfogadott érték
                        fordítva A fordított attribútum a lista fordított sorrendben történő megjelenítését határozza meg (például 9, 8, 7 ...).
                        Rajt A start attribútum határozza meg kezdő érték, ahonnan a számozás indul, például az építés
                          az első tétel sorszáma "10" lesz. Egyidejűleg beállíthatja a számozástípust is, pl.
                            .
                        típus A type attribútum határozza meg, hogy milyen jelölőt kell használni a listában (betűként vagy számként). Elfogadott értékek:
                        1 - alapértelmezett érték, tizedes számozás.
                        A - a lista számozása ábécésorrend, nagybetűvel(A, B, C, D).
                        a - a lista számozása betűrendben, kisbetűvel (a, b, c, d).
                        I - számozás római nagybetűkkel (I, II, III, IV).
                        i - számozás római kisbetűkkel (i, ii, iii, iv).
                        1. Microsoft
                        2. Google
                        3. alma
                        Rizs. 2. Számozott lista

                        3. A definíciók listája

                        Definíciós listák címke használatával jönnek létre

                        ... Kifejezés hozzáadásához használja a címkét
                        , és egy meghatározás beszúrásához - a címke
                        .

                        A definíciós lista mező a következő alapértelmezett böngészőstílusokkal rendelkezik:

                        Címkékhez

                        ,
                        és
                        elérhető.

                        Rendező:
                        Petr Tochilin
                        Öntvény:
                        Andrey Gaidulyan
                        Alekszej Gavrilov
                        Vitalij Gogunszkij
                        Marija Kozhevnikova

                        Rizs. 3. A definíciók listája

                        4. Beágyazott lista

                        Gyakran az egyszerű listák képességei nem elegendőek, például tartalomjegyzék létrehozásakor nem nélkülözheti beágyazott elemek... A beágyazott lista jelölése a következő lenne:

                        • 1. bekezdés
                        • 2. pont
                          • 2.1.
                          • 2.2.
                            • 2.2.
                            • 2.2.2.
                          • 2.3.
                        • 3. pont

                        Rizs. 4. Beágyazott lista

                        5. Többszintű számozott lista

                        A többszintű lista a listaelemek különböző szintű, különböző behúzásokkal történő megjelenítésére szolgál. A többszintű listák jelölése a következő lenne:

                        1. bekezdés
                        2. bekezdés
                          1. bekezdés
                          2. bekezdés
                          3. bekezdés
                            1. bekezdés
                            2. bekezdés
                            3. bekezdés
                          4. bekezdés
                        3. bekezdés
                        4. bekezdés

                        Ez az alapértelmezett jelölés minden számozott listához új számozást hoz létre. A beágyazott számozáshoz a következő tulajdonságokat kell használnia:
                        a számláló nullázása visszaállít egy vagy több számlálót, és beállít egy visszaállítandó értéket;
                        counter-növekmény határozza meg a számláló növekmény értékét, azaz milyen lépéssel lesz számozva minden következő tétel;
                        a tartalom a generált tartalom, ebben az esetben ő felelős a lista minden egyes eleme előtti szám megjelenítéséért.

                        Ol ( / * távolítsa el a szabványos számozást * / list-style: none; / * Azonosítsa a számlálót, és nevezze el li. A számláló értéke nincs megadva-alapértelmezés szerint 0 * / counter-reset: li;) li: before (/ * Meghatározzuk a számozandó elemet - li. Az előzetes pszeudoelem megadja, hogy a tartalom tulajdonság használatával beszúrt tartalom a listaelemek elé kerüljön. Ez a számláló növekményének értéke is (alapértelmezett értéke 1). * / Counter-növekmény: li; / * A tartalom tulajdonság megjeleníti a listaelem számlálók számát () azt jelenti, hogy a generált szöveg az összes ilyen nevű számláló értéke. Az idézett időszak elválasztó periódust ad a számok közé, és egy szóközzel ellátott pont kerül hozzáadásra az egyes listaelemek tartalma előtt * / content: counters (li, ".") ".";)
                        Rizs. 5. Többszintű számozott lista

                    Folytassuk beszélgetéseinket a html kezdeteiről. Ebben a cikkben a bekezdések, listák és címsorok szöveges létrehozásának módjáról szeretnék beszélni. És az egyes címkékről is
                    és

                    .

                    Határozottan javaslom, hogy olvassa el a sorozat első leckéjét, valamint egy bevezető cikket a html tanulásának megkezdéséről azok számára, akik még nem ismerik őket.

                    Most folytatjuk a címkék tanulmányozását. Feltételezem, hogy az olvasó már ismeri a fenti cikkek anyagát.

                    Mint mindig, a munkaterv:

                    1. Bekezdések
                    2. Sortörések
                    3. Listák és listaelemek
                    4. Címsorok
                    5. Vízszintes uralkodók

                    Bekezdések

                    A szöveg szinte mindig bekezdésekből áll. A bekezdés a szöveg olyan eleme, amely teljes ötletet hordoz.

                    V html bekezdés, mint a címből megítélhető, jelzi. A "p" betű a "bekezdés" szóból származik, ami csak "bekezdést" jelent.

                    Vegyünk egy példát:

                    Első bekezdés szövege. Gondolkodást tartalmaz. De a gondolat véget ért.


                    Egy másik gondolat már elkezdődött, és ezt egy másik bekezdésben írjuk.

                    Mint látható, a bekezdések alkalmazása nagyon egyszerű, és nem igényel külön megjegyzéseket. Ha ezt a kódot böngészőben nézzük, két sort látunk, amelyek között egy üres sor található. Az orosz szövegekben szokás egy bekezdést nem üres sorral elválasztani, hanem az első sor jobbra tolásával. De az interneten gyakran csak ezt a formázást használják, ezért gyakran megmarad az orosz nyelvű szövegekben is. Ha azonban ez a viselkedés nem felel meg Önnek, módosíthatja azt a CSS használatával.

                    Sortörések

                    Néha le kell fordítani egy sort a gondolat befejezése nélkül, a bekezdés bezárása nélkül. Vagyis csak menjen ide új sor... Erre egyetlen címke van
                    ... Íme egy példa az alkalmazására:

                    A szél vidáman jár

                    És a csónak sürgeti

                    Magában rohan a hullámokban
                    Emelt vitorlákkal.

                    A. S. versének ez a töredéke Puskin segített nekünk szemléltetni a címke működését
                    ... Szándékosan helyeztem el ennek a négyes vonalnak az utolsó két sorát egy kódsorba, hogy megmutassam, hogy a sorokat nem azért soroljuk be egy új sorba, mert sortöréseket helyeztünk el, hanem azért, mert címkéket helyeztünk el
                    ... Ez a címke nagyon egyszerű, és nem igényel részletes magyarázatot, ezért itt fejezzük be a megbeszélést.

                    Listák,
                      és listaelemeket

                    Néha fel kell sorolni valamit a szövegben. Három címkét használnak erre a célra: ul, ol, li. Mindezek a címkék tárolócímkék, de a címke mindig az egyik tárolóban található, vagy, és ezeken kívül nincs értelme. Az ul konténert akkor használjuk, ha nem törődünk a felsorolt ​​tételek sorrendjével, és nem akarunk a sorrendre összpontosítani. Az ol címke viszont az egyes sorok automatikus számozásával az elemek sorrendjére összpontosít. Vegyünk egy példát:


                    • Bulka

                    • Pite

                    • Cipó

                    • Pite

                    A böngésző képernyőjén ez a kód így néz ki:

                    • Bulka
                    • Pite
                    • Cipó
                    • Pite

                    Ha csak az ul címkét helyettesítjük az ol címkével, számozott listát kapunk:


                    1. Bulka

                    2. Pite

                    3. Cipó

                    4. Pite

                    Most így néz ki:

                    1. Bulka
                    2. Pite
                    3. Cipó
                    4. Pite

                    Senki sem tiltja, hogy az egyik listát egymásba ágyazza, és beágyazott listákat alkosson allistákkal:


                      Műszerek:
                    • Fűrész

                    • Csavarhúzó

                      1. Egyenes

                      2. Kereszt



                    • Fúró

                    Kicsit kísérleteznie kell ezekkel a listákkal, hogy megszokja a használatukat. Van egy másik típusú lista is, de ritkán használják, ezért most nem fogok erről beszélni. Talán egy másik cikkben.

                    Természetesen, mint minden más, ezen elemek megjelenése a felismerhetetlenségig megváltoztatható a CSS segítségével.

                    Címsorok

                    Természetesen a bekezdések segítenek a dokumentumok strukturálásában. Annak érdekében azonban, hogy a nagy szöveget kisebb logikai részekre bonthassa, mindegyiket feliratozhatja. Minden rész tartalmazhat több alrészt, saját alsó szintű fejlécekkel stb. A cím beállításához használja a címkéket , ahol az "x" 1 és 6 közötti szám. Minél nagyobb a szám, annál alacsonyabb a címsor. Vagyis a legfelső címsor h1 lesz, a legalsó pedig a h6. Alapértelmezés szerint ezekben a címsorokban a szöveg nagy, behúzott betűkkel jelenik meg. Ez a szöveg a teljes sorban jelenik meg, vagyis a hx címkék blokk alapúak. A h1 címke rendelkezik a legnagyobb betűtípussal, a h6 címke pedig a legkisebb betűtípussal. Általában egy, legfeljebb kettő felső szintű h1 címke található egy oldalon. A szint csökkenésével a címkék száma nő. De ritkán lesz képes egy webmester szétbontani a szöveget úgy, hogy 5 vagy 6 címsorra van szüksége. Még a 4. szintet is ritkán használják.

                    Kevesebbet beszélj, többet dolgozz!

                    Elem

                      (az angol "unordered list" - "unordered list" -ból) rendezetlen (rendezetlen) listát hoz létre. Jellemzően az elem
                        ilyen listák létrehozására szolgál, ahol a lista elemeinek sorrendjének megváltoztatása nem változtatja meg jelentősen a lista jelentését.

                        Címke

                          blokk elemekre vonatkozik, tehát a rendelkezésére álló teljes szélességet elfoglalja, és a magasság mérete a tartalom mennyiségétől függ.

                          A számozott listák elemeit a címke határozza meg

                        • , amely a szöveg mellett egyéb HTML elemeket is tartalmazhat (listák, képek, címsorok, bekezdések stb.). Alapértelmezés szerint a felsorolásos listák egy weboldalon kis fekete körrel kezdődő listaként jelennek meg. A böngészők kis margót adnak a bal oldalon, amikor megjelennek a listaelemek.

                          Jegyzet: Ha

                            alkalmazott CSS tulajdonság, majd az elemeket
                          • örökölje ezeket a tulajdonságokat.

                            Tanács: A jelölő típusának megváltoztatásához használja a list-style-type CSS tulajdonságot vagy a list-style-image tulajdonságot, hogy a markereket képekkel helyettesítse. Számozott listák létrehozásához használja a címkét

                              .

                              Szintaxis

                                ...
                              • ...
                                • ...

                              Vége címke

                              Kívánt.

                              Tulajdonságok

                              kompakt Elavult HTML5 -ben Csökkenti a behúzást és a sorközöket. type HTML5 Beállítja a listajelölő megjelenését.

                              Elérhető ehhez az elemhez globális tulajdonságokés fejlemények.

                              Alapértelmezett stílus

                              A legtöbb böngésző megjeleníti az elemet

                                az alábbiakkal CSS értékek alapértelmezett:

                                Ul (kijelző: blokk; lista-stílusú típus: lemez; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px;)

                                Különbségek a HTML 4.01 és a HTML5 között

                                A kompakt és típus attribútumokat a HTML5 nem támogatja.

                                Használati példa:

                                Rendetlen HTML -lista:

                                Példa HTML:

                                Próbáld ki magad
                                • Kávé
                                • Tea
                                • Kakaó

                                Specifikációk (szerkesztés)

                                Leírás Állapot
                                WHATWG HTML Living Standard (WHATWG) Életszínvonal
                                HTML 4.01 (W3C) Ajánlást
                                HTML5 (W3C) Ajánlást
                                HTML 5.1 (W3C) Ajánlást

                                Böngésző támogatás

                                Próbáld ki magad - példák

                                Hogyan lehet a listát 1 -től eltérő számmal kezdeni?