Списки. Пример наследования свойств
Списки
с нумерацией либо различными значками - маркерами ("кружочками",
"квадратиками" и т.п.) хорошо знакомы из 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-position:outside, поскольку маркер устанавливается за границами списка по умолчанию.list-style-image:url('URL_картинки') указывает на картинку, которая будет играть в нашем списке роль маркера (во втором примере этой записи нет).
list-style-type:circle стоит в первом примере на тот случай, если картинка не загрузится, и указывает тип предпочитаемого нами маркера: circle
(окружность). Если бы мы не написали этого, и к тому же картинка не
загрузилась бы, то на месте окружностей стоял был тип маркета,
используемый по умолчанию (disc). Кроме окружности и диска, маркер для ненумерованного списка может принимать вид квадрата (square) или вообще исчезать (none).
В третьем примере (там, где маркер стоит внутри списка) свойство list-style-type не задано, и по умолчанию маркер принимает форму диска.
Внутри одного списка можно задавать разные варианты оформления пунктов, например:
- пункт списка
- ещё один пункт списка
- ещё один пункт списка
- ещё один пункт списка
Код нашего кривого списка выглядит так:
<ul><li
style="list-style-type:circle">пункт списка</li><li
style="list-style-type:disc">ещё один пункт списка</li><li
style="list-style-type:none">ещё один пункт списка</li><li
style="list-style-type:square">ещё один пункт
списка</li></ul> |
Что
делать, если мы хотим оформить цифры в виде картинок? Поступить точно
так же, как при составлении списка, с которого мы начинали:
/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.
Списки можно вкладывать друг в друга, например, так:
- пункт списка
- элемент вложенного списка
- ещё один элемент вложенного списка
- ещё один элемент вложенного списка
- ещё один пункт списка
- ещё один пункт списка
Код этого списка имеет вид:
<ol><li>пункт
списка</li><ul style="padding:0 0 0 20px"><li
style="list-style-type:circle">элемент вложенного
списка</li><li style="list-style-type:circle">ещё один
элемент вложенного списка</li><li
style="list-style-type:circle">ещё один элемент вложенного
списка</li></ul><li>ещё один пункт
списка</li><li>ещё один пункт списка</li></ol> |
Наследование
В
CSS хорошо известно такое правило, как наследование. Оно означает, что
дочерний элемент будет иметь те же свойства, что и родительский элемент.
На примере списков мы как раз сталкиваемся с наследованием.Рассмотрим нумерованный список, в котором мы решили выделить цифры каким-нибудь другим шрифтом. Вот что у нас получится:- первый пункт списка
- второй пункт списка
Код этого списка имеет вид:
<ol><li
style="color:maroon; font-family:Verdana; font-size:18px;
font-style:italic; font-weight:bold">первый пункт
списка</li><li style="color:maroon; font-family:Verdana;
font-size:18px; font-style:italic; font-weight:bold">второй пункт
списка</li></ol> |
Если мы
хотим вернуть обычный шрифт для пунктов списка, оставив выделенными
только цифры, нам придётся вводить для этого шрифта значения всех свойств, которые были изменены, чтобы выделить цифры-маркеры:
- первый пункт списка
- второй пункт списка
Код в этом случае имеет вид:
<ol><li
style="color:maroon; font-family:Verdana; font-size:18px;
font-style:italic; font-weight:bold"><span style="color:black;
font-family:arial, sans-serif; font-size:.7em; font-style:normal;
font-weight:normal">первый пункт списка</span></li><li
style="color:maroon; font-family:Verdana; font-size:18px;
font-style:italic; font-weight:bold"><span style="color:black;
font-family:arial, sans-serif; font-size:.7em; font-style:normal;
font-weight:normal">второй пункт
списка</span></li></ol> |
Не забывайте закрывать тег <span> для каждого пункта списка. Контейнер <span...>...</span> является в этом примере дочерним элементом, а контейнер <li...>...</li> - родительским элементом.
Примечание.
Свойства основного текста на Ярушке:
font-family:arial, sans-serif;
font-size:.7em (.7em - сокращение, можно было бы записать 0.7em);
font-style:normal;
font-weight:normal;
color - зависит от настроек Вашей страницы.
Источник Проксима
Arnusha
