Главная · Windows · Примеры стильного оформление ul li списков CSS. CSS Design: Укрощение списков Маркированный список css свой маркер

Примеры стильного оформление ul li списков CSS. CSS Design: Укрощение списков Маркированный список css свой маркер

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

С элементом

    связаны следующие особенности:

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

      На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.

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

      Вид маркера

      Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

      • disc - маркеры в виде закрашенного кружка;
      • circle - маркеры в виде незакрашенного кружка;
      • square - квадратные маркеры.

      Пример 1. Изменение вида маркера

      Списки

      • Сепульки
      • Сепулькарии
      • Сепуление

      В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к

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

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

      Списки

      • Сепульки
      • Сепулькарии
      • Сепуление

      Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача - переместить текст левее на один символ.

      Рис. 2. Произвольные маркеры в списке

      Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

      Рис. 3. Выбор символа в LibreOffice

      Список с рисованными маркерами

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

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

      Списки

      • Сепульки
      • Сепулькарии
      • Сепуление

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

      Рис. 4. Рисунок в качестве маркера

      Применение list-style-image обладает некоторыми недостатками:

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

      Этих недочётов можно избежать с помощью свойства background , оно устанавливает фоновое изображение. Для каждого элемента списка

    • мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

      Пример 4. Использование background

      Ul { margin-left: -1em; } li { list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; }

      Положение текста и маркера

      Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).
      inside outside

      Рис. 5. Размещение маркеров относительно текста

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        List-style-type: изменение маркера / нумерации

        Если вам требуется заменить стандартные маркеры в виде точки либо арабских цифр на что-то другое, вы можете воспользоваться свойством CSS list-style-type и дополнительными значениями для него (см. таблицу):

        Примечание: в таблице приведены только основные значения. Более обширный список (грузинская и армянская нумерации, нумерация римскими числами, греческими буквами и т. д.) доступен .

        Пример написания кода CSS:

        Ul { list-style-type: circle; }

        Скриншот: варианты маркеров / нумерации списков

        List-style-image: маркер-картинка

        Помимо вышеперечисленных маркеров можно установить свои графические маркеры, используя файл с необходимым изображением. Для этого вам понадобится свойство CSS list-style-image и значение с указанием адреса URL картинки. Пример записи стиля:

        Ul { list-style-image: url(images/star.png); }

        Скриншот: примеры собственных графических маркеров

        List-style-position: расположение маркеров / нумерации

        Для CSS свойства list-style-position, которое задает расположение маркеров / нумерации относительно текста, есть два значения – outside и inside . По умолчанию используется значение outside – это значит, что маркер / число отображается как бы отдельно от текста списка, тогда как при значении inside маркер / число располагается внутри текстового блока и обтекается текстом.

        Ниже показан пример записи стиля:

        Ul { list-style-position: inside; }

        Скриншот для лучшего понимания значений outside и inside

        List-style: все вместе

        Используя одно-единственное свойство CSS list-style, можно записать все вышеперечисленное в одной строке – то есть, сразу же задать вид маркеров / нумерации и их расположение относительно текста. Такой код будет более кратким и удобным. Ниже показано два примера, как пишется подобный стиль:

        /* нумерация прописными латинскими буквами внутри текстового блока: */ ol { list-style: upper-latin inside; } /* графические маркеры снаружи текстового блока: */ ul { list-style: url(images/star.png) outside; }

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

        Если проанализировать какой-либо сайт, то можно обнаружить тот факт, что в контенте очень часто присутствуют списки разного рода: меню, список товаров и т. д. В HTML-коде за нумерованный список отвечает тег , а за маркированный – .

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

        Чтобы устранить этот негативный эффект надо отменить вывод маркера, воспользовавшись свойством list-style :

        ol, ul { list- style: none; }

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

        Маркеры через картинки

        Наиболее распространенный и простой способ указать для списка маркер – это воспользоваться бекграундной картинкой (свойство background). Метод основывается на указании в таблице стилей фонового рисунка для элементов списка, а также внутренний отступ (свойство padding), который зарезервирует место для нового маркера. Ниже представлен пример кода:

        ul { list- style: none; } li{ background: url(путь- к- картинке) no- repeat; padding- left: 20px; }

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

        Главная положительная сторона этого метода заключается в 100%-ной кроссбраузерности, но, не смотря на это, есть маленький недостаток. Использование картинки – это дополнительное обращение к серверу.

        Маркеры с помощью before

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

        Далее возникает вопрос, каким образом спецсимволы вставлять в элементы списка. Естественно не в ручную, иначе это был бы очень затянутый и нудный процесс, плюс ко всему еще и трудоемкий. Выйти из этой ситуации нам поможет псевдоэлемент before , применение которого привязывается к определенному селектору, что позволяет автоматизировать наш процесс присвоения маркеров из спецсимволов. Такое решение подходит к большинству браузеров, с учетом того, что для IE , будет прописан expression .

        Ниже представлен пример кода, который формирует маркированный список с коротким тире:

        li{ this. innerHTML = "-" + this. innerHTML) /*хак для IE*/ } li: before{ content: "\201 3" ; }

        На практике получим такую картину:

        Напоминаю о том, что в реальных условиях хаки подключаются условными комментариями .

        При использовании этого метода главное знать кодировку необходимого значка. Также стоит отметить, что для expression спецсимволы прописываются числовой комбинацией или мнемоническим кодом. Что касается свойства content , то в этом случае вначале ставится слеш, а потом идет запись шестнадцатеричного кода.

        Использование insertAdjacentHTML

        Вышеупомянутый способ не всегда корректно отрабатывает в легендарном IE (не смотря на хак). Точнее, «костыли» для этого браузера не до конца доработанные. Более действенным является метод, основанный на insertAdjacentHTML , ниже представлен код этого метода:

        li{ //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

        Маркеры, нарисованные CSS-свойствами

        Некоторые квадратные маркеры можно нарисовать с использованием некоторых CSS-свойств. К примеру, квадрат с цветной заливкой рисуется через свойство background-color , а квадратик в виде рамки – border (кстати говоря, квадрат с заливкой можно нарисовать и таким способом). Пример записи в CSS-файле:

        li{ //z-index: expression(runtimeStyle.zIndex = 1, this. innerHTML = "

        " + this. innerHTML) /* хак для ие6 и 7 */ } li: before, . listMarkerBackColor{ background- color: #539127; width: 7px; height: 7px; content: "" ; float: left; margin: 6px 6px 0 0 ; overflow: hidden; } html . listMarkerBackColor{ margin- right: 1px; /* исправляем маленткий косяк в IE6 */ }

        Таким образом рисованный CSS-свойствами маркер будет выглядеть на практике:

        Использование before и first-child в комплексе

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

        В таком случае каждая ссылка отделяется друг от друга спецсимволом, но перед первым элементом никакого спецсимвола быть не должно. В этом нам поможет псевдокласс first-child , который обращается только к первому элементу списка. В кодовом виде это должно выглядеть так

        HTML

        < ul> < li>< a href= "#" > Главная < li>< a href= "#" > Блог < li>< a href= "#" > CSS < li> Валидный код при использовании target= "_blank"

        li: before{ content: "\21 92" ; } li: first- child: before{ content: "" ; }

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

        В каких браузерах работает?

        6.0+ 4.0+ 9.5+ 3.0+ 3.0+ - -

        Выводы

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

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

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

        Табл. 1. Свойства CSS для управления видом списка
        Свойство Значение Описание Пример
        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 Универсальное свойство, включает одновременно все вышеперечисленные свойства.

        Поскольку тег

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

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

            Списки

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

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

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

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

            Списки

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

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

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

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

            Табл. 2. Возможные виды списков
            Код HTML Пример
            • работоспособность всех ссылок
            • поддержку разных браузеров
            • читабельность текста
            		• Что следует учитывать при тестировании сайта:
            • работоспособность всех ссылок
            • поддержку разных браузеров
            • читабельность текста
            		• Что следует учитывать при тестировании сайта:
            • работоспособность всех ссылок
            • поддержку разных браузеров
            • читабельность текста

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

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

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

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

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

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

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

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

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

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