CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS seznamy


Neuspořádané seznamy:

  • Káva
  • Čaj
  • Kola
  • Káva
  • Čaj
  • Kola

Objednané seznamy:

  1. Káva
  2. Čaj
  3. Kola
  1. Káva
  2. Čaj
  3. 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-typeurč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-imageurč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-positionurč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:nonelze 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:0a padding:0do <ul> nebo <ol>:

Příklad

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Seznam - Vlastnost těsnopisu

Nemovitost list-styleje 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:

  1. Coffee
  2. Tea
  3. 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.


Otestujte se pomocí cvičení

Cvičení:

Nastavte styl seznamu pro neuspořádané seznamy na "čtvercový".

<style>
ul {
  : ;
}
</style>

<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>


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