|
Списки
С помощью 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"> |
|
Нумерованный список с арабскими цифрами:
- текст
- текст
- текст
|
|
|
|
<li style="list-style: lower-roman"> |
|
Нумерованный список со строчными римскими цифрами:
- текст
- текст
- текст
|
|
|
|
<li style="list-style: upper-roman"> |
|
Нумерованный список с заглавными римскими цифрами:
- текст
- текст
- текст
|
|
|
|
<li style="list-style: lower-alpha"> |
|
Нумерованный список со строчными буквами латинского алфавита:
- текст
- текст
- текст
|
|
|
|
<li style="list-style: upper-alpha"> |
|
Нумерованный список с заглавными буквами латинского алфавита:
- текст
- текст
- текст
|
|
|
|