Нумерованный список css

Оформление нумерованных списков

123Следующая ⇒

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

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

Рис. 11.1. Создание простейшего нумерованного списка

Для оформления нумерованного списка выполните команду Формат/Список или команду Список контекстного меню.

Во вкладке Нумерованный диалогового окна Список (рис.

11.2) выберите желаемый вариант оформления и дважды щелкните по нему левой кнопкой мыши.

Рис. 11.2. Выбор вида нумерованного списка во вкладке "Нумерованный" диалогового окна "Список"

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

Параметры списка можно изменять. Для этого во вкладке Нумерованный диалогового окна Список (см. рис. 11.2) выберите какой-либо вариант оформления и нажмите кнопку Изменить. После этого появится диалоговое окно Изменение нумерованного списка (рис. 11.3).

Рис. 11.3. Изменение нумерованного списка в диалоговом окне "Изменение нумерованного списка"

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

В поле Формат номера можно к номерам добавить какой-либо текст. Текст можно вводить как перед номером, так и после него.

Обычно номера имеют те же параметры шрифта, что и нумеруемый список. Если требуется изменить параметры шрифта номеров, надо нажать кнопку Шрифт и затем во вкладках Шрифт (рис. 11.4) и Интервал (рис. 11.5), а при особом желании и во вкладке Анимация, диалогового окна Шрифт установить требуемые параметры шрифта.

Рис. 11.4. Изменение шрифта нумерации во вкладке "Шрифт" диалогового окна "Шрифт"

 

Рис. 11.5. Изменение шрифта нумерации во вкладке "Интервал" диалогового окна "Шрифт"

После установки всех изменений в диалоговом окне Изменение нумерованного списка (см. рис. 11.3) необходимо нажать кнопку ОК. Список будет оформлен с указанными параметрами, а во вкладке Нумерованный диалогового окна Список (см. рис. 11.2) вместо измененного появится новый вариант списка. Для восстановления исходных параметров оформления списка во вкладке Нумерованный диалогового окна Список (см. рис. 11.2) следует нажать кнопку Сброс.

Для дальнейшего применения последнего из использовавшихся вариантов оформления нумерованного списка можно нажать кнопку Нумерованный список по умолчанию панели инструментов Форматирование (см. рис. 11.1). Эту же кнопку удобно использовать для удаления оформления нумерованным списком. Достаточно выделить фрагмент документа, для которого необходимо удалить оформление, и нажать кнопку Нумерованный список по умолчанию. Нумерация будет удалена.


123Следующая ⇒


Дата добавления: 2015-11-23; просмотров: 115 | Нарушение авторских прав


Похожая информация:


Поиск на сайте:


Глава 13

Стиль списка.

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

В этой главе мы немного поколдуем над списками с помощью свойств CSS. Так мы будем говорить о стиле списка, то для обучения Вам понадобится базовая информация о тегах: — изложенная в учебнике HTML глава 9 «Списки» — рекомендую освежить в голове информацию о данных элементах, прежде чем приступать к работе.

Ну а если в голове и так свежо тогда начнем!

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

Если Вы помните, то в чистом HTML вид маркера в списке определял атрибут и одно из его возможных значений, в CSS данную задачу берёт на себя свойство: которое, в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного «пункта».

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

  • — Диск. (по умолчанию для <ul>)
  • — Полый круг.
  • — Квадрат.
  • — Арабские цифры. (по умолчанию для <ol>)
  • — Строчные римские цифры.
  • — Строчные буквы.

  • — Заглавные римские цифры.
  • — Заглавные буквы.
  • — Маркер отсутствует.

Пример:

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

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

Наиболее интересным CSS инструментом для работы со стилем списка является, на мой взгляд, возможность вместо стандартных «скучных» маркеров описанных выше использовать свои собственные нестандартные изображения — небольшие рисунки, вписывающиеся в общий дизайн Вашего сайта.

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

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

  • — Отменяет графическое изображение маркера.

  • — Путь к файлу с рисунком маркера.

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

Вот так:

— Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: »  » — под названьем marker.gif

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

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

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

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

Возможных значений свойства всего два:

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

Пример для наглядности:

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

list-style

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

Все три свойства и их возможные значения мы рассмотрели выше, поэтому повторятся не буду, а просто выложу внутри страничную навигацию:

Если в голове остались какие то пробелы можете вернуться и перечитать.

Пример:

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

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

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

  • Так как списки являются великолепным инструментом для структуризации данных, а свойства CSS позволяют создать практически любой их дизайн, используйте списки, помимо их основного назначения, в качестве «меню» — навигации по сайту, где каждый пункт является ссылкой на ту или иную страницу Вашего сайта.

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

В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

Свойство Значение Описание Пример
list-style-type disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. LI {list-style-type: circle}
LI {list-style-type: upper-alpha}
list-style-image none
URL
Устанавливает символом маркера любую картинку. LI {list-style-image: url(check.gif)}
list-style-position outside
inside
Выбор положения маркера относительно блока строк текста. LI {list-style-position: inside}
list-style   Универсальное свойство, включает одновременно все вышеперечисленные свойства.  

Поскольку тег <li> наследует стилевые свойства тега <ol> или <ul>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI.

Так, в примере 1 используется селектор UL, для него и задаются стилевые параметры.

Пример 1. Создание маркированного списка

Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

Рис. 1. Вид списка, измененого с помощью стилей

Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image, как показано в примере 2.

Пример 2. Использование изображений в качестве маркера

Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

Рис. 2. Изображения в качестве маркеров

Некоторые примеры создания различных списков приведен в табл. 2.

Код HTML Пример
<li style="list-style: disc"> Что следует учитывать при тестировании сайта:

  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style="list-style: circle"> Что следует учитывать при тестировании сайта:

  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style="list-style: square"> Что следует учитывать при тестировании сайта:

  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style="list-style: decimal">

Нумерованный список с арабскими цифрами:

  1. первый
  2. второй
  3. третий
<li style="list-style: lower-roman">

Нумерованный список со строчными римскими цифрами:

  1. первый
  2. второй
  3. третий
<li style="list-style: upper-roman">

Нумерованный список с заглавными римскими цифрами:

  1. первый
  2. второй
  3. третий
<li style="list-style: lower-alpha">

Нумерованный список со строчными буквами латинского алфавита:

  1. первый
  2. второй
  3. третий
<li style="list-style: upper-alpha">

Нумерованный список с заглавными буквами латинского алфавита:

  1. первый
  2. второй
  3. третий

Добавить комментарий

Закрыть меню