Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки CSS arrow Уроки web-программирования. CSS (HTML): Списки.
18.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Уроки web-программирования. CSS (HTML): Списки. Печать E-mail
Автор megabax   
19.03.2011 г.
Урок 13. Управление шрифтами в CSS New Page 1

Уроки web-программирования. CSS (HTML): Списки.

Все статьи по CSS.

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

Теперь небольшой пример:

HTML:

<html>

 

<head>

  <title>Пример CSS файла. Списки</title>

  <link rel="stylesheet" href="styles.css" type="text/css" />

</head>

 

<body>

    <OL>

        <LI>Первый пункт списка</LI>

        <LI>Второй пункт списка</LI>

        <LI>Третий пункт списка</LI>

        <LI>Четвертый пункт списка</LI>

    </OL>

</body>

 

</html>

 

CSS:

OL {

    list-style-type: lower-greek;

}

 

В результате в браузере Opera мы увидим такую картинку:

Уроки web-программирования. CSS (HTML): Списки.

А в IE вот такую:

Уроки web-программирования. CSS (HTML): Списки.

 

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

Задает в качестве маркера произвольное изображение. Стоит заметить, что в HTML нет аналога этого свойства, списки с маркерами произвольного вида можно создать только с помощью CSS.

Рассмотрим еще пример:

HTML:

<html>

 

<head>

  <title>Пример CSS файла. Списки</title>

  <link rel="stylesheet" href="styles.css" type="text/css" />

</head>

 

<body>

    <UL>

        <LI>Первый пункт списка</LI>

        <LI>Второй пункт списка</LI>

        <LI>Третий пункт списка</LI>

        <LI>Четвертый пункт списка</LI>

    </UL>

</body>

 

</html>

 

CSS:

UL  {

    list-style-image: url(marker.gif);

}


И вот как будет выглядеть результат:

Уроки web-программирования. CSS (HTML): Списки.

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

Это свойство позволяет указать положение маркера. Значение свойства задается с помощью следующих ключевых слов:
  • outside - за пределами основного блока элемента списка;
  • inside - внутри основного блока списка.
Проиллюстрируем сказанное выше примерами. Рассмотрим CSS-правило:

HTML:

<html>

 

<head>

  <title>Пример CSS файла. Списки</title>

  <link rel="stylesheet" href="styles.css" type="text/css" />

</head>

 

<body>

    <UL class="c1">

        <LI>Первый пункт списка</LI>

        <LI>Второй пункт списка</LI>

        <LI>Третий пункт списка</LI>

        <LI>Четвертый пункт списка</LI>

    </UL>

    <br>

    <UL class="c2">

        <LI>Первый пункт списка</LI>

        <LI>Второй пункт списка</LI>

        <LI>Третий пункт списка</LI>

        <LI>Четвертый пункт списка</LI>

    </UL>

</body>

 

</html>

 

CSS:

.c1{

    list-style-position: outside;

}

 

.c2 {

    list-style-position: inside;

}

В первом случае, если текст элементов списка обвести воображаемым прямоугольником, то маркер будет находиться за пределами этого прямоугольника, что и соответствует значению outside.

Во втором случае, если текст элементов списка обвести воображаемым прямоугольником, то маркер будет находиться в пределах этого прямоугольника, что и соответствует значению inside.

См. скриншот:

Уроки web-программирования. CSS (HTML): Списки.

 

Аналога свойства list-style-position в HTML не существует, следовательно, управлять положением маркера в этом языке невозможно.

Свойство list-style

Стенографическое свойство, позволяющее в сокращенной форме задать значения свойств list-style-type, list-style-image и list-style-position. Приведем примеры. Правило:
UL { list-style-type: circle; list-style-image: url(images/marker2.gif); list-style-position: inside }
можно записать в сокращенном виде:
UL { list-style: circle url(images/marker2.gif) inside }


Краткое описание всех свойств управления характеристиками списков в SCC приведено в таблице:

Свойства CSS для управления характеристиками списков
Свойство Описание Пример
list-style-type Определяет внешний вид маркера либо нумератора

disc | circle | square | decimal | decimal-leading-zero lower-roman | upper-roman lower-greek | lower-alpha lower-latin | upper-alpha upper-latin
UL {list-style-type: square;}

OL {list-style-type: lower-roman;}
list-style-image Определяет URL для изображения маркера UL {list-style-image: url(bullet3.gif) ; }
list-style-position Определяет положение маркеров внутри или снаружи основного структурного блока

inside | outside
LI {list-style-position: outside}
list-style Стенографическое свойство, позволяющее одновременно задать значения всех предыдущих свойств. UL {list-style: square url(bullet3.gif) outside;}

 

Последнее обновление ( 19.03.2011 г. )
 
« След.   Пред. »
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги