HTML & CSS - серия 4

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

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

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

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

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

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

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

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

Наш список из трёх элементов заключён внутри тегов

...

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

Далее. Каждый элемент списка находится внутри контейнера

• ...
. Обращаю внимание на то, что URL_картинки не заключается в кавычки.

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

• элемент
  списка (а это набор совершенно бессмысленных слов, нужный только для
  того, чтобы показать, как наш список будет выглядеть)
• следующий
  элемент списка (а это набор совершенно бессмысленных слов, нужный
  только для того, чтобы показать, как наш список будет выглядеть)
• следующий
  элемент списка (а это набор совершенно бессмысленных слов, нужный
  только для того, чтобы показать, как наш список будет выглядеть)
В принципе, можно было не писать list-style-position:outside, поскольку маркер устанавливается за границами списка по умолчанию.

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

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

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

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

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

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

style="list-style-type:circle">пункт списка style="list-style-type:disc">ещё один пункт списка style="list-style-type:none">ещё один пункт списка style="list-style-type:square">ещё один пункт списка




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

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

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

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




Пожалуй, единственное заметное отличие нумерованного списка (заключённого между тегами

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

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

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

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

пункт списка style="list-style-type:circle">элемент вложенного списка ещё один элемент вложенного списка style="list-style-type:circle">ещё один элемент вложенного списка ещё один пункт списка ещё один пункт списка




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

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

На примере списков мы как раз сталкиваемся с наследованием.Рассмотрим нумерованный список, в котором мы решили выделить цифры каким-нибудь другим шрифтом. Вот что у нас получится:
1. первый пункт списка
2. второй пункт списка

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

style="color:maroon; font-style:italic; font-weight:bold">первый пункт списка второй пункт списка




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

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

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

style="color:maroon; font-style:italic; font-weight:bold">первый пункт спискаstyle="color:maroon; font-style:italic; font-weight:bold">второй пункт списка




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

Примечание.

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

font-style:normal;

font-weight:normal;

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







 


Источник Проксима
Arnusha