Seznam návrhů: skupina vlastností ve stylu seznamu v CSS

Seznamy jsou důležitým prvkem webové stránky. Pomáhají strukturovat informace a prezentovat je uživatelsky přívětivou formou. Kromě toho se ve formě seznamů často zobrazují nabídky a navigační panely. Správa polohy a vzhledu značkovacího prvku umožňuje skupinu vlastností Styl seznamu CSS.

Seznam typů

Jsou zde uspořádané a neříděné seznamy. První značkou může být libovolný znak, který se nemění z bodu na bod, za druhé každý prvek seznamu má svůj vlastní znak, který určuje jeho polohu mezi ostatními.

V objednaných seznamech pro značení se obvykle používají čísla nebo písmena různých systémů a abeced.

V závislosti na stupni hnízdění, jednoúrovňové a víceúrovňových seznamů. Každá úroveň má často svůj vlastní značkovací prvek.

Použití seznamů při vytváření nabídek nebo navigačních panelů je doporučováno nejnovější verzí standardu HTML, protože tento prvek má významný sémantický význam.

Zobrazení v CSS

Každá položka je blokový kontejner se speciálním typem zobrazení: seznam-položka. Ve výchozím nastavení je tato hodnota nastavena pro prvky li nacházející se uvnitř kontejnerů ul a ol a před blokem poskytuje značku.

V případě potřeby lze tento typ zobrazení nastavit pro libovolný kontejner HTML. Nový štítek je stylován pomocí skupiny vlastností ve stylu CSS.

p {display: list-item-list-style-type: decimal-}

Všechny tři následující vlastnosti jsou děděny dětem, které mají zobrazeny: seznam-položka, a pokud je to nutné, vyžadují explicitní přepsání.

Poloha značky seznamu

První vlastností skupiny je pozice-list-pozice. Určuje, zda značka zůstane v textovém bloku nebo zda se z něj odstraní.

Vlastnost má jednu ze dvou hodnot:

• uvnitř,
• venku.

Rozdíl mezi nimi je zvláště patrný u víceřádkových položek.

.seznam1 {list-styl-pozice: mimo -}. list2 {list-styl-pozice: uvnitř-}

Výchozí hodnota je mimo a značka seznamu je přesunuta mimo krabici.

Vzhled značky

Druhá vlastnost - typ stylu seznamu - řídí typ značky a může trvat více než patnáct hodnot.

Ve výchozím nastavení používá číselný seznam arabské číslice a pro seznam s odrážkami se používá bod. Vlastnosti ve stylu seznamu v CSS vám umožňují změnit tato nastavení a dokonce dokonce odstranit značky.

Neurčené značky seznamu:

• disk - obyčejná tečka, plná barvy textu;
• kruh - prázdný kruh s tahy v barvě textu;
• čtverec - stínovaný čtverec.

U objednaných seznamů možností je mnohem více:

Některé hodnoty se navzájem duplikují, například nižší-alfa a nižší-Latin, a jiné nejsou podporovány množstvím prohlížečů a písem.

V případě potřeby mohou být na neurčené seznamy ul a naopak použity značky objednaného typu.

Samostatně vyberte hodnotu none, která skryje značky ze seznamu libovolného typu. Je to obzvláště užitečné při vytváření navigačních panelů, pokud si přejete zachovat sémantiku seznamu, ale značkovací prvky se nezachovávají do návrhu. Také vlastnost je často používána pro uživatelsky definovaný styl.

.seznam {typ-typ stylu: žádný;}

Vlastní značka

Namísto určitých typů značkovacích prvků CSS můžete použít libovolný obrázek. Chcete-li to provést, musíte předat odkaz na tuto vlastnost list-style-image.

Můžete dokonce použít obrázky ve formátu gif - animace se uloží. Je důležité si to pamatovat Styl seznamu CSS zobrazí obrázek v plné velikosti.

.seznam {seznam - styl - obrázek: url (image.jpg) - řádka - výška: 25px;}

Například:

Kromě obrazových souborů můžete použít funkce CSS radiálních nebo lineárních přechodů:

.seznam {list-style-image: radiální gradient (světle modrý, aqua, modrý) -}

Tvar značky je čtvercový.

Kombinovaná syntaxe

Všechny vlastnosti, které definují zobrazení seznamu značek, lze kombinovat ve stylu seznamu CSS.

seznam stylu: seznam typ-list-style-seznam-pozice-style-image

Specifické vlastnosti jsou uvedeny v mezerě, nemohou porušit jejich pořadí, ale některé z nich mohou být vynechány:

.seznam1 {style-list: none;} .list2 {list-style: upper-roman inside -} list3 {list style: inside url (/images/img1.jpg)

Chcete-li resetovat styly na původní parametry, existuje počáteční hodnota, kterou lze předat některému ze čtyř uvedených vlastností.

Pomocí skupiny vlastností CSS ve stylu stylů v kombinaci s cílovými efekty můžete vytvářet krásné jedinečné seznamy, které přitahují pozornost uživatele.