Панель Управления





Курс CSS. Урок 15. Работа со списками.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 15. Работа со списками. В работе со списками удобно использовать правило сокращенной записи: Список (list-style): [<'list-style-type'>||<'list-style-position'>||<'list-style-image'>]. Возможные значения свойства list-style-type для отображения маркера: none, circle, disc, square и др. Для позиционирования маркеров используются значения inside и outside (это значение по умолчанию) свойства list-style-position. Для использования графических файлов для маркеров используются значения имени файла вместе с путем к нему свойства list-style-image.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
15. Работа со списками.
В работе со списками удобно использовать правило сокращенной записи:
Сокращенная запись для списков:

Список (list-style):

[<'list-style-type'>||<'list-style-position'>||<'list-style-image'>]



Возможные значения свойства list-style-type для отображения маркера можно посмотреть в следующей таблице:
Возможные значения свойства list-style-type для списков
NN Значение Пояснение Для IE Пример
1 none Маркер отсутствует
  1. * 01 *
  2. * 02 *
  3. * 03 *
2 circle Маркер в виде круга
  1. * 01 *
  2. * 02 *
  3. * 03 *
3 disc Маркер в виде заполненного круга, это значение по умолчанию.
  1. * 01 *
  2. * 02 *
  3. * 03 *
4 square Маркер в виде квадрата
  1. * 01 *
  2. * 02 *
  3. * 03 *
5 armenian Армянская нумерация.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
6 cjk-ideographic cjk-ideographic
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
7 decimal Маркер а виде цифры.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
8 decimal-leading-zero Цифры с нулем перед началом (т.е. ноль ставится для чисел, которые меньше 10)
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
9 georgian Грузинская нумерация.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
10 hebrew Еврейская нумерация
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
11 hiragana Японская нумерация Хирагана
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
12 hiragana-iroha Японская нумерация Хирагана (старая)
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
13 katakana Японская нумерация Катакана
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
14 katagana-iroha Японская нумерация Катакана (старая)
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
15 lower-alpha Альфа, нижний регистр.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
16 lower-greek Греческий алфавит, нижний регистр.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
17 lower-latin Латынь, нижний регистр.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
18 lower-roman Римские цифры, нижний регистр.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
19 upper-alpha Альфа, верхний регистр.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
20 upper-latin Латынь, верхний регистр.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
21 upper-roman Римские цифры, верхний регистр.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
22 inherit Значение наследуется от элемента родителя.
  1. * 01 *
  2. * 02 *
  3. * 03 *
  4. * 04 *
  5. * 05 *
  6. * 06 *
  7. * 07 *
  8. * 08 *
  9. * 09 *
  10. * 10 *
Значения по умолчанию: "disc" для <ul> и "decimal" для <ol>.

Для позиционирования маркеров используются значения inside и outside (это значение по умолчанию) свойства list-style-position:
  • Маркер за пределами области значений списка.
  • Без определения значения list-style-position
  • Маркер за пределами области значений списка.
  • list-style-position:outside;
  • Это значение по умолчанию.
  • Маркер в пределах области значений списка.
  • list-style-position:inside;
Для использования графических файлов для маркеров используются значения имени файла вместе с путем к нему свойства list-style-image:
  • Для маркеров данного списка используем файл sqpurple.gif
  • list-style-image:url('sqpurple.gif');
  • Для маркеров данного списка используем файл arrow.png
  • list-style-image:url('arrow.png');
  • Для маркеров данного списка используем файл heart24-16x16.png
  • list-style-image:url('heart24-16x16.png');
  • Для маркеров данного списка используем файл no_file.gif
  • list-style-image:url('no_file.gif');
  • Т.о., мы видим, если требуемый файл отсутствует, использует маркер по умолчанию.
Обратите внимание, что если одновременно используется свойство list-style-type и свойство list-style-image, например:
list-style: upper-latin url('sqpurple.gif');
то будет сделана попытка использовать именно url('sqpurple.gif'), т.к. свойство list-style-image имеет более высокий приоритет, чем list-style-type. Но если файл sqpurple.gif отсутствует, то будет использовано свойство list-style-type:upper-latin;

Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_015_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_015_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: :: /


Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p015.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑