/

Примеры стильного оформление ul li списков CSS. Маркированный список Маркеры, нарисованные CSS-свойствами

Задача

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

Решение

С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI (пример 1).

Пример 1. Стандартные маркеры

HTML5 CSS 2.1 IE Cr Op Sa Fx

Квадратные маркеры

  • Чебурашка
  • Крокодил Гена
  • Шапокляк

В данном примере в качестве маркеров используется квадрат (рис. 1).

Рис. 1. Вид маркеров

Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент :before . Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type , а затем добавить псевдоэлемент :before к селектору LI . Сам вывод символа осуществляется с помощью свойства content , в качестве значения которого и выступает желаемый текст или символ (пример 2).

Пример 2. Использование:before и content

HTML5 CSS 2.1 IE Cr Op Sa Fx

Символ в качестве маркера

  • Чебурашка
  • Крокодил Гена
  • Шапокляк

В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ (рис. 2).

Рис. 2. Маркеры в виде символа

Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word или таблицей символов, это стандартная программа входящая в комплект Windows. Кодировка кода должна быть обязательно UTF-8.

CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.

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

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.

list-style-type
Значения:
disc Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
armenian Традиционная армянская нумерация.
circle В качестве маркера выступает незакрашенный кружок.
cjk-ideographic Идеографическая нумерация.
decimal 1, 2, 3, 4, 5, …
decimal-leading-zero 01, 02, 03, 04, 05, …
georgian Традиционная грузинская нумерация.
hebrew Традиционная еврейская нумерация.
hiragana Японская нумерация: a, i, u, e, o, …
hiragana-iroha Японская нумерация: i, ro, ha, ni, ho, …
katakana Японская нумерация: A, I, U, E, O, …
katakana-iroha Японская нумерация: I, RO, HA, NI, HO, …
lower-alpha a, b, c, d, e, …
lower-greek Строчные символы греческого алфавита.
lower-latin a, b, c, d, e, …
lower-roman i, ii, iii, iv, v, …
none Маркер отсутствует.
square В качестве маркера выступает закрашенный или незакрашенный квадрат.
upper-alpha A, B, C, D, E, …
upper-latin A, B, C, D, E, …
upper-roman I, II, III, IV, V, …
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

Ul {list-style-type: none;} ul {list-style-type: square;} ol {list-style-type: none;} ol {list-style-type: lower-alpha;} Рис. 1. Пример оформления маркированного и нумерованного списков

2. Изображения для элементов списка list-style-image

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

Синтаксис

Ul {list-style-image: url("images/romb.png");} ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента

3. Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

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

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

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

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

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

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

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

      • disc - Диск. (по умолчанию для
          )
        • circle - Полый круг.
        • square - Квадрат.
        • decimal - Арабские цифры. (по умолчанию для
            )
          1. lower-roman - Строчные римские цифры.
          2. lower-alpha - Строчные буквы.
          3. upper-roman - Заглавные римские цифры.
          4. upper-alpha - Заглавные буквы.
          5. none - Маркер отсутствует.




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



        • Пункт 1.
        • Пункт 2.
        • Пункт 3 (особенный).


        • Пункт 1.
        • Пункт 2.
        • Пункт 3.


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

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

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

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

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

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

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

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




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



        • Первый любимый пункт.
        • Второй любимый пункт.
        • И не менее любимый третий пункт.


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

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

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

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

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




        Обтекание маркера текстом




        Здесь маркер обтекается текстом:








        А здесь нет:



        • Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
        • Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.



        list-style

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

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

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




        Стиль списка




        • - Этот список использует в качестве маркера рисунок.
        • - Текст этого списка обтекает маркер.



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

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

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

          , а каждый пункт списка начинается с тега
        • , как показано ниже.

          • Первый пункт
          • Второй пункт
          • Третий пункт

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

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

        В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

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

        Маркированный список

        • Чебурашка
        • Крокодил Гена
        • Шапокляк
        • Крыса Лариса

        Результат данного примера показан на рис. 11.1.

        Рис. 11.1. Вид маркированного списка

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

        Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега

          . Допустимые значения приведены в табл. 11.1

          Табл. 11.1. Стили маркеров списка
          Тип списка Код HTML Пример
          Список с маркерами в виде круга

          • Первый
          • Второй
          • Третий
          Список с маркерами в виде окружности

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

          • Первый
          • Второй
          • Третий

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

          Создание списка с квадратными маркерами показано в примере 11.2.

          Пример 11.2. Вид маркеров

          Маркированный список

          Изменение убеждений

          • изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение - иудаизм и мусульманство вместе;
          • изменение веры в непогрешимость любимой партии;
          • убеждение в том, что инопланетяне существуют;
          • предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).

          Результат данного примера показан на рис. 11.2.

          Для списков, о создании которых средствами HTML рассказано здесь, предусмотрены следующие CSS-правила.

          list-style-type

          Задаёт маркер или нумерацию списков вместо атрибута type в HTML-коде. Значения свойств для маркированных списков могут быть:

          • disk - кружок, установлен по умолчанию.
          • circle - окружность.
          • square - квадрат.

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

          • decimal - арабские цифры, значение установлено по умолчанию.
          • lower-roman - маленькие римские цифры.
          • upper-roman - заглавные римские цифры.
          • lower-alpha - строчные латинские буквы.
          • upper-alpha - прописные латинские буквы.

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

          Для нумерованных списков доступны и другие значения, например, cjk-ideographic задаёт идеографическую нумерацию, Armenian - традиционную армянскую, а decimal-leading-zero установит нумерацию римскими цифрами, но с нулём в начале: 01, 02, 03… 09, однако на практике эти и подобные им значения используются крайне редко.

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

          Списки CSS

          1. Первый пункт
          2. Второй пункт
          3. Третий пункт
          • Первый пункт
          • Второй пункт
          • Третий пункт
          1. Первый пункт
          2. Второй пункт
          3. Третий пункт

          Результат.

          Цвет маркеров совпадает с цветом текста в списке, указанного свойством color .

          list-style-image

          Позволяет установить в качестве маркера списка собственное изображение. Например, если в папке с содержащей список страницей находится файл marker.png , который вы и хотите использовать, то код оформления будет следующим:

          Ul { list-style-image: url("marker.png"); }

          list-style-position

          Определяет положение маркера: либо он вынесен за границу элемента списка (list-style-position: outside ), либо текст его обтекает (list-style-position: inside ).

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

          list-style-position

          • Вы просто посмотрите, чем отличаются inside от outside.
          • В случае с inside маркер прямо-таки вписывается в список, не выходя за его пределы и не мешая вёрстке. Текст обтекает его, маркер как бы внутри.
          • Значение outside выносит маркер за пределы списка.

          В результате создаётся такая страница:

          list-style

          Позволяет сократить код, записав все три перечисленных свойства одной строкой. Записываются правила через пробел:

          Ul { list-style: square inside; }

          Рассмотрим пример страницы с тремя списками. Первый нумеруется цифрами в формате 01, 02, второй маркируется пользовательским рисунком (файл marker.png в папке со страницей), маркер третьего списка отключен.

          HTML-код приведён ниже.

          list-style

          1. Первый пункт
          2. Второй пункт
          3. Третий пункт
          • Первый пункт
          • Второй пункт
          • Третий пункт
          1. Первый пункт
          2. Второй пункт
          3. Третий пункт

          Браузер отобразит следующую страницу.

Поделиться