CSS seznamy
Neuspořádané seznamy:
- Káva
- Čaj
- Kola
- Káva
- Čaj
- Kola
Objednané seznamy:
- Káva
- Čaj
- Kola
- Káva
- Čaj
- Kola
Seznamy HTML a vlastnosti seznamu CSS
V HTML existují dva hlavní typy seznamů:
- neuspořádané seznamy (<ul>) - položky seznamu jsou označeny odrážkami
- uspořádané seznamy (<ol>) - položky seznamu jsou označeny čísly nebo písmeny
Vlastnosti seznamu CSS vám umožňují:
- Nastavte různé značky položek seznamu pro uspořádané seznamy
- Nastavte různé značky položek seznamu pro neuspořádané seznamy
- Nastavte obrázek jako značku položky seznamu
- Přidejte barvy pozadí do seznamů a položek seznamu
Různé značky položek seznamu
Vlastnost list-style-type
určuje typ značky položky seznamu.
Následující příklad ukazuje některé dostupné značky položek seznamu:
Příklad
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Poznámka: Některé hodnoty jsou pro neuspořádané seznamy a některé pro uspořádané seznamy.
Obrázek jako značka položky seznamu
Vlastnost list-style-image
určuje obrázek jako značku položky seznamu:
Příklad
ul
{
list-style-image: url('sqpurple.gif');
}
Umístěte značky položek seznamu
Vlastnost list-style-position
určuje polohu značek položek seznamu (odrážek).
"list-style-position: outside;" znamená, že odrážky budou mimo položku seznamu. Začátek každého řádku položky seznamu bude zarovnán svisle. Toto je výchozí:
- Káva - Uvařený nápoj připravený z pražených kávových zrn...
- Čaj
- Kola
"list-style-position: inside;" znamená, že odrážky budou uvnitř položky seznamu. Protože je součástí položky seznamu, bude součástí textu a vloží text na začátek:
- Káva - Uvařený nápoj připravený z pražených kávových zrn...
- Čaj
- Kola
Příklad
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Odebrat výchozí nastavení
Vlastnost list-style-type:none
lze také použít k odstranění značek/kulek. Všimněte si, že seznam má také výchozí okraj a odsazení. Chcete-li to odstranit, přidejte margin:0
a padding:0
do <ul> nebo <ol>:
Příklad
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Seznam - Vlastnost těsnopisu
Nemovitost list-style
je zkrácená vlastnost. Používá se k nastavení všech vlastností seznamu v jedné deklaraci:
Příklad
ul
{
list-style: square inside url("sqpurple.gif");
}
Při použití zkrácené vlastnosti je pořadí hodnot vlastnosti:
list-style-type
(pokud je zadán list-style-image, hodnota této vlastnosti se zobrazí, pokud obrázek z nějakého důvodu nelze zobrazit)list-style-position
(určuje, zda se značky položek seznamu mají objevit uvnitř nebo mimo tok obsahu)list-style-image
(určuje obrázek jako značku položky seznamu)
Pokud jedna z výše uvedených hodnot vlastnosti chybí, bude vložena výchozí hodnota pro chybějící vlastnost, pokud existuje.
Styling Seznam S Barvami
Seznamy můžeme také upravit pomocí barev, aby vypadaly trochu zajímavěji.
Cokoli přidané do značky <ol> nebo <ul> ovlivní celý seznam, zatímco vlastnosti přidané do značky <li> ovlivní jednotlivé položky seznamu:
Příklad
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}
Výsledek:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Další příklady
Tento příklad ukazuje, jak vytvořit seznam s červeným levým okrajem.
Tento příklad ukazuje, jak vytvořit ohraničený seznam bez odrážek.
Tento příklad ukazuje všechny různé značky položek seznamu v CSS.
Všechny vlastnosti seznamu CSS
Property | Description |
---|---|
list-style | Sets all the properties for a list in one declaration |
list-style-image | Specifies an image as the list-item marker |
list-style-position | Specifies the position of the list-item markers (bullet points) |
list-style-type | Specifies the type of list-item marker |