Глава 13. Стиль списка

Глава 13. Стиль списка

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Глава 13. Стиль списка

Глава 13. Стиль списка

www.homa.xp3.biz 

В 9-й главе учебника HTML мы с Вами уже знакомились с таким немаловажным элементом как список и действительно хорошее средство для структуризации данных. Однако списки организованные 1 средствами HTML весьма убоги в плане дизайна и не радуют глаз человека.

В этой главе мы немного поколдуем над списками с помощью свойств CSS. Будем говорить о стиле списка: ul, ol, li, dl, dt, dd - изложенная в "гл.9. Списки".

Вид маркера в списке

В чистом HTML вид маркера в списке определял атрибут type и 1 из его возможных значений, в CSS данную задачу берёт на себя свойство list-style-type, которое имеет свои стандартные значения, определяющие вид маркера как всего списка сразу, так и его отдельного пункта.

Значения list-style-type:

  • disc - диск (по умолчанию для ul);
  • circle - полый круг;
  • square - квадрат;
  • decimal - арабские цифры (по умолчанию для ol);
  • lower-roman - строчные римские цифры;
  • lower-alpha - строчные буквы;
  • upper-roman - заглавные римские цифры;
  • upper-alpha - заглавные буквы;
  • none - маркер отсутствует.

    Пример:

    <title>Вид маркера в списке</title>

    <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>

    смотреть пример

    Пользовательский маркер рисунок

    Наиболее интересным CSS инструментом для работы со стилем списка является возможность вместо стандартных маркеров, описанных выше, использовать свои собственные нестандартные изображения (небольшие рисунки, вписывающиеся в общий дизайн сайта).

    Эту задачу выполняет свойство list-style-image, которое определяет в качестве маркера списка некое графическое изображение с указанием пути к нему.

    Значений данного свойства всего 2:

  • none - отменяет графическое изображение маркера;
  • url - путь к файлу с рисунком маркера.

    Путь к рисунку после url указывается в круглых скобках.

    Вот так: list-style-image:url(graphics/marker.gif) (такая запись будет говорить о том, что рядом с документом есть папка graphics, в которой лежит файлик-рисунок marker.gif.

    Теперь попрубуем сделать так, чтобы каждый пункт нашего списка был промаркерован этим рисунком.

    Пример:

    <title>Нестандартный маркер-рисунок</title>

    <ul style=list-style-image:url(graphics/marker.gif)>

    <li>1 пункт;

    <li>2 пункт;

    <li>3 пункт.

    </ul>

    смотреть пример

    Стиль обтекания маркера списком

    Свойство list-style-position указывает браузеру на то, как следует отображать текст в списке относительно его маркеров. По умолчанию маркеры находятся в стороне от текста списка, но можно сделать так, что они будут обтекаться текстом.

    Возможных значений свойства list-style-position всего 2:

  • outside - маркер находится в стороне от списка (по умолчанию);
  • inside - маркер обтекается текстом.

    Пример:

    <title>Обтекание маркера текстом</title>

    <style>

    body{margin:0;background:#e8e}

    div{width:300px;height:200px;float:left;margin:10px;padding:10px;border:RGB(25,125,25)2px ridge;background:#fff}

    </style>

    <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>

    смотреть пример

    list-style

    Базовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от 1 до 3 значений из свойств применяемых к стилю списка в любой последовательности через пробел.

    Все 3 свойства и их возможные значения рассмотрены выше:

  • list-style-type - вид маркера в списке;
  • list-style-image - нестандартный маркер рисунок;
  • list-style-position - стиль обтекания маркера списком.

    Пример:

    <title>Стиль списка</title>

    <div style=width:250px>

    <ul style=list-style:url(graphics/marker.gif)inside>

    <li>этот список использует в качестве маркера рисунок;

    <li>текст этого списка обтекает маркер.

    </ul>

    </div>

    смотреть пример

    Полезные советы:

  • Списки наряду с заголовками, выделенным текстом и картинками, являются элементами, которые приковывают взгляд посетителя при беглом просмотре страницы. Умелое и ненавязчивое размещение таковых элементов - залог того, что посетитель окунётся в чтение документа более глубоко.
  • Так как списки являются великолепным инструментом для структуризации данных, а свойства CSS позволяют создать практически любой их дизайн, используйте списки помимо их основного назначения в качестве навигации по сайту, где каждый пункт является ссылкой на ту или иную страницу Вашего сайта.

    << предыдущая глава | следующая глава >>

  • Отвечу на любые вопросы. С уважением, Дмитрий Владимирович:
    8-965-148-98-02, diplom07@mail.ru.
    Печатать страницу: Глава 13. Стиль списка

    Глава 13, Стиль списка, Глава, 13, Стиль, списка, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, Создание сайтов, web-программирование, seo-продвижение, создание и раскрутка сайтов, вбиваю в топ-10, как гвозди, попробуйте бесплатно, Создание сайтов, web-программирование, seo-продвижение, Глава, 13, Стиль, списка, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, раскрутка сайтов, Вбиваю в ТОП-10, как гвозди, раскрутка сайтов, Делаю и раскручиваю сайты, Дмитрий Владимирович

    ×

    Ваше письмо