Ďalší názov zoznamu. Číslované zoznamy. Typy značiek zoznamu s odrážkami
Zoznamy s odrážkami vám umožňujú rozdeliť veľký text na samostatné bloky, z ktorých každý začína odrážkou – zvyčajne malou bodkou. To pritiahne pozornosť čitateľa k textu a zvýši jeho čitateľnosť.
S prvkom
- spojené s nasledujúcimi funkciami:
- na mieste, kde sa stretáva
- , prehliadač automaticky pridá zalomenie riadku;
- zoznam má zarážky v hornej a dolnej časti;
- značky sa štandardne zobrazujú ako vyplnený kruh;
- každý prvok zoznamu je vo vzťahu k hlavnému textu posunutý doprava.
- disk - značky vo forme vyplneného kruhu;
- kruh - značky vo forme nevyplneného kruhu;
- štvorec - štvorcové značky.
- sepulki
- Sepulcarii
- Sepulenia
- nebude fungovať, takže budete musieť obísť. Ak to chcete urobiť, skryte značky zoznamu pomocou vlastnosti v štýle zoznamu s hodnotou none a v texte pred obsahom
- pridajte svoje vlastný charakter pomocou pseudoprvku ::before. V príklade 2 trojuholník funguje ako značka.
Príklad 2: Použitie::before
zoznamy - sepulki
- Sepulcarii
- Sepulenia
Výsledok tento príklad znázornené na obr. 2. Keďže použitie vlastnosti v štýle zoznamu s hodnotou none neodstráni značky úplne, ale iba ich skryje z pohľadu, zoznam sa posunie doprava. Aby sme sa zbavili tejto zvláštnosti, príklad pridáva vlastnosť text-indent so zápornou hodnotou. Jeho úlohou je posunúť text o jeden znak doľava.
Ryža. 2. Ľubovoľné značky v zozname
Znak nemusí byť v hexadecimálnom formáte, možno ho vložiť aj priamo do textu. Hlavná vec je uložiť dokument v kódovaní UTF-8 a aby to editor podporoval. Samotné znaky a ich kódy je možné prevziať napríklad z LibreOffice Writer (obr. 3).
Ryža. 3. Výber symbolov v LibreOffice
Zoznam s nakreslenými odrážkami
Štýly vám umožňujú nastaviť akýkoľvek vhodný obrázok ako značku prostredníctvom vlastnosti list-style-image. Hodnota je relatívna alebo absolútna cesta k grafický súbor, ako je uvedené v príklade 3.
Príklad 3: Použitie obrázku ako značky
zoznamy - sepulki
- Sepulcarii
- Sepulenia
Najlepšie je vybrať obrázok malej veľkosti, aby sa položky zoznamu nezmenili na popisky obrázkov. Na obr. 4 ukazuje výsledok príkladu akcie pre použitie malých obrázkov ako značiek.
Ryža. 4. Kresba ako fixka
Obrázok v štýle zoznamu má niekoľko nevýhod:
- vzor nemožno posunúť nahor alebo nadol;
- v rôzne prehliadače poloha obrázka vzhľadom k textu sa môže líšiť.
Týmto problémom sa dá vyhnúť použitím vlastnosti pozadia, ktorá nastavuje obrázok na pozadí. Pre každú položku zoznamu
- odstránime pôvodné značky a nastavíme obrázok na pozadí bez opakovania. A aby sa text nezobrazoval nad obrázkom, posunieme ho doprava cez padding-vľavo (príklad 4).
Príklad 4 Použitie pozadia
Ul ( margin-left: -1em; ) li ( list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )
Poloha textu a odrážky
Existujú dva spôsoby umiestnenia značky vzhľadom na text: značka sa umiestni mimo okraja prvkov zoznamu alebo sa obalí textom (obr. 5).
vnútri vonku Ryža. 5. Umiestnenie značiek vzhľadom na text
Vlastnosť list-style-position sa používa na ovládanie polohy značiek. Má dva významy: vonku - odrážky sú umiestnené mimo textového bloku (toto je predvolené nastavenie) a vnútri - odrážky sú súčasťou textového bloku a zobrazujú sa v položke zoznamu (príklad 5).
Príklad 5. Zmeňte polohu značiek
zoznamy - Pred začatím práce skontrolujte dostupnosť vybavenia, ktoré je súčasťou súpravy 3BM.
- Pri absencii jedného alebo viacerých periférií mali by ste okamžite kontaktovať technický personál VC.
- Po vizuálnej kontrole vašej pracovnej oblasti môžete opatrne zapnúť 3BM.
Výsledok tohto príkladu je znázornený na obr. 6.
Jedným z typov zoznamov implementovaných v HTML je zoznam s odrážkami. V opačnom prípade sa zoznamy tohto typu nazývajú neusporiadané alebo neusporiadané. Priezvisko sa často používa ako formálny preklad názvu zodpovedajúceho tagu.
- , pomocou ktorej sú zoznamy tohto typu organizované v HTML dokumentoch (UL - Unordered List, unordered list).
- (LI - Položka zoznamu, položka zoznamu). Tag
- nepotrebuje zodpovedajúci uzatvárací štítok, hoci jeho prítomnosť v zásade nie je zakázaná. Prehliadače zvyčajne začínajú každú novú položku zoznamu na novom riadku pri zobrazení dokumentu.
Vyššie uvedené informácie sú dostatočné na vytvorenie základného zoznamu s odrážkami. Tu je príklad HTML dokumentu s použitím odrážkového zoznamu, ktorého vykreslenie v prehliadači je znázornené na obr. 2.1.
Príklad zoznamu s odrážkami Znamenia zverokruhu:
- Baran
- Býk
- Dvojičky
- Panna
- Váhy
- Scorpion
- Strelec
- Kozorožec
- Vodnár
- Ryby
Ryža. 2.1. Zobrazenie zoznamu s odrážkami v prehliadači
Všimnite si, že okrem položiek zoznamu označených značkou
- , môžu byť prítomné ďalšie prvky HTML. Vo vyššie uvedenom príklade je jedným z týchto prvkov obyčajný text, ktorý nie je položkou zoznamu, ale zohráva úlohu jeho nadpisu.
Poznámka
V niektorých učebniciach jazyka HTML sa uvádza, že na nastavenie názvu zoznamu by sa mala použiť kontajnerová značka.
(LH - Hlavička zoznamu, hlavička zoznamu). Túto značku momentálne nerozpozná žiadny z bežných prehliadačov a nie je súčasťou špecifikácie HTML. Jeho použitie tak stráca zmysel, hoci nepovedie k žiadnym chybám. V tagu
- možno zadať dva parametre: COMPACT a TYPE.
- .
Príklad nahrávania:
- .
Poznámka
Prehliadače interpretujú označenie typu značky pre jednotlivé položky zoznamu odlišne. Prehliadač Netscape zmení vzhľad značky pre túto a všetky nasledujúce, až kým nenarazíte na ďalšiu redefiníciu vzhľadu značky. internetový prehliadač Prieskumník zmení vzhľad značky iba pre tento prvok.
Zoznam grafických značiek
Môžete použiť grafické obrázky ako značky zoznamu, čo sa široko používa na vytváranie atraktívnych, krásne navrhnutých dokumentov HTML. V skutočnosti táto možnosť nie je poskytovaná priamo. jazyk HTML, ale je implementovaný trochu umelo. To neznamená, že sa to neodporúča alebo odsúdeniahodné, ale len to, že tu nebudú použité žiadne špeciálne konštrukcie jazyka HTML.
Aby ste pochopili túto myšlienku, musíte pochopiť, ako sú zoznamy implementované na stránkach HTML. Ukazuje sa, že značka zoznamu
- (rovnako ako zoznam značiek iných typov, diskutovaných nižšie) vykonáva jedinú úlohu - hovorí prehliadaču, že všetky informácie nachádzajúce sa za touto značkou by sa mali zobraziť s posunom doprava (zarážka) o určitú hodnotu. značky
- ukazujúci na jednotlivé prvky zoznam, poskytujú výstup štandardných značiek položiek zoznamu.
Ak potrebujeme zostaviť zoznam s grafickými značkami, potom si vystačíme úplne bez značiek
- . Bude stačiť vložiť požadované pred každý prvok zoznamu grafický obrázok. Jedinou úlohou, ktorú je v tomto prípade potrebné vyriešiť, je oddelenie prvkov zoznamu od seba. Na tento účel môžete použiť značky odsekov.
Alebo nútený posuv vlasca
. Príklad implementácie zoznamu s grafickými značkami, ktorého zobrazenie je na obr. 2.2 je uvedený nižšie:ktorý sa bude vysielať iba raz. Veľkosť súboru obsahujúceho malý obrázok je tiež extrémne malá.
Poznámka
Metódy vytvárania zoznamov s grafickými značkami sú postupne diskutované v kapitole 8.
Číslované zoznamy sú kolekciou položiek s ich sériové čísla. Typ a typ číslovania závisí od parametrov prvku
- , ktorý sa používa na vytvorenie zoznamu. Nasledujúce hodnoty môžu fungovať ako prvky číslovania:
- arabské číslice (1, 2, 3, ...);
- arabské číslice s nulou na začiatku pre číslice menšie ako desať (01, 02, 03, ..., 10);
- veľké latinské písmená (A, B, C, ...);
- malé latinské písmená (a, b, c, ...);
- Rímske číslice veľkými písmenami (I, II, III, ...);
- rímske číslice s malými písmenami (i, ii, iii, ...);
- arménske číslovanie;
- Gruzínske číslovanie.
- . Hodnota je akékoľvek kladné celé číslo. Nezáleží na tom, aký typ číslovania je nastavený, aj keď sa ako zoznam používajú latinské písmená. Ak sa na zoznam použijú atribúty start aj value, potom druhý má prednosť a číslovanie začína od čísla určeného hodnotou , ako je uvedené v príklade 1.
Príklad 1 - Zmena číslovania zoznamu
zoznamy - O svoje pracovisko by ste sa mali dobre starať.
- Osvetlenie v miestnosti nastavte tak, aby bol zdroj svetla na boku alebo za operátorom.
- Aby ste predišli zdravotným komplikáciám, odporúča sa vybrať stoličku s mäkkým sedadlom.
Prvý prvok zoznamu v tomto príklade bude začínať rímskou číslicou IV, keďže je zadaný atribút start="4", potom číslom V a poslednému prvku, mimo poradia, je priradené číslo X (obr. 1).
Ryža. 1. Rímske číslice v zozname
Písanie čísel
Číslovaný zoznam má štandardne určitý tvar: najprv je číslo, potom bodka a potom sa zobrazí text oddelený medzerou. Táto forma písania je vizuálna a pohodlná, ale niektorí vývojári uprednostňujú iný spôsob číslovania zoznamov. Konkrétne, nahradiť bodku uzatváracou konzolou, ako je znázornené na obr. 2 alebo niečo podobné.
Ryža. 2. Typ číslovaného zoznamu so zátvorkami
Štýly vám umožňujú zmeniť číslovanie zoznamov pomocou vlastností obsahu a protiprírastku. Najprv je potrebné nastaviť volič ol na counter-reset : item , je to potrebné, aby číslovanie v každom novom zozname začalo odznova. V opačnom prípade bude číslovanie pokračovať a namiesto 1,2,3 uvidíte 5,6,7. Hodnota položky je jedinečný identifikátor počítadla, vyberáme si ju sami. Ďalej musíte skryť pôvodné značky prostredníctvom vlastnosti štýlu typu list s hodnotou none .
Vlastnosť content zvyčajne funguje v spojení s pseudoprvkami ::after a ::before. Takže konštrukcia li::before hovorí, že pred každým prvkom zoznamu musí byť pridaný nejaký obsah (príklad 2).
Príklad 2. Vytvorenie vlastného číslovania
Li::before ( content: counter(item) ") "; /* Pridať k číslam zátvorky */ counter-increment: item; /* Nastaviť názov počítadla */ )
Vlastnosť content s hodnotou counter(item) vypíše číslo; pridaním zátvorky, ako je uvedené v tomto príklade, dostaneme požadovaný typ číslovania. na zvýšenie čísla zoznamu o jeden je potrebný protiprírastok. Všimnite si, že v celom texte sa používa rovnaký identifikátor s názvom item . Konečný kód je uvedený v príklade 3.
Príklad 3 - Zmena zobrazenia zoznamu
zoznamy - Prvý
- Po druhé
- Po tretie
- Po štvrté
Vyššie uvedeným spôsobom môžete vytvoriť ľubovoľný očíslovaný zoznam, napríklad zobrať číslo v hranatých zátvorkách, v tomto prípade sa v štýloch zmení iba jeden riadok.
Obsah: "[" counter(item) "] ";
Zoznam s ruskými písmenami
Existuje očíslovaný zoznam s latinskými písmenami, ale v zozname nie sú žiadne ruské písmená. Môžu byť pridané umelo pomocou vyššie uvedenej techniky. Keďže číslovanie prebieha cez štýly, samotný zoznam zostáva pôvodný, len sa doň pridá vybraná trieda, nazvime ju cyrilou (príklad 4).
Príklad 4. Kód na vytvorenie zoznamu
- Jeden
- Dva
- Tri
Písmená sa pridávajú pomocou pseudoprvku ::before a vlastnosti content. Keďže každý riadok musí mať svoje písmeno, použijeme pseudotriedu :nth-child(1), číslo písmena sa píše v zátvorke. Prvé písmeno je samozrejme A, druhé B, tretie C atď.
Príklad 5 Použitie pseudotriedy n-tého dieťaťa
Cyrilické li:nth-child(1)::before (obsah: "a)"; ) .cyrilika li:n-té-dieťa(2)::pred (obsah: "b)"; ) .cyrilika li:nth-child(3)::before (obsah: "do)"; )
V tomto príklade za každým písmenom nasleduje zátvorka, všetky písmená sú malé. Môžete si definovať vlastný druh číslovania zoznamov, ktorý môže napríklad obsahovať veľké písmená s bodkou, s jednou alebo dvoma zátvorkami alebo iba písmenami. Na rozdiel od štandardného číslovania si tu môžeme robiť, čo chceme. Zoznam desiatich písmen by mal stačiť takmer na všetky situácie, no ak sa zrazu ukáže, že to nestačí, nič nám nebráni v tom, aby sme náš zoznam rozšírili aspoň o všetky písmená ruskej abecedy.
Nakoniec upravíme zarovnanie a polohu písmen, prípadne určíme veľkosť písma, farbu a ďalšie parametre (príklad 6).
Príklad 6. Zoznam s ruskými písmenami
Zoznam - Boršč
- Kotlety zo šťuky
- Kulebyak
- Huby v kyslej smotane
- Palacinky s kaviárom
- Kvas
Výsledok tohto príkladu je znázornený na obr. 3.
Zoznamy sú dôležitou súčasťou obsahu, pretože pomáhajú organizovať informácie. Text v zoznamoch je lepšie vnímateľný a ľahšie zapamätateľný.
Najjednoduchšie - pred každým jeho prvkom je značka - kruh, štvorec alebo kruh. Poradie prvkov v zozname s odrážkami nie je dôležité.
Na jeho vytvorenie potrebujete použiť iba dve značky:
odrážkový zoznam - Kameň
- Nožnice
- Papier
V predvolenom nastavení sa ako značka zoznamu používa čierny kruh ( disk). Pridaním do značky
Od označenej sa líši tým, že je dôležité poradie prvkov v nej, a preto sa tu namiesto značky používajú po sebe idúce čísla alebo písmená. O poradie v zozname sa nemusíte starať: o túto úlohu sa postará prehliadač. Ak zmeníte zoznam (odstránite alebo pridáte prvok mimo poradia), prehliadač ho prepočíta a zobrazí správne.
Tagy sa používajú na vytváranie číslovaných zoznamov.
číslovaný zoznam - Kameň
- Nožnice
- Papier
Pretože to nie je vždy také jednoduché s očíslovanými zoznamami pre značku
1. typu. Tento atribút vám umožňuje číslovať zoznam nielen arabskými, ale aj rímskymi číslicami alebo latinskými písmenami rôzneho typu. typu podporuje hodnoty 1 (predvolené), a, A, i, I (skúste s nimi experimentovať sami).
2. začať. Číslovanie nemusí vždy začínať od jednotky. Tento atribút vám umožňuje nastaviť pôvodná hodnota- číslo prvého prvku zoznamu. V ňom môžete určiť, že zostava začína napríklad číslom 100 alebo písmenom K.
3. obrátené. Ak by zoznam nemal ísť od 1 do 10, ale od 10 do 1, musí sa použiť tento atribút. Ak je nastavené, číslovanie sa obráti.
Ak chcete nastaviť ľubovoľné číslo prvku v strede zoznamu, musíte použiť v značke
- Štyridsiaty piaty prvok po tridsiatom ôsmom
- - výrazová značka.
- - definičný štítok
- Deskriptor
- Základná jednotka značkovacieho jazyka, ktorú každý pozná ako „Tag“.
- Atribút
- Vlastnosť značky, ktorá to dáva pridané vlastnosti formátovanie textu.
- Označenie
- Jediný štítok, ktorý netreba zatvárať.
- Štrukturálne
- Pascal
- Oberon
- Limbo
- Objektovo orientovaný
- Java
- Funkčné
- Lisp
- Python
Z praktického hľadiska možno princípy zobrazovania prvkov odrážkového zoznamu aplikovať podobne ako pri číslovanom zozname. Ale vzhľadom na to, že máme čo do činenia s enumeráciou, existujú niektoré funkcie, o ktorých sa bude diskutovať ďalej.
Číslovanie zoznamu
Zoznam je možné začať ľubovoľným číslom; Na tento účel sa používa štartový atribút prvku
- alebo hodnota na prvku
Zmenou čísla jedného prvku v strede zoznamu zmeníte aj číslovanie všetkých prvkov nasledujúcich za ním – zostava bude začínať od hodnoty v atribúte value. Napríklad, ak ste prvku 18 priradili číslo 35, prvky nasledujúce za ním nebudú mať čísla 19, 20, 21, ale 36, 37, 38.
Zoznam definícií
Nie taký známy typ zoznamu, ako je uvedené vyššie. Pozostáva z pojmov a ich definícií. Vytvorené pomocou značiek:
Rozsahom definičných zoznamov sú glosáre, referenčné knihy, testy, slovníky a iné rozsiahle zoznamy typu "Termín - vysvetlenie".
Tu je príklad zoznamu definícií:
Zoznam definícií 
Zoznam pozostávajúci zo zoznamov vnorených do seba. Môže obsahovať zoznamy odlišné typy. Zložitosť tvorby spočíva v dodržaní správneho vnorenia tagov, keďže vo viacúrovňovej štruktúre sa dá ľahko zmiasť.
Tu je príklad viacúrovňového zoznamu:
Viacúrovňový zoznam Programovacie jazyky sa delia na:
- ukazujúci na jednotlivé prvky zoznam, poskytujú výstup štandardných značiek položiek zoznamu.
Parameter COMPACT sa zapisuje bez hodnoty a slúži na to, aby prehliadaču oznámil, že daný zoznam má byť zobrazený v kompaktnej forme. Napríklad je možné zmenšiť písmo alebo medzery medzi riadkami zoznamu atď.
Poznámka
V súčasnosti je v tagu prítomný parameter COMPACT
- neovplyvňuje zobrazenie zoznamov poprednými prehliadačmi. Preto aplikácia daný parameter nezmyselné, najmä preto, že jeho používanie je zavrhované špecifikáciou HTML 4.0.
Parameter TYPE môže nadobúdať nasledujúce hodnoty: disk, kruh a štvorec. Tento parameter sa používa na vynútenie zobrazenia značiek zoznamu. Presný vzhľad značky bude závisieť od prehliadača, ktorý používate. Typické možnosti zobrazenia sú nasledovné:
TYP = disk - značky sú zobrazené ako plné kruhy; TYP = kruh - značky sa zobrazujú ako nevyplnené kruhy; TYP = štvorec - značky sa zobrazujú ako vyplnené štvorce. Príklad nahrávania:
- .
Predvolená hodnota je TYPE = disk. Pre vnorené zoznamy s odrážkami je predvolená hodnota disk na prvej úrovni, kruh na druhej úrovni a štvorec na tretej úrovni. Presne toto sa robí v najnovšie verzie Prehliadače Netscape a internet Explorer. Upozorňujeme, že iné prehliadače môžu značky zobrazovať inak. Napríklad v špecifikácii HTML 4.0 je typ značky zobrazený, keď je TYPE = square špecifikovaný ako štvorcový obrys.
Parameter TYPE s rovnakými hodnotami možno použiť na určenie typu značiek pre jednotlivé položky zoznamu. Na tento účel je povolené zadať parameter TYPE s príslušnou hodnotou v značke prvku zoznamu
- .
V zozname s odrážkami na zvýraznenie jeho prvkov použite Špeciálne symboly, nazývané zoznamové značky (často nazývané bullets, čo je formálne vyjadrenie anglického výrazu bullet). Vzhľad značiek zoznamov určuje prehliadač a pri vytváraní vnorených zoznamov prehliadače automaticky diverzifikujú vzhľad značiek rôznych úrovní vnorenia.
značky
- a
Ak chcete vytvoriť zoznam s odrážkami, musíte použiť kontajnerovú značku, v ktorej sa nachádzajú všetky prvky zoznamu. Značky úvodného a záverečného zoznamu poskytujú zalomenie riadku 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á položka zoznamu musí začínať značkou
Obrázok 1 zobrazuje výsledok príkladu, ktorý ilustruje vyššie uvedené vlastnosti zoznamu s odrážkami.
Ryža. 1. Pohľad na zoznam s odrážkami
Typ značky
Značky môžu mať jednu z troch foriem: vyplnený kruh (predvolené), prázdny kruh a štvorec. Ak chcete vybrať typ značky, použite vlastnosť list-style-type alebo všeobecný štýl zoznamu (príklad 1). Platia nasledujúce hodnoty:
Príklad 1 - Zmena vzhľadu značky
Príklad ukazuje, ako vytvoriť zoznam s odrážkami, ktorý používa ako ikonu odrážky malý jednofarebný štvorec. Aj keď je počet hodnôt obmedzený na tri, neznamená to, že máme k dispozícii iba tri typy markerov. Existuje mnoho špeciálnych znakov, ktoré môžu úspešne fungovať ako ikona značky. "Priskrutkujte" ich priamo na