Seznamy CSS jsou velmi užitečné při dosažení sady očíslovaných nebo odrážkových bodů. Tento článek vám ukáže, jak ovládat typ, pozici, styl pomocí CSS. Zde budou uvedeny následující ukazatele,
- Vlastnosti CSS
- Vlastnost typu seznamu
- Seznamy CSS: Ukázkový program
- Hodnoty značek proVe vlastnosti list-style-position
Pojďme tedy začít,
Seznamy CSS
Vlastnosti CSS
Existuje pět různých vlastností CSS, ve kterých jej můžete použít k ovládání seznamů:
- List-style-type: Umožňuje nám ovládat tvar nebo vzhled značky.
- List-style-position: Určuje, že k zalomení na druhý řádek je potřeba dlouhý bod, nebo by se měl zarovnat s prvním řádkem nebo začínat značkou.
- List-style-image: Určuje, že obrázek značky by měl být přidán nebo zatraktivněn spíše než odrážky nebo číslované body.
- Styl seznamu: Zobrazuje zkratku k předchozím vlastnostem.
- Posunutí značky: Určuje vzdálenost mezi značkou a textem zadaným v seznamu.
Zde se běžně používá seznam: list-style-type a list-style-position. To je vysvětleno níže
jak nastavit classpath v systému Windows 10
Pokračujeme tímto článkem v seznamech CSS
Vlastnost typu seznamu
Ve vlastnosti typu list-style vám umožní ovládat tvar a styl bodů odrážek nebo značky v neuspořádaném případě seznamu. V případě seřazeného seznamu je to číslování znaků.
Níže uvedená tabulka představující neuspořádané seznamy:
| Hodnota | Popis |
| Žádný | NA |
| Disk | Je vyplněn do kruhu. (Výchozí) |
| Kruh | Je to prázdný kruh. |
| Náměstí | Je vyplněn do čtverce. |
Níže uvedená tabulka představující objednané seznamy:
| Hodnota | Popis | Příklad |
| Desetinný | Je to číslo | 1,4,3 |
| Desetinná úvodní nula | 0 před skutečným číslem | 01, 04, 03 |
| Nižší alfa | Jedná se o malá alfanumerická písmena. | abeceda |
| Horní alfa | Jedná se o velká alfanumerická písmena. | ABECEDA |
| Lower-roman | Jsou to malá římská čísla. | i, ii, iii, iv, v |
| Horní římský | Jsou to velká římská čísla. | I, II, III, IV, V |
| Nižší řečtina | Značka je v nižší řečtině | alfa, gama |
| Nižší latina | Značka je v latině | abeceda |
| Horní latina | Značka je v latině | ABECEDA |
Pokračujeme tímto článkem v seznamech CSS
Seznamy CSS: Ukázkový program
- Jáva
- Krajta
- Úhlové
- Jáva
- Krajta
- Úhlové
- Jáva
- Krajta
- Úhlové
- Jáva
- Krajta
- Úhlové
- Jáva
- Krajta
- Úhlové
Výstup
Pokračujeme tímto článkem v seznamech CSS
Vlastnost umístění ve stylu seznamu
Hodnoty značky pro Ve vlastnosti seznamu-styl-pozice
Ve vlastnosti list-style-position ukazuje, že by se značka měla objevit uvnitř nebo vně pole obsahujícího odrážky. To může mít jednu ze dvou hodnot:
| Hodnota | Popis |
| Žádný | NA |
| Uvnitř | V tomto případě, pokud text jde do druhého řádku, pak se text zalomí pod značku. Také ukáže, kde by text začal, pokud by seznamy měly vale venku. |
| mimo | V tomto případě, pokud text přejde do druhého řádku, bude text zarovnán se začátkem prvního řádku. |
Příklad:
- Matematika
- Společenské vědy
- Fyzika
- Matematika
- Společenské vědy
- Fyzika
- Matematika
- Společenské vědy
- Fyzika
- Matematika
- Společenské vědy
- Fyzika
Výstup
Tím se dostáváme na konec tohoto článku o seznamech CSS.
Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás dotaz? Uveďte to prosím v sekci komentářů článku a my se vám ozveme.