nisfarm.ru

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í.

Různá pozice značek seznamu

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

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:

Hodnota seznamu vlastností - typ styluPopis
desetinná místastandardní arabské číslování, od jedné jednotky a dále: 1, 2, ..., 10, ...
desetinná přední nulapoužívá arabské číslice, hodnoty se skládají z jednoho znaku doplněného nevýznamnou nulou vlevo: 01, 02, ..., 10, ...

nižší-alfa

nižší-latin

malá písmena latinské abecedy: a, b, ..., e, ...

horní-alfa

horní latina

velká písmena dopisy latinské abeceda: A, B, ..., E, ...
nižší-řeckýŘecká abeceda, malá písmena
nižší-římskýŘímské číslice označené malými písmeny: i, ii, ..., vi, ...
horní-římskýŘímské číslice označené velkými písmeny: I, II, ..., VI, ...
arménskýArménský styl číslování
georgianGruzínské stylové číslování
hebrejštinaČíslování židovského stylu

hiragana

hiragana-iroha

různé japonské styly číslování, malá písmena

katakana

katakana-iroha

různé japonské styly číslování, velká písmena
cjk-ideografickévýchodní ideografické číslování

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.

Značky objednávkového seznamu

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:

Vlastní seznam tokenu

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.

Sdílet na sociálních sítích:

Podobné
© 2021 nisfarm.ru