| eXeS | Дата: Вторник, 10.11.2009, 19:32 | Сообщение # 1 |
 Легенда
Группа: Администраторы
Сообщений: 273
Статус: Offline
| С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.
Поскольку тег <LI> наследует стилевые свойства тега <OL> или <UL>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI. Так, в примере 1 используется селектор UL, для него и задаются стилевые параметры.
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. Используются квадратные маркеры и их внешнее размещение относительно текста.
Чтобы установить свое собственное изображение в качестве маркера применяется параметр list-style-image, как показано в примере 2.
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. В качестве маркеров используется маленькая картинка.
Некоторые примеры создания различных списков приведен в табл. 2.
Автор:Влад Мержевич
Источник: www.htmlbook.ru
|
| |
|
|
Главная 
