Pravidla CSS pro přizpůsobení vzhledu seznamu na html stránce. Vlastnost stylu seznamu (typ, obrázek, pozice)

Dobrý den, milí čtenáři tohoto blogu. Dnes bude další článek o vlastnostech kaskádových stylů. Zaměří se na návrh pomocí pravidel CSS.

Obecně platí, že seznamy stojí mimo prvky bloku. To je způsobeno tím, že obsahují odrážky a číslování, které umísťuje samotný prohlížeč.

Vlastnost stylu seznamu - návrh seznamu na html stránce

V jazyce CSS existují tři vlastnosti začínající stylem list-style, které jsou zodpovědné za návrh seznamů s odrážkami a číslovaných seznamů. Navíc je zde také předem připravené pravidlo ve stylu seznamu, které umožňuje snížit množství kódu.

Všechny tyto vlastnosti lze využít pro obojí html prvky li a pro prvky ul a ol. Jediný rozdíl je v tom, že pokud jsou pravidla napsána pro konkrétní hodnotu seznamu li, pak se použije pouze na ni. A pokud jsou stejná pravidla css napsána pro kontejnery ul nebo ul, pak budou aplikována na všechny prvky li obsažené v těchto kontejnerech.

Začněme atributem list-style-type, která nastavuje typ značek nebo číslování pro položky seznamu:

Jak vidíte, vlastnost list-style-type má mnoho dostupných hodnot, které mohou specifikovat jak typ značky, tak i různé druhyčíslování.

disk - značka ve formě černého kruhu (výchozí hodnota pro seznamy s odrážkami).
kruh - značka v podobě nevyplněného kruhu.
čtverec - značka ve tvaru čtverce. V závislosti na prohlížeči může být světlý nebo tmavý.
desítkové - číslování Arabské číslice(výchozí pro číslované seznamy).
decimal-leading-zero - číslování arabskými číslicemi od 01 do 99 s úvodní nulou.
nižší římské - číslování malými římskými číslicemi.
horní římské - číslování velkými římskými číslicemi.
nižší řecký - číslování malými řeckými písmeny.
nižší alfa a nižší latinka - číslování malými latinskými písmeny.
horní-alfa a horní-latinka - číslování velkými latinskými písmeny.
arménština - číslování pomocí tradičních arménských číslic.
gruzínské - číslování pomocí tradičních gruzínských číslic.
žádné - značení a číslování se vůbec neprovede.

Takto budou vypadat položky seznamu v prohlížeči s různými hodnotami typu seznamu:

Na pomocí CSS stylů, nezáleží na tom, který prvek (OL nebo UL) se použije k vytvoření seznamu. OL a UL se liší pouze výchozím chováním a pomocí vlastnosti list-style-type můžete snadno změnit jeden druh seznamu na jiný.

Atribut stylu list-style-image umožňuje nastavit jako popisovač seznam položek grafický obrázek . Při použití atributu list-style-image je hodnota atributu list-style-type ignorována:

list-style-image: none|<интернет-адрес файла изображения>|zdědit

Význam žádný odebere značku obrázku a nastaví ji na normální, nikoli na grafiku. Toto je výchozí chování.

Když zadáte adresu souboru obrázku, obrázek se vloží na místo značky. Stejně jako při použití můžete jako adresu obrázku použít absolutní i relativní adresy. Pokud prohlížeč nemůže načíst obrázek, použije se výchozí značka nebo číslování nebo to, co je specifikováno ve vlastnosti v list-style-type.

Příklad seznamu s obrázkem jako značkou:

první položka seznamu;

druhá položka seznamu;

třetí položka na seznamu.

A takhle to vypadá:

první položka seznamu;
druhá položka seznamu;
třetí položka na seznamu.

Je jasné, že při výběru obrázku jako značky je lepší vybrat malý obrázek.

A poslední CSS vlastnost z řady list-style je list-style-position což umožňuje určit umístění odrážky nebo číslování v položce seznamu. Pro hodnotu mohou být dvě možnosti:

list-style-position: inside|outside

V případě hodnoty uvnitř značka nebo číslování je umístěno jakoby uvnitř seznamu a v případě mimo mimo li prvky. Výchozí hodnota je venku a značka se přesune ven.

Příklad seznamu s různými hodnotami list-style-position:

v prvním odstavci je vše standardně;
ve druhém odstavci je list-style-position nastavena na inside. V tomto případě si uvědomte, že druhý řádek je umístěn v jedné rovině se značkou;
v tomto bodě se pozice stylu seznamu rovná vnějšku.

Prefabrikované pravidlo ve stylu seznamu CSS

Následující vlastnost CSS list-style je prefabrikátem pro stylování seznamů. Umožňuje zapsat všechna tři výše popsaná pravidla CSS do jednoho jediného. Pořadí zadávání hodnot v něm může být libovolné a parametry, které nezadáte ve stylu seznamu, budou ve výchozím nastavení převzaty prohlížečem.

Hodnoty v pravidle kompilace ve stylu seznamu by měly být odděleny mezerami:

list-style: list-style-type list-style-image list-style-position;

Skutečné pravidlo CSS pro seznamy stylů může vypadat nějak takto:

list-style: circle url (//site/images/marker.png) venku;

Vlastnost list-style tedy umožňuje výrazně snížit množství kódu, protože místo tří pravidel stačí nastavit pouze jedno.

Jak bylo uvedeno výše, hodnoty lze zadat v libovolném pořadí a v jakémkoli množství. Tedy např. aby odstranit značky ze seznamu nabídky stačí napsat:

styl seznamu: žádný;

Totéž lze provést pomocí vlastnosti list-style-type:

list-style-type: none;

To je vše k příběhu o designu. html seznamy Zakončím kaskádovými styly. Dozvědět se o ostatních Vlastnosti CSS můžete si přečíst články ze sekce „“ a nezapomeňte se přihlásit k odběru aktualizací blogu. Uvidíme se znova!

Univerzální vlastnost, která umožňuje současně nastavit styl značky, její polohu a obrázek, který bude použit jako značka seznamu.

stručné informace

Označení

	Popis	Příklad
<тип>	Označuje typ hodnoty.	<размер>
A && B	Hodnoty musí být na výstupu v uvedeném pořadí.	<размер> && <цвет>
A \| B	Označuje, že musíte vybrat pouze jednu z navržených hodnot (A nebo B).	normální \| malokapitálky
A \|\| B	Každá hodnota může být použita samostatně nebo společně s ostatními v libovolném pořadí.	šířka \|\| počet
	Hodnoty skupin.	[ plodina \|\| přejít ]
*	Opakujte nula nebo vícekrát.	[,<время>]*
+	Opakujte jednou nebo vícekrát.	<число>+
?	Zadaný typ, slovo nebo skupina je volitelný.	vložka?
(A, B)	Opakujte alespoň A, ale ne více než Bkrát.	<радиус>{1,4}
#	Opakujte jednou nebo vícekrát odděleně čárkami.	<время>#

Hodnoty

Jakákoli kombinace tří hodnot, které určují styl značek, jsou odděleny mezerou. Kombinace hodnot musí následovat v daném pořadí: nejprve je typ značky, poté pozice a obrázek. Žádná z hodnot není povinná, takže nepoužité lze vynechat.

Příklad

ve stylu seznamu

Mnohorozměrný polynom
Normální absolutně konvergentní řady
Integrál funkce
Kolineární extrém funkce

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

Rýže. 1. Použití vlastnosti list-style

Objektový model

Objekt.style.listStyle

Specifikace

Každá specifikace prochází několika fázemi schvalování.

Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
Koncept ( Návrh specifikace) - první verze návrhu normy.

Prohlížeče

V tabulce prohlížeče jsou použity následující zápisy.

Materiál z adresáře webových jazyků

Použité hodnoty

sStyle Čára, který může definovat a nabývat jednu až tři z následujících hodnot:

Tato vlastnost se čte/zapisuje pro všechny objekty. Výchozí hodnota je disk mimo žádný. Atribut kaskádových stylů (CSS) se dědí.

Poznámky

Vlastnictví listStyle je univerzální složená vlastnost. Když je nastaven typ i obrázek, má přednost hodnota obrázku (obrázek se zobrazí místo jedné ze standardních odrážek seznamu), pokud není listStyleImage nastaveno na žádný nebo odkaz ( URL) na obrázku je nainstalován nesprávně nebo je zastaralý.

Vlastnictví listStyle platí také pro všechny prvky nastavené na položka seznamu pro majetek Zobrazit. Chcete-li nastavit, aby se značka seznamu zobrazovala jako tučné tečky, musíte podrobně specifikovat vlastnost margin nebo nastavit hodnotu uvnitř pro vlastnost listStylePosition na těchto prvcích.

Hodnoty majetku listStyle lze popsat v libovolném pořadí. Musí být odděleny mezerou.

Příklady

Následující příklady ilustrují použití nemovitosti listStyle a atribut ve stylu seznamu pro nastavení stylu seznamu.

Příklad používá třídy ul A UL.kompaktní, a také atribut ve stylu seznamu specifikovat dva neuspořádané seznamy. Pro třídu UL.kompaktní nahradit výkres popsaný v ul, musíte nastavit hodnotu žádný pro atribut list-style-image.

Druhý příklad používá vlastnost listStyle. Pokud obrázek určený pro seznam není k dispozici, použije se značka dutý kruh(prázdný kruh).

Třetí příklad ukazuje, že vlastnost listStyle použitelné pro prvky, které mají vlastnost Zobrazit nabývá hodnoty položka seznamu.

HTML reference HTML lekce Videokurzy o tvorbě webových stránek

Vlastnost LIST-STYLE

Vlastnictví	Hodnoty	Atd*	Hc*
ve stylu seznamu	[list-style-image; list-style-position; list-style-type ], zdědit	*	+
list-style-type	disk , kruh, čtverec, desetinné číslo, desetinná nula na začátku, lowel-římský, horní-římský, lowel-latin, horní-latinka, arménský, gruzínský, žádný, zdědit	*	+
list-style-position	uvnitř, venku, zdědit	*	+
list-style-image	URL, žádné , dědit	*	+

Vlastnictví Styl seznamu— zkrácená forma vlastností psaní, které definují všechny styly značek pro prvky seznamu. Tyto vlastnosti platí pro číslované i odrážkové seznamy – je třeba je posuzovat samostatně. Krátká forma zápisu nesmí obsahovat žádnou individuální vlastnost, ale musí být dodrženo pořadí, ve kterém jsou napsány: typ značky - její poloha - cesta k obrázku.

Oblast použití*: seznam prvků a všech ostatních, pro které má vlastnost hodnotu Zobrazit je položka seznamu.

Typ stylu seznamu

Soubory vlastností typ značky pro každý prvek seznamu. Typy odrážek se liší pro seznamy s odrážkami a číslované seznamy.

Hodnoty:

disk- bodová značka.
kruh- kruhová značka.
náměstí— čtvercová značka.
desetinný — Arabská čísla: 1, 2, 3 ….
desetinná-počáteční-nula- Arabská čísla začínající od nuly: 01, 02, 03 ... 09.
lowel-romance- Římské číslování malými písmeny.
horní román- Římské číslování velkými písmeny.
lowel-latinka— malá latinská písmena: a, b, c….
horní latina— velká latinská písmena: A, B, C….
arménský- Arménské číslování.
gruzínský- Gruzínské číslování.
žádný- zrušení.
zdědit

Příklad používá dva různé významy vlastnosti Typ stylu seznamu:

List-style-position

Vlastnost určuje umístění značky prvku. Značka je buď uvnitř prvku, nebo mimo něj.

Hodnoty:

uvnitř— značka je umístěna uvnitř prvku seznamu.
mimo— značka se přesune mimo textový blok.
zdědit— dědičnost od rodičovského prvku.

Příklad jasně ukazuje rozdíl mezi hodnotami uvnitř A mimo vlastnosti List-style-position:

Obrázek ve stylu seznamu

Vlastnost určuje cestu k obrázku, který bude sloužit jako značka pro prvek v číslovaném seznamu nebo seznamu s odrážkami. Umístění obrázku značky lze ovládat pomocí vlastnosti List-style-position.

Hodnoty:

URL— cesta ke grafickému souboru.
žádný— zruší obrázek značky, například pro nadřazený prvek.
zdědit— dědičnost od rodičovského prvku.

Ul (list-style-image: url(papka/find.png); list-style-position:inside;)

V příkladu jsme jako značku použili malý obrázek, který jasně demonstruje schopnosti nemovitosti Obrázek ve stylu seznamu:

Materiál z adresáře webových jazyků

Použité hodnoty

Čára

Tato vlastnost se čte/zapisuje pro všechny objekty kromě currentStyle (pouze pro čtení). Výchozí hodnota je žádný. Atribut kaskádových stylů (CSS) se dědí.

Poznámky

Vlastnictví listStyleImage platí pro všechny prvky, které mají okraj a Zobrazit:položka seznamu.

Když je obrázek k dispozici, nahradí obrázek značky nastavený na listStyleType .

Chcete-li zobrazit obrázek značky seznamu pro vlastnost okraj musí být nastaven na minimum 30 bodů.

Příklady

Následující příklady ilustrují použití nemovitosti listStyleImage a atribut list-style-image pro nastavení obrázku značky seznamu.

První příklad používá selektor ul a atribut list-style-image.

Druhý příklad používá vlastnost listStyleImage změnit styl značky, když dojde k události onmouseover.