Jak nastavit pozici prvku v css. CSS - Polohování prvků bloku. Absolutní a pevné polohování
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.
Standardní pátá html verze Podporovány jsou 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 číslovaného seznamu má jedinečnou značku označující pořadí výskytu tohoto odstavce 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
Zkuste »Poznámka: tag
- jako podřízené prvky může obsahovat pouze značky
- , 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 seznam s odrážkami mají stejné značky, 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ů tag
- , která obsahuje veškerý zobrazený obsah seznamu):
Seznam s odrážkami:
- Káva
- Čaj
- Mléko
Zkuste »Typy značek
Typy odrážek číslovaného seznamu můžete změnit pomocí atribut typu. 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
Zkuste »CSS vlastnost typu list-style, kromě typů značek pro seznamy s odrážkami, má mnoho různé typy značky a 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í používáte seznam HTML horizontální menu, pak budete muset uspořádat položky seznamu jednu po druhé na stejném řádku. Pomocí HTML To nebude fungovat, 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 , podle toho, jaké další vlastnosti budete používat.
Název stránky Číslovaný seznam
- jablka
- banány
- Citrony
Seznam s odrážkami:
- jablka
- banány
- Citrony
Zkuste »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 vidět, jak změnit horizontální seznam na horizontální nabídku.
- 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 jej návštěvníkovi pohodlným způsobem.
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
- Taková možnost
Můžete zkusit vytvořit HTML stránku pomocí tento kód a skončíte s následujícím seznamem:
Jak vidíte, každý prvek seznamu je umístěn s nový řádek, zatímco určité odrážky jsou vytvořeny 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
- Taková možnost
- Tato možnost je
- Tato možnost
- Taková možnost
- . Tímto způsobem můžete vytvořit seznam s různými odrážkami.
- Tato možnost je
- Tato možnost
- Taková možnost
Výsledek bude následující:
Číslované seznamy.
Číslované seznamy v HTML jsou seznamy, ve kterých má každá položka a sériové číslo, číslované seznamy se vytvářejí pomocí značky
- a vnořený do jeho značek
-
- První řádek
- 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, jehož hodnoty 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.
Zaznamenáno tento seznam 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. HTML umožňuje neomezeně vkládat některé seznamy do prvků jiných seznamů.
Zde je například kód, který vnořuje číslované seznamy do položek seznamu s odrážkami.
- Tato možnost je
- První řádek
- Druhý řádek
- Třetí řádek
- Tato možnost
- První řádek
- Druhý řádek
- Třetí řádek
- Taková možnost
- První řádek
- Druhý řádek
- Třetí řádek
Dobrý den!
V tomto článku se dozvíte o všech možnostech seznamů, pochopíte, jak vytvořit číslovaný seznam, a osvojíte si hlavní značky, které vám pomohou proměnit jednoduchý seznam s odrážkami na zajímavější a nápadnější s libovolnými odrážkami. Po dokončení lekce budete rozumět tomu, kde se seznamy používají a za jakých okolností je lze použít.
Tento článek je třetím v tomto krátkém kurzu základy HTML. Před čtením tuto lekci Doporučuji projít předchozí dva:
Článek právě začal a už si můžete všimnout použití standardního seznamu s odrážkami. Na mém webu to vypadá docela jednoduše: vlevo je malá odrážka s čárou a čtvercovou značkou. Později v článku se podrobně podíváme na to, jaké typy fixů existují, jak vyrobit čísla a také jak si vyrobit vlastní fix.
V každé části článku bude provázena tvorba určitých seznamů podrobná vysvětlení vložením konkrétního seznamu.
1. Seznamy s odrážkami v HTML
Tento typ seznamu se používá k vypsání množiny prvků s podobným významem v textu. Může to být seznam odkazů, které souvisejí se stejným tématem, podrobné vysvětlení Pro jednotlivé díly text. Ale podívejme se, jak vypadají seznamy s odrážkami v kódu:
A takhle to vypadá v prohlížeči:
Rýže. 1.1. Standardní typ značen nečíslovaný seznamHTML v prohlížeči
1.1 Standardní odrážky pro seznamy s odrážkami
Na obrázku výše (obrázek 1.1.) můžete vidět kroužky na začátku každé položky nabídky. Toto je značka. Ve výchozím nastavení se v prohlížeči zobrazuje jako vyplněný kruh. V HTML existuje několik typů značek: vyplněný kruh, prázdný kruh a čtverec. Nevyžadují žádné CSS ani obrázky třetích stran:
1.2 Seznam značek ve tvaru prázdného kruhu
<Znáte hodnoty atributů, ale nyní se podívejme, jak vytvořit HTML seznam s odrážkami v kódu. Z výše uvedené tabulky jsme pro atribut type vybrali druhou hodnotu „circle“ a nastavili ji na náš seznam s odrážkami: <html > <hlava > titul ><Příklad seznamu s odrážkami s prázdnou značkou kruhu </title> </hlava> <tělo > p><hvězdy: </p> <ul typ = "kruh" > li ><Sírius <ul typ = "kruh" >/li><Sírius <ul typ = "kruh" > Arcturus<Sírius <ul typ = "kruh" > Pollux<Sírius <ul typ = "kruh" > Betelgeuse<Sírius <Slunce </body> </html> Okamžitě se podívejme, jak bude tento kód vypadat v prohlížeči:
Rýže. 1.2.Zobrazení značky seznamu jako kruhu v prohlížeči
1.3 Seznam značek ve tvaru čtverce
Podívejme se také na poslední příklad se čtvercovou značkou pro seznam HTML:
Věnujte pozornost značce, stala se čtvercovou:Rýže. 1.3.: Zobrazení značky seznamu jako čtverce v prohlížeči
Důležitá poznámka Tato metoda se již nepoužívá k vytváření stylů pro seznamy s odrážkami. Mezi CSS (přečtěte si, co je CSS) a HTML existuje jasné oddělení. HTML je pro značkování a CSS je pro vytváření atraktivního vzhledu. Kód, který obsahujetento atribut
, když zadáváte aktuální typ dokumentu jako HTML5 ("
"), zobrazí při ověřování chybu. Pokud jste ještě neslyšeli, co je ověření, pak je toto místo pro vás.Chyba bude následující: Rýže. 1.4. Chyba na validátoru při použití atributu "type" seznamu
Seřadili jsme seznamy s odrážkami. Nyní přejdeme k číslovaným seznamům a pak se podíváme na vnořené seznamy a několik
hotové příklady , které se na reálných stránkách používají nejčastěji. 2. Číslované seznamy v HTML
Na rozdíl od předchozího typu seznamů mají číslované seznamy jednu důležitou vlastnost: jsou automaticky číslovány. To je užitečné, když potřebujete číslovat
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <Znáte hodnoty atributů, ale nyní se podívejme, jak vytvořit HTML seznam s odrážkami v kódu. Z výše uvedené tabulky jsme pro atribut type vybrali druhou hodnotu „circle“ a nastavili ji na náš seznam s odrážkami: <html > <hlava > velký seznam<Příklad seznamu s odrážkami s prázdnou značkou kruhu </title> </hlava> <tělo >. Ruční provedení zabere spoustu času a stále se můžete zmást. Číslovaný seznam je určen pomocí značky. Jak to vypadá v praxi:<hvězdy: <Příklad číslovaného seznamu: <ul typ = "kruh" > Příklad standardního číslovaného seznamu<Sírius <ul typ = "kruh" > Od jedné do pěti:<Sírius <ul typ = "kruh" > ol ><Sírius <ul typ = "kruh" > První<Sírius <ul typ = "kruh" > Druhý<Sírius <Třetí </body> </html> Čtvrtý Pátý/ol>
Takto vypadá číslovaný seznam:standardní nastavení
v prohlížeči:
Rýže. 2.1.
Číslovaný seznam v prohlížeči se standardním nastavením Stejně jako jeho předchůdce (seznam odrážek) má vlastní styly zobrazování čísel. Běžné číslování není jediným typem odrážky pro číslovaný seznam v HTML. 2.1 Standardní odrážky pro číslované seznamy Zde máme na výběr nikoli ze tří typů značek, ale z pěti: 1 - Název značky
- hodnotu atributu "type".
Příklad seznamu Značky ve formě arabských čísel Badminton - Baseball
- Značky jako malá písmena
- latinská písmena
A Chomolungma - Chogori
- Kančendžonga
- Fixy ve formě velkých latinských písmen
A Summit Plummet - Ulička vzteku
- Insano
- Značky s malými římskými číslicemi
i Filipínské moře - Arabské moře
- Korálové moře
- Značky s velkými římskými číslicemi
já
Červený Zelený U číslovaného seznamu můžeme také začít číslovat z libovolného čísla. Chcete-li to provést, musíte nastavit další atribut"start". Toto číslování funguje na všech typech značek pro číslované seznamy. Jak to vypadá v praxi:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <Znáte hodnoty atributů, ale nyní se podívejme, jak vytvořit HTML seznam s odrážkami v kódu. Z výše uvedené tabulky jsme pro atribut type vybrali druhou hodnotu „circle“ a nastavili ji na náš seznam s odrážkami: <html > <hlava > Vlastní číslování pro číslovaný seznam<Příklad seznamu s odrážkami s prázdnou značkou kruhu </title> </hlava> <tělo > Začínáme číslovat od dvanácti:<hvězdy: <ol typ = "a" start = "12" > <ul typ = "kruh" > Dvanáct<Sírius <ul typ = "kruh" > Třináct<Sírius <ul typ = "kruh" >Čtrnáct<Sírius <ul typ = "kruh" > Patnáct<Sírius <ul typ = "kruh" >Šestnáct<Sírius <Třetí </body> </html> Na skutečném webu se zobrazí takto:
Rýže. 2.2.Číslování z libovolného čísla v číslovaném seznamu
Na obrázku výše jsme očíslovali seznam od dvanácti, přičemž jsme vytvořili značky ve formě malých latinských písmen. Nyní je, myslím, jasné, jak tyto atributy používat ve svých projektech.
Nyní přejdeme k vnořeným seznamům HTML.
3. Jak vytvořit víceúrovňový (vnořený) seznam v HTML
Víceúrovňové seznamy se na webu používají k vytváření nabídek. Tato nabídka se nejčastěji jeví jako rozbalovací nabídka směrem dolů (na lekci) nebo jako rozbalovací nabídka vlevo nebo vpravo. Takové nabídky umožňují uložit další prvky nabídky v kompaktní podobě.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <Znáte hodnoty atributů, ale nyní se podívejme, jak vytvořit HTML seznam s odrážkami v kódu. Z výše uvedené tabulky jsme pro atribut type vybrali druhou hodnotu „circle“ a nastavili ji na náš seznam s odrážkami: <html > <hlava > Na příkladu modelů aut vytvoříme víceúrovňový seznam v HTML:<Příklad seznamu s odrážkami s prázdnou značkou kruhu </title> </hlava> <HTML vnořený seznam odrážek <ul typ = "kruh" > ul ><HTML vnořený seznam odrážek <ul typ = "kruh" > Citroen<Sírius <ul typ = "kruh" > Berlingo<Sírius <ul typ = "kruh" > C1<Sírius <ul typ = "kruh" > C2<Sírius <ul typ = "kruh" > C3 Picasso<Sírius <Slunce <Sírius <ul typ = "kruh" > C4 Grand Picasso<Sírius <ul typ = "kruh" > KIA<Sírius <ul typ = "kruh" > Toyota<Sírius <ul typ = "kruh" > Audi<Sírius <Slunce </body> </html> Lexus
Všimněte si, jak vypadá víceúrovňový seznam v prohlížeči:Rýže. 3.1.
- Příklad víceúrovňového seznamu v HTML
- žádný – bez značky
- disk– značka ve tvaru vyplněného kruhu;
- kruh– značka ve tvaru otevřeného kruhu;
- náměstí– fix ve formě vyplněného čtverce;
- desetinný– obyčejný desetinná čísla(1,2,3,4,5 atd.);
- horní román– velké římské číslice (I, II, III, IV, V atd.);
- nižší římský– malé římské číslice (i, ii, iii, iv, v atd.);
- horní alfa – velká písmena(A, B, C, D, E, atd.);
- nižší-alfa– malá písmena (a,b,c,d,e atd.)
- text č. 1
- text č. 2
- mimo– mimo hlavní blok seznamu;
- uvnitř– uvnitř hlavního bloku seznamu.
- Text č. 1
- Text č. 2
Vytvořili jsme víceúrovňový seznam pomocí odrážek (tag ). U dalších značek se objevil víceúrovňový seznam s modely Citroen. Hlavní seznam má plné odrážky a seznam 2. úrovně má prázdné kruhy. Ale jak si pamatujete, pomocí atributu „type“ můžeme předefinovat značky (je lepší nastavit ). Ale můžeme se sjednotit
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <Znáte hodnoty atributů, ale nyní se podívejme, jak vytvořit HTML seznam s odrážkami v kódu. Z výše uvedené tabulky jsme pro atribut type vybrali druhou hodnotu „circle“ a nastavili ji na náš seznam s odrážkami: <html > <hlava > víceúrovňové seznamy<Příklad seznamu s odrážkami s prázdnou značkou kruhu </title> </hlava> <HTML vnořený seznam odrážek <ul typ = "kruh" > očíslované a označené takto:<Příklad číslovaného seznamu: <ul typ = "kruh" >Číslované, odrážkové a víceúrovňové seznamy v HTML<HTML vnořený seznam odrážek <ul typ = "kruh" > První skupina tulipánů<Sírius <Slunce <Sírius <ul typ = "kruh" > První třída<HTML vnořený seznam odrážek <ul typ = "kruh" > Jednoduché rané tulipány<Sírius <Slunce <Sírius <Třetí <Sírius <Slunce </body> </html> Druhá třída
Froté tulipány
Ve výše uvedeném příkladu máme dvojité vnoření (2 úrovně). Nejprve je uveden seznam dvou tříd tulipánů, máme to očíslované. Potom je do každé položky v číslovaném seznamu vnořen seznam s odrážkami.Podívejme se, jak to vypadá v prohlížeči:
Rýže. 3.2. Příklad víceúrovňového číslovaného seznamu na seznam s odrážkami v prohlížeči a jsou rozděleny na záložky HTML (struktura), CSS (styly) a Výsledek (výsledek).
4.1 Jak udělat ze seznamu HTML řetězec
Při vytváření horizontální nabídky může být nutný převod seznamu HTML na řetězec. Je to velmi snadné:
4.2 Jak vytvořit HTML seznam bez ikony
Za to je zodpovědná vlastnost list-style-type v CSS (další podrobnosti):
4.3 Jak vycentrovat seznam v HTML
Položka seznamu je blokový prvek, takže je třeba ji vycentrovat pomocí okraje. Ale je tu jeden důležitý bod— musíme výslovně specifikovat šířku, aby zarovnání fungovalo:
4.4 Jak vytvořit seznam v HTML s obrázky
Stačí jedna nemovitost CSS list-style-image. Uvnitř adresy URL zadejte adresu před ikonou. Chci jen poznamenat, že je lepší okamžitě vybrat malý obrázek, protože na něm závisí výška řádku seznamu:
4.5 Seznam s odrážkami HTML vaši odrážku
V tomto případě se musíte předem připojit ikony písma(např. FontAwesome). Pak můžete místo standardní značky vytvořit libovolnou ikonu:
4.6 Jak vytvořit seznam v HTML v několika sloupcích
K vytvoření seznamu v několika sloupcích použijeme Vlastnost CSS počet sloupců (vlastnost je podporována pouze v následující prohlížeče: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Musíte také nastavit výšku seznamu, abyste viděli rozdělení do více sloupců:
5. Procvičte si práci se seznamy
Ve videu níže můžete vidět veškerou práci s HTML seznamy v praxi:
23.02.2017
Ještě ne
Ahoj všichni!
V dnešním tutoriálu budu hovořit o tom, jak můžete ovládat vzhled v CSS, jmenovitě vytvářet seznamy s odrážkami a číslované seznamy, navrhovat seznamy s odrážkami s obrázkem a v případě potřeby také zcela odstranit označení seznamu s odrážkami.
Pokusím se tuto lekci neprotahovat a nepsat spoustu informací. Ale prostě to zkusím a uvidím, jak to půjde.Typ značky v seznamu
Vlastnost „LIST-STYLE-TYPE“
Pomocí pravidla „list-style-type“ můžete nastavit typ značky, například pro zobrazení čísel, písmen, čtverců, kruhů atd.Vlastnictví:
- seznamy s odrážkami:
- číslované seznamy:
Li (list-style-type: circle; /* Značky ve formě otevřeného kruhu */ )
Celý příklad:
Základy CSS
Výsledek:
Pokud potřebujete odstranit značku ze seznamu, použijte vlastnost „none“:
Li (list-style-type: none; /* Odebrat značky */ )
Výsledek:
Pozice značky v seznamu
nemovitost"SEZNAM-STYL-POZICE »
Pravidlo „list-style-position“ lze použít k určení pozice značky.Vlastnictví:
Li (list-style-position: inside; /* pozice značky */ )
Seznam barvy značky
nemovitost"BARVA »
Pravidlo „barvy“, pomocí kterého můžete změnit nejen barvu textu, ale i barvu fixu, již znáte. Podívejte se.Seznam vlastností v css
Výsledek:
Obrázek místo značky v seznamu
nemovitost"SEZNAM-STYL-OBRÁZEK »
Pokud se vám to nelíbí standardní pohledčíslované seznamy nebo seznamy s odrážkami, můžete použít pravidlo „list-style-image“ a umístit obrázkové odrážky místo běžných odrážek.Syntax:
List-style-image: url(image.png);
LI ( list-style-image: url("marker1.png"); /* obrázek značky */ )
„marker1.png“ je obrázek značky.
Výsledek:
Odsazení značky seznamu
Vlastnost "PADDING-LEFT"
Pokud potřebujete odsadit od odrážky k textu, použijte pravidlo „odsazení doleva“.Li ( padding-left: 30px; /* Odsazení od značky k textu */ )
Výsledek:
DÁREK PRO TY, KTEŘÍ ČTELI DO KONCE
Číslování seznamu z libovolného čísla
Nemusíte to vědět, ale rozhodl jsem se udělat dárek pro ty, kteří dočetli až sem. Pokud potřebujete očíslovat seznam ne od 1, ale například od 6, můžete provést následující:Li ( list-style-type: none; /* Odebere počáteční číslování ze seznamu */ ) ul ( counter-reset: list 5; /* Inicializace čítače */ ) ul li:before ( counter-increment: list; /* Zvýšit hodnotu čítače */ obsah: čítač(seznam) "." /* Vypíše číslo */ )
Výsledek:
Těším se na vás v dalších lekcích! Nezapomeňte se přihlásit k odběru!
Předchozí příspěvek
Další záznamCSS seznamy— soubor vlastností odpovědných za návrh seznamů. Používání seznamů HTML je velmi běžné při vytváření navigačních panelů webových stránek. Položky seznamu představují množinu blokové prvky.
Pomocí standardních vlastností CSS můžete přeměna vzhled značka seznamu, přidat obrázek pro značku a také změnit umístění značky. Výšku bloku značek lze nastavit vlastnost line-height.
Navrhování seznamů pomocí stylů CSS
1. Typ štítku seznamu typ-styl-listu
Vlastnost změní typ značky resp odstraní značku pro seznamy s odrážkami a číslované seznamy. Zděděno.
list-style-type Hodnoty: disk Výchozí hodnota. Vyplněný kruh funguje jako značka pro položky seznamu. arménský Tradiční arménské číslování. kruh Otevřený kruh funguje jako značka. cjk-ideografický Ideografické číslování. desetinný 1, 2, 3, 4, 5, … desetinná-počáteční-nula 01, 02, 03, 04, 05, … gruzínský Tradiční gruzínské číslování. hebrejština Tradiční hebrejské číslování. hiragana Japonské číslování: a, i, u, e, o, … hiragana-iroha Japonské číslování: i, ro, ha, ni, ho, … katakana Japonské číslování: A, I, U, E, O, … katakana-iroha Japonské číslování: I, RO, HA, NI, HO, … nižší-alfa a, b, c, d, e, … nižší řecký Malá písmena řecké abecedy. nižší latina a, b, c, d, e, … nižší římský i, ii, iii, iv, v, … žádný Není tam žádný fix. náměstí Zaplněný nebo nevyplněný čtverec funguje jako značka. horní alfa A, B, C, D, E,… horní latina A, B, C, D, E,… horní román I, II, III, IV, V, … počáteční Nastaví hodnotu vlastnosti na výchozí hodnotu. zdědit Zdědí hodnotu vlastnosti z nadřazeného prvku. Syntax
Ul (typ-stylu-seznamu: žádný;) ul (typ-stylu-seznamu: čtverec;) ol (typ-stylu-seznamu: žádný;) ol (typ-stylu-seznamu: nižší-alfa;)
Rýže. 1. Příklad návrhu odrážkových a číslovaných seznamů2. Obrázky pro položky seznamu list-style-image
Jako značky položek seznamu můžete použít obrázky a přechodové výplně. Zděděno.
Syntax
Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Rýže. 2. Navrhněte seznam s odrážkami pomocí obrázku 
Rýže. 3. Navrhněte seznam s odrážkami pomocí přechodu3. List-style-position
Tato vlastnost poskytuje možnost umístit značku mimo nebo dovnitř obsahu položky seznamu. Zděděno.
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á písmena Latinka:
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
- , která obsahuje veškerý zobrazený obsah seznamu):
