Číslované seznamy jsou sbírkou prvků s jejich sériovými čísly. Typ a typ číslování závisí na parametrech prvku
- , který slouží k vytvoření seznamu. Následující hodnoty mohou sloužit jako prvky číslování:
- arabské číslice (1, 2, 3, ...);
- arabské číslice s úvodní nulou pro čísla menší než deset (01, 02, 03, ...,10);
- velká latinská písmena (A, B, C, ...);
- malá písmena latinky (a, b, c, ...);
- velká římská čísla (I, II, III, ...);
- malá římská čísla (i, ii, iii, ...);
- arménské číslování;
- Gruzínské číslování.
- . Hodnota je libovolné kladné celé číslo. Nezáleží na tom, jaký typ číslování je nastaven, i když jsou jako seznam použita latinská písmena. Pokud se na seznam použijí současně počáteční i hodnotový atribut, pak má přednost druhý a číslování se zobrazí od čísla určeného hodnotou , jak je uvedeno v příkladu 1.
Příklad 1: Změna číslování seznamu
Seznamy - O své pracoviště byste se měli dobře starat.
- Upravte osvětlení v místnosti tak, aby byl zdroj světla umístěn na straně nebo za operátorem.
- Aby se předešlo zdravotním komplikacím, doporučuje se zvolit židli s měkkým sedákem.
První prvek seznamu v tomto příkladu bude začínat římskou číslicí IV, protože je zadán atribut start="4", pak následuje číslo V a poslední prvek je mimo pořadí a je mu přiřazeno číslo X (obrázek 1).
Rýže. 1. Římské číslice v seznamu
Psaní čísel
Ve výchozím nastavení má číslovaný seznam určitý vzhled: nejprve je číslo, pak tečka a poté se text zobrazí oddělený mezerou. Tato forma psaní je vizuální a pohodlná, ale někteří vývojáři dávají přednost jinému způsobu navrhování číslování seznamů. Totiž tak, že místo tečky je uzavírací závorka, jak je znázorněno na Obr. 2 nebo něco podobného.
Rýže. 2. Číslovaný seznam se závorkou
Styly umožňují změnit typ číslování seznamů pomocí vlastností obsahu a protipřírůstku. Nejprve je třeba nastavit volič ol na counter-reset : položka , je to nutné, aby číslování v každém novém seznamu začalo znovu. V opačném případě bude číslování pokračovat a místo 1,2,3 uvidíte 5,6,7. Hodnota položky je jedinečný identifikátor počítadla, který si sami zvolíme. Dále musíte skrýt původní značky prostřednictvím vlastnosti stylu list-style-type s hodnotou none .
Vlastnost content obvykle funguje ve spojení s pseudoprvky ::after a ::before. Konstrukce li::before tedy říká, že před každý prvek seznamu musí být přidán nějaký obsah (příklad 2).
Příklad 2. Vytvoření vlastního číslování
Li::before ( content: counter(item) ") "; /* Přidejte k číslům závorku */ counter-increment: item; /* Nastavte název čítače */ )
Vlastnost content s hodnotou counter(item) zobrazuje číslo; Přidáním závorky, jak ukazuje tento příklad, získáme požadovaný typ číslování. pro zvýšení čísla seznamu o jednu je potřeba protipřírůstek. Všimněte si, že všude je použit stejný identifikátor, pojmenovaný item . Konečný kód je uveden v příkladu 3.
Příklad 3: Změna zobrazení seznamu
Seznamy - První
- Druhý
- Třetí
- Čtvrtý
Pomocí výše uvedené metody můžete vytvořit libovolný typ číslovaného seznamu, například vložit číslo do hranatých závorek, v tomto případě se ve stylech změní pouze jeden řádek.
Obsah: "[" counter(item) "] ";
Seznam s ruskými písmeny
Existuje očíslovaný seznam s latinskými písmeny, ale pro seznam nejsou žádná ruská písmena. Mohou být přidány uměle pomocí výše uvedené techniky. Vzhledem k tomu, že se číslování provádí prostřednictvím stylů, samotný seznam zůstává původní, pouze se do něj přidá vybraná třída, říkejme jí cyrilice (příklad 4).
Příklad 4: Kód pro vytvoření seznamu
- Jeden
- Dva
- Tři
Přidávání písmen se provádí pomocí pseudoprvku ::before a vlastnosti content. Protože každý řádek musí mít své vlastní písmeno, použijeme pseudotřídu :nth-child(1) , s číslem písmene napsaným v závorce. První písmeno je přirozeně A, druhé B, třetí C atd. Celá tato sada se přidá do voliče li následovně (příklad 5).
Příklad 5: Použití pseudo-class:nth-child
Cyrilice li:nth-child(1)::before (obsah: "a)"; ) .cyrilice li:nth-child(2)::before (obsah: "b)"; ) .cyrilice li:nth-child(3)::before ( content: "at)"; )
V tomto příkladu je za každým písmenem závorka, všechna písmena jsou malá. Můžete si definovat vlastní typ číslování seznamů, může například obsahovat velká písmena s tečkou, s jednou nebo dvěma závorkami nebo pouze písmena. Na rozdíl od standardního číslování si zde můžeme dělat, co chceme. Seznam deseti písmen by měl stačit téměř pro všechny situace, ale pokud se náhle ukáže, že to nestačí, nic nám nebrání rozšířit náš seznam o alespoň všechna písmena ruské abecedy.
Nakonec upravíme zarovnání a polohu písmen, případně specifikujeme velikost písma, barvu a další parametry (příklad 6).
Příklad 6. Seznam s ruskými písmeny
Seznam - Boršč
- Štikové řízky
- Kulebyaka
- Houby v zakysané smetaně
- Palačinky s kaviárem
- Kvass
Výsledek tohoto příkladu je znázorněn na Obr. 3.
V HTML je za organizaci seznamů odpovědná celá sada značek, jejichž uspořádání musí splňovat určitá pravidla pro strukturování dat.
Pátá verze standardu HTML podporuje 3 typy seznamů: číslované seznamy, seznamy s odrážkami a seznamy definic. Poskytuje také možnost vnořovat seznamy do sebe a vytvářet vnořené víceúrovňové seznamy.
Číslovaný seznam
Číslovaný seznam- jedná se o množinu prvků (položky seznamu), které mají určitou posloupnost. Každá položka v číslovaném seznamu má jedinečnou značku označující pořadí, ve kterém se položka objevuje vzhledem k ostatním položkám v seznamu. Ve výchozím nastavení jsou číslované značky položek seznamu čísla. První položka je očíslována 1, druhá 2 a tak dále.
Nejčastějšími příklady číslovaných seznamů jsou recepty na přípravu různých pokrmů. Protože každý recept je očíslovaný seznam s jasným sledem akcí.
Chcete-li vytvořit číslované seznamy v HTML, použijte značku
- , uvnitř kterého jsou umístěny prvky seznamu s daty. Každá položka seznamu je označena pomocí značky
- :
Číslovaný seznam:
- Káva
- Čaj
- Mléko
Snaž se "Poznámka: tag
- může obsahovat značky pouze jako podřízené prvky
- , to znamená, že veškerý obsah číslovaného seznamu musí být umístěn uvnitř prvků
- . Štítek
- , nemá zase žádná omezení obsahu, takže do něj můžete umístit odstavce, obrázky, odkazy, tabulky, další seznamy atd.
Seznam s odrážkami
Seznam s odrážkami- jedná se o nečíslované, tedy neuspořádané seznamy prvků, na jejichž pořadí nezáleží. Všechny položky seznamu s odrážkami mají stejné odrážky a ve výchozím nastavení se zobrazují jako malá černá kolečka.
Chcete-li vytvořit seznamy s odrážkami v HTML, použijte značku
- , uvnitř kterého jsou umístěny prvky samotného seznamu (stejně jako v případě číslovaných seznamů značka
- , která obsahuje veškerý zobrazený obsah seznamu):
Seznam s odrážkami:
- Káva
- Čaj
- Mléko
Snaž se "Typy značek
Typy odrážek číslovaného seznamu lze změnit pomocí atributu type. Tento atribut podporuje pět typů značek:
Seznamy s odrážkami nemají atribut type, takže u seznamu s odrážkami nebudete moci změnit typ odrážky pomocí HTML. Pro změnu typu značky lze v tomto případě použít vlastnost CSS list-style-type , pomocí které lze kromě výchozí hodnoty vybrat ještě dva typy značek: kruh nebo čtverec .
Změna značek seznamu:
Název stránky Číslovaný seznam s atributem type="a":
- jablka
- banány
- Citrony
Číslovaný seznam s atributem type="I":
- jablka
- banány
- Citrony
Typy značek seznamu s odrážkami:
- jablka
- banány
- Citrony
- jablka
- banány
- Citrony
Snaž se "Vlastnost CSS list-style-type má kromě typů značek pro seznamy s odrážkami mnoho různých typů značek pro číslované seznamy. Ale změna jednoho standardního typu značky na jiný nestačí k vytvoření krásného seznamu. Pro návrh seznamů je lepší použít CSS, které umožňuje nejen měnit vzhled značky, ale také nahrazovat značky obrázky, ovládat jejich umístění a ovládat odsazení. Můžete se podívat, jak to všechno udělat.
Horizontální seznam
Pokud k vytvoření horizontální nabídky používáte seznam HTML, budete muset položky seznamu uspořádat jednu za druhou na stejném řádku. To nelze provést pomocí HTML, takže budete muset použít CSS.
Chcete-li vytvořit vodorovný seznam, musíte nastavit vlastnost zobrazení CSS pro položky seznamu s hodnotou inline nebo inline-block , v závislosti na tom, jaké další vlastnosti budete používat.
Název stránky Číslovaný seznam
- jablka
- banány
- Citrony
Seznam s odrážkami:
- jablka
- banány
- Citrony
Snaž se "Poté se všechny položky seznamu seřadí na jeden řádek. Pozor, z položek seznamu zmizí odrážky a nebude mezi nimi ani mezera, ale zůstane levé odsazení seznamu.
Můžete se podívat, jak změnit vodorovný seznam na vodorovnou nabídku.
Dalším typem seznamu implementovaným v HTML je číslovaný seznam. Jinak se seznamy HTML tohoto typu nazývají uspořádané. Příjmení se často používá jako formální překlad názvu odpovídajícího tagu
- , s jehož pomocí jsou seznamy tohoto typu organizovány v HTML dokumentech (OL - Ordered List, Ordered list).
- .
Zde je příklad dokumentu HTML pomocí číslovaného seznamu: zobrazení toho prohlížeč je znázorněn na obr. 2.3.
Příklad číslovaného seznamu Nejjasnější hvězdy viditelné ze Země:
- Sírius
- K anopus
- Arcturus
- Alfa Centauri
- Vega
- K appella
- Rigel
- Procyon
- Achernar
- Beta Centauri
- Wetelgeuse
- Aldebaran
- Mizar
- Polární
Rýže. 2.Z.Číslovaný seznam
Ve štítku
- Lze zadat následující parametry: COMPACT, TYPE a START.
- .
Příklad záznamu:
- .
Parametr značky START
- umožňuje začít číslovat jiný seznam než jeden. Hodnota parametru START musí být vždy přirozené číslo, bez ohledu na typ číslování seznamů. Zde je příklad:
- pro číslované seznamy umožňuje použití parametrů TYPE a VALUE. Parametr TYPE může nabývat stejných hodnot jako pro tag
- .
- .
Poznámka
Prohlížeče interpretují typ číslování pro jednotlivé položky seznamu odlišně. Prohlížeč Netscape změní vzhled číslování pro tento prvek a všechny následující, dokud nenarazí na další přepsání. Internet Explorer změní vzhled čísla pouze pro tento prvek.
Hodnota parametru značky VALUE
- - umožňuje změnit číslo daného prvku seznamu. Tím se změní číslování všech následujících prvků. Typickou aplikací jsou seznamy s chybějícími prvky. Příklad takového seznamu byl uveden výše (obr. 2.3). Poskytuje uspořádaný seznam nejjasnějších hvězd, ve kterém 58. a 75. místo obsahuje hvězdy, které jsou jasně viditelné v našich zeměpisných šířkách (Mizar je nejjasnější hvězda v souhvězdí Velké medvědice a Polárka je nejjasnější hvězda v souhvězdí Malé medvědice) .
Uveďme další originální příklad použití různých typů číslování. Níže uvedený HTML kód obsahuje tři seznamy s různým číslováním. Pro snadnější prohlížení je každý ze seznamů umístěn v samostatné buňce tabulky. Všechny tři seznamy jsou totožné a liší se pouze typem číslování: v prvním sloupci tabulky jsou arabské číslice, ve druhém římské číslice a ve třetím je číslování latinkou. Vezměte prosím na vědomí, že prvky seznamu jsou prázdné, tj. za jakoukoli značkou
- neexistují žádná data. Příklad tohoto druhu lze použít jako tabulku shody mezi psaním čísel arabskými a římskými číslicemi. Ukazuje se, že jako generátor takové tabulky lze použít jakýkoli prohlížeč, který seznamy podporuje (obr. 2.4), stačí zadat daný HTML kód. Číslování římskými číslicemi funguje správně až do hodnoty 3999. Prostudováním pravého sloupce pochopíte, jak se číslování římskými písmeny provádí. Po vyčerpání jednopísmenného číslování (od A do Z) se první dvoupísmenné číslo bere jako další číslo - AA atd.
Použití různých typů číslování v seznamech
. . .
Rýže. 2.4. Různé typy číslování seznamu HTML
- 4,5 z 5 na základě 2 hlasů
Velmi často je potřeba určité informace na webu prezentovat ve formě seznamů.
Seznamy vám umožňují organizovat a systematizovat různé informace a prezentovat je návštěvníkovi pohodlnou formou.
Seznamy v HTML existují ve třech variantách: seznamy s odrážkami, číslované seznamy a seznamy definic. Podívejme se, jak je vytvořit v pořadí.
Seznam s odrážkami.
Tento typ seznamu se používá nejčastěji. Seznam s odrážkami v HTML se vytváří pomocí značek
- . V tomto případě je značka ve výchozím nastavení přidána naproti každé položce seznamu, jedná se o značku ve tvaru kruhu. Pomocí značek je vytvořen kontejner, uvnitř kterého jsou umístěny prvky seznamu: .
Kód seznamu s odrážkami bude vypadat takto:
- Tato možnost je
- Tato možnost
- Tento druh možnosti
Můžete zkusit vytvořit HTML stránku pomocí tohoto kódu i pro vás, výsledkem bude následující seznam:
Jak vidíte, každý prvek seznamu je umístěn na nový řádek s určitými odsazeními vlevo, nahoře a dole. Každá položka seznamu začíná značkou. Značka může být vyplněný kruh (ve výchozím nastavení), kruh nebo čtverec. Na štítku
- Existuje atribut type, který se používá k nastavení stylu značky. Tento atribut má následující význam:
- kotouč - kruh;
- kruh - kruh;
- čtverec - čtverec.
- Tato možnost je
- Tato možnost
- Tento druh možnosti
- Tato možnost je
- Tato možnost
- Tento druh možnosti
- . Tímto způsobem můžete vytvořit seznam s různými odrážkami.
- Tato možnost je
- Tato možnost
- Tento druh možnosti
Výsledek bude následující:
Číslované seznamy.
Číslované seznamy v HTML jsou seznamy, ve kterých má každá položka pořadové číslo, jsou vytvořeny pomocí značky
- a vnořený do jeho značek
-
- První řada
- Druhý řádek
- Třetí řádek
Seznam vypadá takto:
Ve výchozím nastavení je číslování arabskými číslicemi. Ale ta značka
- Existuje atribut type, pomocí jehož hodnot můžete číslovat velkými písmeny (type="A") nebo malými písmeny (type="a") latinkou, římskými číslicemi horními písmeny (type="I" ) a nižší (type="i" ) registr.
- . Štítek
- vytvoří kontejner pro seznam, značku
- nastavuje termín a značku
- popis nebo definice pojmu.
Tento seznam je napsán následovně:
- Termín 1
- Definice 1
- Termín 2
- Definice pojmu 2
- Termín 3
- Definice 3
Výsledkem bude následující seznam:
Jak vidíte, vytvoří to vhodné odsazení pro výraz a text definice.
Vnořené nebo víceúrovňové seznamy v HTML.
Někdy je nutné vnořit další seznam do jednoho prvku určitého typu seznamu. V HTML je možné neomezeně vkládat některé seznamy do prvků jiných seznamů.
Zde je například kód, který vnoří číslované seznamy do položek seznamu s odrážkami.
- Tato možnost je
- První řada
- Druhý řádek
- Třetí řádek
- Tato možnost
- První řada
- Druhý řádek
- Třetí řádek
- Tento druh možnosti
- První řada
- Druhý řádek
- Třetí řádek
Seznamy jsou důležitou součástí obsahu, protože pomáhají organizovat informace. Text v seznamech je lépe vnímatelný a lépe zapamatovatelný.
Nejjednodušší je, že před každým jeho prvkem je značka - kruh, čtverec nebo kruh. Pořadí položek v seznamu s odrážkami není důležité.
Chcete-li jej vytvořit, musíte použít pouze dvě značky:
Seznam s odrážkami - Kámen
- Nůžky
- Papír
Ve výchozím nastavení je značka seznamu černý kruh ( disk). Přidáním do štítku
Od označeného se liší tím, že je důležité pořadí prvků v něm, a proto se zde místo značky používají pořadová čísla nebo písmena. O pořadí v seznamu se nemusíte starat: o tuto úlohu se stará prohlížeč. Pokud seznam změníte (odstraníte nebo přidáte položku mimo pořadí), prohlížeč jej přepočítá a zobrazí správně.
Tagy se používají k vytváření číslovaných seznamů
Číslovaný seznam - Kámen
- Nůžky
- Papír
Vzhledem k tomu, že věci nejsou vždy tak jednoduché s číslovanými seznamy, pro značku
1. typ. Tento atribut umožňuje číslovat seznam nejen arabskými, ale také římskými číslicemi nebo latinskými písmeny různé velikosti. typ podporuje hodnoty 1 (výchozí), a, A, i, I (zkuste s nimi experimentovat sami).
2. Start. Číslování nemusí vždy začínat jedničkou. Tento atribut umožňuje nastavit počáteční hodnotu - číslo prvního prvku seznamu. V něm můžete určit, že sestava začíná například číslem 100 nebo písmenem K.
3. obrácený. Pokud by seznam neměl jít od 1 do 10, ale od 10 do 1, musí být tento atribut použit. Pokud je zadáno, bude číslování v opačném pořadí.
Aby bylo možné přiřadit libovolné číslo prvku uprostřed seznamu, musíte použít v tagu
- Čtyřicátý pátý prvek po třicátém osmém
Změnou čísla jednoho prvku uprostřed seznamu změníte číslování všech prvků následujících za ním - sestava bude začínat hodnotou v atributu value. Pokud jste například prvku 18 přiřadili číslo 35, prvky následující za ním nebudou mít čísla 19, 20, 21, ale 36, 37, 38.
Seznam definic
Není to tak známý typ seznamu, jako jsou výše uvedené. Skládá se z pojmů a jejich definic. Vytvořeno pomocí značek:
Oblastí použití definičních seznamů jsou glosáře, příručky, testy, slovníky a další rozsáhlé seznamy typu „Termín - vysvětlení“.
Zde je příklad seznamu definic:
Seznam definic - Deskriptor
- Základní jednotka značkovacího jazyka, každému známá jako „Tag“.
- Atribut
- Vlastnost značky, která jí poskytuje další možnosti formátování textu.
- Označení
- Jediný tag, který není třeba zavírat.
Seznam sestávající ze seznamů vnořených do sebe. Může obsahovat seznamy různých typů. Obtížnost vytváření spočívá v udržení správného vnoření značek, protože ve víceúrovňové struktuře je snadné se splést.
Zde je příklad víceúrovňového seznamu:
Víceúrovňový seznam Programovací jazyky se dělí na:- Strukturální
- Pascal
- Oberon
- Předpeklí
- Objektově orientované
- Jáva
- Funkční
- Lisp
- Krajta
Níže jsou uvedeny zkrácené verze kódu a typ číslování, které může být v jednom nebo druhém případě.
Zobrazení seznamu:
Zobrazení seznamu:
Číslování malými písmeny latinské abecedy:
Zobrazení seznamu:
Zobrazení seznamu:
Zobrazení seznamu:
Seznam definic v HTML.
Speciálním typem seznamu jsou definiční seznamy. Liší se tím, že každý prvek seznamu se skládá ze dvou prvků, výrazu a textu, který odhaluje jeho význam. Tyto seznamy se vytvářejí pomocí značek
Hodnota disku je výchozí.
Příklad vytvoření seznamu s odrážkami se značkami kruhu:
V důsledku toho bude mít seznam následující podobu:
Vytvoření seznamu s odrážkami se čtvercovými značkami:
Seznam bude vypadat takto:
Atribut type lze použít na více než jen značku
- , ale také ke značce
Příklad záznamu:
- .
- .
Tento záznam určuje číslování seznamu začínající velkým latinským písmenem „E“. U ostatních typů číslování se zadáním START=5 nastaví číslování, respektive od čísla "5", římské číslice "V" atd.
Změnu typu číslování seznamu a číselných hodnot lze provést pro jakýkoli prvek seznamu. Štítek
- pro číslované seznamy umožňuje použití parametrů TYPE a VALUE. Parametr TYPE může nabývat stejných hodnot jako pro tag
Parametr COMPACT má stejný význam jako seznamy s odrážkami. Parametr TYPE se používá k určení typu číslování seznamu. Může nabývat následujících hodnot:
TYP = A - nastavuje značky ve formě velkých latinských písmen;
TYP = a - nastavuje značky ve formě malých latinských písmen;
TYP = I - nastavuje značky ve formě velkých římských číslic;
TYP = i - nastavuje značky ve formě malých římských číslic;
TYP = 1 - nastavuje značky ve formě arabských číslic.
Výchozí hodnota je vždy TYP = 1, tedy číslování pomocí arabských číslic. To platí také pro vnořené číslované seznamy. Zde, na rozdíl od seznamů s odrážkami, prohlížeče ve výchozím nastavení nerozlišují číslování na různých úrovních vnoření seznamů. Všimněte si, že za číslem prvku seznamu je vždy další znak „tečka“.
Parametr TYPE se stejnými hodnotami lze použít k určení stylu číslování pro jednotlivé prvky seznamu. Za tímto účelem je povoleno zadat parametr TYPE s odpovídající hodnotou v tagu prvku seznamu
Seznamy tohoto typu jsou obvykle uspořádanou posloupností jednotlivých prvků. Rozdíl oproti seznamům s odrážkami je v tom, že v číslovaném seznamu je každému prvku automaticky předřazeno pořadové číslo. Typ číslování závisí na prohlížeči a lze jej nastavit parametry značek seznamu. Jinak je implementace číslovaných seznamů velmi podobná implementaci seznamů s odrážkami.
Tagy
- A
Chcete-li vytvořit číslovaný seznam, měli byste použít značku kontejneru, ve které jsou umístěny všechny prvky seznamu. Tagy úvodního a závěrečného seznamu poskytují zalomení řádku před a za seznamem, čímž oddělují seznam od hlavního obsahu dokumentu.
Stejně jako u seznamu s odrážkami musí každá položka v číslovaném seznamu začínat značkou
- , která obsahuje veškerý zobrazený obsah seznamu):
Z praktického hlediska lze principy zobrazování položek v odrážkovém seznamu aplikovat podobně jako u číslovaného seznamu. Ale vzhledem k tomu, že máme co do činění s výčtem, existují některé funkce, o kterých se bude dále diskutovat.
Číslování seznamu
Je povoleno začít seznam z libovolného čísla; K tomuto účelu se používá atribut start prvku
- nebo hodnotu prvku