Списки - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Основы CSS » Списки
Списки
EvgenyДата: Вторник, 23.02.2010, 18:18 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.

В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

[small]Табл. 1. Свойства CSS для управления видом списка[/small]
Свойство Значение Описание Пример
list-style disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. LI {list-style: circle}

LI {list-style: upper-alpha}

list-style-image none
URL
Устанавливает символом маркера любую картинку. LI {list-style-image: url(check.gif)}
list-style- position outside
inside
Выбор положения маркера относительно блока строк текста. LI {list-style-position: inside}

Поскольку тег < LI> наследует стилевые свойства тега < OL> или < UL>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI. Так, в примере 1 используется селектор UL, для него и задаются стилевые параметры.

[small]Пример 1. Создание маркированного списка[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Списки</title>
<style type="text/css">
UL {  
  list-style: square; /* Маркеры в виде квадрата */
  list-style-position: outside; /* Маркеры размещаются за пределами текстового блока */
  color: navy; /* Цвет текста списка */
}
</style>
</head>  
<body>
<ul>
  <li>Заголовок должен быть короче трех строк.</li>
  <li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.</li>
  <li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

[small]Рис. 1. Вид списка, измененого с помощью стилей[/small]

Чтобы установить свое собственное изображение в качестве маркера применяется параметр list-style-image, как показано в примере 2.

[small]Пример 2. Использование изображений в качестве маркера[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Списки</title>
<style type="text/css">
LI {  
  list-style-image: url('images/check.gif'); /* Путь к файлу с маркером */
}
</style>
</head>  

<body>
<ul>
  <li>Заголовок должен быть короче трех строк.</li>
  <li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.</li>
  <li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

[small]Рис. 2. Изображения в качестве маркеров[/small]

Некоторые примеры создания различных списков приведен в табл. 2.

[small]Табл. 2. Возможные виды списков[/small]
Код HTML Пример
< li style="list-style: disc"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
< li style="list-style: circle"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
< li style="list-style: square"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
< li style="list-style: decimal"> Нумерованный список с арабскими цифрами:
  1. первый
  2. второй
  3. третий
< li style="list-style: lower-roman"> Нумерованный список со строчными римскими цифрами:
  1. первый
  2. второй
  3. третий
< li style="list-style: upper-roman"> Нумерованный список с заглавными римскими цифрами:
  1. первый
  2. второй
  3. третий
< li style="list-style: lower-alpha"> Нумерованный список со строчными буквами латинского алфавита:
  1. первый
  2. второй
  3. третий
< li style="list-style: upper-alpha"> Нумерованный список с заглавными буквами латинского алфавита:
  1. первый
  2. второй
  3. третий
 
Форум » Статьи о CSS » Основы CSS » Списки
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]