Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Статьи

Основы HTML
Текст
Изображения
Ссылки
Списки
Таблицы
Формы
Фреймы
Основы CSS
Рецепты CSS
Оформление таблиц
Основы верстки
Табличная верстка
Верстка с помощью слоев
Использование слоев
Примеры верстки слоями

Списки

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

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

Табл. 1. Свойства CSS для управления видом списка
Свойство Значение Описание Пример
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, для него и задаются стилевые параметры.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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>

В данном примере используются квадратные маркеры и их внешнее размещение относительно текста. Цвет — темно-синий.

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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.

Табл. 2. Возможные виды списков
Код 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. текст




На главную









  • При использовании материалов сайта ссылка на comnew.ru обязательна!