CSS Списки
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера любое изображение. Последняя возможность не поддерживается четвертой версией браузера Netscape Navigator.
В таблице перечислены свойства элементов, предназначенных для создания и изменения списков.
Свойство |
Значение |
NC |
IE |
Описание |
Пример |
list-style |
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
|
4+
|
4+
|
Вид маркера. Первые три используются для создания маркированного списка, а остальные - для нумерованного. |
LI {list-style: circle;}
LI {list-style: upper-alpha;} |
list-style-image |
none
URL |
6
|
4+
|
Устанавливает символом маркера любую картинку. |
LI {list-style-image: url(check.gif)} |
list-style position |
outside
inside |
6
|
4+
|
Выбор положения маркера относительно блока строк текста. |
LI {list-style-position: inside;} |
NC - Netscape Communicator; IE - Internet Explorer; 4+ означает версию 4 и выше.
Пример 1. Создание маркированного списка
<html>
<head>
<style type="text/css">
LI { list-style: square; list-style-position: outside; color: navy}
</style>
</head>
<body>
<ul>
<li>Заголовок должен быть короче трех строк;
<li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
<li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;
<ul>
</body>
</html>
|
|
В примере используются квадратные маркеры и их внешнее размещение относительно текста. Цвет - темносиний.
-
Заголовок должен быть короче трех строк;
-
При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
-
Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;
|
Пример 2. Использование изображений в качестве маркера
<html>
<head>
<style type="text/css">
LI { list-style-image: url(/images/001/check.gif); }
</style>
</head>
<body>
<ul>
<li>Заголовок должен быть короче трех строк;
<li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
<li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;
<ul>
</body>
</html>
|
|
В качестве маркеров используется маленькая картинка.
-
Заголовок должен быть короче трех строк;
-
При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
-
Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;
|
Некоторые примеры создания различных списков приведен в таблице.
Код HTML |
Пример |
<li style="list-style: disk"> |
Что следует учитывать при тестировании сайта:
-
работоспособность всех ссылок
-
поддержку разных браузеров
-
читабельность текста
|
<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"> |
Нумерованный список с заглавными буквами латинского алфавита:
-
текст
-
текст
-
текст
|
|
Рекомендуем почитать
Добавить комментарий