Списки. Пример наследования свойств

Списки
с нумерацией либо различными значками - маркерами ("кружочками",
"квадратиками" и т.п.) хорошо знакомы из MS Word. Если в списке ведётся
нумерация, он называется нумерованным. В противном случае мы имеем дело с
ненумерованным списком. Рассмотрим сначала его.

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

Выглядеть наш список будет так:

/s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png" target="_blank">//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png);">элемент
списка (а это набор совершенно бессмысленных слов, нужный только для
того, чтобы показать, как наш список будет выглядеть)
/s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png" target="_blank">//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png);">следующий
элемент списка (а это набор совершенно бессмысленных слов, нужный
только для того, чтобы показать, как наш список будет выглядеть)
/s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png" target="_blank">//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png);">следующий
элемент списка (а это набор совершенно бессмысленных слов, нужный
только для того, чтобы показать, как наш список будет выглядеть)

В случае, если картинка по каким-либо причинам не загрузится, список будет выглядеть так:

• элемент
  списка (а это набор совершенно бессмысленных слов, нужный только для
  того, чтобы показать, как наш список будет выглядеть)
• следующий
  элемент списка (а это набор совершенно бессмысленных слов, нужный
  только для того, чтобы показать, как наш список будет выглядеть)
• следующий
  элемент списка (а это набор совершенно бессмысленных слов, нужный
  только для того, чтобы показать, как наш список будет выглядеть)

Теперь - код. Для списка с бабочками он имеет вид:

Наш список из трёх элементов заключён внутри тегов <ul style="padding:0 0 0 25px">...</ul>.

ul расшифровывается как unordered list - ненумерованный список. padding:0 0 0 25px нужен для того, чтобы наша бабочка не "улетела" за левую границу видимой области. Можно было бы также написать padding-left:25px

Далее. Каждый элемент списка находится внутри контейнера <li style="list-style-position:outside; list-style-image:url('URL_картинки'); list-style-type:circle">...</li>. Обращаю внимание на то, что URL_картинки не заключается в кавычки.

list-style-position:outside говорит о том, что маркер находится за границами списка. Если бы вместо этого было list-style-position:inside, то маркер попал бы "внутрь" списка:

• элемент
  списка (а это набор совершенно бессмысленных слов, нужный только для
  того, чтобы показать, как наш список будет выглядеть)
• следующий
  элемент списка (а это набор совершенно бессмысленных слов, нужный
  только для того, чтобы показать, как наш список будет выглядеть)
• следующий
  элемент списка (а это набор совершенно бессмысленных слов, нужный
  только для того, чтобы показать, как наш список будет выглядеть)

list-style-image:url('URL_картинки') указывает на картинку, которая будет играть в нашем списке роль маркера (во втором примере этой записи нет).

list-style-type:circle стоит в первом примере на тот случай, если картинка не загрузится, и указывает тип предпочитаемого нами маркера: circle
(окружность). Если бы мы не написали этого, и к тому же картинка не
загрузилась бы, то на месте окружностей стоял был тип маркета,
используемый по умолчанию (disc). Кроме окружности и диска, маркер для ненумерованного списка может принимать вид квадрата (square) или вообще исчезать (none).

В третьем примере (там, где маркер стоит внутри списка) свойство list-style-type не задано, и по умолчанию маркер принимает форму диска.

Внутри одного списка можно задавать разные варианты оформления пунктов, например:

• пункт списка
• ещё один пункт списка
• ещё один пункт списка
• ещё один пункт списка

Код нашего кривого списка выглядит так:

Что
делать, если мы хотим оформить цифры в виде картинок? Поступить точно
так же, как при составлении списка, с которого мы начинали:

/s56.radikal.ru/i153/1007/7b/7f10dfb95c69.png" target="_blank">//s56.radikal.ru/i153/1007/7b/7f10dfb95c69.png);">первый элемент списка
/s001.radikal.ru/i194/1007/b6/dda52ff8f3d2.png" target="_blank">//s001.radikal.ru/i194/1007/b6/dda52ff8f3d2.png);">второй элемент списка
/s004.radikal.ru/i206/1007/2d/cda348ffa7ba.png" target="_blank">//s004.radikal.ru/i206/1007/2d/cda348ffa7ba.png);">третий элемент списка

Код будет аналогичным, только картинки для разных элементов списка надо брать разные (опустим list-style-position:outside и тип маркера, которым мы хотим заменить, в случае чего, наши картинки):

Пожалуй, единственное заметное отличие нумерованного списка (заключённого между тегами <ol>...</ol>) от ненумерованного (заключённого между тегами <ul>...</ul>)
состоит в том, что в первом случае в качестве маркера по умолчанию
подставляется диск, а во втором - арабская (десятичная) цифра - значение
decimal.

Списки можно вкладывать друг в друга, например, так:

1. пункт списка
   • элемент вложенного списка
   • ещё один элемент вложенного списка
   • ещё один элемент вложенного списка
2. ещё один пункт списка
3. ещё один пункт списка

Код этого списка имеет вид:

Наследование

В
CSS хорошо известно такое правило, как наследование. Оно означает, что
дочерний элемент будет иметь те же свойства, что и родительский элемент.

1. первый пункт списка
2. второй пункт списка

Код этого списка имеет вид:

Если мы
хотим вернуть обычный шрифт для пунктов списка, оставив выделенными
только цифры, нам придётся вводить для этого шрифта значения всех свойств, которые были изменены, чтобы выделить цифры-маркеры:

1. первый пункт списка
2. второй пункт списка

Код в этом случае имеет вид:

Не забывайте закрывать тег <span> для каждого пункта списка. Контейнер <span...>...</span> является в этом примере дочерним элементом, а контейнер <li...>...</li> - родительским элементом.

Примечание.

Свойства основного текста на Ярушке:

font-family:arial, sans-serif;

font-size:.7em (.7em - сокращение, можно было бы записать 0.7em);

font-style:normal;

font-weight:normal;

color - зависит от настроек Вашей страницы.

Arnusha