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

• outside - маркер располагается слева от содержимого (является значением по умолчанию)
• inside - маркер располагается внутри пункта списка вместе с содержимым

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

• Кофе
• Чай

• Кофе
• Чай

• Кофе
• Чай

В примере к каждому пункту списка была добавлена рамка, чтобы визуально показать границы пунктов списка.

С помощью окна диалога Список можно изменить следующие параметры маркированного списка:

Символ маркера на любой символ из шрифтов, установленных на компьютере.

Величину выступа.

Расстояние между символом маркера и текстом.

Выравнивание.

Для этих целей необходимо войти в меню Формат – Список и нажать кнопкуИзменить , после чего откроется окно диалогаИзменить маркированный список , представленное на рис. 4.25.

Рис. 4.25. Окно диалога Изменить маркированный список

Ниже приведен состав его опций:

Изменение формата нумерованного списка

Нумерованные списки создаются на вкладке Нумерованные (рис. 4.24). Если предложенные форматы нумерованного списка не подходят для оформления конкретного документа, можно создать собственный формат списка, нажав кнопкуИзменить в диалоговом окнеСписок на вкладкеНумерованный. При этом откроется окно диалогаИзменение нумерованного списка (рис. 4.26).

Рис. 4.26. Окно диалога Изменить нумерованный список

Ниже приведены опции этого окна диалога, с помощью которых осуществляется изменение формата нумерованного списка.

Создание многоуровневых списков

Во многих видах документов встречаются более сложные типы списков. Это так называемые многоуровневые списки. В них также используется либо маркировка, либо нумерация, а иногда и сочетание того и другого. Но главное их отличие от предыдущих типов списков – наличие нескольких уровней. В зависимости от уровня для каждого абзаца устанавливается символ или номер.

Рис. 4.27. Вкладка Многоуровневые окна диалогаСписок .

Многоуровневые списки отличаются от обычных наличием отступов. Определенный отступ принимается за уровень такого списка.

Создание многоуровневого списка возможно только с помощью окна диалога Список . Причем уровни задает сам исполнитель, устанавливая определенные отступы. Word анализирует отступы и, в зависимости от их величины, нумерует, создавая уровни.

Можно создавать измененные форматы нумерации для различных уровней многоуровневого списка, однако в одном документе допустим только один формат многоуровневого списка.

Для создания многоуровневого списка необходимо выполнить следующие действия:

1. Определить фрагмент документа, который предполагается оформить в виде списка.

2. Создать отступы каждого абзаца, воспользовавшись кнопкойУвеличить отступ на панели инструментовФорматирование (при создании отступов нельзя использовать табуляцию).

3. Выделить выбранный фрагмент текста.

4. Выбрать команду Формат –Список . В окне диалогаСписок перейти на вкладкуМногоуровневый (рис. 4.27).

5. Выбрать нужный тип многоуровневого списка из предложенных вариантов. Нажать ОК .

Сегодня разберемся, как создаются списки на веб-странице, какие маркеры используются и протестируем разные стили для изменения внешнего вида.

Напомню, как подключаются стили к Html странице:

Существуют маркированный, или ненумерованный список css и нумерованный.

Маркеры списка представляют собой изображения разных фигур: кружочки, квадратики, галки и тому подобное. Их еще называют пульками. В качестве маркеров для списка используются и собственные рисунки.

Нумерованный список представляет собой вывод информации под номерами 1, 2, 3 и т.д.

Обычно маркеры представляют собой простые черные кружочки, что привычно для пользователя, но с другой стороны не привлекают особого внимания к тексту.

Если вы решили заменить эти кружки на дизайнерские, то нужно освоить оформление списка с помощью css . Чем мы сегодня и займемся.

Основа любого списка состоит из следующего кода веб-страницы:

• Первый элемент списка
• Второй элемент списка
• Последний элемент списка

Выглядит этот блок так:

• Первый элемент списка
• Второй элемент списка
• Последний элемент списка

Css оформление маркеров списка

Внешний вывод будем прописывать в файле стилей style.css . Он может называться и по-другому, но иметь расширение.css.

Стандартные маркеры CSS: кружок (circle) – не закрашенный кружок, точка (disk) – закрашенный кружок, квадрат (square) – закрашенный квадрат.

Формирует список в css код ul - с его помощью мы задаем, какой из стандартных маркеров будет выводиться на странице.

Например, выведем списки с использованием кружка (circle). Запись в css файле будет такая:

Ul {list-style-type: circle}

Но часто нужно заменить маркеры не во всех выводимых списках, а только в определенных блоках. К примеру, изменить в постах, но не в комментариях. В этом случае, код ul не должен иметь никакого значения, а стиль кружка нужно прописать только для списков в постах. Так выглядит код без значения:

Ul {list-style-type: none}

Если вы не можете найти код в файле css, отвечающий за вывод списка в нужном вам блоке, то воспользуйтесь плагином для Firefox - Firebug или в Google Chrom нажмите правой кнопкой мыши на веб-странице блога. Затем «просмотр кода элемента».

Например, один из вариантов изменения внешнего вида списка в постах на стандартный кружок, если для блока контента нет ul :

Post-content ul {list-style-type: circle}

Или другой пример:

#content-blok ul{list-style-type:square}

Полный курс «Css практика»

]]> ]]>

Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы.

Для тех, кто хочет очень быстро научиться трюкам css стилей , ]]> рекомендую ]]> расширенный курс "CSS практика" Евгения Попова .

Следующие статьи:

Графические маркеры для списка.

Отступ списка css.

Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.

Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.

Скачать красивые маркеры для списков сайта.