List style ( type, image, position) — Css правила для настройки внешнего вида списков в Html коде


Содержание материала:

Подробно о свойстве list-style

За добавление маркера, его расположение и внешний вид в css отвечают свойства:

  • list-style-image (я не использую это свойство — ниже обьясню, почему);
  • list-style-type;
  • list-style-position.

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

Свойство list-style-type

Имеет следующие допустимые значения:

disc — маркер пункта в списке будет отображаться в виде жирной точки;

  • Пример использования свойства list-style-type с параметром disc

circle — маркер пункта в списке будет отображаться в виде круга;

  • Пример использования свойства list-style-type с параметром circle

square — маркер пункта в списке будет отображаться в виде черного квадратика;

  • Пример использования свойства list-style-type с параметром square

decimal — маркер пункта в списке будет отображаться в виде арабских цифр начиная с 1;

  • Пример использования свойства list-style-type с параметром decimal — первый пункт списка
  • Пример использования свойства list-style-type с параметром decimal — второй пункт списка

decimal-leading-zero — маркер пункта в списке будет отображаться в виде арабских цифр начиная с 01, 02. 98,99 (не поддерживается в ИЕ 7);

  • Пример использования свойства list-style-type с параметром decimal-leading-zero — первый пункт
  • Пример использования свойства list-style-type с параметром decimal-leading-zero — второй пункт

lower-roman — маркер пункта в списке будет отображаться в виде прописных букв римского алфавита (i, ii, iii, iv, v);

  • Пример использования свойства list-style-type с параметром lower-roman — первый пункт
  • Пример использования свойства list-style-type с параметром lower-roman — второй пункт
  • Пример использования свойства list-style-type с параметром lower-roman — третий пункт
  • Пример использования свойства list-style-type с параметром lower-roman — четвертый пункт

upper-roman — маркер пункта в списке будет отображаться в виде римских цифр (I, II, III, IV, V);

  • Пример использования свойства list-style-type с параметром upper-roman — первый пункт
  • Пример использования свойства list-style-type с параметром upper-roman — второй пункт
  • Пример использования свойства list-style-type с параметром upper-roman — третий пункт
  • Пример использования свойства list-style-type с параметром upper-roman — четвертый пункт

lower-greek — маркер пункта в списке будет отображаться в виде прописных букв греческого алфавита (не поддерживается в ИЕ 7);

  • Пример использования свойства list-style-type с параметром lower-greek
  • Пример использования свойства list-style-type с параметром lower-greek

lower-latin — маркер пункта в списке будет отображаться в виде прописных букв латинского алфавита (a, b, c) (не поддерживается в ИЕ 7);

  • Пример использования свойства list-style-type с параметром lower-latin
  • Пример использования свойства list-style-type с параметром lower-latin

upper-latin — маркер пункта в списке будет отображаться в виде заглавных букв латинского алфавита (A, B, C) (не поддерживается в ИЕ 7);

  • Пример использования свойства list-style-type с параметром upper-latin
  • Пример использования свойства list-style-type с параметром upper-latin

none — маркер пункта в списке не будет отображаться.

  • Пример использования свойства list-style-type с параметром none

Свойство наследуется и по умолчанию имеет значение disc.

Свойство list-style-position

Отвечает за расположение маркера в списке. Имеет два допустимых значения:

inside — маркер будет находиться внутри блока с элементом списка, к которому он относится;

  • Пример использования свойства list-style-position с параметром inside — маркер расположен внутри блока с элементом списка, к которому он относится.

outside — маркер будет находиться снаружи блока с элементом списка, к которому он относится.

  • Пример использования свойства list-style-position с параметром outside — маркер расположен снаружи блока с элементом списка, к которому он относится.

Свойство list-style-image

Устанавливает в качестве маркера изображение, которое будет использоваться для маркировки пунктов списка:

  • Пример использования свойства list-style-image — маркер списка выводится в виде картинки.

Из-за возникающих сложностей с позиционированием изображения используется не часто. Лично я предпочитаю использовать свойство background-image, если требуется маркер-картинка.

Свойство list-style

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

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

  • Пример использования свойства list-style с параметрами disc и outside — маркер расположен снаружи блока с элементом списка, к которому он относится.

Запись такого вида отобразит маркер в виде окружности внутри блока с элементом списка:

list-style-type

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство list-style-type указывает вид маркера для элементов списка. Оно позволяет изменить или убрать маркеры HTML списка.

Для маркированных списков в CSS есть всего три вида маркеров: circle , disk и squred . Остальные значения свойства list-style-type предназначены для нумерованных списков.

Чтобы убрать маркеры у списка, то есть получить список без маркеров, надо в качестве значения для свойства list-style-type указать none . Для изменения маркеров у списка, надо просто выбрать любое значение, отличное от значения по умолчанию:

Если ни один из представленных видов маркеров вам не подходит, то вы можете воспользоваться свойством list-style-image и заменить стандартный вид маркера любой картинкой.

Примечание: цвет стандартного маркера, устанавливаемого с помощью свойства list-style-type , будет таким же как и цвет, установленный для текста в элементе. Цвет текста устанавливается и изменяется с помощью свойства color.

CSS-свойство List

Двумя наиболее распространенными типами HTML-списков являются упорядоченный и неупорядоченный. Для их стилизации списков мы будем использовать свойство list-style CSS .

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

list-style-type

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

Стандартное значение этого свойства – disc , но можно использовать и другие значения: circle , square , none . Кроме этого можно использовать такие значения, как upper-alpha , lower-alpha , upper-roman , lower-roman , decimal и т. д.

В приведенном ниже примере свойство list-style-type имеет значение square :

Если вам вообще не нужны маркеры, то CSS list style type необходимо присвоить значение none :

Поля и отступы

Чтобы добавить в список отступы, можно использовать свойство margin .

В приведенном ниже примере использования CSS ul li list style мы прибавляем поля по 30px над и под списком:

В следующем примере мы полностью исключаем поля:

В примере CSS ul list style мы убираем отступы:

Здесь мы задаем списку фиксированную ширину:

List-style-position

Это свойство отвечает за то, как текст внутри list style CSS будет переходить на следующую строку. Стандартное значение outside означает, что при переносе строки текст также получит выравнивание по левому краю. Если выставлено значение inside , то строка будет перенесена под маркер списка.

В примере, приведенном ниже, представлен список, в котором свойство list-style-position выставлено на outside ( значение по умолчанию ):

В следующем примере показано, что будет, если свойство list-style-position будет иметь значение inside . Таким образом, текст на новой строке будет начинаться прямо под маркером:

List-style-image

Свойство list-style-image позволяет использовать собственную пиктограмму в качестве маркера.

В примере CSS ul list style мы используем изображение звезды вместо маркера списка:

Сокращение list-style

Можно использовать сокращенное свойство list-style для назначения тех же стилей. В приведенном ниже примере мы задаем тип, расположение и изображение маркера списка:

Список inline

По умолчанию, все пункты списка перечисляются с новой строки, то есть, вертикально. Если нужно выводить список горизонтально или строчно ( inline ), нужно присвоить элементам списка display inline .

В приведенном ниже примере представлен строчный список:

Стилизация упорядоченного списка

Теперь пришло время задать стиль для CSS ol list style . По умолчанию, list-style-type для упорядоченного списка установлен при помощи десятичного числа:

Чтобы изменить тип, можно поменять значение на upper-alpha , lower-alpha , upper-roman , lower-roman .

Ниже приведен пример, где list-style-type имеет значение upper-alpha :

В следующем примере list-style-type имеет значение lower-roman :

Данная публикация представляет собой перевод статьи « CSS List » , подготовленной дружной командой проекта Интернет-технологии.ру

Оформление маркированного списка css. Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)

Cписки HTML (

    для нумерованных ,

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

Вот как выглядят стандартные нумерованный и ненумерованный списки:

  1. Элемент нумерованного списка #1
  2. Элемент нумерованного списка #2
  3. Элемент нумерованного списка #3
  • Элемент ненумерованного списка #1
  • Элемент ненумерованного списка #2
  • Элемент ненумерованного списка #3

Посмотрите пример, чтобы увидеть, что мы создадим.

Выглядит гораздо лучше, не правда ли? И Вы сможете создать все это, просто добавив немного кода CSS. Хотите знать, как это сделать? Приступим!

Список №1: Простое меню

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

Список №2: Другой шрифт для цифр

Сложность со списками заключается в том, что все в списке должно выглядеть одинаково. Числа в списке должны иметь тот же цвет и шрифт, что и текст.

Но добавив дополнительный элемент list-item, Вы сможете обойти эти ограничения и создать очень необычный список. Вот как это сделать:

The Netherlands is a country in .

The United States of America is a federal constitutional .

The Philippines officially known as the Republic .

The United Kingdom of Great Britain and .

Список №3: Список с указателями

Вы можете изменить стиль указателей для ненумерованного списка на некоторые встроенные виды, но Вы также можете изменить его и на изображение. Этот способ сделает список еще привлекательней. Давайте рассмотрим, как это сделать.

  • Java
  • .NET
  • C++
  • PHP

Список №4: Список в стиле iPhone

Этот список взят из статьи «Приложение «Контакты» iPhone с использованием CSS и Jquery ». Он выглядит, как список из приложения «Контакты» iPhone. Еще немного стиля для Вашего веб-сайта.

Список №5: Древовидные списки

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

  1. Google
    1. Picasa
    2. Feedburner
    3. Youtube
  2. Microsoft
    1. Corel Corporation
    2. Zignals
    3. ByteTaxi
  3. Yahoo!
    1. Xoopit
    2. BuzzTracker
    3. MyBlogLog

Список №6: Римские цифры и многострочный текст

По умолчанию нумерованный список использует арабские цифры (1, 2, 3, 4 и т. д.) для нумерации. Изменяя значение свойства list-style-type, Вы можете выбрать другие стили нумерации, например, римские цифры.

Также по умолчанию указатели списка размещены за пределами списка, Вы можете увидеть это во втором примере, другом шрифте для цифр. Чтобы обойти это ограничение, Вы можете изменить значение свойства list-style-position, чтобы нумерация располагалась внутри списка.

  1. Lorem ipsum dolor sit amet, .
    Fusce sit amet .
  2. Aenean placerat lectus tristique.
    Vivamus interdum .
  3. Mauris eget sapien arcu, vitae.
    Phasellus neque risus.
  4. Phasellus feugiat lacus .
    Duis rhoncus .

Список №7: Разделенный запятыми и расположенный в одну строку список

Списки наиболее часто используются, чтобы показать элементы один под другим. Но что, если Вы хотите создать расположенный в одну строку список? Вы можете добиться этого, установив значение свойства display в inline. Но если Вы используете текст, Вы можете предпочесть создать разделенный запятыми список. Как добиться этого? С помощью псевдокласса:after.

  • First inline item
  • Second inline item
  • Third inline item
  • Fourth inline item

Список №8: Поворачивающееся меню

Вот последний способ, который работает с CSS3 и поддерживается браузерами Firefox, Safari и Chrome. Когда Вы наводите указатель мыши на блочный элемент, он перейдет в активное повернутое состояние. Этот способ может быть не очень полезным, но на него приятно посмотреть.

Заключение

В этом уроке Вы узнали, как можно делать необычные вещи с обычным списком. И все это, используя только CSS. Надеемся, Вам понравится использование этих списков!

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

Обычный вид маркера

И, первое — задать внешний вид маркеров. Маркеры у списков бывают разные. В уроках по HTML Нумерованных списках показывается, как менять маркеры с помощью атрибута type . Но зная CSS данный атрибут больше не нужен, так как все это делается, куда удобней, благодаря таблице стилей CSS .

Для демонстрации давайте создадим список, с использованием CSS . Особо не имеет значения какой нумерованный список или ненумерованный список , так как с помощью свойства list-style-typet мы можем добавить маркеры или удалить их.

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

Css пример описание маркированного списка. Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position). Маркер в виде изображения

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

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

Свойство List style — оформление списка на html странице

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

Все эти свойства допустимо использовать как для html элементов li, так и для элементов ul и ol. Единственное отличие, если правила прописать для конкретного значения списка li, то оно только для него и применится. А если эти же css правила прописать для контейнеров ul или ul, то они применятся для всех элементов li заключенных в этих контейнерах.

Начнем с атрибута list-style-type , который задает вид маркеров или нумерации у пунктов списка:

Как видно, свойство list-style-type имеет много доступных значений, которые могут задавать как вид маркера, так и различные виды нумерации.

  • disc — маркер в виде черного кружка (значение по умолчанию для маркированных списков).
  • circle — маркер в виде не закрашенного кружка.
  • square — маркер в виде квадратика. Он может быть светлым или темным, в зависимости от браузера.
  • decimal — нумерация арабскими цифрами (значение по умолчанию для нумерованных списков).
  • decimal-leading-zero — нумерация арабскими цифрами от 01 до 99 с начальным нулем.
  • lower-roman — нумерация маленькими римскими цифрами.
  • upper-roman — нумерация большими римскими цифрами.
  • lower-greek — нумерация маленькими греческими буквами.
  • lower-alpha и lower-latin — нумерация маленькими латинскими буквами.
  • upper-alpha и upper-latin — нумерация большими латинскими буквами.
  • armenian — нумерация традиционными армянскими цифрами.
  • georgian — нумерация традиционными грузинскими цифрами.
  • none — маркерация и нумерация осуществляться вообще не будет.

Так примерно будут выглядеть элементы списка в браузере с различными значениями list-style-type:

При использовании CSS стилей не важно какой элемент (OL или UL) используется для создания списка. OL и UL отличаются только поведением по умолчанию и с помощью свойства list-style-type вы можете легко превратить один вид списка в другой.

Атрибут стиля list-style-image позволяет задавать в качестве маркера пунктов списка графическое изображение . При использовании атрибута list-style-image значение атрибута list-style-type игнорируется:

list-style-image: none| |inherit

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

При указании адреса файла изображения, на место маркера будет вставлена картинка. Как и при использовании , в качестве адреса картинки можно использовать как абсолютные так и относительные адреса. В случае если браузер не сможет подгрузить изображение, то будет использоваться маркер или нумерация по умолчанию или то, что прописано в свойстве в list-style-type.

Пример списка с картинкой в качестве маркера:

  • первый пункт списка;
  • второй пункт списка;
  • третий пункт списка.

А вот как это выглядит:

  • первый пункт списка;
  • второй пункт списка;
  • третий пункт списка.

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

И последнее свойство CSS из серии list-style — list-style-position, которое позволяет указать местоположение маркера или нумерации в пункте списка. В качестве значения может быть два варианта:

В случае значения inside маркер или нумерация помещается как бы внутри списка, а в случае outside за пределами элементов li. По умолчанию используется значение outside и маркер выносится за пределы.

Пример списка с различными значениями list-style-position:

  • в первом пункте все по умолчанию;
  • во втором пункте list-style-position установлен в inside. В этом случае, обратите внимание, вторая строка размещается на одном уровне с маркером;
  • в этом пункте list-style-position равен outside.

Сборное CSS правило list-style

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

Разделять значения в сборном правиле list-style следует пробелами:

list-style: list-style-type list-style-image list-style-position;

Реальное CSS правило для оформления списков может выглядеть примерно вот так:

list-style: circle url (http://сайт/images/marker.png) outside;

Таким образом свойство list-style позволяет значительно сократить объем кода, ведь вместо трех правил достаточно задать лишь одно.

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

Тоже самое можно сделать используя свойство list-style-type:

На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!

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

Виды списков

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

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

В зависимости от степени вложенности различают одноуровневые и Каждый уровень часто имеет собственный маркирующий элемент.

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

Отображение в CSS

Каждый пункт является блочным контейнером с особым типом отображения display: list-item. По умолчанию это значение устанавливается для элементов li, расположенных внутри контейнеров ul и ol, и обеспечивает отображение маркера перед блоком.

При необходимости такой тип отображения можно установить для любого HTML-контейнера. Появившийся маркирующий элемент стилизуется с помощью группы свойств CSS list-style.

Все три перечисленные ниже свойства наследуются дочерними элементами, имеющими display: list-item, и в случае необходимости требуют явного переопределения.

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

Первое свойство группы — list-style-position. Оно определяет, остается ли маркер в блоке текста или выносится за его пределы.

Свойство принимает одно из двух значений:

Разница между ними особенно хорошо заметна на многострочных пунктах.

По умолчанию установлено значение outside, и маркер списка выносится за границу блока.


Внешний вид маркера

Второе свойство — list-style-type — управляет типом маркирующего элемента и может принимать больше пятнадцати значений.

По умолчанию для нумерованного списка используются арабские цифры, а для маркированного — точки. Но свойства list-style в CSS позволяют изменить эти установки и даже вовсе удалить маркеры.

Маркеры неупорядоченных списков:

  • disc — обычная точка, закрашенная цветом текста;
  • circle — незаполненный кружок с обводкой в цвет текста;
  • square — закрашенный квадрат.

Для упорядоченных списков вариантов гораздо больше:

Значение свойства list-style-type Описание
decimal стандартная арабская нумерация, с единицы и далее: 1, 2, . 10, .
decimal-leading-zero использует арабские цифры, значения состоящие из одного символа дополняет незначащим нулем слева: 01, 02, . , 10, .
латинского алфавита: a, b, . , e, .
заглавные алфавита: A, B, . , E, .
lower-greek греческий алфавит, строчные символы
lower-roman римские цифры, обозначенные строчными символами: i, ii, . , vi, .
upper-roman римские цифры, обозначенные заглавными символами: I, II, . , VI, .
armenian армянский стиль нумерации
georgian грузинский стиль нумерации
hebrew еврейский стиль нумерации
различные японские стили нумерации, строчные символы
различные японские стили нумерации, заглавные символы
cjk-ideographic восточная идеографическая нумерация

Некоторые значения дублируют друг друга, например lower-alpha и lower-latin, а другие не поддерживаются рядом браузеров и шрифтов.

При необходимости маркеры упорядоченного типа могут быть применены к неупорядоченным спискам ul и наоборот.

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

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

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

Можно использовать даже изображения в формате gif — анимация будет сохранена. Важно помнить, что отображает изображение в натуральную величину.

Помимо файлов изображений, можно использовать CSS-функции радиальных или линейных градиентов:

Форма маркера при этом остается квадратной.

Объединенный синтаксис

Все свойства, определяющие отображение маркера списка, могут быть объединены в одном — CSS list-style.

List-style: list-style-type list-style-position list-style-image

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

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

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

Помню как в июле 1999 года я просвещал людей в мейл-листах о прелестях стилевой вёрстки. С тех пор мало что поменялось.

Впрочем, кое-что поменялось. Поменялся мой взгляд на CSS и на (X)HTML, который выступает в роли каркаса для стилей. Например, я обнаружил, что большинство страниц содержат панель навигации. Чаще всего она оформляются как простая текстовая строка со ссылками, разделенными тегами

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

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

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

Готовим арену

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

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку

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

Без каких-либо дополнительных стилевых правил, список в базовом DIV-е будет выглядеть так:

Позиционирование

Иногда для вашего дизайна отступ в списке принятый по умолчанию может оказаться слишком большим. Но изменение только свойства margin или padding для элемента


    срабатывает не для всех броузеров. Для того, чтобы список полностью передвинулся скажем влево, вам необходимо поменять оба свойства: и margin, и padding. Связано это с тем, что Internet Explorer и Opera создают левый отступ у списка с помощью левого margin, а Mozilla/Netscape используют для этого левый padding.

В следующем примере свойствам margin-left и padding-left у элемента UL присвоено значение 0:

Обратите внимание, что маркеры лежат за границей DIV-а. Если бы контейнером был не DIV, а документа, маркеры оказались бы за пределами окна броузера, т.е. пропали бы с глаз долой. Если вы хотите, чтобы маркеры лежали внутри границ DIV-а, вдоль левого его края, присвойте либо свойству left-padding либо свойству left-margin значение «1em».

Маркеры

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

Стилевое правило выглядит так:

А броузер покажет список так:

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

Изображения, выбранное вами в качестве маркера, может «выползти» за границы списка. Чтобы этого не произошло, поместите изображение внутрь блока
. Для этого добавьте следующую строку:

Все три декларации можно объединить в одно краткое правило:

Список в результате будет выглядеть так:

Бывает так, что у вас есть список, но вам не нужны маркеры, или вы хотите использовать в качестве маркера какой-то другой символ. Опять-таки CSS спешит к вам на помощь. Добавьте правило list-style: none; и сделайте элементы
«надвисающими». Всё правило целиком будет выглядеть так:

Либо свойство левый padding, либо свойство левый margin должно иметь значение 0, а другое — значение 1em. Меняя это свойство вы можете подогнать размер отступа от вашего маркера до приемлемого. Отрицательное значение в свойстве text-indent приводит к тому, что первая строка каждого пункта списка сдвигается влево и «надвисает» над остальным текстом.

Следующий наш список будет обычным, только в качестве маркера будет использован стандартный HML-символ, например », который соответствует закрывающей типографской кавычке: «.

Здесь следует отметить, что Netscape6/7/Mozilla (и другие производные Gecko-броузеры), а также Opera умеют генерировать контент с помощью псевдо элемента:before из стандарта CSS2. Воспользуемся этой функцией и сгенерируем автоматически символ » или какой другой символ в качестве маркера. Таким образом нам не надо будет вписывать его вручную в каждый LI элемент. Если вы работает с броузером Opera или с семейством броузеров Gecko, нижеприведенный CSS создаст такой же список, что и предыдущий, при этом в сам список ничего дополнительно добавлять не нужно.

#custom-gen ul li:before

Свойству content может быть присвоена текстовая строка, URL или что-то другое, включая специальные символы. Если вы остановили свой выбор на символе типа », в свойстве надо прописать шестнадцатеричный код этого символа. У правой типографской кавычки это код 0BB (другой символ 020 — это пробел, добавлен из эстетических соображений). Конечный результат представлен ниже (смотрите броузером Opera или Mozilla/Netscape):

Выстраиваем список в ряд

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

Это касается не только списка ссылок. Вам может понадобиться привести список несколько раз внутри абзаца (например, список книг). Структурно — это список, но раньше если бы вы такое сделали, этот список разорвал бы ваш абзац. CSS опять приходит к вам на помощь!

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

Уже слышу крики: «Болван! Мы думали ты научишь нас, как помещать списки внутри абзаца, а не между двумя абзацами.»

И на это я отвечу: «Ну да, вы правы. К сожалению (X)HTML не разрешает помещать списки внутрь абзаца. Однако с помощью стилей вы можете сделать вот что».

Сначала, вот стилевые правила:

Весь код помещен в

Результат выглядит так (список выделен синим цветом):

Как и в примере выше с маркером мы можем с помощью CSS автоматически генерировать запятые и точки. Если ваши посетители пользуются только броузерами Opera и Gecko, вам не о чем беспокоиться. Стилевые правила будут выглядеть вот так:

#inline-list-gen ul li:after < content: ", "; >#inline-list-gen ul li.last:after

Здесь мы используем псевдо-элемент:after для добавления запятой в конце каждого пункта списка, а точку ставим с помощью класса >

Навигация

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

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

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

Границы

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

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

Примечание: этот прием был предложен Ренделом Растом (Randal Rust), а затем его улучшили подписчики списка рассылки css-discuss

Ссылки-цепочки

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

  • Home
    • » Products
      • » Computers
        • » Software

в результате получаем:

Применив следующие правила:

получаем вот что:

И опять-таки символ «»» (или любой другой подходящий символ) можно генерировать автоматически с помощью псевдо-элемента:before в сочетании с классом >

Мир реалий

Закончу свою статью реальным примером, в котором использован вышеописанный трюк. Мы возьмем стандартный список UL со ссылками и создадим динамическое меню с эффектами перекатывания. Для создания эффекта перекатывания визуальные стили будут применяться к элементам A, а элементы UL и LI будут служить лишь как структурный каркас.

Это меню — фактически ответ на вопрос, заданный Майклом Эффордом (Michael Efford) в списке рассылки css-discuss. Майкл создал в точности такое же меню с помощью таблиц, графики и JavaScript. Затем он спросил в списке рассылки, можно ли то же самое получить с помощью CSS.

  • Home
  • Hidden Cameras
  • CCTV Cameras
  • Employee Theft
  • Helpful Hints
  • F.A.Q
  • About Us
  • Contact Us

Дайте разберем стилевую таблицу правило за правилом, и я объясню для чего нужно каждое из них.

Первое правило — для DIV-а #button. Оно задает, сколько места будет занимать меню, и создает контекст, чтобы мы могли управлять поведением ссылок и пунктов списка. Я предпочел сделать меню гибким и зависимым от установок броузера, поэтому (почти) все значения заданы в «em»-ах. Включая ширину меню. Черная граница была взята из исходного дизайна Майкла. Большой нижний отступ (padding) у меню сделан для того, чтобы вы могли видеть фон у DIV. Опять таки, это было сделано, чтобы повторить исходный дизайн. Нижнее поле (margin) используется для того, чтобы отделить меню от того, что за ним идет. Все цвета взяты из исходного дизайна.

Тут я определил, как должен выглядеть список. Так как все пункты списка у нас являются ссылками, а эффект перекатывания пока имеется только у ссылок, я намеренно удалил все стилистические правила из списков. Я добавил лишь границу шириной в один пиксель, у которой цвет совпадает с цветом фона DIV-а #button. Эта граница служит разделителем между пунктами меню. В исходном дизайне для этого использовалась отдельная картинка.

Сегодня нет практически ни одного сайта, где бы не использовались HTML списки (

    представляет упорядоченный список,

      — неупорядоченный список). В этом уроке я покажу вам 8 отличных способов, позволяющих сделать обычные скучные html-списки привлекательными. Мы лишь добавим несколько простых CSS техник и наши списки не только приобретут потрясающий вид, но и несколько дополнительных возможностей.

А теперь посмотрите демо-версию, чтобы увидеть, что же мы с вами будем создавать.

Выглядят гораздо лучше, не так ли? И вы тоже можете создать такие списки при помощи простого CSS кода. Хотите знать как? Читайте!

Список #1: Простая система навигации

Чаще всего списки используются при создании навигационного меню. Код данного HTML/CSS примера позволяет создать простую, даже немного скромную, но привлекательную систему навигации.

  • Home
  • Blog
  • About
  • Contact

Список #2: Использование различного шрифта при нумерации

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

The Netherlands is a country in .

The United States of America is a federal constitutional .

The Philippines officially known as the Republic .

The United Kingdom of Great Britain and .

Список #3: Изображения-маркеры

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

Список #4: iPhone-стиль

Данный список взят из статьи the iPhone Contacts App, созданный при помощи CSS и jQuery. Так выглядят списки на iPhone. Очень привлекательно, не так ли? Хотите такой на свой сайт?

  • Toronto2004
  • Beijing2008
  • London2012
  • Rio de Janeiro2020

Список #5: Вложенные списки

Вложенные списки могут быть необыкновенно полезны и выглядят красиво. Изменив третью технику (Изображения-маркеры), мы можем создать «расширенный список». Конечно же не без помощи jQuery:

  1. Google
    1. Picasa
    2. Feedburner
    3. Youtube
  2. Microsoft
    1. Corel Corporation
    2. Zignals
    3. ByteTaxi
  3. Yahoo!
    1. Xoopit
    2. BuzzTracker
    3. MyBlogLog

Список #6: Римская нумерация + многострочный тип

По умолчанию в списке используются стандартная нумерация (1, 2, 3, 4 и т.д.). Изменив значение в CSS, вы можете задать другой тип нумерации, к примеру, римский.
Так же по умолчанию, нумерация и маркеры располагаются вне списка (отличный пример тому — наш список под номером 2). Но и это исправимо, всего лишь нужно изменить значение list-style-position свойства на inside.

  1. Lorem ipsum dolor sit amet, .
    Fusce sit amet .
  2. Aenean placerat lectus tristique.
    Vivamus interdum .
  3. Mauris eget sapien arcu, vitae.
    Phasellus neque risus.
  4. Phasellus feugiat lacus .
    Duis rhoncus .

Список #7: Линейный список, в котором пункты перечисляются через запятую

Обычно списки используются для отображения количества чего-либо и отражаются в виде столбика. Но как быть, если вам нужен линейный список? Это достигается путем смены значения display свойства на inline. Но если вам вдруг понадобится встроить список в текст, то по правилам, пунктики списка должны быть разделены запятой. Как этого добиться? А, просто, при помощи элемента:after символического кода.

  • First inline item
  • Second inline item
  • Third inline item
  • Fourth inline item

Список #8: Вращающееся навигационное меню

Вот и последняя техника, для работы которой понадобится CSS3 (поддерживается только последними версиями Firefox, Safari и Chrome). При наведении курсора на один из элементов блока включается эффект — вращение. Конечно не самый удобный способ, но очень красивый.

  • Home
  • Blog
  • About
  • Contact

Как видите, реально создать уникальные вещи из обычного html-списка. И все это силами CSS. Очень рад, если вы узнали много интересного для себя.

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

CSS стили списка маркера.

list-style-type

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;

disk – маркированный список в виде закрашенного кружка

circle – маркированный список в виде не закрашенного кружка

square – маркированный список в виде закрашенного квадратика

decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

none – без маркера.

Свойства списков в css

  • Верь в лучшее, ожидай худшее.
  • Жизнь — это болезнь, со смертельным исходом.
  • Никогда не говори никогда.

list-style-position

Определяет, как будет размещаться маркер относительно текста — маркер обтекается текстом (рис. 1) или вынесен за границу элемента списка (рис. 2).

Краткая информация

Значение по умолчанию outside
Наследуется Да
Применяется К элементам , ,
,

    и

      , а также ко всем элементам, у которых указано display : list-item
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Рис. 1. Значение inside

Рис. 2. Значение outside

Песочница

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

Пример

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

Рис. 3. Применение свойства list-style-position

Объектная модель

Примечание

В браузере Internet Explorer 6 при использовании нумерованного списка

    и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.

Спецификация ?

Спецификация Статус
CSS Lists and Counters Module Level 3 Рабочий проект
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

4 12 1 7 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Adjust list style image position?

Is there a way to adjust the position of list-style-image?

When I use padding for list items the image will stay at its position and won’t move with padding.

14 Answers 14

Not really. Your padding is (probably) being applied to the list item, so will only affect the actual content within the list item.

Using a combination of background and padding styles can create something that looks similar e.g.

You might be looking to add styling to the parent list container (ul) to position your bulleted list items, this A List Apart article has a good starting reference.

I normally hide the list-style-type and use a background image, which is moveable

The «7px 7px» is what aligns the background image inside the element and is also relative to the padding.

A possible solution to this question that wasn’t mentioned yet is the following:

You can now use the top/left of the li:before to position the new bullet. Note that the width and height of the li:before need to be the same dimensions as the background image you choose. This works in Internet Explorer 8 and up.

I had the same problem, but i could not use the background option (and didn’t want to use multiple backgrounds) so i thought of another solution

this is an example for a menu that has a square like indicator for the active/current menu item (the default list style is set to none in another rule)

it creates a square by using a square character with the «:before» pseudo class and it is freely positionable by using absolute positioning.

CSS урок 22. Настраиваем списки

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

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

Готовы? Тогда начинаем!

1. Маркеры списков (list-style-type)

При помощи свойства list-style-type у нас есть возможность управлять маркерами списков. У нумерованных и ненумерованных списков есть свои маркеры. Давайте с ними и познакомимся.

Маркеры ненумерованных списков:

  • Точка ( disc )
  • Квадрат ( square )
  • Окружность ( circle )

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

Как видите, оно довольно простое. Вот как это выглядит на практике:

Маркеры в виде квадратиков

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

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

Маркеры нумерованных списков:

  1. Арабские числа ( decimal )
  2. Римские числа в верхнем регистре ( upper-roman )
  3. Римские числа в нижнем регистре ( lower-roman )
  4. Заглавные латинские буквы ( upper-alpha )
  5. Строчные латинские буквы ( lower-alpha )

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

Маркеры в виде римских чисел

Как видите, все довольно-таки просто. Также можно для разных пунктов списка применять разные значения. Например, определив их через селектор класса или типа.

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

Вот как это выглядит на практике:

Вот и все. Теперь вы можете с легкостью менять маркеры любых ваших списков.

2. Позиционирование и отступы (list-style-position)

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

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

Вот как это выглядит на практике.

Список с увеличенным отступом слева

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

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

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

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

3. Изображения в виде маркеров (list-style-image)

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

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

Обратите внимание, что в качестве значения мы указываем url и местонахождение картинки. Будьте внимательны в задании адреса изображения, ведь оно указывается относительно таблицы стилей.

В моем случае, папка img находится на одном уровне вложенности с таблицей стилей. Именно поэтому я сразу указал папку с картинкой. Бывает, когда CSS файл и изображение находятся в папках одного уровня. В таких случаях перед папкой с картинкой мы ставим двоеточие — ../img/galochka.png . Вот как это выглядит на практике:

Список с изображением в виде маркеров

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

Теперь наш список стал еще более заметным и привлекательным.

4. Сокращенная запись

Как и в случае с сокращенной записью font, такая же возможность есть и у list-style . Например, мы можем отобразить список с квадратными маркерами, находящимися внутри самих пунктов. Для этого пишем следующее правило:

Вот так вот все просто. Могу вас поздравить. Теперь вы в состоянии менять внешний вид списков по своему желанию.

А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.

О формление списков: List-style

С войство LIST-STYLE

Свойство Значения Пр* Нc*
list-style [ list-style-image; list-style-position; list-style-type ], inherit * +
list-style-type disk , circle, square, decimal, decimal-leading-zero, lowel-roman, upper-roman, lowel-latin, upper-latin, armenian, georgian, none, inherit * +
list-style-position inside, outside , inherit * +
list-style-image URL, none , inherit * +

Свойство List-style — сокращённая форма записи свойств, которые задают все стили маркеров для элементов списка. Эти свойства применяются, как к нумерованным, так и маркированным спискам — их нужно рассматривать по отдельности. Сокращённая форма записи может не включать какое-либо отдельное свойство, но порядок их записи должен соблюдаться: тип маркера — его позиция — путь к изображению.

Область применения *: элементы списков и любые другие, для которых значением свойства Display является list-item.

List-style-type

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

disk — маркер-точка.
circle — маркер-кружок.
square — маркер-квадратик.
decimal — арабские числа: 1, 2, 3 ….
decimal-leading-zero — арабские числа, начиная с нуля: 01, 02, 03 … 09.
lowel-roman — римская нумерация в нижнем регистре.
upper-roman — римская нумерация в верхнем регистре.
lowel-latin — строчные латинские буквы: a, b, c ….
upper-latin — заглавные латинские буквы: A, B, C ….
armenian — армянская нумерация.
georgian — грузинская нумерация.
none — отмена.
inherit — наследование от родительского элемента.

В примере используется два разных значения свойства List-style-type:

List-style-position

Свойство определяет расположение маркера элемента. Либо маркер находится внутри элемента, либо за его пределами.

inside — маркер располагается внутри элемента списка.
outside — маркер вынесен за пределы текстового блока.
inherit — наследование от родительского элемента.

В примере наглядно видна разница между значениями inside и outside свойства List-style-position:

List-style-image

Свойство задает путь к картинке, которая будет служить маркером элемента нумерованного или маркированного списка. Расположением картинки-маркера можно управлять при помощи свойства List-style-position.

URL — путь к графическому файлу.
none — отменяет картинку-маркер, например, для родительского элемента.
inherit — наследование от родительского элемента.

В примере мы использовали в качестве маркера картинку небольшого размера, что наглядно демонстрирует возможности свойства List-style-image:

Списки CSS

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

Свойство list-style-type

Свойство list-style-type устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:

Свойство list-style-type

Значение Пример
disc
  • Пункт списка
circle
  • Пункт списка
square
  • Пункт списка
decimal
  • Пункт списка
decimal-leading-zero
  • Пункт списка
lower-roman
  • Пункт списка
upper-roman
  • Пункт списка
lower-alpha
  • Пункт списка
upper-alpha
  • Пункт списка
georgian
  • Пункт списка
  • Пункт списка
  • Пункт списка
cjk-ideographic
  • Пункт списка
  • Пункт списка
  • Пункт списка
none
  • Пункт списка

В таблице я указал два весьма необычных свойства: georgian и cjk-ideographic . Эти свойства используются регионально. Есть ещё несколько похожих любопытных значений этого свойства, например armenian или hiragana , но все их перечислять нет смысла.

Теперь пример использования этого свойства:

Обратите внимание, мы превратили нумерованный список

    в маркированный.

Рисунок 1. Свойство list-style-type.

Обязательно обратите внимание на значение none , это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.

Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.

Свойство list-style-image

Свойство list-style-image устанавливает символом маркера графический файл.

Вот результат работы этого кода:

Рисунок 2. Свойство list-style-image.

Мы видим, что теперь маркеры списка отмечены графическим файлом http://komotoz.ru/_images/bullet_li.gif.

Свойство list-style-position

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

    .

Вот что мы видим:

» title=»Форматируем блок

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