Списки
С помощью CSS (ЦСС) можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В табл. 1 перечислены свойства элементов, предназначенных для разработки и изменения списков.
Свойство | Значение | Описание | Пример |
---|---|---|---|
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. Создание маркированного списка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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. Используются квадратные маркеры и их внешнее размещение относительно контента.
Рис. 1. Вид списка, измененого с помощью стилей
Чтобы установить свое собственное изображение в качестве маркера применяется параметр list-style-image, как показано в примере 2.
Пример 2. Использование рисунков в качестве маркера
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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. В качестве маркеров используется маленькая картинка.
Рис. 2. Имаги в качестве маркеров
Некоторые примеры разработки различных списков приведен в табл. 2.
Код ШТМЛ | Пример |
---|---|
<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"> |
Нумерованный список с заглавными буквами латинского алфавита:
|
Статья опубликована: 13.09.2009 | Последнее обновление: 16.04.2009 |