HTML poskytuje špeciálnu sadu značiek na prezentáciu informácií vo forme zoznamov. Zoznamy sú jednou z najčastejšie používaných foriem prezentácie údajov vo formáte elektronické dokumenty a v tlači. So zoznamami sa stretávame takmer každý deň - môže to byť zoznam potrebných nákupov v obchode, študenti v triede alebo len veci, ktoré je potrebné vykonať. Schopnosť organizovať štruktúry zoznamov je k dispozícii v mnohých textové editory najmä výkonný textový procesor Microsoft Word má pohodlné formátovacie nástroje pre rôzne typy zoznamov (možnosti vytvárania zoznamov HTML pomocou programu Microsoft Word sú popísané v kapitole 8). Tu je niekoľko prípadov, v ktorých je použitie zoznamov celkom výhodné:
- Skombinovaním informácií do jednej štruktúry získate čitateľný vzhľad.
- Popis zložitých postupných krokov.
- Umiestnenie informácií v štýle obsahu, ktorého odseky označujú zodpovedajúce časti dokumentu.
Uvedené položky sú len usporiadané vo forme štruktúry zoznamu.
HTML poskytuje nasledujúce základné typy zoznamov: odrážky, číslovania a zoznam definícií. Na implementáciu zoznamov odlišné typy používajú sa nasledujúce značky:
- ,
- (LI - položka zoznamu). Označiť
- nepotrebuje vhodnú koncovú značku, aj keď jej prítomnosť v zásade nie je zakázaná. Prehliadače zvyčajne pri zobrazení dokumentu začínajú každú novú položku zoznamu na novom riadku.
Poskytnuté informácie stačia na zostavenie základného zoznamu s odrážkami. Tu je príklad dokumentu HTML, ktorý používa zoznam s odrážkami, ktorý prehliadač zobrazuje na obr. 2.1.
Príklad zoznamu odrážok - Baran
- Býk
- Dvojčatá
- Rakovina
- Lev
- Panna
- váhy
- Škorpión
- Strelec
- Kozorožec
- Vodnár
- Ryby
Znamenia zverokruhu:
Ryža. 2.1. Prehliadač zobrazuje zoznam s odrážkami
Všimnite si toho, že okrem položiek zoznamu označených značkou
- , môžu byť prítomné aj ďalšie prvky HTML. V uvedenom príklade je jedným z týchto prvkov obyčajný text, ktorý nie je položkou zoznamu, ale hrá úlohu jeho nadpisu.
Poznámka
Niektoré učebnice HTML vás poučujú, aby ste pomocou názvu kontajnera vytvorili názov zoznamu.
(LH - Hlavička zoznamu, hlavička zoznamu). Túto značku v súčasnosti nerozpoznal žiadny z bežných prehliadačov a nie je súčasťou špecifikácie HTML. Jeho aplikácia preto stráca zmysel, aj keď nepovedie k žiadnym chybám. V tagu
- je možné zadať dva parametre: KOMPAKTNÉ a TYPOVÉ.
- .
Príklad záznamu:
-
.
Poznámka
Prehliadače majú rôzne interpretácie na zadanie typu odrážky pre jednotlivú položku zoznamu. Prehliadač Netscape mení typ značky pre túto a všetky nasledujúce značky, kým nenarazí na iné prepísanie typu značky. internetový prehliadač Prieskumník zmení vzhľad značky iba pre tento prvok.
Značky grafického zoznamu
Obrázky je možné použiť ako značky zoznamov, ktoré sa široko používajú na vytváranie atraktívnych, krásne navrhnutých dokumentov HTML. V skutočnosti takáto možnosť nie je poskytovaná priamo jazykom HTML, ale je implementovaná trochu umelo. To neznamená, že sa to neodporúča alebo odsúdeniahodné, ale iba to, že tu nebudú použité žiadne špeciálne jazykové konštrukcie HTML.
Aby ste pochopili túto myšlienku, musíte pochopiť, ako sú zoznamy implementované na stránkach HTML. Ukazuje sa, že zoznam
- (ako aj značky iných typov zoznamov, ktoré sú uvedené nižšie) plní jedinú úlohu - informuje prehliadač, že všetky informácie umiestnené za týmto štítkom by sa mali zobraziť s posunom doprava (odsadené) o určité množstvo. Tagy:
- , ktoré ukazujú na jednotlivé položky zoznamu, poskytujú štandardné značky položiek zoznamu.
Ak potrebujeme zostaviť zoznam s grafickými značkami, môžeme sa celkom zaobísť bez značiek.
- ... Bude stačiť vložiť požadovaný grafický obrázok pred každý prvok zoznamu. Jedinou úlohou, ktorú je v tomto prípade potrebné vyriešiť, bude oddelenie prvkov zoznamu od seba. Na to môžete použiť značky odsekov
Alebo nútený posuv linky
... Príklad implementácie zoznamu s grafickými značkami, ktorého zobrazenie je znázornené na obr. 2.2 je uvedený nižšie:Zoznam s odrážkami Znamenia zverokruhu:
Baran
Ryža. 2.2. Zoznam odrážok s grafickými značkami
Vo vyššie uvedenom príklade je značka položky zoznamu grafický súbor Green_ball.gif. Upozorňujeme, že použitie grafiky na stránkach HTML môže výrazne zvýšiť množstvo prenášaných informácií. V tomto prípade je však tento nárast mimoriadne nevýznamný. Tu sa rovnaký súbor používa pre všetky značky,
ktoré sa budú prenášať iba raz. Extrémne malá je aj veľkosť súboru obsahujúceho malý obrázok.
Poznámka
Metódy vytvárania zoznamov pomocou grafických značiek sú postupne prediskutované v kapitole 8.
Číslovaný zoznam
Ďalším typom zoznamov implementovaných v HTML je číslovaný zoznam. V opačnom prípade sa zoznamy tohto typu nazývajú usporiadané. Tento posledný názov sa často používa ako formálny preklad názvu zodpovedajúcej značky.
- , pomocou ktorého sú zoznamy tohto typu organizované v dokumentoch HTML (OL - zoradený zoznam).
- .
Tu je príklad dokumentu HTML používajúceho číslovaný zoznam, ktorého displej prehliadač je zobrazený na obr. 2.3.
Príklad očíslovaného zoznamu - Sirius
- Do anopusu
- Arcturus
- Alfa Centauri
- Vega
- K apella
- Rigel
- Procyon
- Achernar
- Beta Centauri
- Vetelgeuse
- Aldebaran
. . .- Mizar
. . .- Polárne
Najjasnejšie hviezdy viditeľné zo Zeme:
Ryža. 2.Z.Číslovaný zoznam
V tagu
- je možné špecifikovať nasledujúce parametre: KOMPAKTNÉ, TYPOVÉ a ŠTART.
- .
Príklad záznamu:
- .
Parameter ŠTART
- vám umožní začať číslovanie zoznamu s niekým iným. Prirodzené číslo musí byť vždy uvedené ako hodnota parametra START bez ohľadu na typ číslovania zoznamov. Uveďme príklad:
- pre číslované zoznamy umožňuje použitie parametrov TYP a HODNOTA. Parameter TYPE môže mať rovnaké hodnoty ako pre značku.
- .
- .
Poznámka
Prehliadače určujú typ číslovania pre jednotlivú položku zoznamu odlišne. Prehliadač Netscape mení číslovanie tohto prvku a všetkých nasledujúcich, kým nenarazí na ďalšie prepísanie. Internet Explorer zmení vzhľad čísla iba pre túto položku.
Zhodnotu parametra VALUE značky
- - umožňuje zmeniť číslo tejto položky zoznamu. To tiež mení číslovanie všetkých nasledujúcich prvkov. Typickými aplikáciami sú zoznamy s vynechaním určitých prvkov. Príklad takého zoznamu bol uvedený vyššie (obr. 2.3). Poskytuje usporiadaný zoznam najjasnejších hviezd, v ktorých na 58 a 75 miestach existujú hviezdy, ktoré sú jasne viditeľné v našich zemepisných šírkach (Mizar je najjasnejšia hviezda v súhvezdí Veľkej medvedice a Polárna hviezda je Malá Medvedica).
Tu je ďalší originálny príklad použitia rôznych typov číslovania. Nasledujúci HTML kód obsahuje tri zoznamy s rôznym číslovaním. Na uľahčenie prezerania je každý zo zoznamov umiestnený v samostatnej bunke tabuľky. Všetky tri zoznamy sú zhodné a líšia sa iba typom číslovania: v prvom stĺpci tabuľky - arabské číslice, v druhom - rímskom a v treťom je číslovanie latinskými písmenami. Položky zoznamu sú prázdne, t.j. za ľubovoľnou značkou
- údaje nie sú k dispozícii. Príklad tohto druhu možno použiť ako tabuľku korešpondencie medzi zaznamenávaním čísel arabskými a rímskymi číslicami. Ukazuje sa, že akýkoľvek prehliadač, ktorý podporuje zoznamy, je možné použiť ako generátor pre takúto tabuľku (obrázok 2.4), pokiaľ zadáte nižšie uvedený kód HTML. Rímske číslice fungujú správne až do 3999. Pri skúmaní pravého stĺpca môžete porozumieť tomu, ako sú rímske číslice číslované. Keď sa jednopísmenové číslovanie (od A do Z) vyčerpá, prvé dvojpísmenové číslo sa bude brať ako ďalšie číslo-AA atď.
Použitie rôznych typov číslovania v zoznamoch -
. . .
-
. . .
-
. . .
Ryža. 2.4. Rôzne typy číslovania zoznamov HTML
Definičný zoznam
Zoznamy definícií, nazývané tiež slovníky definícií špeciálnych pojmov, sú špeciálnym druhom zoznamov. Na rozdiel od iných typov zoznamov má každá položka v definičnom zozname vždy dve časti. V prvej časti položky zoznamu je napísaný definovaný termín a v druhej časti text vo forme slovníkového záznamu, ktorý odhaľuje význam tohto výrazu.
Zoznamy definícií sú špecifikované pomocou kontajnerovej značky
- (Zoznam definícií). Vnútri nádoby so štítkom
- (Definition Term) označuje definovaný výraz a značku
- (Popis definície) - odsek s jeho definíciou. Na značky
- a
- nemusíte písať zodpovedajúce koncové značky.
Definičný zoznam je vo všeobecnosti napísaný takto:
- Termín
- Definícia pojmu
V texte za tagom
- prvky na úrovni bloku, ako sú značky odsekov, nemožno použiť
Alebo hlavičky
-
... Text definovaného výrazu by mal byť spravidla na jednom riadku. Text obsahujúci definíciu pojmu sa zobrazí začínajúci na nasledujúcom riadku (alebo v niektorých prehliadačoch na riadku) za definíciou výrazu, odsadeným vpravo. V informáciách umiestnených za štítkom
- , môžu byť umiestnené prvky na úrovni bloku. To predovšetkým znamená, že definičné zoznamy môžu byť vnorené.
V tagu
- je možné zadať parameter COMPACT, ktorého účel je podobný ako v iných zoznamoch popísaných vyššie.
- Flegmatický človek
- Pasívny, veľmi schopný, pomaly sa prispôsobujúci;
stabilná nálada, málo prístupná vonkajším vplyvom;
letargia emocionálnych reakcií a pomalosť vo vôľovej aktivite
- Sangvinik
- Aktívny, energický, prispôsobivý, -
živosť a pohyblivosť emocionálnych reakcií, rýchlosť a sila vôľových prejavov
- Cholerik
- Aktívny, veľmi energický, vytrvalý;
impulzívnosť a sila emocionálnych reakcií, násilné vôľové prejavy
- Melancholické
- Pasívny, ľahko unaviteľný, ťažko sa prispôsobujúci, -
slabosť vôle a prevaha depresívnej nálady, pochybnosti o sebe - Zempia
- mesiac
- Mapc
- Phobos
- Deimos
- Urán
- Ariel
- Umbriel
- Titania
- Oberon
- Miranda
- Neptún
- Triton
- Nereid
Hypertextový značkovací jazyk HTML má značku
- slúži na vytváranie zoznamov s odrážkami. Podporujú ho všetky moderné prehliadače a umožňuje vám zobrazovať prvky v nečíslovanom poradí. Napríklad veľmi často zobrazuje položky ponuky a všetko, čo súvisí so zoznamami na stránke: riad, výrobky, vybavenie, nástroje a oveľa viac, čo je potrebné uviesť bez uvedenia priority tejto alebo tej položky.
- Položka č. 1
- Položka č. 2
- Položka č. 3
- ...
- Položka č. 1
- Položka č. 2
- Položka č. 3
- Položka č. 1
-
- Položka č. 2-1
- Položka č. 2-2
- Položka č. 2-3
- Položka č. 3
- ...
- Položka č. 1
- Položka č. 2
- Položka č. 1
- Položka č. 2
- Položka č. 1
- Položka č. 2
- Položka č. 1
- Položka č. 2
- ...
- disk - značka vo forme kruhu (príklad bol vyššie)
- kruh - značka vo forme priehľadného kruhu (príklad bol vyššie)
- štvorec - značka vo forme štvorca (príklad bol vyššie)
- desatinné miesto - značka vo forme očíslovaného zoznamu arabskými číslicami: 1, 2, 3, ...
- desatinná-úvodná-nula-značka vo forme očíslovaného zoznamu arabskými číslicami s počiatočnou nulou: 01, 02, 03, ...
- nižšia rímska značka - značka vo forme očíslovaného zoznamu v rímskej abecede malými písmenami: i, ii, iii, iv, v
- horná rímska značka - značka vo forme očíslovaného zoznamu v rímskej abecede veľkými písmenami: I, II, III, IV, V
- nižšia latinka - značka vo forme zoznamu v latinskej abecede malými písmenami: a, b, c, d, ...
- horná latinka - značka vo forme zoznamu v latinskej abecede s veľkými písmenami: A, B, C, D, ...
- lower -greek - guľka vo forme zoznamu Grécka abeceda malé písmená
- horný grécky jazyk - značka vo forme zoznamu v gréckej abecede s veľkými písmenami
- ... Pri nastavovaní atribútu k značke
- všetky položky zoznamu sa zobrazia tak, ako to naznačuje atribút. Ale môžeme tomu alebo onomu prvku nastaviť vlastný displej. Príklad na obrázku:
- Položka č. 1
- Položka č. 2
- Položka č. 3
- Položka č. 1
- Položka č. 2
- Položka č. 3
- Položka č. 1
- Položka č. 2
- Položka č. 3
- Položka č. 1
- Položka č. 2
- Položka č. 3
- , ktorý okrem textu môže obsahovať ďalšie prvky HTML (zoznamy, obrázky, nadpisy, odseky atď.). Zoznamy s odrážkami sa na webovej stránke predvolene zobrazujú ako zoznam, ktorý začína malým čiernym kruhom. Prehliadače pri zobrazení položiek zoznamu pridávajú malý okraj vľavo.
Poznámka: Ak by
- aplikované Vlastnosť CSS, potom prvky
- zdediť tieto vlastnosti.
Rada: Ak chcete zmeniť typ značky, nahraďte značky obrázkami pomocou vlastnosti CSS typu list-style alebo vlastnosti list-style-image. Na vytvorenie očíslovaných zoznamov použite značku
- .
- ... ...
Syntax
Koncová značka
Požadovaný.
Atribúty
kompaktný Zastaraný v HTML5 Znižuje odsadenie a riadkovanie. type HTML5 Nastaví vzhľad značky v zozname.K dispozícii pre túto položku globálne atribúty a vývoj.
Predvolený štýl
Väčšina prehliadačov prvok vykreslí
- s nasledujúcimi predvolenými hodnotami CSS:
- Káva
- Čaj
- Kakao
- Zasadiť strom
- Postaviť dom
- Vychovať syna
- 1 Zasadiť strom
- 2 Postaviť dom
- 3 Vychovať syna
- Zasadiť strom
- Postaviť dom
- Vychovať syna
- li :: predtým- vytvorí v zozname pseudoprvok, ktorý nahradí prvé dieťa.
- counter-reset: myCounter;- vynuluje počítadlo CSS myCounter vo vnútri každého
- .
- protihodnota: myCounter;- zvyšuje css počítadlo myCounter pre každý pseudoprvok :: predtým.
- obsah: počítadlo (myCounter);- zobrazuje aktuálnu hodnotu čítača myCounter vo vnútri pseudoprvku :: before.
- vertikálne nad sebou. Na vytvorenie navigačných prvkov je v niektorých prípadoch vhodné zobraziť zoznam vodorovne. Existuje niekoľko spôsobov, ako získať toto zobrazenie zoznamu.
Už by ste si mali byť vedomí toho, že HTML obsahuje blokové a vložené prvky. Vložené prvky nevytvárajú vlastné bloky, príkladmi takýchto prvkov sú značky alebo ... Prvky bloku sa zobrazujú pomocou Nový riadok a vytvorte obdĺžnikový blok, príklad takýchto značiek
aleboTakže značka
- je tiež blokovým prvkom.
Oštítkovať
- sa nesprával ako blokový prvok, môžete kedy Pomoc CSS urob to malými písmenami.
Vlastnosť zobrazenia CSS zodpovedá za to, ako sa prvok v dokumente zobrazí. Uvažujme o troch jeho hodnotách (aj keď ich je viac):
- blok - prvok sa zobrazí ako blok.
- vložený - prvok sa zobrazí ako vložený.
- inline-block-block-inline element, prečítajte si viac o tomto type prvkov nižšie, použijeme ho.
Najprv urobme horizontálny zoznam tak, že jeho položky prevedieme na vložené prvky. V štýle CSS napíšeme pravidlo, v ktorom je vlastnosť zobrazenia nastavená na selektor li s vloženou hodnotou.
Zoznam vodorovne Tento štýl teda fungoval a položky zoznamu sa dostali horizontálne:
Obrázok 1. Práca z príkladu č. 1.
Táto metóda má nevýhody. Dôvodom je, že vložené prvky majú určité obmedzenia v porovnaní s prvkami bloku. Nemôžu napríklad mať šírku a výšku, ale blokové môžu.
Napríklad chceme, aby prvok ponuky, ktorú vytvárame, mal šírku 150 pixelov a výšku 40 pixlov. Skúsme zmeniť štýl na nasledujúci, to znamená, pridať dve pravidlá určujúce veľkosť položky ponuky:
Tieto úpravy nebudú mať za následok žiadne zmeny. Aby boli položky ponuky umiestnené horizontálne a aby bolo možné nastaviť ich šírku a výšku, je potrebné ich nastaviť na typ vloženého bloku. Zmeňme kód nášho príkladu:
Zoznam vodorovne Tento kód funguje a sú viditeľné zmeny:
Obrázok 2. Práca z príkladu č. 2. Ale môže byť rôzne varianty napríklad v ponuke musíme zobraziť vnorené zoznamy:
Vnorený zoznam. Tu je výstup z tohto kódu:
Obrázok 3. Práca príkladu č. 3. Vidíme, že bloky nie sú na výšku zarovnané, ako by sme chceli. Samozrejme môžete pre všetky bloky zadať rovnakú výšku, ale nie vždy poznáme jej presnú hodnotu vopred a môže sa zmeniť.
Ale vlastne, prečo sa to deje?
Naše bloky majú vlastnosť zobrazenia nastavenú na vložený blok. To znamená, že majú vlastnosti blokových prvkov (schopnosť určiť šírku a výšku) aj vložených prvkov. To, čo vidíme, je kvalita vložených prvkov.
Pozrime sa na reťazec so znakmi „A“ rôznych veľkostí:
A A A A A A A
Vidíme, že všetky písmená sú vertikálne zarovnané so spodným riadkom. Presnejšie po základnej čiare, ale teraz sa nedostaneme do džungle. To isté sa stalo s našimi blokmi.
Vlastnosť vertikálne zarovnanie sa používa na vertikálne zarovnanie textu. V našom prípade č. 3 musíme použiť najvyššiu hodnotu, ktorá zarovná horný okraj prvku s horným okrajom prvku. vysoký prvok struny.
Teraz to použijeme na reťazec so znakmi „A“ rôznych veľkostí:
A A A A A A A
Zdá sa, že písmená trochu „skáču“. Hranicu CSS som nastavil na najvyššie písmeno, aby ste videli, že v skutočnosti neexistuje skok, medzi horným okrajom (pozdĺž ktorého dochádza k zarovnaniu) a horným bodom znaku „A“ je prázdne miesto.
Vlastnosť zvislého zarovnania musí byť aplikovaná na každý vložený prvok, nie je zdedená. Môžete si prečítať viac o tejto vlastnosti: vertikálne zarovnanie.
Po tomto odbočení budeme pokračovať v horizontálnom usporiadaní položiek zoznamu.
Druhý spôsob
Položky zoznamu môžete umiestniť horizontálne pomocou vlastnosti float. Táto vlastnosť naznačuje, na ktorej strane je prvok zarovnaný, má dve polohy: vľavo a vpravo.
Tu je príklad použitia tohto kódu:
Zoznam vodorovne Tu je výstup kódu:
Obrázok 4. Práca na príklade. Zdá sa, že príklad funguje. Používanie tejto vlastnosti má však jednu nuanciu. Teraz sa na to pozrieme. Zoberme si napríklad kód, v ktorom sú dva horizontálne zoznamy s rôznymi spôsobmi umiestnenie prvkov horizontálne: zobrazenie a plávanie:
Zoznam vodorovne Tu je výstup kódu:
Obrázok 5. Práca na príklade. V týchto príkladoch obsahuje zoznam
- majú 1 pixel červený okraj. Horný zoznam, ktorý používa vlastnosť zobrazenia, však obsahuje položky zoznamu. Prvky zoznamu vytvorené pomocou vlastnosti float však vypadnú z ich kontajnera.
- sú stále mimo kontajnera
-
.
Obrázok 7. Príklad spustenia. Navyše v našej práci nie vždy vieme, ktorý prvok bude nasledovať po tom pomocou float. Ideálne by bolo zatvoriť vlastnosť float v tom istom bloku, v ktorom je otvorená.
To sa deje pomocou pseudoprvku. Tu je kód:
Zoznam vodorovne Teraz máme 100% funkčný kód.
Obrázok 8. Príklad spustenia. Táto technika s vlastnosťou float sa zvyčajne používa pri kódovaní webov na zarovnanie stĺpcov vytvorených značkami
... Tak získame normálnu konštrukciu stĺpikov s požadovaným výškovým zarovnaním. Keď vytvoríme menu, potom pre nás vo väčšine prípadov výška blokov nie je dôležitá, je takmer vždy rovnaká. Použitie pravidla (zobrazenie: vložený blok) je preto v týchto prípadoch celkom rozumné.Ale pre úplnosť zverejnenia témy sme sa tu oboznámili so všetkými možnými možnosťami. Aj keď môžu existovať aj iné spôsoby, napríklad pomocou tabuliek CSS, vyhľadávacie nástroje dôrazne odporúčajú používať tabuľky iba na určený účel, a nie na organizovanie navigačných prvkov alebo čohokoľvek iného.
Zároveň na prvý pohľad všetko funguje. Zmeňme však naše zoznamy. Vložme zoznam s ponukou triedy-1 do kódu pred zoznam s ponukou triedy-2 (teraz je nižšie).
Výsledkom je toto:
Obrázok 6. Príklad operácie. Položky v dolnom menu tiež prúdia okolo horného menu, pretože efekt vlastnosti float nebol zrušený a platí pre všetky nasledujúce položky.
Ako tento problém vyriešiť?
Na to musíte použiť vlastnosť clear, ktorá zruší tok prvku okolo iného prvku, ak má nastavenú vlastnosť float.
Tu je upravený príklad pomocou vlastnosti clear:
Zoznam vodorovne Je vidieť, že dolný zoznam už nelipne na hornom, prvky po sebe neprechádzajú. Ale v prvom zozname značky
- je tiež blokovým prvkom.
Ul (zobrazenie: blok; typ štýlu zoznamu: disk; horný okraj: 1 em; dolný okraj: 1 em; okrajový ľavý: 0; pravý okraj: 0; padding-ľavý: 40 pixelov;)
Rozdiely medzi HTML 4.01 a HTML5
Atribúty compact a type nie sú v HTML5 podporované.
Príklad použitia:
Neusporiadaný zoznam HTML:
Príklad HTML:
Skúste to samiŠpecifikácia
Špecifikácia Postavenie WHATWG HTML Living Standard (WHATWG) Štandard bývania HTML 4.01 (W3C) Odporúčanie HTML5 (W3C) Odporúčanie HTML 5.1 (W3C) Odporúčanie Podpora prehliadača
Skúste to sami - príklady
Ako nastaviť, aby zoznam začínal iným číslom ako 1.
Ak ste niekedy skúšali zmeniť štýly css čísel riadkov (číslic) v usporiadaných zoznamoch
- , potom určite čelil problémom. Pomocou selektorov css nie je možné dosiahnuť štýly týchto prvkov. Dizajn rozhrania však často zahŕňa zmenu ich farby, pozadia, veľkosti atď.
Tu je najjednoduchší príklad neštylizovaného zoznamu:
html
Pozrime sa na niekoľko spôsobov, ako vyriešiť vyššie uvedený problém.
Tradične nemotorný spôsob.
Tradičným spôsobom riešenia tohto problému je skryť čísla riadkov, ktoré prehliadač automaticky umiestnil. Používa sa vlastnosť štýlu zoznamu: žiadny; ...
css
li (štýl zoznamu: žiadny;). počet (farba: biela; pozadie: # 2980B9; zobrazenie: vložený blok; zarovnanie textu: stred; okraj: 5 pixelov 10 pixelov; výška riadka: 40 pixelov; šírka: 40 pixelov; výška: 40 pixelov;)html
Súhlasíte, vyzerá to nadbytočne a nie flexibilne. Automaticky umiestnené skryjeme sériové čísla a nahraďte ich ručne zadanými hodnotami, rozložte rozloženie atď.
Pozrime sa, ako môžete dosiahnuť rovnaký výsledok bez preplnenia rozloženia a použitia pseudoprvku :: before a vlastností css obsahu, počítadla s prírastkom a proti vynulovaniu.
Pekný a správny spôsob.
Najprv poskytneme kód a ukážku a potom zistíme, čo je čo.
css
ol (reset počítadla: myCounter;) li (štýl zoznamu: žiadny;) li: predtým (prírastok počítadla: myCounter; obsah: počítadlo (myCounter); farba: biela; pozadie: # 2980B9; zobrazenie: vložený blok; zarovnanie textu: stred; okraj: 5 pixelov 10 pixelov; výška riadka: 40 pixelov; šírka: 40 pixelov; výška: 40 pixelov;)html
Ako vidíte, html kód zostáva čistý a krásny. V tomto prípade sa všetky štýly položiek zoznamu prenesú do CSS.
Rozoberme to bod po bode:
ďalšie podrobnosti o počítadlách css nájdete v
Úloha
Zobraziť zoznam s odrážkami horizontálne bez odrážok.
Riešenie
Značka so zoznamom s odrážkami
- štandardne položky výstupov
- zdediť tieto vlastnosti.
Kód vyzerá takto:
Zmena značiek značiek
- pomocou CSS
Položky s odrážkami vytvorené spoločnosťou Tag
- , môžu byť označené ľubovoľnými obrázkami. CSS sa používa na zmenu typu značky. Napríklad
A takto to vyzerá na stránke:
CSS môžeme použiť na definovanie ďalších typov zobrazovania značiek. Na to však musíte pamätať pri nastavovaní akéhokoľvek štýlu značky
- , platí pre všetky prvky zoznamu.
Element
- (z anglického „unordered list“ - „unordered list“) vytvorí neusporiadaný (neusporiadaný) zoznam. Typicky prvok
- slúži na vytváranie takých zoznamov, kde zmena poradia položiek v tomto zozname významne nezmení význam zoznamu.
Označiť
- odkazuje na blokové prvky, takže zaberie celú šírku, ktorá je k dispozícii, a veľkosť výšky bude závisieť od množstva obsahu.
Položky pre očíslované zoznamy sú definované pomocou značky
Syntax značky
Tento kód je konvertovaný do zoznamu s odrážkami na webe:
Označiť
- vyžaduje povinné používanie koncovej značky
Na vytvorenie položiek zoznamu sa používa spárovaná značka. Medzi úvodnými a záverečnými značkami sú jednotlivé slová, frázy, odseky, obrázky, kúsky kódu a mnoho ďalších, ktoré sú obsahom zoznamu s odrážkami.
Čo môže byť obsahom zoznamu s odrážkami?Môže to byť celý rad textov, vrátane jednoduchých slov, fráz a odsekov, obrázkov, vnorených zoznamov, kúskov kódu php a mnohých ďalších, ktoré vyžadujú jednoduché označovanie.
Každá položka zoznamu s odrážkami je v predvolenom nastavení odsadená o 40 pixelov vpravo. Pomocou štýlov CSS môžeme zmeniť zobrazenie tohto zoznamu podľa našich predstáv. Označiť
- je založený na blokoch, takže zaberá celú oblasť, ktorú má k dispozícii, obmedzenú okrajom obrazovky, rámom tabuľky alebo inými prvkami stránky.
Prílohy zoznamu v zozname sú povolené
Napríklad
Atribúty a vlastnosti značiek
Široko používaný atribút značky
- je atribút typu, ktorý určuje, ako bude značka na zozname vyzerať. Môže mať nasledujúce hodnoty
1. type = "disk" - značka vo forme vyplneného kruhu (táto hodnota je predvolená). Príklad disku bol tesne nad.
2. typ = "kruh" - značka vo forme priehľadného kruhu
Napríklad:
3.typ = "štvorec" - značka vo forme štvorca
Napríklad:
A takto to vyzerá na stránke:
V CSS je typ značky určený pomocou atribútu typ štýlu zoznamu:
Zoberme si, aké hodnoty môže mať štýl typu zoznam:
Atribút je možné priradiť ako samotnú značku
- a štítky
Tu je príklad dokumentu HTML, ktorý používa zoznam definícií:
Príklad zoznamu definícií Klasifikácia typických ľudských temperamentov,
založenýna pohľady Hippokrata
Zobrazenie daného HTML dokumentu v prehliadači je znázornené na obr. 2.5.
Ryža. 2.5. Zoznam definícií (pripomína skupinu záznamov v slovníku)
Typové zoznamy
a - .
Pôvodne boli tieto typy zoznamov koncipované ako kompaktnejšie ako bežné zoznamy s odrážkami. Podľa pravidiel pre zápis prvkov týchto zoznamov do nich nebolo dovolené používať blokové prvky, čo znamená, že nie je možné implementovať vnorenie zoznamov tohto typu. Každá položka v zozname bola jedným riadkom textu.
Pre zoznamy ako
bolo plánované zavedenie obmedzenia „dĺžky textu položky zoznamu (24 znakov). Takéto obmedzenie by umožnilo odvodiť zoznamy ako
v podobnej forme ako zoznam adresárov v operačné systémy UNIX a MS-DOS pri použití prepínača / W (viac stĺpcov). Okrem toho sa pre položky zoznamu tohto typu nezobrazovali značky. V súčasnosti nie sú všetky tieto nápady implementované, pretože ďalšie používanie zoznamov týchto typov sa neodporúča. Moderné verzie prehliadačov zobrazujú zoznamy týchto typov úplne rovnakým spôsobom ako zoznamy daného typu
- .
Vnorené zoznamy
Sú chvíle, keď položka zoznamu jedného typu musí obsahovať celý zoznam rovnakého alebo iného typu. To bude organizovať viacúrovňové alebo vnorené zoznamy. HTML umožňuje ľubovoľné vnorenie rôznych typov zoznamov, ale pri ich organizácii by ste mali byť opatrní.
Nasleduje HTML kód dokumentu s vnorenými zoznamami, ktorého zobrazenie je znázornené na obr. 2.6. V tomto prípade má každá položka v zozname s odrážkami svoj číslovaný zoznam.
Príklad vnoreného zoznamu Satelity niektorých planét
- , môžu byť umiestnené prvky na úrovni bloku. To predovšetkým znamená, že definičné zoznamy môžu byť vnorené.
-
NS Príklad záznamu:
- .
- .
Takýto záznam určuje číslovanie zoznamu podľa veľkého latinského písmena „E“. Pri iných typoch číslovania sa zadaním ŠTART = 5 nastaví číslovanie od čísla „5“, rímskej číslice „V“ atď.
Zmenu typu číslovania zoznamu a hodnôt čísel je možné vykonať pre akýkoľvek prvok zoznamu. Označiť
- pre číslované zoznamy umožňuje použitie parametrov TYP a HODNOTA. Parameter TYPE môže mať rovnaké hodnoty ako pre značku.
Parameter COMPACT má rovnaký význam ako zoznamy s odrážkami. Parameter TYPE sa používa na nastavenie typu číslovania zoznamov. Môže mať nasledujúce hodnoty:
TYPE = A - nastavuje značky vo forme veľkých latinských písmen;
TYPE = a - určuje značky vo forme malých latinských písmen;
TYPE = I - určuje značky vo forme veľkých rímskych číslic;
TYPE = i - určuje značky vo forme malých rímskych číslic;
TYPE = 1 - určuje značky vo forme arabských číslic.
Štandardne sa vždy používa hodnota TYPE = 1, tj. Číslovanie pomocou arabských číslic. To platí aj pre vnorené číslované zoznamy. Tu, na rozdiel od zoznamov s odrážkami, prehliadače v predvolenom nastavení nerobia rôzne číslovanie na rôznych úrovniach vnorenia zoznamov. Všimnite si toho, že za číslom prvku zoznamu sa vždy dodatočne zobrazí aj znak „bodky“.
Parameter TYPE s rovnakými hodnotami je možné použiť na určenie štýlu číslovania jednotlivých položiek zoznamu. Na to je možné v značke položky zoznamu zadať parameter TYPE so zodpovedajúcou hodnotou
Zoznamy tohto typu zvyčajne predstavujú usporiadanú postupnosť jednotlivých prvkov. Rozdiel oproti zoznamom s odrážkami je ten, že v číslovanom zozname každému prvku automaticky predchádza poradové číslo. Typ číslovania závisí od prehliadača a je možné ho nastaviť pomocou parametrov značiek zoznamu. V opačnom prípade je implementácia očíslovaných zoznamov veľmi podobná implementácii zoznamov s odrážkami.
Značky
- a
Na vytvorenie očíslovaného zoznamu použite kontajner na tagy, v ktorom sú umiestnené všetky prvky zoznamu. Začiatočné a koncové značky zoznamu poskytujú riadkové kanály pred a za zoznamom, čím sa zoznam oddeľuje od hlavného obsahu dokumentu.
Rovnako ako v prípade zoznamu s odrážkami musí každá položka v očíslovanom zozname začínať značkou
- , ktoré ukazujú na jednotlivé položky zoznamu, poskytujú štandardné značky položiek zoznamu.
Parameter COMPACT je zapísaný bez hodnôt a slúži na pokyn prehliadača, aby tento zoznam zobrazil v kompaktnej forme. Napríklad je možné zmenšiť písmo alebo vzdialenosť medzi riadkami v zozname atď.
Poznámka
V súčasnosti je v značke prítomný parameter COMPACT
- nijako neovplyvňuje zobrazenie zoznamov poprednými prehliadačmi. Preto použitie tohto parametra nemá zmysel, najmä preto, že jeho použitie špecifikácia HTML 4.0 neodporúča.
Parameter TYPE môže mať nasledujúce hodnoty: disk, kruh a štvorec. Tento parameter sa používa na vynútenie vzhľadu značiek zoznamu. Presný typ značky bude závisieť od použitého prehliadača. Typické možnosti zobrazenia sú nasledujúce:
TYPE = disk - značky sa zobrazia s vyplnenými kruhmi; TYPE = kruh - značky sa zobrazujú s otvorenými kruhmi; TYPE = štvorec - značky sa zobrazia s vyplnenými políčkami. Príklad záznamu:
-
.
Predvolená hodnota je TYPE = disk. Pre vnorené zoznamy s odrážkami sú predvolené hodnoty disk na prvej úrovni, kruh na druhej a štvorec na tretej a ďalej. Presne to sa robí najnovšie verzie Prehliadače Netscape a internet Explorer... Upozorňujeme, že ostatné prehliadače môžu zobrazovať značky odlišne. Špecifikácia HTML 4.0 napríklad určuje štvorcový obrys pre typ značky vykreslenej s TYPE = štvorec.
Parameter TYPE s rovnakými hodnotami je možné použiť na určenie typu značiek pre jednotlivé položky zoznamu. Na to je možné v značke položky zoznamu zadať parameter TYPE so zodpovedajúcou hodnotou
- .
- ,
- ,
- , pomocou ktorého sú zoznamy tohto typu organizované v dokumentoch HTML (UL - Unordered List, unordered list).
Zoznam s odrážkami používa Špeciálne symboly, nazývané list Bullets (často sa nazýva Bullets, čo je formálna výslovnosť anglického výrazu bullet). Typ značiek zoznamov určuje prehliadač a pri vytváraní vnorených zoznamov prehliadače automaticky diverzifikujú vzhľad značiek na rôznych úrovniach vnorenia.
Značky a<LI>
Na vytvorenie zoznamu s odrážkami musíte použiť kontajner so tagmi, v ktorom sú umiestnené všetky prvky zoznamu. Značky otváracieho a záverečného zoznamu poskytujú riadkové kanály pred a za zoznamom, čím oddeľujú zoznam od hlavného obsahu dokumentu, takže tu nie je potrebné používať značky odsekov
.
Každý prvok zoznamu musí začínať značkou