... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Списки (стр. 1)

 

 

Главное преимущество автоматического создания списков перед ручным состоит в том, что не приходится перенумеровывать пункты списка при добавлении в него новых элементов. Особенно это важно, когда необходимо добавить некоторый пункт в начало списка, - в случае ручного создания придется вручную перенумеровывать большинство его пунктов. Это трудоемкий процесс, особенно если пунктов в списке много, отнимающий немало времени. При автоматическом создании списков ручной перенумерации не требуется, она выполняется в автоматическом режиме при добавлении новых пунктов.

В HTML есть два вида списков, поддерживающих автоматическую нумерацию: нумерованные и маркированные. Среди их параметров есть атрибут type, который позволяет задать тип нумерации. В CSS управление списками предоставляет создателям страниц более широкие возможности.

Свойство list-style-type

С помощью такого свойства задается вид маркера элемента списка. Значения задаются при помощи ключевых слов, обозначающих вид маркера, или значения попе, которое говорит о том, что маркер не используется.

Для определения видов маркеров маркированных списков используются ключевые слова:

  • disk - в виде закрашенного круга;
  • circle - в виде незакрашенного круга;
  • square - в виде закрашенного квадрата.
Эти значения аналогичны значениям атрибута type для списков в HTML. Конкретное представление маркеров будет зависеть от браузера.

Для нумерованных списков перечень ключевых слов, задающих тип маркеров в CSS, более широк, чем в HTML. Пожалуй, даже слишком широк. Применение большей части значений вы вряд ли найдете. Кроме того, не все браузеры их поддерживают в полном объеме. Тем не менее, укажем все допустимые значения и браузеры, поддерживающие их. Доступны следующие значения для видов маркеров.

  • decimal - десятичные числа, начиная с 1.
  • decimal-leading-zero - десятичные числа с ведущими нулями (например, 01, 02, 03, ..., 98, 99). Это значение не поддерживается браузером Internet Explorer, в котором нумерация всегда ведется без ведущих нулей.
  • lower-roman - римские цифры, представленные строчными буквами латинского алфавита (i, ii, iii, iv, v и т.д.).
  • upper-roman - римские цифры, представленные приписными буквами латинского алфавита (I, II, III, IV, V и т.д.).
  • hebrew - традиционная еврейская нумерация. Поддерживается только браузером Mozilla.
  • georgian - традиционная грузинская нумерация. Поддерживается браузерами Mozilla и Opera. Правда, выглядит эта нумерация в них по-разному, я даже не берусь судить, какой из браузеров делает это правильно.
  • armenian - традиционная армянская нумерация. Также поддерживается только браузерами Mozilla и Opera. Нумерация выглядит одинаково.
  • cjk-ideographic - простые идеографические числа. Поддерживается только браузером Mozilla.
  • lower-latin или lower-alpha - строчные буквы в коде ASCII (a, b, с, ..., z). Оба значения поддерживаются браузерами Mozilla и Opera. Internet Explorer поддерживает только значение lower-alpha. В целях однозначности отображения во всех браузерах лучше пользоваться именно им.
  • lower-greek - классические строчные буквы греческого алфавита: альфа, бета, гамма и т.д. (б, в, г, д,...). Поддерживается браузерами Mozilla и Opera.
В случае с нумерацией буквами какого-либо алфавита, после того как буквы в алфавите заканчиваются, начинается двойная нумерация (аа, ab, ас,...). В таблице для сравнения приведены способы создания нумерованных списков при помощи CSS и только на HTML.

Создание нумерованных списков в HTML и CSS
HTML CSS
<OL TYPE="a">
<LI>Первый пункт списка</LI>
<LI>>Второй пункт списка</LI>
<LI>Третий пункт списка</LI>
<LI>>Четвертый пункт списка</LI>
</OL>
0L { list-style-type: lower-greek; }

 

Страница: - 1 - | - 2 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены