Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

list-style-type | CSS (ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹)

Бвойство list-style-type измСняСт Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта списка.

Π­Ρ‚ΠΎ свойство ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² случаС, ΠΊΠΎΠ³Π΄Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ list-style-image установлСно ΠΊΠ°ΠΊ none. ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ для ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка (элСмСнт <ul>) ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ (элСмСнт <ol>).

Бписки, счСтчики, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

Бинтаксис

/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: kannada;

/* <string> value */
list-style-type: '-';

/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

/* Keyword value */
list-style-type: none;

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

ЗначСния

ЗначСния зависят ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡƒ Ρ‚ΠΈΠΏΡƒ списка ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ: ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ ΠΈΠ»ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ.

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список

circle
ΠœΠ°Ρ€ΠΊΠ΅Ρ€ Π² Π²ΠΈΠ΄Π΅ ΠΊΡ€ΡƒΠΆΠΊΠ°.
disc
ΠœΠ°Ρ€ΠΊΠ΅Ρ€ Π² Π²ΠΈΠ΄Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ.
square
ΠœΠ°Ρ€ΠΊΠ΅Ρ€ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°.

НумСрованный список

armenian
Врадиционная армянская нумСрация.
decimal
АрабскиС числа (1, 2, 3, 4,…).
decimal-leading-zero
АрабскиС числа с Π½ΡƒΠ»Π΅ΠΌ Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ для Ρ†ΠΈΡ„Ρ€ мСньшС дСсяти (01, 02, 03,…).
georgian
Врадиционная грузинская нумСрация.
lower-alpha
Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ латинскиС Π±ΡƒΠΊΠ²Ρ‹ (a, b, c, d,…).
lower-greek
Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ грСчСскиС Π±ΡƒΠΊΠ²Ρ‹ (Ξ±, Ξ², Ξ³, Ξ΄,…).
lower-latin
Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ lower-alpha.
lower-roman
РимскиС числа Π² Π½ΠΈΠΆΠ½Π΅ΠΌ рСгистрС (i, ii, iii, iv, v,…).
upper-alpha
Π—Π°Π³Π»Π°Π²Π½Ρ‹Π΅ латинскиС Π±ΡƒΠΊΠ²Ρ‹ (A, B, C, D,. ..).
upper-latin
Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ upper-alpha.
upper-roman
РимскиС числа Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ рСгистрС (I, II, III, IV, V,…).
none
ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅Ρ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ для списка.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

list-style-type: disc; /* для ul */
list-style-type: decimal; /* для ol */

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ ΠΊ: К элСмСнтам <li>, <ol> ΠΈ <ul>, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠΎ всСм элСмСнтам, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡƒΠΊΠ°Π·Π°Π½ΠΎ display: list-item

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ

ОписаниС ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>list-style-type</title>
    <style>
      ol {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Gaius Octavius Thurinus</li>
      <li>Tiberius Claudius Nero</li>
      <li>Gaius Iulius Caesar Augustus Germanicus</li>
      <li>Tiberius Claudius Drusus</li>
      <li>Lucius Arruntius Camillus Scribonianus</li>
      <li>Nero Claudius Caesar Drusus Germanicus</li>
      <li>Lucius Clodius Macer</li>
    </ol>
  </body>
</html>

Как Π² HTML ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Π±Π΅Π· ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² (ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ Ρƒ li)

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Π±Π΅Π· ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ². НиТС описано нСсколько способов Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ этого с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML. Π’ Ρ‚ΠΎΠΌ числС ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒ list style none.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ HTML

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ стиля Β«list-style: noneΒ» Π² Ρ‚Π΅Π³ нСупорядочСнного (<ul>) ΠΈΠ»ΠΈ упорядочСнного списка (<ol>) ΡƒΠ±Π΅Ρ€Π΅Ρ‚ Π»ΡŽΠ±Ρ‹Π΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΈΠ»ΠΈ Π½ΠΎΠΌΠ΅Ρ€Π°:

<ul>
  <li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка Π±Π΅Π· ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°</li>
  <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт</li>
</ul>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ HTML с CSS

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠΎΡ‡Ρ‚ΠΈ Π² любой ситуации. Но Π»ΡƒΡ‡ΡˆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ CSS Π²ΠΎ внСшнСм Ρ„Π°ΠΉΠ»Π΅ стилСй. НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ CSS ΠΈ HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для удалСния ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ².

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ этого ΠΊΠΎΠ΄Π° CSS удаляСт ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΈΠ· всСх нСупорядочСнных списков (<ul>). Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ, Ссли Π²Ρ‹ Π½Π΅ Π½Π°ΠΌΠ΅Ρ€Π΅Π½Ρ‹ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΈΠ»ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСсто Π½ΠΈΡ… изобраТСния:

<style type="text/css">
  ul {
    list-style-type: none;
  }
</style>

Но Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ класс list style none CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ‚ΠΎΠΌ случаС, ΠΊΠΎΠ³Π΄Π° Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹.

Код CSS:

<style type="text/css">
  .nobull {
    list-style-type: none;
  }
</style>

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄Π΅ CSS создаСтся Π½ΠΎΠ²Ρ‹ΠΉ класс Β«nobullΒ». Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€. НапримСр:

<ul>
  <li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка Π±Π΅Π· ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°</li>
  <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт</li>
</ul>

Подсказка: Π­Ρ‚ΠΎΡ‚ класс ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ для любого элСмСнта списка (<li>), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… элСмСнтов, Π½ΠΎ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹.

Π’Ρ‹Π²ΠΎΠ΄ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°

НиТС ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ выводится Π½Π° экран нСупорядочСнный список Π±Π΅Π· ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ list style type none.

Данная публикация являСтся ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«How to create a bullet list with no bullets in HTMLΒ» , подготовлСнная Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² (Π±ΡƒΠ»Π»Π΅Ρ‚ΠΎΠ²) html-списков

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² (Π±ΡƒΠ»Π»Π΅Ρ‚ΠΎΠ²) html-списков

 Бу́ллСт (Π°Π½Π³Π». bullet) – типографский Π·Π½Π°ΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° списка


По Π²Π½Π΅ΡˆΠ½Π΅ΠΌΡƒ Π²ΠΈΠ΄Ρƒ бу́ллСтов,Β cписки Π² HTML дСлятся Π½Π° стандартныС ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки, списки Π±Π΅Π· ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ (бу́ллСты-ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚) ΠΈ списки с нСстандартными бу́ллСтами-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, взятыми со стороны

  1. ΠœΠ΅ΡΡ‚ΠΎΡ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ бу́ллСтов списка
  2. РасстояниС ΠΎΡ‚ бу́ллСта Π΄ΠΎ тСкста списка
  3. РасстояниС ΠΎΡ‚ бу́ллСта Π΄ΠΎ сосСднСго ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°
  4. Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ бу́ллСта (ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°) списка
ΠœΠ΅ΡΡ‚ΠΎΡ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ бу́ллСтов списка

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ внСшнСго Π²ΠΈΠ΄Π° бу́ллСтов (ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ²) списка начинаСтся с указания ΠΈΡ… мСсторасполоТСния ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ тСкста списка.

Бу́ллСты (ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹) списка Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ, Π»ΠΈΠ±ΠΎ Π² тСкстС списка, Π»ΠΈΠ±ΠΎ Π·Π° Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ. Π—Π° мСстополоТСниС бу́ллСтов ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ CSS-свойтво элСмСнта списка list-style-position. Π­Ρ‚ΠΎΡ‚ малопримСняСмый Ρ‚Π΅Π³ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ – с ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ списком. Бвойство list-style-position ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π° значСния, outside – ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ (бу́ллСт) находится Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ элСмСнтов списка ΠΈ inside – ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ располоТСн Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта ΠΈ обтСкаСтся Π΅Π³ΠΎ тСкстом. По-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, list-style-position Ρ€Π°Π²Π΅Π½ outside – ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ тСкста списка. К этому всС Π΄Π°Π²Π½ΠΎ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ ΠΈ Π·Π°Π±Ρ‹Π»ΠΈ ΠΏΡ€ΠΎ
list-style-position:inside;
Для наглядности происходящСго, я взял тСкст элСмСнта списка Π² Ρ€Π°ΠΌΠΊΡƒ (свойство border:2px solid #000;).

list-style-position Ρ€Π°Π²Π΅Π½ outside
list-style-position:outside;

list-style-position Ρ€Π°Π²Π΅Π½ inside
list-style-position:inside;


Для наглядности, элСмСнты списка взяты Π² Ρ€Π°ΠΌΠΊΡƒ (border:2px solid #000;).
list-style-position:outside;
<ol>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1</li>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2</li>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3</li>
</ol>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

  1. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1
  2. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2
  3. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3
list-style-position:inside;
<ol>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1</li>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2</li>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3</li>
</ol>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

  1. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1
  2. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2
  3. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3
Π˜Π½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΡŽ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ нСсуразныС Π²ΠΈΠ΄Ρ‹ списков:
list-style-position:outside;
list-style-position:inside;
(нСмыслисый список)
<ol>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1</li>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2</li>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3</li>
<li>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 4</li>
</ol>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

  1. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1
  2. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2
  3. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3
  4. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 4
Как Π²ΠΈΠ΄Π½ΠΎ Π½Π° Β«ΠΆΠΈΠ²Ρ‹Ρ…Β» ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, ΡˆΠΈΡ€ΠΈΠ½Π° списка ΠΈ Π΅Π³ΠΎ Π»Π΅Π²Ρ‹ΠΉ отступ ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌΠΈ. Бу́ллСты списка, Π½Π°Ρ…ΠΎΠ΄ΡΡΡŒ Π·Π° Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ (outside) ΠΌΠΎΠ³ΡƒΡ‚ Β«Π½Π°Π»Π΅Π·Π°Ρ‚ΡŒΒ» Π½Π° сосСдниС элСмСнты Π²Π΅Π±-страницы (Π±Π»ΠΎΠΊΠΈ, изобраТСния). Часто, ΠΏΡ€ΠΈ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ списками – ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ ΠΈ происходит.
РасстояниС ΠΎΡ‚ бу́ллСта (ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°) Π΄ΠΎ тСкста списка

РасстояниС ΠΎΡ‚ бу́ллСта (ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°) Π΄ΠΎ тСкста элСмСнта списка задаётся Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΌΠΈ настройками Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΎΡ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π΄ΠΎ тСкста элСмСнта ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ для Ρ€Π°Π·Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² ΠΈ вСрсий Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². НСбольшой css-ΠΊΠΎΠ΄ позволяСт Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ кроссбраузСрного отобраТСния списков ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹Ρ… отступов Π½Π° свои собствСнныС. ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ внСшний Π²ΠΈΠ΄ списка Ρ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ мСняСтся, Π² зависимости ΠΎΡ‚ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ свойства outside/inside. Π’ΡƒΡ‚ самоС врСмя для смСлых ΠΎΠΏΡ‹Ρ‚ΠΎΠ² ΠΈ экспСримСнтов:

li {
  margin-left: .9em;
  padding-left: 1,9em;
  list-style-position: inside;
  text-indent: -1em;
  }

Β 

РасстояниС ΠΎΡ‚ бу́ллСта Π΄ΠΎ сосСднСго ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°

ΠŸΡ€ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ΅ ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π·ΠΎΡ€ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠΌ ΠΈ тСкстом списка (РасстояниС ΠΎΡ‚ бу́ллСта Π΄ΠΎ тСкста списка), Π±Ρ‹Π»ΠΎ Π·Π°ΠΌΠ΅Ρ‡Π΅Π½ΠΎ, Ρ‡Ρ‚ΠΎΒ Π²Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ списка сильно измСняСтся, Π² зависимости ΠΎΡ‚ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ свойства outside/inside.

Π’Π΅Ρ€Π½Π΅Π΅, мСняСтся Π½Π΅ сам Π²ΠΈΠ΄ списка, Π° Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚ с сосСдними ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌΒ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Ρ‚Π°ΠΊ происходит ΠΈ ΠΎΡ‚ΠΊΡƒΠ΄Π° такая Π±Π΅Π΄Π°.

Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° ΠΎΡ‚ мСстополоТСния Π±ΡƒΠ»Π»Π΅Ρ‚Π° (outside/inside) ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎ-

Β 

Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ бу́ллСта

Π‘ΡƒΠ»Π»Π΅Ρ‚Ρ‹ html-списков ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ числовой Π²ΠΈΠ΄, простых ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ², Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ совсСм ΠΈΠ»ΠΈ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΈΠ΄ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ-изобраТСния.

ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка

ffffffffffff

НомСрация списка

sssssssssssss

Бписки Π±Π΅Π· бу́ллСтов

(НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки)

НаиболСС Π²Π°ΠΆΠ½Ρ‹Π΅ ΠΈ примСняСмыС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Ρ‚Π΅Π³Π° <li> ΠΈ <dd> Π² XHTML
start – Π·Π°Π΄Π°Π΅Ρ‚ число, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, для Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка с Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π½ΠΎΠΌΠ΅Ρ€Π°.
value – Π·Π°Π΄Π°Π΅Ρ‚ число, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒΡΡ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ€Π°Π·Ρ€Ρ‹Π²Π° Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка ΠΈ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ с Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π½ΠΎΠΌΠ΅Ρ€Π°.
title – добавляСт Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора
style – устанавливаСт Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй (для CSS)
id – Π·Π°Π΄Π°Π΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ (для CSS)
class – опрСдСляСт имя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ класса (для CSS)
type – устанавливаСт Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° для Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка. Атрибут type считаСтся ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ ΠΈ поддСрТиваСтся Π½Π΅ всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. Для задания Π²ΠΈΠ΄Π° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style ΠΈ каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй CSS, Π³Π΄Π΅ ΠΈ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ.
ЗначСния type для ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка
disc – ΠΌΠ°Ρ€ΠΊΠ΅Ρ€-диск (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
circle – ΠΌΠ°Ρ€ΠΊΠ΅Ρ€-ΠΊΡ€ΡƒΠ³
square – ΠΌΠ°Ρ€ΠΊΠ΅Ρ€-ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚

ЗначСния type для Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка
A – Π·Π°Π³Π»Π°Π²Π½Ρ‹Π΅ латинскиС Π±ΡƒΠΊΠ²Ρ‹
a – строчныС латинскиС Π±ΡƒΠΊΠ²Ρ‹
I – Π·Π°Π³Π»Π°Π²Π½Ρ‹Π΅ римскиС Ρ†ΠΈΡ„Ρ€Ρ‹
i – строчныС римскиС Ρ†ΠΈΡ„Ρ€Ρ‹
1 – арабскиС Ρ†ΠΈΡ„Ρ€Ρ‹ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)

ΠŸΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²:
(взят для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список, Ρ‡Ρ‚ΠΎΠ±Ρ‹ побольшС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² вошло Π·Π° ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·)

<ul title=»ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π ΠΠ‘ΠŸΠ ΠžΠ‘Π’Π ΠΠΠ•ΠΠ˜Π― Π‘Π’ΠžΠ™Π‘Π’Π’ Π ΠžΠ”Π˜Π’Π•Π›Π¬Π‘ΠšΠžΠ“Πž Π­Π›Π•ΠœΠ•ΠΠ’Π НА Π”ΠžΠ§Π•Π ΠΠ˜Π• Π­Π›Π•ΠœΠ•ΠΠ’Π«. Π­Ρ‚Π° строка записана Π² Ρ‚Π°ΠΉΡ‚Π»Π΅ списка, Π½ΠΎ отсвСчиваСт Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π΅Π³ΠΎ элСмСнтС»>
<li type=»A»>Π Π°Π· элСмСнт (основной список)</li>
<li type=»A»>Π”Π²Π° элСмСнт (основной список)</li>
<li type=»A»>Π’Ρ€ΠΈ элСмСнт (основной список)</li>
<li>
<ol type=»i»>
<li>Π Π°Π· элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π”Π²Π° элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π’Ρ€ΠΈ элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π§Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li value=»49″ >ΠŸΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π¨Π΅ΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>БСмь элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π’ΠΎΡΠ΅ΠΌΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
</ol>
</li>
<li>
<ul>
<li type=»disc»>Π Π°Π· элСмСнт ( Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li type=»circle»>Π”Π²Π° элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li type=»square»>Π’Ρ€ΠΈ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π§Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>ΠŸΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π¨Π΅ΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>БСмь элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π’ΠΎΡΠ΅ΠΌΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
</ul>
</li>
</ul>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

Π Π°Π· элСмСнт (основной список)
Π”Π²Π° элСмСнт (основной список)
Π’Ρ€ΠΈ элСмСнт (основной список)
Π Π°Π· элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π”Π²Π° элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π’Ρ€ΠΈ элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π§Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
ΠŸΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π¨Π΅ΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
БСмь элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π’ΠΎΡΠ΅ΠΌΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π Π°Π· элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π”Π²Π° элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π’Ρ€ΠΈ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π§Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
ΠŸΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π¨Π΅ΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
БСмь элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π’ΠΎΡΠ΅ΠΌΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π’Π΅ΠΏΠ΅Ρ€ΡŒ вспомним ΠΏΡ€ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки ΠΈ ΠΏΠΎΠ΄ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠΎΠ΄ <br /> Π±Ρ€Π΅ΠΉΠΊΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ повторСния ΠΈ Π½Π°Π΅Π·Π΄Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ².

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡΡ, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄:

<ul title=»ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π ΠΠ‘ΠŸΠ ΠžΠ‘Π’Π ΠΠΠ•ΠΠ˜Π― Π‘Π’ΠžΠ™Π‘Π’Π’ Π ΠžΠ”Π˜Π’Π•Π›Π¬Π‘ΠšΠžΠ“Πž Π­Π›Π•ΠœΠ•ΠΠ’Π НА Π”ΠžΠ§Π•Π ΠΠ˜Π• Π­Π›Π•ΠœΠ•ΠΠ’Π«. Π­Ρ‚Π° строка записана Π² Ρ‚Π°ΠΉΡ‚Π»Π΅ списка, Π½ΠΎ отсвСчиваСт Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π΅Π³ΠΎ элСмСнтС»>
<li type=»A»>Π Π°Π· элСмСнт (основной список)</li>
<li type=»A»>Π”Π²Π° элСмСнт (основной список)</li>
<li type=»A»>Π’Ρ€ΠΈ элСмСнт (основной список)<br />
<br />
<br />
<ol type=»i»>
<li>Π Π°Π· элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π”Π²Π° элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π’Ρ€ΠΈ элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π§Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li value=»49″ >ΠŸΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π¨Π΅ΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>БСмь элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π’ΠΎΡΠ΅ΠΌΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
<br />
<br />
<ul>
<li type=»disc»>Π Π°Π· элСмСнт ( Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li type=»circle»>Π”Π²Π° элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li type=»square»>Π’Ρ€ΠΈ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π§Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>ΠŸΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π¨Π΅ΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>БСмь элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
<li>Π’ΠΎΡΠ΅ΠΌΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
</ul>
</li>
</ol>
</li>
</ul>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

Π Π°Π· элСмСнт (основной список)
Π”Π²Π° элСмСнт (основной список)
Π’Ρ€ΠΈ элСмСнт (основной список)

Π Π°Π· элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π”Π²Π° элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π’Ρ€ΠΈ элСмСнт (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π§Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
ΠŸΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π¨Π΅ΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
БСмь элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π’ΠΎΡΠ΅ΠΌΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)

Π Π°Π· элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π”Π²Π° элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π’Ρ€ΠΈ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π§Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
ΠŸΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π¨Π΅ΡΡ‚ΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
БСмь элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
Π’ΠΎΡΠ΅ΠΌΡŒ элСмСнт (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)

Β 

Β 

Π’ дСвятой Π³Π»Π°Π²Π΅ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ° HTML ΠΌΡ‹ с Π’Π°ΠΌΠΈ ΡƒΠΆΠ΅ знакомились с Ρ‚Π°ΠΊΠΈΠΌ Π½Π΅ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½Ρ‹ΠΌ элСмСнтом ΠΊΠ°ΠΊ список ΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ срСдство для структуризации Π΄Π°Π½Π½Ρ‹Ρ…. Однако списки ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΎΠ΄Π½ΠΈΠΌΠΈ срСдствами HTML вСсьма ΡƒΠ±ΠΎΠ³ΠΈ Π² ΠΏΠ»Π°Π½Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Π½Π΅ Ρ€Π°Π΄ΡƒΡŽΡ‚ Π³Π»Π°Π· Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°.

Π’ этой Π³Π»Π°Π²Π΅ ΠΌΡ‹ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠΊΠΎΠ»Π΄ΡƒΠ΅ΠΌ Π½Π°Π΄ списками с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств CSS. Π’Π°ΠΊ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ стилС списка, Ρ‚ΠΎ для обучСния Π’Π°ΠΌ понадобится базовая информация ΠΎ Ρ‚Π΅Π³Π°Ρ…: <ul> <ol> <li> <dl> <dt> <dd> — излоТСнная Π² ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ΅ HTML Π³Π»Π°Π²Π° 9 «Π‘писки» — Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΎΡΠ²Π΅ΠΆΠΈΡ‚ΡŒ Π² Π³ΠΎΠ»ΠΎΠ²Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π΄Π°Π½Π½Ρ‹Ρ… элСмСнтах, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅.

Ну Π° Ссли Π² Π³ΠΎΠ»ΠΎΠ²Π΅ ΠΈ Ρ‚Π°ΠΊ свСТо Ρ‚ΠΎΠ³Π΄Π° Π½Π°Ρ‡Π½Π΅ΠΌ!

Π’ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π² спискС.

Если Π’Ρ‹ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‚ΠΎ Π² чистом HTML Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π² спискС опрСдСлял Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π΅Π³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Π² CSS Π΄Π°Π½Π½ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ Π±Π΅Ρ€Ρ‘Ρ‚ Π½Π° сСбя свойство: list-style-type ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, Ρ‚ΠΎΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ свои стандартныС значСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠ΅ Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΊΠ°ΠΊ всСго списка сразу, Ρ‚Π°ΠΊ ΠΈ Π΅Π³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ «ΠΏΡƒΠ½ΠΊΡ‚Π°».

ЗначСния list-style-type:

disc — Диск. (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для <ul>)
circle — ΠŸΠΎΠ»Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³.
square — ΠšΠ²Π°Π΄Ρ€Π°Ρ‚.
decimal — АрабскиС Ρ†ΠΈΡ„Ρ€Ρ‹. (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для <ol>)
lower-roman — Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ римскиС Ρ†ΠΈΡ„Ρ€Ρ‹.
lower-alpha — Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹.
upper-roman — Π—Π°Π³Π»Π°Π²Π½Ρ‹Π΅ римскиС Ρ†ΠΈΡ„Ρ€Ρ‹.
upper-alpha — Π—Π°Π³Π»Π°Π²Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹.
none — ΠœΠ°Ρ€ΠΊΠ΅Ρ€ отсутствуСт.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Π’ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π² спискС</title>
</head>
<body>
<ul>
<li>ΠŸΡƒΠ½ΠΊΡ‚ 1.
<li>ΠŸΡƒΠ½ΠΊΡ‚ 2.
<li>ΠŸΡƒΠ½ΠΊΡ‚ 3 (особСнный).
</ul>
<ul>
<li>ΠŸΡƒΠ½ΠΊΡ‚ 1.
<li>ΠŸΡƒΠ½ΠΊΡ‚ 2.
<li>ΠŸΡƒΠ½ΠΊΡ‚ 3.
</ul>
</body>
</html>
ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€
ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ рисунок.

НаиболСС интСрСсным CSS инструмСнтом для Ρ€Π°Π±ΠΎΡ‚Ρ‹ со стилСм списка являСтся, Π½Π° ΠΌΠΎΠΉ взгляд, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ вмСсто стандартных «ΡΠΊΡƒΡ‡Π½Ρ‹Ρ…» ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² описанных Π²Ρ‹ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свои собствСнныС нСстандартныС изобраТСния — нСбольшиС рисунки, Π²ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ Π² ΠΎΠ±Ρ‰ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π’Π°ΡˆΠ΅Π³ΠΎ сайта.

Π­Ρ‚Ρƒ Π·Π°Π΄Π°Ρ‡Ρƒ выполняСт свойство list-style-image ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт Π² качСствС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° списка Π½Π΅ΠΊΠΎΠ΅ графичСскоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΠΏΡƒΡ‚ΠΈ ΠΊ Π½Π΅ΠΌΡƒ.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства всСго Π΄Π²Π°:

none — ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅Ρ‚ графичСскоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°.
url — ΠŸΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ с рисунком ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°.
ΠŸΡƒΡ‚ΡŒ ΠΊ рисунку послС url указываСтся Π² ΠΊΡ€ΡƒΠ³Π»Ρ‹Ρ… скобках.

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ:

list-style-image: url(graphics/marker.gif)
— Вакая запись Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ рядом с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ Π΅ΡΡ‚ΡŒ ΠΏΠ°ΠΏΠΊΠ° graphics Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π»Π΅ΠΆΠΈΡ‚ Ρ„Π°ΠΉΠ»ΠΈΠΊ-рисунок: » » — ΠΏΠΎΠ΄ названьСм marker.gif

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠΏΡ€ΡƒΠ±ΡƒΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ нашСго списока Π±Ρ‹Π» ΠΏΡ€ΠΎΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ²Π°Π½ этим рисунком. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>НСстандартный ΠΌΠ°Ρ€ΠΊΠ΅Ρ€-рисунок</title>
</head>
<body>
<ul>
<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
<li>И Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
</ul>
</body>
</html>
ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€
Π‘Ρ‚ΠΈΠ»ΡŒ обтСкания ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° списком.

Бвойство list-style-position ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ слСдуСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ тСкст Π² спискС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ². По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ находятся Π² сторонС ΠΎΡ‚ тСкста списка, Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒΡΡ тСкстом.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойства list-style-position всСго Π΄Π²Π°:

outside — ΠœΠ°Ρ€ΠΊΠ΅Ρ€ находится Π² сторонС ΠΎΡ‚ списка.(ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
inside — ΠœΠ°Ρ€ΠΊΠ΅Ρ€ обтСкаСтся тСкстом.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ для наглядности:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° тСкстом</title>
<style type=»text/css»>
body {
margin: 0px;
background: #e8e8e8
}
div {
width: 300px;
height: 200px;
float:left;
margin: 10px;
padding: 10px;
border: RGB(25, 125, 25) 2px ridge;
background: #fff
}
h4 {
text-align: center
}
</style>
</head>
<body>
<div>
<h4>Π—Π΄Π΅ΡΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ обтСкаСтся тСкстом:</h4>
<ul>
<li>ΠŸΡƒΠ½ΠΊΡ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ говорится ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π±Ρ‹ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ это Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΅Ρ‰Π΅ Π½Π΅ сдСлано.
<li>ΠŸΡƒΠ½ΠΊΡ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ говорится ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ Π±Ρ‹ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Π½Π΅Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ это Π½Π΅Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ Π½Π΅ сдСлано.
</ul>
</div>
<div>
<h4>А здСсь Π½Π΅Ρ‚:</h4>
<ul>
<li>ΠŸΡƒΠ½ΠΊΡ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ говорится ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π±Ρ‹ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ это Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΅Ρ‰Π΅ Π½Π΅ сдСлано.
<li>ΠŸΡƒΠ½ΠΊΡ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ говорится ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ Π±Ρ‹ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Π½Π΅Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ это Π½Π΅Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ Π½Π΅ сдСлано.
</ul>
</div>
</body>
</html>
ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€
list-style

Π‘Π°Π·ΠΎΠ²ΠΎΠ΅ свойство list-style ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΡ‚ΠΈΠ»ΡŽ списка Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. ΠœΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΎ Ρ‚Ρ€Ρ‘Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈΠ· свойств примСняСмых ΠΊ ΡΡ‚ΠΈΠ»ΡŽ списка, Π² любой ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π».

ВсС Ρ‚Ρ€ΠΈ свойства ΠΈ ΠΈΡ… Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния ΠΌΡ‹ рассмотрСли Π²Ρ‹ΡˆΠ΅, поэтому повторятся Π½Π΅ Π±ΡƒΠ΄Ρƒ, Π° просто Π²Ρ‹Π»ΠΎΠΆΡƒ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ:

list-style-type — Π’ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π² спискС
list-style-image — НСстандартный ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ рисунок
list-style-position — Π‘Ρ‚ΠΈΠ»ΡŒ обтСкания ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° списком
Если Π² Π³ΠΎΠ»ΠΎΠ²Π΅ ΠΎΡΡ‚Π°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊΠΈΠ΅ Ρ‚ΠΎ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Π‘Ρ‚ΠΈΠ»ΡŒ списка</title>
</head>
<body>
<div>
<ul>
<li>- Π­Ρ‚ΠΎΡ‚ список ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π² качСствС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° рисунок.
<li>- ВСкст этого списка ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€.
</ul>
</div>
</body>
</html>
ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€
ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ совСты:

Бписки наряду с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ, Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ тСкстом ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, ΡΠ²Π»ΡΡŽΡ‚ΡΡ элСмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠΊΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ взгляд посСтитСля ΠΏΡ€ΠΈ Π±Π΅Π³Π»ΠΎΠΌ просмотрС страницы. Π£ΠΌΠ΅Π»ΠΎΠ΅ ΠΈ нСнавязчивоС Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΎΠ²Ρ‹Ρ… элСмСнтов Π·Π°Π»ΠΎΠ³ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ окунётся Π² Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ Π’Π°ΡˆΠ΅Π³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡƒΠ±ΠΎΠΊΠΎ.

Π’Π°ΠΊ ΠΊΠ°ΠΊ списки ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹ΠΌ инструмСнтом для структуризации Π΄Π°Π½Π½Ρ‹Ρ…, Π° свойства CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ практичСски любой ΠΈΡ… Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ списки, ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΈΡ… основного назначСния, Π² качСствС «ΠΌΠ΅Π½ΡŽ» — Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ сайту, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ являСтся ссылкой Π½Π° Ρ‚Ρƒ ΠΈΠ»ΠΈ ΠΈΠ½ΡƒΡŽ страницу Π’Π°ΡˆΠ΅Π³ΠΎ сайта.

<div>
<ul>
<li>- Π­Ρ‚ΠΎΡ‚ список ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π² качСствС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° рисунок.
</li><li>- ВСкст этого списка ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€.
</li>
</ul>
</div>

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° вмСсто бу́ллСта (ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°) списка

Π°Π°Π°Π°Π°Π°Π°Π°

Β 

Бписки в HTML (XHTML)
ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ html-списками

Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Ρ‡ΠΈΠΊ: HTML, ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚, сайт

list-style — CSS: каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй

Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½Π½ΠΎΠ΅ свойство CSS стиля списка позволяСт ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ сразу всС свойства стиля списка.

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ этого ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° хранится Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ GitHub. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ внСсти свой Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠ»ΠΎΠ½ΠΈΡ€ΡƒΠΉΡ‚Π΅ https://github.com/mdn/interactive-examples ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΌ запрос Π½Π° пСрСнос.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π­Ρ‚ΠΎ свойство примСняСтся ΠΊ элСмСнтам списка, Ρ‚.Π΅.Π΅., элСмСнты с display : list-item; . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ это

  • элСмСнтов. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это свойство унаслСдовано, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ
      ΠΈΠ»ΠΈ
        ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ списка примСнялся ΠΊΠΎ всСм элСмСнтам Π²Π½ΡƒΡ‚Ρ€ΠΈ.

        Π­Ρ‚ΠΎ свойство являСтся сокращСниСм для ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… свойств CSS:

         
        ΡΡ‚ΠΈΠ»ΡŒ списка: ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚;
        
        
        ΡΡ‚ΠΈΠ»ΡŒ списка: url ('../ img / shape.png');
        
        
        ΡΡ‚ΠΈΠ»ΡŒ списка: Π²Π½ΡƒΡ‚Ρ€ΠΈ;
        
        
        ΡΡ‚ΠΈΠ»ΡŒ списка: грузинский Π²Π½ΡƒΡ‚Ρ€ΠΈ;
        
        
        list-style: Π½ΠΈΠΆΠ½ΠΈΠΉ римский URL ('../img/shape.png ') снаруТи;
        
        
        ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π΅Ρ‚;
        
        
        ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ;
        ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ;
        ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ;
          

        Бвойство Π² стилС списка задаСтся ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ, Π΄Π²Π° ΠΈΠ»ΠΈ Ρ‚Ρ€ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слова Π² любом порядкС. Если установлСны list-style-type ΠΈ list-style-image , Ρ‚ΠΎ list-style-type ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС запасного Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ нСдоступно.

        ЗначСния

        Π’ Safari Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΈΠ·-Π·Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ нСупорядочСнныС списки со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ стиля списка Π½Π΅Ρ‚ , ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΌ ΠΊ Π½ΠΈΠΌ, Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ распознаны ΠΊΠ°ΠΊ список Π² Π΄Π΅Ρ€Π΅Π²Π΅ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΡ€ΠΎΠ±Π΅Π» Π½ΡƒΠ»Π΅Π²ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π² качСствС псСвдоконтСнта ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом списка, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ распознаваниС списка. Π­Ρ‚ΠΎ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ исправлСниС ошибки Π½Π΅ повлияСт Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Ρ‡Ρ‚ΠΎ элСмСнты списка Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ описаны.

          ul {
          ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π΅Ρ‚;
        }
        
        ul li :: before {
          содСрТаниС: "\ 200B";
        }
          
          <'list-style-type'> || <'list-style-position'> || <'list-style-image'>  

        Установка Ρ‚ΠΈΠΏΠ° ΠΈ полоТСния стиля списка

        HTML
          Бписок 1
        
        • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка1
        • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка2
        • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка3
        Бписок 2
        • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка A
        • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка B
        • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка C
        CSS
         .ΠΎΠ΄ΠΈΠ½ {
          ΡΡ‚ΠΈΠ»ΡŒ списка: ΠΊΡ€ΡƒΠ³;
        }
        
        .Π΄Π²Π° {
          ΡΡ‚ΠΈΠ»ΡŒ списка: ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ;
        }  
        Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

        Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ BCD Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

        list-style-position - CSS: Cascading Style Sheets

        Бвойство CSS list-style-position Π·Π°Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ :: marker ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ элСмСнта списка.

        Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ этого ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° хранится Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ GitHub. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ внСсти свой Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠ»ΠΎΠ½ΠΈΡ€ΡƒΠΉΡ‚Π΅ https: // github.com / mdn / interactive-examples ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΌ запрос Π½Π° пСрСнос.

        Часто ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сокращСнноС ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ΄Π΅ списка .

        ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π­Ρ‚ΠΎ свойство примСняСтся ΠΊ элСмСнтам списка, Ρ‚. Π•. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Π°ΠΌ с display : list-item; . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ это

      • элСмСнтов. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это свойство наслСдуСтся, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ
          ΠΈΠ»ΠΈ
            ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΊΠΎ всСм элСмСнтам списка.

            ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ различия ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ повСдСния, ΠΊΠΎΠ³Π΄Π° элСмСнт Π±Π»ΠΎΠΊΠ° помСщаСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π² элСмСнтС списка, объявлСнном ΠΊΠ°ΠΊ list-style-position: inside . Chrome ΠΈ Safari ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ этот элСмСнт Π² Ρ‚Ρƒ ΠΆΠ΅ строку, Ρ‡Ρ‚ΠΎ ΠΈ ΠΏΠΎΠ»Π΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Firefox, Internet Explorer ΠΈ Opera ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Π΅Π³ΠΎ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку. Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ см. ΠžΡˆΠΈΠ±ΠΊΡƒ 36854.

             
            позиция Π² стилС списка: Π²Π½ΡƒΡ‚Ρ€ΠΈ;
            позиция Π² стилС списка: снаруТи;
            
            
            позиция Π² стилС списка: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ;
            позиция Π² стилС списка: Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ;
            позиция Π² стилС списка: Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ;
              

            Бвойство list-style-position ΡƒΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова, пСрСчислСнных Π½ΠΈΠΆΠ΅.

            ЗначСния

            Π²Π½ΡƒΡ‚Ρ€ΠΈ
            :: marker - это ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт срСди содСрТимого элСмСнта списка.
            снаруТи
            :: ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ находится Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ основного Π±Π»ΠΎΠΊΠ°.

            ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ элСмСнта списка настроСк

            HTML
              
              Бписок 1
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 1–1
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 1-2
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 1–3
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 1–4
              Бписок 2
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 2-1
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 2–2
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 2-3
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 2–4
              Бписок 3
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 3-1
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 3–2
            • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка 3–3
            • ΠŸΡƒΠ½ΠΊΡ‚ 3–4
            CSS
             . Π²Π½ΡƒΡ‚Ρ€ΠΈ {
              позиция Π² стилС списка: Π²Π½ΡƒΡ‚Ρ€ΠΈ;
              Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚;
            }
            
            .Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ {
              позиция Π² стилС списка: снаруТи;
              Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: ΠΊΡ€ΡƒΠ³;
            }
            
            .inside-img {
              позиция Π² стилС списка: Π²Π½ΡƒΡ‚Ρ€ΠΈ;
              ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² стилС списка: url ("https://mdn.mozillademos.org/files/11979/starsolid.gif");
            }  
            Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

            Π’Π°Π±Π»ΠΈΡ†Ρ‹ BCD Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

            list-style-image - CSS: Cascading Style Sheets

            Бвойство CSS list-style image устанавливаСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² качСствС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° элСмСнта списка.

            Часто ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сокращСнноС ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ΄Π΅ списка .

            Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ этого ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° хранится Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ GitHub. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ внСсти свой Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠ»ΠΎΠ½ΠΈΡ€ΡƒΠΉΡ‚Π΅ https://github.com/mdn/interactive-examples ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΌ запрос Π½Π° пСрСнос.

            ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π­Ρ‚ΠΎ свойство примСняСтся ΠΊ элСмСнтам списка, Ρ‚. Π•. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Π°ΠΌ с display : list-item; ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚

          • элСмСнтов.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это свойство наслСдуСтся, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ
              ΠΈΠ»ΠΈ
                ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΊΠΎ всСм элСмСнтам списка.

                 
                ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ стиля списка: Π½Π΅Ρ‚;
                
                
                ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ стиля списка: URL ('starsolid.gif');
                
                
                list-style-image: Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ (слСва Π²Π½ΠΈΠ·Ρƒ, красный, синий);
                
                
                список-ΡΡ‚ΠΈΠ»ΡŒ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ;
                ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-список-ΡΡ‚ΠΈΠ»ΡŒ: Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ;
                список-ΡΡ‚ΠΈΠ»ΡŒ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ;
                  

                ЗначСния

                <ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅>
                ДопустимоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для использования Π² качСствС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°.
                Π½Π΅Ρ‚
                Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°. Если это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ установлСно, вмСсто Π½Π΅Π³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Π² list-style-type .

                ИспользованиС значСния URL

                HTML
                  
                • ΠŸΡƒΠ½ΠΊΡ‚ 1
                • ΠŸΡƒΠ½ΠΊΡ‚ 2
                CSS
                  ul {
                  ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΡΡ‚ΠΈΠ»ΡŒ-список: URL ("https://mdn. mozillademos.org/files/11981/starsolid.gif");
                }  
                Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

                ИспользованиС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°

                HTML
                  
                • ΠŸΡƒΠ½ΠΊΡ‚ 1
                • ΠŸΡƒΠ½ΠΊΡ‚ 2
                CSS
                  ul {
                  Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 200%;
                  list-style-image: Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ (слСва Π²Π½ΠΈΠ·Ρƒ, красный, синий);
                }  
                Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

                Π’Π°Π±Π»ΠΈΡ†Ρ‹ BCD Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

                Π Π΅Ρ†Π΅ΠΏΡ‚Ρ‹ стиля списка | CSS-ΡƒΠ»ΠΎΠ²ΠΊΠΈ

                Бписки - это Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ HTML! Они ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ Π² Ρ‚Π°ΠΊΠΈΡ… Π²Π΅Ρ‰Π°Ρ…, ΠΊΠ°ΠΊ сообщСния Π² Π±Π»ΠΎΠ³Π°Ρ… для пСрСчислСния шагов, Ρ€Π΅Ρ†Π΅ΠΏΡ‚Ρ‹ для пСрСчислСния ΠΈΠ½Π³Ρ€Π΅Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈΠ»ΠΈ элСмСнты Π² мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.Они Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π°ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π½ΠΎ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ. НапримСр, количСство элСмСнтов Π² спискС ΠΎΠ±ΡŠΡΠ²Π»ΡΠ΅Ρ‚ΡΡ Π² срСдствС чтСния с экрана, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ контСкст списку.

                Π”Π°Π²Π°ΠΉΡ‚Π΅ сосрСдоточимся здСсь Π½Π° стилизации списков, Π² основном просто упорядочСнных ΠΈ нСупорядочСнных списков (с извинСниями Π·Π° ΠΏΡ€Π΅Π½Π΅Π±Ρ€Π΅ΠΆΠ΅Π½ΠΈΠ΅ нашим Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΊ списку ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ) ΠΈ нСсколько Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ситуациях стилизации.

                ΠžΡΠ½ΠΎΠ²Ρ‹

                ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ слишком слоТноС, Π·Π½Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ сущСствуСт довольно ΠΌΠ°Π»ΠΎ настроСк для Ρ‚ΠΈΠΏΠ° списка , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΠΈΡ‚ΡŒ ваши потрСбности.

                ΠŸΡ€ΠΎΡ€Ρ‹Π² посСрСдинС

                УпорядочСнныС списки ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с с любого Π½ΠΎΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

                Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ дСсятичныС числа

                ΠŸΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ список 10 Π»ΡƒΡ‡ΡˆΠΈΡ…

                ЕдинствСнный ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ сдСлаСт своС Π΄Π΅Π»ΠΎ.

                ΠŸΡƒΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

                Π›ΡƒΡ‡ΡˆΠ΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° псСвдоэлСмСнтС. Π’Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ list-style-image Π±ΡƒΠ΄Π΅Ρ‚ подходящим Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ, Π½ΠΎ ΠΎΠ½ ΠΊΡ€Π°ΠΉΠ½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½. НапримСр, Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€.

                Emoji Bullets

                Π‘ΠΎΠ±Ρ€Π°Π½Π½Ρ‹ΠΉ «случайный» Π·Π°ΠΊΠ°Π·

                Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Атрибут устанавливаСт элСмСнт списка для использования ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, Ρ€Π΅Π»Π΅Π²Π°Π½Ρ‚Π½ΠΎΠ³ΠΎ для этой ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ.

                Π‘Ρ‡Π΅Ρ‚Ρ‡ΠΈΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ тСкста

                ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΎ с псСвдоэлСмСнтами для максимального контроля, Π½ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ list-style-type: '-';

                Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΈ снаруТи

                Π’Π΅Ρ‰ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΡ‡Π΅Ρ‚Π°ΡŽΡ‚ΡΡ с list-style-position: outside; (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ), Π½ΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ поля, поэтому Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ остороТны, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΡ…. Они ΠΌΠΎΠ³Π»ΠΈ ΡΠ²ΠΈΡΠ°Ρ‚ΡŒ с края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ overflow: hidden; скроСт ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ. Π’ послСдних Π΄Π²ΡƒΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΡŽΠΊ, ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π±ΠΎΠ»Π΅Π΅ приятноС Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта.

                Π¦Π²Π΅Ρ‚Π½Ρ‹Π΅ ΠΏΡƒΠ»ΠΈ

                Π—Π΄Π΅ΡΡŒ Ρ‚Ρ€ΠΈ ΠΏΡƒΡ‚ΠΈ:

                1. :: marker (новСйший ΠΈ самый простой)
                2. ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ псСвдоэлСмСнта
                3. background-image (это URL-адрСс Π΄Π°Π½Π½Ρ‹Ρ… SVG, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈΠ· CSS)

                ΠšΠΎΠ»ΠΎΠ½Π½Ρ‹ΠΉ список

                ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ столбцов ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ автоматичСским.

                Π¦Π²Π΅Ρ‚Π½Ρ‹Π΅ Π½ΠΎΠΌΠ΅Ρ€Π° Π² ΠΊΡ€ΡƒΠΆΠΊΠ°Ρ…

                ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ символы списка Ρ†ΠΈΠΊΠ»ΠΎΠ²

                ΠžΠ΄Π½ΠΎΡ€Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стиля списка : символы () ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡ€Π°Π·ΠΎΠ²Ρ‹Π΅ Π½Π°Π±ΠΎΡ€Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ @ counter-style , Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания это поддСрТиваСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Firefox.

                list-style-type Β· Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ WebPlatform

                Π‘Π²ΠΎΠ΄ΠΊΠ°

                ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ‚ΠΈΠΏ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° элСмСнта списка Π² спискС.

                ΠžΠ±Π·ΠΎΡ€Π½Π°Ρ Ρ‚Π°Π±Π»ΠΈΡ†Π°

                ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
                диск
                ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ
                элСмСнтов с Β«display: list-itemΒ»
                УнаслСдовано
                Π”Π°
                МСдиа
                Π²ΠΈΠ·ΡƒΠ°Π»
                РасчСтноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
                ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½ΠΎ
                Анимационный
                НСт

                Бвойство ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSS
                :

                Бинтаксис

                • ΡΡ‚ΠΈΠ»ΡŒ списка: армянский
                • список-ΡΡ‚ΠΈΠ»ΡŒ: ΠΊΡ€ΡƒΠ³
                • список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: дСсятичный
                • список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: дСсятичный-Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ-ноль
                • Ρ‚ΠΈΠΏ списка: диск
                • Ρ‚ΠΈΠΏ списка: грузинский
                • Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ списка: наслСдованиС
                • список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: Π½ΠΈΠΆΠ½ΠΈΠΉ Π°Π»ΡŒΡ„Π°
                • список-ΡΡ‚ΠΈΠ»ΡŒ: ниТнСгрСчСский
                • список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: ниТняя Π»Π°Ρ‚ΠΈΠ½ΠΈΡ†Π°
                • список-ΡΡ‚ΠΈΠ»ΡŒ: Π½ΠΈΠΆΠ½ΠΈΠΉ римский
                • Ρ‚ΠΈΠΏ списка: Π½Π΅Ρ‚
                • список-ΡΡ‚ΠΈΠ»ΡŒ: ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚
                • список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π°Π»ΡŒΡ„Π°
                • список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π°Ρ‚Ρ‹Π½ΡŒ
                • список-ΡΡ‚ΠΈΠ»ΡŒ: Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ римский

                ЗначСния

                армянский
                ΠœΠ°Ρ€ΠΊΠ΅Ρ€ с Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠΉ армянской Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠ΅ΠΉ
                ΠΊΡ€ΡƒΠ³
                ΠΊΡ€ΡƒΠ³
                дСсятичноС
                НомСр
                . Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для
                  дСсятичный Π²Π΅Π΄ΡƒΡ‰ΠΈΠΉ ноль
                  Число
                  с Π²Π΅Π΄ΡƒΡ‰ΠΈΠΌΠΈ нулями (01, 02, 03 ΠΈ Ρ‚. Π”.)
                  диск
                  Π·Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠΆΠΎΠΊ. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для
                    грузинский
                    традиционная грузинская нумСрация
                    Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ
                    Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства listStyleType наслСдуСтся ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.
                    низшая Π°Π»ΡŒΡ„Π°
                    ниТняя Π°Π»ΡŒΡ„Π° (a, b, c, d, e ΠΈ Ρ‚. Π”.)
                    ниТнСгрСчСский
                    ниТнСгрСчСский
                    Π»Π°Ρ‚Ρ‹Π½ΡŒ ниТняя
                    строчная латинская (a, b, c, d, e ΠΈ Ρ‚. Π”.)
                    римская ниТняя
                    строчныС латинскиС Π±ΡƒΠΊΠ²Ρ‹ (i, ii, iii, iv, v ΠΈ Ρ‚. Π”.)
                    Π½Π΅Ρ‚
                    ΠœΠ°Ρ€ΠΊΠ΅Ρ€ Π½Π΅ отобраТаСтся
                    ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚
                    ΠΊΠ².
                    Π°Π»ΡŒΡ„Π° Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ
                    вСрхняя Π°Π»ΡŒΡ„Π° (A, B, C, D, E ΠΈ Ρ‚. Π”.)
                    вСрхнСлатинский
                    вСрхняя Π»Π°Ρ‚Ρ‹Π½ΡŒ (A, B, C, D, E ΠΈ Ρ‚. Π”.)
                    римский Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ
                    Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ римский (I, II, III, IV, V ΠΈ Ρ‚. Π”.)

                    ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

                    Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… для установки ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ‚ΠΈΠΏ списка ΠΈ свойство ΡΡ‚ΠΈΠ»ΡŒ списка .

                    Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ul Π² качСствС сСлСктора Π²ΠΎ встроСнной (глобальной) Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚ΠΈΠΏ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π½Π° ΠΊΡ€ΡƒΠ³ .

                      <ΡΡ‚ΠΈΠ»ΡŒ>
                        ul {list-style-type: ΠΊΡ€ΡƒΠ³}
                    
                      

                    ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

                    Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ дСмонстрируСт использованиС дСсятичного Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ нуля .

                      
                    
                     
                    1. Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт.
                    2. Π­Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт.
                    3. Π­Ρ‚ΠΎ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
                    ...

                    ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

                    ИспользованиС Ρ‚ΠΈΠΏΠ° списка Π² упорядочСнных списках

                     
                    
                    . list-style - lead-zero {
                        Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: дСсятичный-Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ-ноль;
                    }
                    
                    .list-style - roman {
                        Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ римский;
                    }
                      

                    ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

                    Если Π»Π΅Π²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ элСмСнта строки установлСно Π½Π° 0 ΠΈ Π² спискС Π΅ΡΡ‚ΡŒ позиция стиля-списка: снаруТи; (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ элСмСнтов списка Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ.

                     
                    
                    ul {
                        отступ: 0;
                    }
                    
                    .list-position - Π²Π½ΡƒΡ‚Ρ€ΠΈ {
                        позиция Π² стилС списка: Π²Π½ΡƒΡ‚Ρ€ΠΈ;
                    }
                      

                    ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

                    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ для нСупорядочСнных списков

                     
                    
                    .list-style - circle {
                        Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: ΠΊΡ€ΡƒΠ³;
                    }
                    
                    .list-style - square {
                        Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚;
                    }
                    
                    .list-style - square {
                        Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: Π½Π΅Ρ‚;
                    }
                      

                    ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

                    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ для нСупорядочСнных списков с Ρ‚ΠΈΠΏΠΎΠΌ стиля списка , установлСнным ΠΊΠ°ΠΊ Π½Π΅Ρ‚ , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ удаляСт ΡΡ‚ΠΈΠ»ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для нСупорядочСнного списка.

                     
                    
                    #withBullets ul {
                        Ρ†Π²Π΅Ρ‚: # f06;
                        ΡˆΡ€ΠΈΡ„Ρ‚: курсив 100% Georgia, serif;
                        ΡˆΠΈΡ€ΠΈΠ½Π°: 500 пиксСлСй;
                        отступ: 10 пиксСлСй;
                        ΠΌΠ°Ρ€ΠΆΠ°: 10 пиксСлСй;
                        Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: Π½Π΅Ρ‚;
                    }
                    #withBullets li {
                        дисплСй: встроСнный;
                        ΠΌΠ°Ρ€ΠΆΠ°: 8 пиксСлСй;
                        отступ: 4 пиксСля;
                    }
                    #withBullets li: hover {
                        ниТняя Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошной Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ 3 пиксСля;
                        радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 4 пиксСля;
                    }
                    
                    ul {
                        Ρ†Π²Π΅Ρ‚: # f06;
                        ΡˆΡ€ΠΈΡ„Ρ‚: курсив 100% Georgia, serif;
                        ΡˆΠΈΡ€ΠΈΠ½Π°: 500 пиксСлСй;
                        отступ: 10 пиксСлСй;
                        ΠΌΠ°Ρ€ΠΆΠ°: 10 пиксСлСй;
                        Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚;
                    }
                    li {
                        ΠΌΠ°Ρ€ΠΆΠ°: 8 пиксСлСй;
                    }
                    a: link {text-decoration: none; color: green;}
                    a: hover {ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅ тСкста: Π½Π΅Ρ‚; Ρ†Π²Π΅Ρ‚: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;}
                    a: active {text-decoration: none; color: green;}
                    a: посСтили {text-decoration: none; color: green;}
                      

                    ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

                    ИспользованиС

                      Бвойство CSS Ρ‚ΠΈΠΏΠ° Β«ΡΡ‚ΠΈΠ»ΡŒ списка» опрСдСляСт внСшний Π²ΠΈΠ΄ элСмСнта элСмСнта списка. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это СдинствСнный, ΠΊΡ‚ΠΎ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ display: list-item, это ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ элСмСнт 
                  • , Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹ΠΌ элСмСнтом с этим ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ.
                  • Π‘Π°Π½ΠΊΠ½ΠΎΡ‚Ρ‹

                    Π‘Π°Π½ΠΊΠ½ΠΎΡ‚Ρ‹

                    • Π¦Π²Π΅Ρ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊ вычислСнный Ρ†Π²Π΅Ρ‚ элСмСнта, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΠ½ примСняСтся.

                    • НСкоторыС Ρ‚ΠΈΠΏΠ° со списком стиля Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ установки подходящСго ΡˆΡ€ΠΈΡ„Ρ‚Π° для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния.

                    • БпСцификация CSS Π½Π΅ опрСдСляСт, ΠΊΠ°ΠΊ Π°Π»Ρ„Π°Π²ΠΈΡ‚Π½Ρ‹Π΅ систСмы пСрСносятся Π² ΠΊΠΎΠ½Π΅Ρ† Π°Π»Ρ„Π°Π²ΠΈΡ‚Π°.НапримСр, послС 26 элСмСнтов списка Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π°Π»ΡŒΡ„Π°-Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½. Firefox ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ AA, AB, AC,… Для Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… списков Π°Π²Ρ‚ΠΎΡ€Π°ΠΌ рСкомСндуСтся ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ истинныС числа.

                    • Π‘Ρ‚ΠΈΠ»ΠΈ списков hebrew , cjk-ideographs , hiragana , katakana , hiragana-iroha ΠΈ katakana-iroha Π±Ρ‹Π»ΠΈ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π² CSS2, Π½ΠΎ ΡƒΠ΄Π°Π»Π΅Π½Ρ‹ ΠΈΠ· CSS 2. 1 ΠΈΠ·-Π·Π° отсутствия ΠΎΠΏΡ‹Ρ‚Π° Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈΠ·-Π·Π° отсутствия ΠΎΠΏΡ‹Ρ‚Π° Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π² CSS 2.1. ΠžΠΆΠΈΠ΄Π°Π΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ вСрнутся Π² ΠΌΠΎΠ΄ΡƒΠ»Π΅ CSS3 Lists.

                    • Бвойство Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ сокращСнный синтаксис Π² Π²ΠΈΠ΄Π΅ списка

                    • Если Π»Π΅Π²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ списка установлСно Π½Π° 0 с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· свойств заполнСния, ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ элСмСнта списка Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли этот список ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ стиля списка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π²Π½ΡƒΡ‚Ρ€ΠΈ; . Для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ понимания см. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹.

                    Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅

                    Π‘Ρ‚Π°Ρ‚ΡŒΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

                    Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈ Π·Π°ΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

                    БвязанныС страницы

                    Атрибуции

                    Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ списков Π±Π΅Π· стиля | Go Make Things

                    Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ списков Π±Π΅Π· стиля | Иди Ρ‚Π²ΠΎΡ€ΠΈ Иди Ρ‚Π²ΠΎΡ€ΠΈ

                    БСгодня я Ρ…ΠΎΡ‚Π΅Π» Π½Π° ΠΌΠΈΠ½ΡƒΡ‚ΠΊΡƒ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ JavaScript ΠΈ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ я создаю простыС нСстилированныС списки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

                    Допустим, Ρƒ вас Π΅ΡΡ‚ΡŒ список мастСров, ΠΈ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² ΠΈΠ»ΠΈ Ρ†ΠΈΡ„Ρ€. ΠœΡ‹ Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡƒ класс .list-unstyled .

                      
                    • НСвилл
                    • Π“Π΅Ρ€ΠΌΠΈΠΎΠ½Π°
                    • Π“Π°Ρ€Ρ€ΠΈ ΠŸΠΎΡ‚Ρ‚Π΅Ρ€
                    • Π”Π°ΠΌΠ±Π»Π΄ΠΎΡ€

                    Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²Ρ‹Ρ… стилСй

                    Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π² стилС списка ΠΈΠ· нашСго списка.

                      .list-unstyled {
                    ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π΅Ρ‚;
                    }  

                    ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ‚ΠΈΠΌ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ поля ΠΈΠ»ΠΈ отступы с Π»Π΅Π²ΠΎΠΉ стороны списка.

                      .list-unstyled {
                    ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π΅Ρ‚;
                    ΠΌΠ°Ρ€ΠΆΠ° слСва: 0;
                    отступ слСва: 0;
                    }  

                    Π’ΠΎΡ‚ дСмонстрация.

                    Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ сСмантики

                    Однако Π² webkit Π΅ΡΡ‚ΡŒ «ошибка» (Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ обнаруТСнная Π”ΠΆΠ΅Ρ€Π°Ρ€Π΄ΠΎΠΌ Коэном), которая влияСт Π½Π° сСмантику списков, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½Ρ‹Ρ… Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Π‘ΠΊΠΎΡ‚Ρ‚ Πžβ€™Π₯Π°Ρ€Π° ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚:

                    Β«Π­Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ Ρ†Π΅Π»Π΅Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ·-Π·Π° Π±Π΅Π·ΡƒΠ΄Π΅Ρ€ΠΆΠ½ΠΎΠ³ΠΎΒ« списка Β»Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². … По сути, Ссли Π²Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ всС Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ указания ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для списка, зрячий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚, Ρ‡Ρ‚ΠΎ содСрТимоС являСтся списком. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ эту эвристику для обСспСчСния доступности, Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ²Π½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ ARIA = ”list” ”

                    Π― ΠΌΠΎΠ³Ρƒ ΠΏΠΎΠ½ΡΡ‚ΡŒ это рассуТдСниС. Π‘Π΅ΠΌΠ°Π½Ρ‚ΠΈΠΊΠ° слоТна, ΠΈ люди часто Π·Π»ΠΎΡƒΠΏΠΎΡ‚Ρ€Π΅Π±Π»ΡΡŽΡ‚ HTML. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, которая ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ, - это Π·Π°ΠΊΠΎΠ½Π½Ρ‹Π΅ сцСнарии, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для списка, Π½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ сСмантику. ОсобСнно, Ссли этот список ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ выглядит ΠΊΠ°ΠΊ список.

                    Π‘ΠΊΠΎΡ‚Ρ‚ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ исправлСниС.

                    Добавляя содСрТимоС ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом списка ΠΈ пСрСмСщая Π΅Π³ΠΎ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ экрана, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΡƒΡŽ сСмантику Π² список.

                      / **
                     * @bugfix Π—Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ webkit ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ сСмантику списка
                     * https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
                     * 1. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π½Π΅Ρ€Π°Π·Ρ€Ρ‹Π²Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ±Π΅Π»
                     * 2. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ это Π½Π΅ ΠΏΠΎΡ€Ρ‚ΠΈΡ‚ ΠΏΠΎΡ‚ΠΎΠΊ DOM.
                     * /
                    .list-unstyled> li: before {
                    содСрТаниС: "\ 200B"; / * 1 * /
                    позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ; / * 2 * /
                    }  

                    Нравится? Π― ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡŽ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ элСктронныС письма ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±ΡƒΠ΄Π½ΠΈΠΉ дСнь с Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ ΠΊΠΎΠ΄Π°, инструмСнтами, ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ ΠΈ интСрСсными ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌΠΈ со всСго Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°. ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΊ 11 100+ Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½Ρ‹ΠΌ подписчикам.


                    Π‘Π΄Π΅Π»Π°Π½ΠΎ с ❀️ Π² ΠœΠ°ΡΡΠ°Ρ‡ΡƒΡΠ΅Ρ‚ΡΠ΅. Если Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅, вСсь ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ бСсплатно ΠΏΠΎ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ MIT. Π― Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ нСрСгулярно дСлюсь мыслями, Π½Π΅ связанными с ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.

                    CSS: свойство Ρ‚ΠΈΠΏΠ° списка


                    Π’ этом руководствС ΠΏΠΎ CSS ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS list-style-type с синтаксисом ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ.

                    ОписаниС

                    Бвойство CSS list-style-type опрСдСляСт внСшний Π²ΠΈΠ΄ элСмСнта элСмСнта списка.

                    Бинтаксис

                    Бинтаксис свойства CSS Ρ‚ΠΈΠΏΠ° списка:

                      список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅;  

                    ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈΠ»ΠΈ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹

                    Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅

                    Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ элСмСнта элСмСнта списка. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

                    Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ОписаниС
                    диск Π—Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
                    ul {список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: диск; }
                    ΠΊΡ€ΡƒΠ³ ΠŸΠΎΠ»Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³
                    ul {list-style-type: circle; }
                    ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π—Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚
                    ul {list-style-type: square; }
                    дСсятичный ДСсятичныС числа, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅ΡΡ с 1
                    ol {Ρ‚ΠΈΠΏ-стиля-списка: дСсятичный; }
                    дСсятичный Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ ноль ДСсятичныС числа, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅ΡΡ с 1, с Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ 0 Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ для чисСл мСньшС 10
                    ol {list-style-type: decimal-lead-zero; }
                    Π½ΠΈΠΆΠ½ΠΈΠΉ римский РимскиС Ρ†ΠΈΡ„Ρ€Ρ‹ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ рСгистрС
                    ol {list-style-type: lower-roman; }
                    вСрхнСримскоС РимскиС Ρ†ΠΈΡ„Ρ€Ρ‹ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ рСгистрС
                    ol {list-style-type: upper-roman; }
                    ниТнСгрСчСский Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ грСчСскиС
                    ol {Ρ‚ΠΈΠΏ-стиля-списка: ниТнСгрСчСский; }
                    ниТняя Π°Π»ΡŒΡ„Π° Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ ASCII
                    ol {list-style-type: lower-alpha; }
                    ниТняя латинская Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ ASCII (Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² IE7)
                    ol {list-style-type: lower-latin; }
                    вСрхняя Π°Π»ΡŒΡ„Π° Π—Π°Π³Π»Π°Π²Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ ASCII
                    ol {list-style-type: upper-alpha; }
                    вСрхнСлатинский Π—Π°Π³Π»Π°Π²Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ ASCII (Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² IE7)
                    ol {list-style-type: upper-latin; }
                    армянский Армянская нумСрация
                    ol {list-style-type: armenian; }
                    грузинский Грузинская нумСрация
                    ol {list-style-type: georgian; }
                    Π½Π΅Ρ‚ ΠŸΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом элСмСнта списка Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ символа.
                    ol {list-style-type: none; }
                    ul {список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: Π½Π΅Ρ‚; }
                    ΡƒΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ унаслСдуСт Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список ΠΎΡ‚ своСго Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта
                    ol {Ρ‚ΠΈΠΏ-стиля-списка: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ; }
                    ul {список-ΡΡ‚ΠΈΠ»ΡŒ-Ρ‚ΠΈΠΏ: наслСдованиС; }

                    ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

                    • Бвойство Ρ‚ΠΈΠΏΠ° стиля списка ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ Ρ‚Π΅Π³Π°ΠΌ
                        ,
                          ΠΈΠ»ΠΈ
                        • .
                        • Π’ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список примСняСтся ΠΊ элСмСнтам с display: list-item.
                        • IE7 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ниТнюю Π»Π°Ρ‚ΠΈΠ½ΡΠΊΡƒΡŽ ΠΈ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Π»Π°Ρ‚ΠΈΠ½ΡΠΊΡƒΡŽ , вмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ниТнюю Π°Π»ΡŒΡ„Π° ΠΈ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Π°Π»ΡŒΡ„Π° .
                        • АлфавитныС стили, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π½ΠΈΠΆΠ½ΠΈΠΉ Π°Π»ΡŒΡ„Π° ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π°Π»ΡŒΡ„Π° , Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π½Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ числа послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ пСрСчислСны 26 элСмСнтов.
                        • Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅ свойства list-style, list-style-image ΠΈ list-style-position.

                        Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ

                        Бвойство CSS list-style-type ΠΈΠΌΠ΅Π΅Ρ‚ Π±Π°Π·ΠΎΠ²ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…:

                        • Π₯Ρ€ΠΎΠΌ
                        • Android
                        • Firefox (Gecko)
                        • Firefox Mobile (Gecko)
                        • Internet Explorer (IE)
                        • IE Π’Π΅Π»Π΅Ρ„ΠΎΠ½
                        • Opera
                        • Opera Mobile
                        • Safari (WebKit)
                        • Safari Mobile

                        ΠŸΡ€ΠΈΠΌΠ΅Ρ€

                        ΠœΡ‹ обсудим свойство list-style-type Π½ΠΈΠΆΠ΅, исслСдуя ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это свойство Π² CSS.

                        с упорядочСнными списками

                        Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ CSS Ρ‚ΠΈΠΏΠ° list-style-type, Π³Π΄Π΅ ΠΌΡ‹ примСняСм list-style-type ΠΊ упорядочСнному списку.

                        HTML Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

                          
                        1. TechOnTheNet.com
                        2. CheckYourMath.com
                        3. BigActivities.com

                        CSS Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

                          ol {Ρ‚ΠΈΠΏ-ΡΡ‚ΠΈΠ»ΡŒ-список: Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ римский; }  

                        УпорядочСнный список Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

                        Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ стиля списка CSS ΠΌΡ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ римских Ρ†ΠΈΡ„Ρ€ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ рСгистрС ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом списка Π² Ρ‚Π΅Π³Π΅

                          .

                          с нСупорядочСнными списками

                          Π—Π°Ρ‚Π΅ΠΌ Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ CSS-стиля списка, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ примСняСм Ρ‚ΠΈΠΏ стиля списка ΠΊ нСупорядочСнному списку.

                          HTML Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

                            
                          • TechOnTheNet.com
                          • CheckYourMath.com
                          • BigActivities.com

                          CSS Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

                            ul {Ρ‚ΠΈΠΏ-стиля-списка: Π½Π΅Ρ‚; }  

                          НСупорядочСнный список Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

                          Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ стиля списка CSS ΠΌΡ‹ ΡƒΠ΄Π°Π»ΠΈΠ»ΠΈ диск с Π»ΠΈΡ†Π΅Π²ΠΎΠΉ стороны ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта списка Π² Ρ‚Π΅Π³Π΅

                            . Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ отступ (Ссли Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS), Π½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом списка Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚.

                            с элСмСнтами списка

                            Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ CSS Ρ‚ΠΈΠΏΠ° list-style-type, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ примСняСм list-style-type ΠΊ элСмСнту списка.

                            HTML Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

                              
                            • TechOnTheNet.com
                            • CheckYourMath.com
                            • BigActivities.com

                            CSS Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

                              li {ΡΡ‚ΠΈΠ»ΡŒ-список: ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚; }  

                            Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ CSS-стиля со стилСм списка ΠΌΡ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Ρ… ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠ² ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом

                          • (вмСсто диска для нСупорядочСнных списков).

                            Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ элСмСнты списка Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ (нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π»ΠΈ элСмСнты списка Ρ‡Π°ΡΡ‚ΡŒΡŽ упорядочСнного ΠΈΠ»ΠΈ нСупорядочСнного списка):

                            .