-Всегда под рукой

 -Подписка по e-mail

 

 -Рубрики

 -Цитатник

пейзажи Алексея Савченко - (4)

Алексей Савченко (Alexey Savchenko) — художник реалист..... Алексей Савченко пишет свои картины ...

не огорчайте дети матерей - (6)

Понравился стих из газетки ЗОЖ. В газетке ЗОЖ много прекрасных стихов, которые пишут душой прос...

идеальное творожное тесто для вкусной выпечки: лучшие пошаговые рецепты - (0)

Идеальное творожное тесто для вкусной выпечки: лучшие пошаговые рецепты Еcли вы хoтитe чтo-тo иc...

поздравление от Taisa_Andryeyeva - (4)

С ДНЁМ РОЖДЕНИЯ ДОРОГАЯ, НИНА!!!(Arnusha)   С ДНЁМ РОЖДЕНИЯ ДОРОГАЯ, НИН...

поздравление от Марьяши7 - (1)

С ДНЁМ РОЖДЕНИЯ НИНОЧКА!! (Arnusha)....... ...

 -Сообщества

Участник сообществ (Всего в списке: 3) Всё_для_блога Мир_клипарта Всё_для_-_блога
Читатель сообществ (Всего в списке: 1) Мир_клипарта

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.01.2009
Записей: 9868
Комментариев: 293391
Написано: 327912



HTML & CSS - серия 4

Суббота, 04 Июня 2011 г. 07:28 + в цитатник

Серия 1

Серия 2

Серия 3

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

Списки
с нумерацией либо различными значками - маркерами ("кружочками",
"квадратиками" и т.п.) хорошо знакомы из 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"><li style="list-style-position:outside; list-style-image:url('//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png') ; list-style-type:circle">элемент списка...</li><li style="list-style-position:outside; list-style-image:url('//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png')
; list-style-type:circle">следующий элемент
списка...</li><li style="list-style-position:outside;
list-style-image:url('//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png') ; list-style-type:circle">следующий элемент списка...</li></ul>


Наш список из трёх элементов заключён внутри тегов <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>


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

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

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

<ol style="padding:0 0 0 25px"><li style="list-style-image:url('//s56.radikal.ru/i153/1007/7b/7f10dfb95c69.png')">первый элемент списка</li><li style="list-style-image:url('//s001.radikal.ru/i194/1007/b6/dda52ff8f3d2.png')">второй элемент списка</li><li style="list-style-image:url('//s004.radikal.ru/i206/1007/2d/cda348ffa7ba.png')">третий элемент списка</li></ol>


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

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

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

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

<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 хорошо известно такое правило, как наследование. Оно означает, что
дочерний элемент будет иметь те же свойства, что и родительский элемент.

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

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

<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>


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

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

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

<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


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

При оформлении нумерованного списка никакой принципиальной разницы не возникает. Вместо тега <ul> в данном случае принято использовать тег <ol> - ordered list - нумерованный список. Теоретически мы можем использовать те же значения list-style-type, но это не имеет смысла. Типами нумерованного списка логично сделать цифры или буквы. Примеры:


  1. первый пункт
  2. второй пункт
  3. третий пункт
<ol><li style="list-style-type:decimal">первый пункт</li>...</ol>. Значение decimal принято по умолчанию, поэтому его можно было бы не указывать.
  1. первый пункт
  2. второй пункт
  3. третий пункт
<ol><li style="list-style-type:upper-roman">первый пункт</li>...</ol>
  1. первый пункт
  2. второй пункт
  3. третий пункт
<ol><li style="list-style-type:lower-roman">первый пункт</li>...</ol>
  1. первый пункт
  2. второй пункт
  3. третий пункт
<ol><li style="list-style-type:upper-latin">первый пункт</li>...</ol>
  1. первый пункт
  2. второй пункт
  3. третий пункт
<ol><li style="list-style-type:lower-latin">первый пункт</li>...</ol>


Arnusha
Рубрики:  Уроки
Метки:  

Процитировано 30 раз
Понравилось: 10 пользователям



Linelchen   обратиться по имени Суббота, 04 Июня 2011 г. 07:49 (ссылка)
Спасибо солнышко)))
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 05 Июня 2011 г. 01:52ссылка
Linelchen, Пожалуйста!!!
bond52   обратиться по имени Суббота, 04 Июня 2011 г. 07:55 (ссылка)

Пока собираю, но скоро начну тренироваться в применении. Нужна будет консультация. Я надеюсь на твою помощь в освоении материала.
Ответить С цитатой В цитатник
lusina03   обратиться по имени Суббота, 04 Июня 2011 г. 09:55 (ссылка)
Arnusha, Спасибо Ниночка забираю до кучи пригодится
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 05 Июня 2011 г. 01:53ссылка
lusina03, Пожалуйста!!!
NikaLive   обратиться по имени Суббота, 04 Июня 2011 г. 13:26 (ссылка)
Ниночка, спасибо !!!
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 05 Июня 2011 г. 01:53ссылка
NikaLive, Пожалуйста!!!
татьяна_татуревич   обратиться по имени Суббота, 04 Июня 2011 г. 14:50 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
Феврония52   обратиться по имени Суббота, 04 Июня 2011 г. 14:59 (ссылка)


Спасибо, дорогая!
Ответить С цитатой В цитатник
Перейти к дневнику
rottam   обратиться по имени Суббота, 04 Июня 2011 г. 16:43 (ссылка)
Спасибочки,эту нежность в благодарность.
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 05 Июня 2011 г. 01:53ссылка
rottam, Пожалуйста!!!
Nikash   обратиться по имени Понедельник, 06 Июня 2011 г. 12:33 (ссылка)
Нина, спасибо, за то, что делаешь такие посты)
Ответить С цитатой В цитатник
Перейти к дневнику
МОННА   обратиться по имени Понедельник, 15 Августа 2011 г. 22:46 (ссылка)
Спасибо, Ниночка!!!
Ответить С цитатой В цитатник
vdomarvik   обратиться по имени Воскресенье, 02 Марта 2014 г. 14:33 (ссылка)
Спасибо огромное!!!Очень полезные постики!!!
Ответить С цитатой В цитатник
zoua45   обратиться по имени Пятница, 07 Августа 2015 г. 06:51 (ссылка)
Благодарю за урок!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку