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

Takže v příkladu 1 je použit UL selektor a jsou pro něj nastaveny parametry stylu.

Seznamy

Výsledek tohoto příkladu je znázorněn na Obr. 1. Používají se čtvercové značky a jejich vnější umístění vzhledem k textu.

Rýže. 1. Zobrazení seznamu upravené pomocí stylů

Chcete-li nastavit svůj vlastní obrázek jako značku, použijte vlastnost list-style-image, jak je uvedeno v příkladu 2.

• Příklad 2: Použití obrázků jako značek
• Název by měl být kratší než tři řádky.
• Při pojmenovávání sekcí používejte již zavedené pojmy, jako je návštěvní kniha, chat, odkaz, domovská stránka a další.

Výsledek tohoto příkladu je znázorněn na Obr. 2. Jako značky se používá malý obrázek.

Rýže. 2. Obrázky jako značky

Některé příklady vytváření různých seznamů jsou uvedeny v tabulce. 2.

Dobrý den, milí čtenáři tohoto blogu. Dnes bude další článek v prasátku. Zaměří se na design s využitím pravidel kaskádových stylů. Zde je vše velmi jednoduché, ale přesto jsem se rozhodl tomuto tématu věnovat samostatný příspěvek.

O něco dříve se nám již podařilo zjistit, jak, jak a jak se s vámi dá pracovat. O něco dříve jsme se podrobně podívali na všechny druhy a jejich různé kombinace, abychom přesně označili ten prvek Html kódu, pro který bude potřeba použít určité vlastnosti stylu.

Styl seznamu - návrh seznamů v Html kódu

Ve značkovacím jazyce stylu tedy existují tři samostatná pravidla začínající stylem list-style, která slouží k přizpůsobení vzhledu seznamů (číslovaných nebo s odrážkami) v kódu webových dokumentů. Kromě toho existuje prefabrikované pravidlo ve stylu seznamu CSS, které umožňuje mírně snížit množství kódu. Ale nejdřív.

To, co nyní budeme uvažovat, lze použít jak pro prvky Html LI, tak pro prvky Ul a Ol (odrážky, resp. číslované seznamy). Jaký bude rozdíl v použití stylu seznamu pro tyto značky?

Ve skutečnosti můžete zjistit, zda je vlastnost zděděna nebo ne, na webu validátoru (přečtěte si o tom na uvedeném odkazu) v sekci věnované specifikaci kaskádových stylů. Ve sloupci „Zděděno“ se naproti zděděným pravidlům zobrazí „Ano“:

Začněme s list-style-type, který umožňuje nastavit typ označení pro jednotlivé prvky Html seznamu. Pro toto pravidlo platí následující hodnoty:

1. Žádné - nebude provedeno žádné označení (list-style-type:none; použito na tuto položku, a proto nemá značku)
2. Disk je vyplněný kruh (list-style-type:disc; pro tento řádek se používá)
3. Kruh - kruh jako značka
4. Čtverec - čtverec jako značka
5. Desetinné – arabské číslice (list-style-type:decimal;)
6. small-alpha — malá písmena latinky
7. horní-alfa - velká písmena latinky
8. malá římská — malá římská čísla
9. horní římské - římské číslice velkými písmeny

Co si myslíte, že bylo použito k vytvoření seznamu výše, Ul nebo Ol? Rychlá otázka. Ukazuje se, že to už není důležité, v tomto konkrétním případě jsem sice použil Ol, ale změnou na Ul zůstane vzhled stejný, protože je pro každý prvek nastaven vlastní hodnotou CSS typu stylu seznamu pravidlo.

Ve skutečnosti se Ul a Ol liší pouze svým výchozím chováním (značky Ul a čísla Ol). Ale pokud chcete, můžete snadno změnit jeden styl seznamu na jiný pomocí list-style-type. Písmo použité pro označení čísel nebo písmen je přesně stejné jako to, které jste definovali pro obsah značek LI. Například změnou barvy písma pro seznam změníme a barva značky:

1. Změnila se barva textu (typ-styl-seznamu:nižší-římská;barva:červená) a změnila se barva značky

Pojďme dále s následující vlastností CSS − list-style-position. Pomocí něj můžete nastavit polohu (umístění) oblasti se značkou. Existují pouze dvě možné hodnoty:

Tito. V podstatě v list-style-position označujeme, kde by měla být oblast se značkami umístěna - mimo prvek LI (vně) nebo uvnitř (uvnitř). Ve výchozím nastavení je oblast se značkou vyjmuta z ohraničení, tzn. použije se hodnota venku.

Podívejme se na to na příkladu. V prvním prvku seznamu konkrétně napíšu list-style-position:inside a uvidíme, co se stane:

1. Vše je zde výchozí
2. Takto bude vypadat umístění oblasti značky uvnitř. Upozorňujeme, že druhý řádek v tomto prvku a značka jsou umístěny na stejné úrovni
3. Vše je zde výchozí

List-style-image a prefab Css pravidlo

Dále máme List-style-image - umožňuje určit obrázek, který bude použit jako značka. Toto pravidlo je ve výchozím nastavení nastaveno na Žádný (tj. jako značka není použit žádný obrázek), ale funkci Url() můžete napsat zadáním cesty k obrázku, který bude následně fungovat jako značka v tomto seznamu:

Může to vypadat takto:

Obrázek ve stylu seznamu: url(https://site/images/list_star.png);

1. Vše je zde výchozí
2. Takto může vypadat použití obrázku jako značky. Je jasné, že si pro tento účel můžete vybrat vhodnější obrázek.
3. Například jako zde.

Jak si vzpomínáte, v článku o jsem řekl, že obrázky patří k vloženým prvkům (ve skutečnosti je to pro prohlížeč stejné písmeno, ale někdy velmi velké).

Zde obrázek nahrazuje značku (písmena nebo čísla). V tomto případě se výška řádku s prvkem seznamu zvýší, pokud jako značku vložíte velký obrázek (jak se stalo v druhém prvku výše uvedeného příkladu).

Ve funkcionalitě pro obrázek stylu seznamu můžete zadat oba obrázky. Pokud se obrázek nenačte, použije se výchozí značka nebo číslování nebo to, co je určeno v typu list-style-type pro tento prvek seznamu.

Chcete-li zapsat všechna tři výše popsaná pravidla CSS do jednoho jediného, ​​můžete použít styl seznamu, což je prefabrikované pravidlo pro navrhování seznamů. Na pořadí, ve kterém jsou hodnoty specifikovány, nezáleží. Hodnoty, které nezadáte ve stylu seznamu, budou prohlížečem explicitně interpretovány s výchozími hodnotami.

Kde mohu vidět výchozí hodnoty? Ano, je tam vše – ve specifikaci CSS validátoru W3C ve sloupci „Počáteční hodnota“ naproti vlastnostem, které vás zajímají:

Hodnoty jednotlivých vlastností v pravidle prefabrikátů ve stylu seznamu jsou odděleny mezerami. Místo, jak již bylo zmíněno, není důležité:

V praxi to může vypadat takto:

List-style:uvnitř horní římské adresy URL(https://site/images/list_star.png);

Hodnoty můžete použít v libovolném pořadí a v libovolném počtu (od jedné). Mimochodem, menu se na webech nejčastěji vytvářejí pomocí seznamů a zvyká se na to vlastnost List-style pro odstranění značek ze seznamů nabídek, které jsou tam zcela zbytečné:

List-style-type:none;

List-style:none;

Ať se vám daří! Brzy se uvidíme na stránkách blogu

Na další videa se můžete podívat na

Mohlo by vás to zajímat

Display (block, none, inline) in CSS – nastavte typ zobrazení Html prvků na webové stránce Jak nakonfigurovat střídající se barvu pozadí řádků tabulek, seznamů a dalších prvků Html na webu pomocí pseudotřídy nth-child
Plovoucí a jasné v CSS - nástroje pro rozložení bloků
K čemu slouží CSS, jak propojit kaskádové styly s Html dokumentem a základní syntaxe tohoto jazyka
Umístění pomocí Z-indexu a pravidla kurzoru CSS pro změnu kurzoru myši
Pozice (absolutní, relativní a pevná) – způsoby umístění prvků Html v CSS (pravidla vlevo, vpravo, nahoře a dole)
Vlastnosti CSS text-decoration, vertical-align, text-align, text-indent pro zdobení textu v Html

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

• žádný – bez značky

- seznamy s odrážkami:

• 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;

- číslované seznamy:

• desetinný– běžná desetinná čísla (1,2,3,4,5 atd.);
• horní římský– 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.)

Li (list-style-type: circle; /* Značky ve formě otevřeného kruhu */ )

Celý příklad:

• text č. 1
• text č. 2

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

• mimo– mimo hlavní blok seznamu;
• uvnitř– uvnitř hlavního bloku seznamu.

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.

• Text č. 1
• Text č. 2

Výsledek:

Obrázek místo značky v seznamu

nemovitost"SEZNAM-STYL-OBRÁZEK »
Pokud se vám nelíbí standardní vzhled číslovaných seznamů nebo seznamů s odrážkami, můžete použít pravidlo „list-style-image“ a místo běžných odrážek použít obrázkové odrážky.

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áznam

Syntax

Typ stylu seznamu: kruh | disk | čtverec | arménský | desetinné | desetinná-počáteční-nula |

gruzínský | nižší-alfa | spodní řečtina | nižší latina | nižší římský |

Opakujte alespoň A, ale ne více než Bkrát.

Opakujte jednou nebo vícekrát odděleně čárkami.

Hodnoty

Seznam s odrážkami

arménské Tradiční arménské číslování. desetinná arabská čísla (1, 2, 3, 4,...). desetinná-počáteční-nula

1. Arabská čísla s úvodní nulou pro číslice menší než deset (01, 02, 03,...). gruzínské Tradiční gruzínské číslování. malá písmena malá písmena latinky (a, b, c, d,...). malá řecká písmena Malá řecká písmena (α, β, γ, δ,...). nižší-latinská Tato hodnota je stejná jako nižší-alfa . nižší římské číslice malými písmeny (i, ii, iii, iv, v,...). velká písmena velká latinka (A, B, C, D,...). upper-latin Tato hodnota je stejná jako horní-alpha . horní římská čísla velkými písmeny (I, II, III, IV, V,...). none Deaktivuje odrážky pro seznam.

Pískoviště

Čtyři

1. Příklad
2. list-style-type
3. Gaius Octavius ​​​​Thurinus
4. Tiberius Claudius Nero
5. Gaius Iulius Caesar Augustus Germanicus
6. Tiberius Claudius Drusus
7. Lucius Arruntius Camillus Scribonianus

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

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

Objektový model

Objekt.style.listStyleType

Poznámka

V aplikaci Internet Explorer 6 při použití číslovaného seznamu

a hodnoty uvnitř vlastnosti list-style-position, čísla začínající 10, začnou překrývat text seznamu.

Internet Explorer do verze 7 nepodporuje hodnoty armenian, decimal-leading-zero, georgian, lower-greek, lower-latin, upper-latin. Místo toho se zobrazí číslování v arabských číslech. V tomto prohlížeči se u plovoucích prvků nezobrazují číslování ani odrážky (ul ( float: left; ) ).

Internet Explorer 8 navíc rozumí hodnotě upper-greek , která nastavuje číslování na velká řecká písmena (Α, Β, Γ, Δ,...).

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

žádný, kotouč, kruh, čtverec, desetinné číslo, dolní-alfa, horní-alfa, dolní-řím., horní-řím.	4	12	1	7	1	1
nižší latina, horní latina, nižší řecký, arménský, gruzínský	8	12	1	6	1	1
desetinná-počáteční-nula	8	12	1	8	1	1