Domov › Telefon › Jak vytvořit seznam s odrážkami. Vytváření seznamů v HTML

Jak vytvořit seznam s odrážkami. Vytváření seznamů v HTML

Seznamy s odrážkami umožňují rozdělit velký text na samostatné bloky, z nichž každý začíná odrážkou – obvykle malou tečkou. To přitahuje pozornost čtenáře k textu a zvyšuje jeho čitelnost.

S prvkem

v místě, kde se vyskytuje
- seznam má odsazení nahoře a dole;
- Ve výchozím nastavení jsou značky zobrazeny jako vyplněný kruh;
- Každý prvek seznamu je posunut doprava vzhledem k hlavnímu textu.
Obrázek 1 ukazuje výsledek příkladu ilustrující výše uvedené vlastnosti seznamu s odrážkami.
Rýže. 1. Zobrazení seznamu odrážek
Typ značky
Značky mohou mít jednu ze tří forem: vyplněný kruh (výchozí), otevřený kruh a čtverec. Chcete-li vybrat typ značky, použijte vlastnost list-style-type nebo univerzální vlastnost list-style (příklad 1). Platí následující hodnoty:
- kotouč - značky ve formě vyplněného kruhu;
- kruh - značky ve formě otevřeného kruhu;
- čtverec - čtvercové značky.
Příklad 1: Změna vzhledu značky
Seznamy
- Sepulki
- Sepulcaria
- Sepulenace
Příklad ukazuje, jak vytvořit seznam s odrážkami pomocí malého jednobarevného čtverečku jako ikony odrážky. Přestože je počet hodnot omezen na tři, neznamená to, že máme k dispozici pouze tři typy markerů. Existuje mnoho speciálních znaků, které mohou úspěšně fungovat jako ikona značky. Přišroubujte je přímo k
Nebude to fungovat, takže to budete muset obejít. Chcete-li to provést, skryjte značky seznamu pomocí vlastnosti list-style s hodnotou none a v textu před obsahem
Vlastní znak přidáme pomocí pseudoprvku ::before. V příkladu 2 jako taková značka funguje trojúhelník.
Příklad 2: Použití::before
Seznamy
- Sepulki
- Sepulcaria
- Sepulenace
Výsledek tohoto příkladu je znázorněn na Obr. 2. Protože použití vlastnosti list-style s hodnotou none neodstraní značky vůbec, ale pouze je skryje ze zobrazení, seznam se zobrazí posunutý doprava. Chcete-li se této funkce zbavit, příklad přidá vlastnost text-indent se zápornou hodnotou. Jeho úkolem je posunout text o jeden znak doleva.
Rýže. 2. Libovolné značky v seznamu
Znak nemusí být v hexadecimálním formátu, lze jej vložit přímo do textu. Hlavní je uložit dokument v kódování UTF-8 a aby to editor podporoval. Samotné znaky a jejich kódy lze převzít např. z LibreOffice Writer (obr. 3).
Rýže. 3. Výběr symbolu v LibreOffice
Seznam s ručně kreslenými značkami
Styly vám umožňují nastavit jakýkoli vhodný obrázek jako značku pomocí vlastnosti list-style-image. Hodnota je relativní nebo absolutní cesta ke grafickému souboru, jak je znázorněno v příkladu 3.
Příklad 3: Použití obrázku jako značky
Seznamy
- Sepulki
- Sepulcaria
- Sepulenace
Nejlepší je zvolit malý obrázek, abyste nezměnili prvky seznamu na titulky. Na Obr. Obrázek 4 ukazuje výsledek příkladu použití malých obrázků jako značek.
Rýže. 4. Kresba jako fix
Použití obrázku ve stylu seznamu má některé nevýhody:
- vzor nelze posunout nahoru ani dolů;
- Poloha obrázku vzhledem k textu se může v různých prohlížečích lišit.
Těmto nedostatkům se lze vyhnout pomocí vlastnosti background, ta nastavuje obrázek na pozadí. Pro každý prvek seznamu

odstraníme původní značky a nastavíme obrázek na pozadí bez opakování. A aby se text neobjevil nad obrázkem, posuneme jej doprava pomocí padding-left (příklad 4).

Příklad 4: Použití pozadí

Ul ( margin-left: -1em; ) li (list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )

Pozice textu a odrážky

Existují dva způsoby, jak umístit značku vzhledem k textu: značku přesunete mimo okraj prvků seznamu nebo ji obalíte kolem textu (obr. 5).


uvnitř	mimo

Rýže. 5. Umístění značek vzhledem k textu

Chcete-li ovládat polohu značek, použijte vlastnost list-style-position. Má dva významy: vně - odrážky jsou umístěny mimo textový blok (toto je výchozí hodnota) a uvnitř - odrážky jsou součástí textového bloku a zobrazují se v položce seznamu (příklad 5).

Příklad 5: Změna pozice značek

Seznamy

Než začnete, zkontrolujte, zda je součástí sady 3BM vybavení.
Pokud jedno nebo více periferních zařízení chybí, měli byste okamžitě kontaktovat technický personál CC.
Po vizuální kontrole vašeho pracovního prostoru můžete opatrně zapnout napájení 3BM.

Výsledek tohoto příkladu je znázorněn na Obr. 6.

HTML poskytuje speciální sadu značek pro prezentaci informací ve formě seznamů. Seznamy jsou jednou z nejpoužívanějších forem prezentace dat v elektronických i tištěných dokumentech. Se seznamy se setkáváme téměř každý den – může to být seznam nezbytných nákupů v obchodě, studentů ve třídě nebo jednoduše věcí, které je třeba udělat. Schopnost organizovat struktury seznamů je dostupná v mnoha textových editorech, zejména výkonný textový procesor Microsoft Word disponuje pohodlnými nástroji pro formátování seznamů různých typů (možnosti vytváření HTML seznamů pomocí aplikace Microsoft Word jsou popsány v kapitole 8). Zde je několik případů, pro které je použití seznamů docela vhodné:

Sloučení částí informací do jediné struktury pro vytvoření čitelného vzhledu.
Popis složitých procesů krok za krokem.
Uspořádání informací ve stylu obsahu s odstavci směřujícími na relevantní části dokumentu.

Všimněte si, že výše uvedené body jsou přesně uspořádány ve formě struktury seznamu.

HTML poskytuje následující hlavní typy seznamů: seznam s odrážkami, číslovaný seznam a seznam definic. K implementaci seznamů různých typů se používají následující značky:

, , . Pomocí různých typů seznamů zabudovaných do dokumentu lze realizovat různé možnosti, jejichž popis je předmětem této kapitoly. Zvažují se vlastnosti vytváření seznamů různých typů a také použití vnořených seznamů.

Seznam s odrážkami

Jedním z typů seznamů implementovaných v HTML je seznam s odrážkami. Jinak se seznamy tohoto typu nazývají nečíslované resp

neuspořádaný. Příjmení se často používá jako formální překlad názvu odpovídajícího tagu

V seznamu s odrážkami se pro zvýraznění jeho prvků používají speciální znaky zvané značky seznamu (často se jim říká odrážky, což je formální výslovnost anglického výrazu bullet). Vzhled značek seznamu určuje prohlížeč a při vytváření vnořených seznamů prohlížeče automaticky diverzifikují vzhled značek na různých úrovních vnoření.

Tagy

A<LI >

Chcete-li vytvořit seznam s odrážkami, musíte použít kontejner tagů, ve kterém 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, takže zde není potřeba používat značky odstavce

Každý prvek seznamu musí začínat značkou

(LI - Položka seznamu, prvek seznamu). Štítek
nevyžaduje odpovídající uzavírací značku, ačkoli její přítomnost není v zásadě zakázána. Prohlížeče obvykle při zobrazení dokumentu začínají každou novou položku seznamu na novém řádku.

Poskytnuté informace jsou dostatečné pro vytvoření základního seznamu s odrážkami. Uveďme příklad HTML dokumentu pomocí odrážkového seznamu, jehož zobrazení prohlížečem je na Obr. 2.1.

Příklad seznamu s odrážkami
Rýže. 2.1. Zobrazení seznamu s odrážkami v prohlížeči

Všimněte si, že kromě prvků seznamu označených tagem

, mohou být přítomny další prvky HTML. Ve výše uvedeném příkladu je jedním z těchto prvků prostý text, který není položkou seznamu, ale funguje jako jeho nadpis.

Poznámka

Některé učebnice jazyka HTML uvádějí, že k nastavení názvu seznamu by měla být použita značka kontejneru. (LH - Záhlaví seznamu, záhlaví seznamu). Tuto značku v současnosti nerozpoznají žádné běžné prohlížeče a není součástí specifikace HTML. Jeho použití se tak stává bezpředmětným, ačkoli nepovede k žádným chybám.

Ve štítku

Parametr COMPACT se zapisuje bez hodnoty a slouží k upozornění prohlížeče, že daný seznam má být zobrazen v kompaktní podobě. Může být například zmenšeno písmo nebo vzdálenost mezi řádky seznamu atd.

Poznámka

Aktuálně přítomnost parametru COMPACT ve značce

nijak neovlivňuje zobrazení seznamů v předních prohlížečích. Proto je použití tohoto parametru zbytečné, zejména proto, že jeho použití není doporučeno specifikací HTML 4.0.

Parametr TYPE může nabývat následujících hodnot: disk, kruh a čtverec. Tento parametr se používá k vynucení zobrazení odrážek seznamu. Přesný typ značky bude záviset na prohlížeči, který používáte. Typické možnosti zobrazení jsou následující:

TYP = disk - značky jsou zobrazeny jako vyplněné kruhy; TYP = kruh - značky jsou zobrazeny jako otevřené kruhy; TYP = čtverec - značky se zobrazují jako vyplněné čtverce. Příklad záznamu:

Výchozí hodnota je TYP = disk. U vnořených seznamů s odrážkami je výchozí hodnota disk na první úrovni, kruh na druhé úrovni, čtverec na třetí úrovni a dále. To je přesně to, co se děje v nejnovějších verzích prohlížečů Netscape a Internet Explorer. Upozorňujeme, že jiné prohlížeče mohou značky zobrazovat jinak. Například ve specifikaci HTML 4.0 je typ značky zobrazené při TYPE = čtverec určen jako čtvercový obrys.

Parametr TYPE se stejnými hodnotami lze použít k určení typu značek pro jednotlivé prvky seznamu. Za tímto účelem je povoleno zadat parametr TYPE s odpovídající hodnotou v tagu prvku seznamu

.

Příklad záznamu:

Poznámka

Prohlížeče interpretují specifikaci typu odrážky pro jednotlivé položky seznamu odlišně. Prohlížeč Netscape změní vzhled značky pro tuto a všechny následující, dokud nenarazí na další předefinování vzhledu značky. Internet Explorer změní vzhled značky pouze pro tento prvek.

Grafické značky seznamu

Můžete použít grafické obrázky jako odrážky seznamu, což se široce používá k vytváření atraktivních, dobře navržených dokumentů HTML. Tuto možnost ve skutečnosti neposkytuje přímo jazyk HTML, ale je implementována poněkud uměle. To neznamená, že to není doporučené nebo zavrženíhodné, ale pouze to, že zde nebudou použity žádné speciální konstrukce jazyka HTML.

Abyste pochopili myšlenku, musíte pochopit mechanismus implementace seznamů na stránky HTML. Ukazuje se, že značka seznamu

, které ukazují na jednotlivé položky seznamu, poskytují standardní značky položek seznamu.

Pokud potřebujeme vytvořit seznam s grafickými značkami, pak se bez značek zcela obejdeme

. Bude stačit vložit požadovaný grafický obrázek před každý prvek seznamu. Jediný problém, který je třeba vyřešit, je oddělení prvků seznamu od sebe. K tomu můžete použít značky odstavce

Nebo vynutit posun řádku
. Příklad implementace seznamu grafickými značkami, jejichž zobrazení je na Obr. 2.2 je zobrazen níže:

Seznam s odrážkami

Znamení zvěrokruhu:

Beran

Býk

Blíženci

Rakovina

Lev

Panna

Váhy

Štír

Střelec

Kozoroh

Vodnář

Ryba

Rýže. 2.2. Seznam s odrážkami s grafickými odrážkami

V uvedeném příkladu je jako značka položky seznamu použit grafický soubor Green_ball.gif. Všimněte si, že použití grafiky na stránkách HTML může výrazně zvýšit množství přenášených informací. V tomto případě je však tento nárůst extrémně nevýznamný. Zde je stejný soubor použit pro všechny značky,

který bude vysílán pouze jednou. Velikost souboru malého obrázku je také extrémně malá.

Poznámka

Techniky vytváření seznamů s grafickými odrážkami jsou postupně popsány v kapitole 8.

Číslovaný seznam

Dalším typem seznamu implementovaným v HTML je číslovaný seznam. Jinak se seznamy tohoto typu nazývají uspořádané. Příjmení se často používá jako formální překlad názvu odpovídajícího tagu

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

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

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

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í i 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

.

Příklad záznamu:

Parametr značky START

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

P příklad vstupu:

.

Poznámka

Prohlížeče interpretují typ číslování pro jednotlivé položky seznamu odlišně. Prohlížeč Netscape změní typ čí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.

Zhodnotu 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ý 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

Seznam definic

Seznamy definic, nazývané také definiční slovníky, jsou zvláštním typem seznamů. Na rozdíl od jiných typů seznamů se každý prvek definičního seznamu vždy skládá ze dvou částí. První část prvku seznamu obsahuje definovaný termín a druhá část obsahuje text ve formě slovníkového hesla, který odhaluje význam termínu.

Seznamy definic se zadávají pomocí značky kontejneru

(Termín definice) označí se definovaný termín a značka

(Definition Description) - odstavec s jeho definicí. Pro značky

A

Odpovídající uzavírací značky můžete vynechat.

Obecně je seznam definic napsán takto:

Období

Definice pojmu

V textu za značkou

prvky na úrovni bloku, jako jsou značky odstavce, nelze použít
Nebo hlavičky
-
. Text definovaného pojmu by měl být zpravidla umístěn na jednom řádku. Text obsahující definici termínu se zobrazí od dalšího řádku (nebo u některých prohlížečů na každém řádku) za definicí termínu, odsazený vpravo. V informacích umístěných za značkou
lze umístit prvky na úrovni bloku. Z toho zejména vyplývá, že seznamy definic lze vnořovat.

Ve štítku
může být specifikován parametr COMPACT, jehož účel je podobný jako u ostatních výše popsaných seznamů.

Zde je příklad dokumentu HTML, který používá seznam definic:

Příklad seznamu definic

Klasifikace typických lidských temperamentů,
na základě

na názory Hippokrata

Flegmatický člověk

Pasivní, velmi pracovitý, pomalu se přizpůsobující;
stabilní nálada, málo náchylná k vnějším vlivům;
letargie emočních reakcí a pomalost ve volní činnosti

Optimistický

Aktivní, energický, přizpůsobivý, -
živost a pohyblivost citových reakcí, rychlost a síla volních projevů

Cholerik

Aktivní, velmi energický, vytrvalý;
impulzivita a síla citových reakcí, násilné projevy vůle

Melancholický

Pasivní, snadno se unaví, těžko se přizpůsobí, -
slabost volních projevů a převaha depresivní nálady, pochybnosti o sobě

Zobrazení daného HTML dokumentu v prohlížeči je na Obr. 2.5.

Rýže. 2.5. Seznam definic (připomíná skupinu hesel ve slovníku)

Typ seznamů
A

Typ seznamů
A se v současné době prakticky nepoužívají, přestože je stále podporují přední prohlížeče. Ve specifikaci HTML 4.0 jsou oba tyto typy seznamů označeny jako zastaralé. Místo toho se navrhuje používat seznamy s odrážkami určené tagem
.

Tyto typy seznamů byly původně navrženy tak, aby byly kompaktnější než běžné seznamy s odrážkami. Podle pravidel pro zápis prvků těchto seznamů v nich nebylo povoleno používat blokové prvky, což znamená, že nebylo možné implementovat vnořování seznamů tohoto typu. Každý prvek seznamu byl jeden řádek textu.

Pro seznamy jako
bylo plánováno zavedení omezení na „délku textu prvku seznamu (24 znaků). Takové omezení by nám umožnilo odvodit

seznamy jako
ve formě podobné výstupu seznamu adresářů v operačních systémech UNIX a MS-DOS při použití klávesy /W (v několika sloupcích). U položek seznamu tohoto typu se navíc nezobrazovaly značky.

V současné době nejsou všechny tyto plány realizovány, protože další používání seznamů těchto typů se nedoporučuje. Moderní verze prohlížečů zobrazují seznamy těchto typů přesně stejným způsobem jako seznamy
.

Vnořené seznamy

Jsou chvíle, kdy potřebujete zahrnout celý seznam stejného nebo jiného typu do prvku seznamu jednoho typu. Tím vytvoříte víceúrovňové nebo vnořené seznamy. HTML umožňuje libovolné vnořování různých typů seznamů, ale při jejich organizaci je třeba dávat pozor.

Níže je uveden HTML kód dokumentu s vnořenými seznamy, jehož zobrazení je na Obr. 2.6. V tomto příkladu obsahuje každá položka v seznamu s odrážkami svůj vlastní očíslovaný seznam.

Příklad vnořeného seznamu

Satelity některých planet

Zempya

Měsíc

Mapc

Phobos

Deimos

Uran

Ariel

Umbriel

Titania

Oberon

Miranda

Neptune

Triton

Mořská nymfa

V aplikaci Microsoft Office Word lze velmi snadno vytvářet seznamy s odrážkami a číslované seznamy. Navíc program rozpozná zadání určitých znaků a začne se automaticky vytvářet číslovaný seznam nebo seznam s odrážkami.

Při vytváření a úpravách textových dokumentů musíte často vytvářet nové seznamy nebo dát hotovému textu zobrazení seznamu. Je na autorovi textu, který seznam použije v každém konkrétním případě, obvykle se používá číselný seznam v případech, kdy je důležitá určitá posloupnost složek seznamu. Pokud máme co do činění s jednoduchým výpisem, bez konkrétního pořadí, pak si vystačíme s odrážkovým seznamem.

Nástroje pro vytváření různých seznamů se nacházejí v záložce „Domů“ v sekci „Odstavec“. MS Word má schopnost vytvářet různé typy seznamů.

Chcete-li vytvořit seznam s odrážkami, musíte kliknout na tlačítko „značky“ ve výše uvedené nabídce a nezáleží na tom, kde se v danou chvíli nachází kurzor, na začátku řádku nebo uprostřed. V každém případě značka označí celý odstavec, ve kterém se v tu chvíli nacházel kurzor.

Definování formátu tokenu

Když kliknete na šipku napravo od tlačítka "značky", zobrazí se rozevírací nabídka, která zobrazí naposledy použité značky, knihovnu značek a výchozí značky používané v dokumentech. Zde je možné definovat novou značku. To se týká zarovnání značky a značky značky, které lze použít jako symboly a různé kresby (v případě potřeby lze potřebné značky stáhnout z různých zdrojů).

Vytvořte číslovaný seznam

Chcete-li vytvořit číslovaný seznam, použijte následující tlačítko „Číslování“ v bloku nástrojů pro vytváření seznamu. Toto tlačítko funguje stejně jako tlačítko „Marker“ pouze umístíte kurzor na požadované místo v textu nebo na začátek nového odstavce.

Definování formátu čísla

Určení formátu čísel seznamu se provádí stejným způsobem jako u značek, tedy kliknutím na šipku vpravo od ikony „Číslování“. Knihovna číslování obsahuje arabské a římské číslice a také abecední číslování. Změna formátu číslování je zde možná pouze změnou parametrů písma.

Vytvoření víceúrovňového seznamu

Pokud již byl vytvořen seznam s odrážkami nebo číslovaný seznam, pak v okně „Definice formátu ...“ je možné změnit jeho úroveň, protože se aktivuje příslušné tlačítko v rozevírací nabídce. Pro vytvoření víceúrovňového seznamu je v nabídce seznamu třetí tlačítko, když na něj kliknete, zobrazí se nabídka s různými styly víceúrovňových seznamů. Konkrétní úroveň seznamu můžete nastavit následujícím způsobem: umístěte kurzor na požadovaný řádek a v rozbalovací nabídce a klikněte na „Změnit úroveň seznamu“. Mezi možnostmi, které se objeví, musíte vybrat požadovanou a kliknout na ni myší.

Vytvoření seznamu z hotového textu

Pokud je seznam vytvořen z již připraveného textu, je třeba tento text vybrat a kliknout na tlačítko „Značky“ nebo „Číslování“. Zde je třeba pamatovat na to, že číslování nebo označování bude provedeno v samostatných odstavcích.

Automatické vytváření seznamu

Každý, kdo zkoušel psát text v MSWordu, si pravděpodobně všiml, že pokud na začátek nového odstavce vložíte hvězdičku * nebo znak jednotky s tečkou 1, program automaticky vytvoří seznam s odrážkami nebo číslovaný seznam. Takto program implementuje automatické vytváření seznamu.

Word Office má tedy možnost vytvářet seznamy s odrážkami a číslováním, stejně jako víceúrovňové seznamy. Vytváření seznamů pomocí speciálních nástrojů, nikoli ručně, umožňuje zachovat formátování textu, které se někdy při otevírání souboru v jiných verzích editoru testů poruší.

HTML seznamy slouží k seskupování souvisejících informací. Existují tři typy seznamů:

seznam s odrážkami —
- každý prvek seznamu
označeno fixem,
číslovaný seznam —
- každý prvek seznamu
označený číslem
seznam definic- - se skládá z výrazových dvojic
—
definice.
Každý seznam je kontejner, ve kterém jsou umístěny prvky seznamu nebo dvojice termín-definice. Prvky seznamu se chovají jako prvky bloku, jsou naskládány pod sebou a zabírají celou šířku bloku kontejneru. Každá položka seznamu má na straně další blok, který se nepodílí na rozvržení.

Vytváření HTML seznamů

1. Seznam s odrážkami

Seznam s odrážkami je neuspořádaný seznam (z anglického neuspořádaného seznamu). Vytvořeno pomocí spárované značky
. Značka prvku seznamu je štítek, například vyplněný kruh.
Prohlížeče ve výchozím nastavení přidávají do bloku seznamu následující formátování:
Každý prvek seznamu je vytvořen pomocí párového tagu
(z anglické položky seznamu).

dostupný .

Microsoft

Google

Jablko

Rýže. 1. Seznam s odrážkami
2. Číslovaný seznam

Číslovaný seznam je vytvořen pomocí spárovaného tagu. Každá položka seznamu je také vytvořena pomocí prvku
. Prohlížeč čísluje prvky v pořadí automaticky, a pokud smažete jeden nebo více prvků takového seznamu, zbývající čísla se automaticky přepočítají.
Blok seznamu má také výchozí styly prohlížeče:
K dispozici je atribut value, který umožňuje změnit výchozí číslo pro vybranou položku seznamu. Například pokud pro první položku v seznamu, kterou nastavíte
, pak bude zbývající číslování přepočítáno vzhledem k nové hodnotě.
Pro značku
K dispozici jsou následující atributy:
Tabulka 1. Atributy značek

Atribut Popis, přijatá hodnota
obrácený Atribut obrácený způsobí, že se seznam zobrazí v obráceném pořadí (například 9, 8, 7...).
Start Atribut start určuje počáteční hodnotu, od které bude číslování začínat, například konstrukce
první položce bude přiděleno sériové číslo „10“. Zároveň můžete zadat typ číslování, např.
.

typ Atribut type určuje typ značky, která se má v seznamu použít (písmena nebo čísla). Přijímané hodnoty:
1 — výchozí hodnota, desítkové číslování.
A — číslování seznamu v abecedním pořadí, velká písmena (A, B, C, D).
a — číslování seznamu v abecedním pořadí, malá písmena (a, b, c, d).
I - číslování římskými velkými číslicemi (I, II, III, IV).
i — číslování římskými malými číslicemi (i, ii, iii, iv).

Microsoft

Google

Jablko

Rýže. 2. Číslovaný seznam
3. Seznam definic

Seznamy definic jsou vytvořeny pomocí značky
. Chcete-li přidat výraz, použijte značku
a pro vložení definice - tag
.

Blok seznamu definic má následující výchozí styly prohlížeče:
Pro značky
,
A
dostupný .

Ředitel:

Petr Točilin

Obsazení:

Andrej Gaidulyan

Alexej Gavrilov

Vitalij Gogunskij

Marija Koževnikovová

Rýže. 3. Seznam definic
4. Vnořený seznam

Možnosti jednoduchých seznamů často nestačí, například při vytváření obsahu se bez nich neobejdete vnořené položky. Označení pro vnořený seznam by bylo následující:

odstavec 1

bod 2.

Článek 2.1.

Článek 2.2.

Článek 2.2.1.

Článek 2.2.2.

Článek 2.3.

bod 3.

Rýže. 4. Vnořený seznam
5. Víceúrovňový číslovaný seznam

Víceúrovňový seznam se používá k zobrazení položek seznamu na různých úrovních s různým odsazením. Označení pro víceúrovňový číslovaný seznam by bylo následující:

odstavec

odstavec

odstavec

odstavec

odstavec

odstavec

odstavec

odstavec

odstavec

odstavec

odstavec

Toto výchozí označení vytvoří nové číslování pro každý vnořený seznam, počínaje jedničkou. Chcete-li vytvořit vnořené číslování, musíte použít následující vlastnosti:
counter-reset resetuje jeden nebo více čítačů, specifikuje hodnotu, která má být resetována;
čítač-přírůstek udává hodnotu přírůstku čítače, tzn. v jakých přírůstcích bude každá následující položka očíslována;
obsah - generovaný obsah, v tomto případě zodpovídá za zobrazení čísla před každou položkou seznamu.
Ol ( /* odebere standardní číslování */ list-style: none; /* Identifikujte počítadlo a pojmenujte jej li. Hodnota počítadla není zadána - ve výchozím nastavení je 0 */ counter-reset: li; ) li :before ( /* Definujeme prvek, který bude očíslován - li Pseudoprvek před označuje, že obsah vložený pomocí vlastnosti content bude umístěn před položky seznamu. Zde se nastavuje hodnota přírůstku čítače (výchozí je 1 */ counter-increment: li / * Vlastnost content zobrazuje číslo položky seznamu counters() znamená, že vygenerovaný text představuje hodnoty všech čítačů s tímto názvem mezi čísla a před obsah každé položky seznamu se přidá tečka s mezerou */ content: counters(li,"."" )
Rýže. 5. Víceúrovňový číslovaný seznam

V HTML existují dva typy seznamů: číslované a nečíslované. Jejich tvorba je téměř stejná. Dokonce i značky se liší o jeden znak. Můžete také vytvořit, které mohou obsahovat číslované i značkovací.
Tyto seznamy lze libovolně transformovat. Vše záleží na vaší fantazii. Nejprve se podíváme na standardní seznamy, stejné jako ve Word editoru, a poté je vylepšíme a navrhneme k nepoznání.
HTML číslovaný seznam
Běžnou číslovanou značku lze vytvořit pomocí následujících značek:
První položka seznamu
Druhá položka na seznamu
Třetí položka na seznamu
Jednoduché seznamy vypadají takto
Podle norem musí být každá položka seznamu uvnitř otevíracího a zavíracího li tagu. Ale pokud nevložíte uzavírací značku, výsledek bude úplně stejný. Procesor je docela chytrý. Během převodu seznamu analyzuje úvodní značky. Pokud uvidí nový
, pak se před něj automaticky umístí
.
Seznamy lze tedy vytvářet tak, jak je uvedeno níže.
Ale z pohledu profesionálů je to nesprávné.
Nečíslované (neboli odrážkové) seznamy se vytvářejí stejným způsobem, jen se místo značky ol píše ul.
Nejsou zde žádná čísla ani písmena – pouze různé symboly zvané značky.
HTML víceúrovňový číslovaný seznam
Mnoho uživatelů se o tuto příležitost zajímá. Proto je třeba poznamenat, že jakýkoli HTML číslovaný seznam může být víceúrovňový. Další úrovně mohou být stejné nebo označené.
Chcete-li vytvořit seznam uvedený v příkladu výše, musíte napsat následující.
Upozorňujeme, že v tomto kódu je na rozdíl od prvních příkladů přidán atribut type. Díky němu můžete určit typ řazení pro číslované i odrážkové seznamy.
Pro číslované označujeme abecedu nebo typ čísel a pro ostatní případy - typ značky.
Použijete-li speciální HTML tag, číslovaný seznam se může stát čímkoli, co chcete.
Atribut type můžete zadat s libovolnou hodnotou z tabulky. Nebo ve třídě stylu css zadejte typ-style-listu s požadovaným typem řazení.
Překlad hodnot je poměrně jednoduchý. Stačí základní znalost angličtiny. Ale i když nemůžete přeložit slova „kruh“, „čtverec“ atd., můžete vizuálně pochopit, jaký bude výsledek, když tyto hodnoty zadáte do atributu type.
Pro číslované seznamy použijte následující možnosti:
1 - arabské číslice;
A - velká písmena;
a - malá písmena latinky;
I - velké římské číslice;
i - malá římská čísla.

Výchozí je vždy seznam s To znamená, že pokud nic nezadáte, je to stejné jako type="1".
Kromě toho mohou číslované seznamy začínat na libovolné požadované pozici. Ve výchozím nastavení začíná výstup od 1. Ale pokud chcete, můžete začít alespoň od stovky. Chcete-li to provést, musíte zadat atribut start s libovolnou hodnotou.
Kromě toho můžete vyvodit závěr v opačném pořadí. Chcete-li to provést, musíte napsat obráceně.
Návrh seznamů
HTML číslovaný seznam lze navrhnout tak krásně, že si možná hned neuvědomíte, že se jedná o běžný seznam a ne o obrázek vytvořený ve Photoshopu.
Zde jsou příklady krásných seznamů.
Jak je vidět z příkladu, můžete změnit vzhled číslování i samotných prvků.
Můžete vytvořit běžný seznam, jako je tento.
Ve stylech css musíte určit design pro značky ol. Vezměte prosím na vědomí, že v tomto případě se nastavení použije na všechny seznamy na webu, kde se tento soubor stylu používá.
Podívejme se nejprve na možnost s návrhem kulatého seznamu. Návrat na kód seznamu. Je tam uveden zaokrouhlený seznam třídy. Toto je třída, se kterou si musíte pohrát, abyste vytvořili takovou krásu. Třídu si můžete pojmenovat, jak chcete.
Nyní se podíváme na čtvercový design.
Styly jsou si dost podobné. Rozdíl je v tom, že v prvním případě je prvek zaokrouhlen pomocí možností CSS.
Profesionální návrhář rozložení musí předvídat a pochopit, že ne všichni uživatelé používají moderní počítače. Ne každý má nainstalovaný Windows 7, 8, 10 Existuje procento uživatelů, kteří stále používají Windows XP a používají staré verze prohlížeče Internet Explorer.
Zpravidla téměř všechna moderní designová vylepšení prvků jimi nejsou podporována. Uživateli se bude zdát, že se na designu webu vůbec nepracovalo. Že se všechno odstěhovalo. Prvky na sebe narážejí. Abyste tomu zabránili, musíte zvážit všechny možnosti.
Někteří webmasteři před nimi zavírají oči, protože jejich podíl na moderním trhu se stále zmenšuje. Pro profesionála je ale důležitý každý návštěvník, zvláště pokud se jedná o komerční stránky.
Vytvořte něco vhodného pro každého nebo vezměte v úvahu všechny varianty prohlížeče.

Atribut	Popis, přijatá hodnota
obrácený	Atribut obrácený způsobí, že se seznam zobrazí v obráceném pořadí (například 9, 8, 7...).
Start	Atribut start určuje počáteční hodnotu, od které bude číslování začínat, například konstrukce první položce bude přiděleno sériové číslo „10“. Zároveň můžete zadat typ číslování, např. .
typ	Atribut type určuje typ značky, která se má v seznamu použít (písmena nebo čísla). Přijímané hodnoty: 1 — výchozí hodnota, desítkové číslování. A — číslování seznamu v abecedním pořadí, velká písmena (A, B, C, D). a — číslování seznamu v abecedním pořadí, malá písmena (a, b, c, d). I - číslování římskými velkými číslicemi (I, II, III, IV). i — číslování římskými malými číslicemi (i, ii, iii, iv).