Стиль списка.В девятой главе учебника HTML мы с Вами уже знакомились с таким немаловажным элементом как список и действительно хорошее средство для структуризации данных. Однако списки организованные одними средствами HTML весьма убоги в плане дизайна и не радуют глаз человека. В этой главе мы немного поколдуем над списками с помощью свойств CSS. Так мы будем говорить о стиле списка, то для обучения Вам понадобится базовая информация о тегах: <ul> <ol> <li> <dl> <dt> <dd> - изложенная в учебнике HTML глава 9 "Списки" - рекомендую освежить в голове информацию о данных элементах, прежде чем приступать к работе. Ну а если в голове и так свежо тогда начнем! Вид маркера в списке.Если Вы помните, то в чистом HTML вид маркера в списке определял атрибут type и одно из его возможных значений, в CSS данную задачу берёт на себя свойство: list-style-type которое, в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного "пункта". Значения list-style-type:
Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Вид маркера в списке</title> </head> <body> <ul style="list-style-type: square"> <li>Пункт 1. <li>Пункт 2. <li style="list-style-type: circle">Пункт 3 (особенный). </ul> <ul style="list-style-type: upper-roman"> <li>Пункт 1. <li>Пункт 2. <li>Пункт 3. </ul> </body> </html> Пользовательский маркер рисунок.Наиболее интересным CSS инструментом для работы со стилем списка является, на мой взгляд, возможность вместо стандартных "скучных" маркеров описанных выше использовать свои собственные нестандартные изображения - небольшие рисунки, вписывающиеся в общий дизайн Вашего сайта. Эту задачу выполняет свойство list-style-image которое определяет в качестве маркера списка некое графическое изображение с указанием пути к нему. Значений данного свойства всего два:
Путь к рисунку после url указывается в круглых скобках. Вот так: list-style-image: url(graphics/marker.gif)- Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: " Теперь попрубуем сделать так, что бы каждый пункт нашего списока был промаркерован этим рисунком. Смотрим пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Нестандартный маркер-рисунок</title> </head> <body> <ul style="list-style-image: url(graphics/marker.gif)"> <li>Первый любимый пункт. <li>Второй любимый пункт. <li>И не менее любимый третий пункт. </ul> </body> </html> Стиль обтекания маркера списком.Свойство list-style-position указывает браузеру на то, как следует отображать текст в списке относительно его маркеров. По умолчанию маркеры находятся в стороне от текста списка, но можно сделать так, что они будут обтекаться текстом. Возможных значений свойства list-style-position всего два:
Пример для наглядности: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Обтекание маркера текстом</title> <style type="text/css"> body { margin: 0px; background: #e8e8e8 } div { width: 300px; height: 200px; float:left; margin: 10px; padding: 10px; border: RGB(25, 125, 25) 2px ridge; background: #fff } h3 { text-align: center } </style> </head> <body> <div> <h3>Здесь маркер обтекается текстом:</h3> <ul style="list-style-position:inside"> <li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано. <li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано. </ul> </div> <div> <h3>А здесь нет:</h3> <ul style="list-style-position:outside"> <li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано. <li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано. </ul> </div> </body> </html> list-styleБазовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от одного до трёх значений из свойств применяемых к стилю списка, в любой последовательности через пробел. Все три свойства и их возможные значения мы рассмотрели выше, поэтому повторятся не буду, а просто выложу внутри страничную навигацию:
Если в голове остались какие то пробелы можете вернуться и перечитать. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Стиль списка</title> </head> <body> <div style="width: 250px;"> <ul style="list-style: url(graphics/marker.gif) inside"> <li>- Этот список использует в качестве маркера рисунок. <li>- Текст этого списка обтекает маркер. </ul> </div> </body> </html> Полезные советы:
|
" - под названьем marker.gif
