Телевизор 

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

23.02.2017

Пока нет


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

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

Свойство «LIST-STYLE-TYPE»
Правилом «list-style-type » можно задать вид маркера, например, чтобы отображались цифры, буквы, квадратики, кружочки и др.

Свойство:

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

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

  • disk – маркер в виде закрашенного круга;
  • circle – маркер в виде незакрашенного круга;
  • square – маркер в виде закрашенного квадрата;

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

  • decimal – обычные десятичные числа (1,2,3,4,5 и т. д.);
  • upper-roman – большие римские цифры (I, II, III, IV, V и т.д.);
  • lower-roman – маленькие римские цифры (i, ii, iii, iv, v и т.д.);
  • upper-alpha – большие буквы (A, B, C, D, E и т. д.);
  • lower-alpha – малые буквы (a,b,c,d,e и т.д.)

Li { list-style-type: circle; /* Маркеры в виде незакрашенного кружочка */ }

Полный пример:

Основы CSS

  • текст №1
  • текст №2

Результат:

Если нужно убрать маркер из списка, тогда воспользуйтесь свойством «none »:

Li { list-style-type: none; /* Убираем маркеры */ }

Результат:

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

Свойство « LIST-STYLE-POSITION »
Правилом «list-style-position » можно указать положение маркера.

Свойство:

  • outside – за пределами основного блока списка;
  • inside – внутри основного блока списка.

Li { list-style-position: inside; /* положение маркера */ }

Цвет маркера в списке

Свойство « COLOR »
Вам уже известно правило «color », с помощью которого можно не только менять цвет текста, но и цвет маркера. Посмотрите .

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

  • Текст №1
  • Текст №2

Результат:

Картинка вместо маркера в списке

Свойство « LIST-STYLE-IMAGE »
Если вам не нравится стандартный вид нумерованных или маркированных списков, вы можете воспользоваться правилом «list-style-image » и вместо обычных маркеров поставить картиночные.

Синтаксис:

List-style-image: url(картинка.png);

LI { list-style-image: url("marker1.png"); /* изображение маркера */ }

«marker1.png » - это картинка маркера.

Результат:

Отступ маркера в списке

Свойство «PADDING-LEFT»
Если вам нужно сделать отступ от маркера до текста, воспользуйтесь правилом «padding-left ».

Li { padding-left: 30px; /* Отступ от маркера до текста */ }

Результат:

ПОДАРОК ДЛЯ ТЕХ, КТО ДОЧИТАЛ ДО КОНЦА

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

Li { list-style-type: none; /* Убираем исходную нумерацию у списка */ } ul { counter-reset: list 5; /* Инициируем счетчик */ } ul li:before { counter-increment: list; /* Увеличиваем значение счетчика */ content: counter(list) ". "; /* Выводим число */ }

Результат:

Жду вас на следующих уроках! Не забывайте подписываться!

Предыдущая запись
Следующая запись

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

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

Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении с помощью правил 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|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit

Как видно, свойство 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, которое позволяет указать местоположение маркера или нумерации в пункте списка. В качестве значения может быть два варианта:

list-style-position: inside|outside

В случае значения 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: none;

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

list-style-type: none;

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

С помощью 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. третий

        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

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

        Результат :

        Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

        list-style-type: none;

        Пример :

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

        • Верь в лучшее, ожидай худшее.
        • Никогда не говори никогда.

        Результат :

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

        list-style-image

        list-style-image: url(картинка.png);

        Пример :

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

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

        Результат :

        Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

        Пример :

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

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

        Результат :

        Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
        Это выглядит вот так:

      • текст

        • Пример :

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

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

        Результат :

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

        Пример :

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

        • Верь в лучшее, ожидай худшее.Пункт 1
        • Жизнь - это болезнь со смертельным исходом.Пункт 2
        • Никогда не говори никогда.Пункт 3
        • Это все что я знал. Пункт 4

        Результат :

        Вот и подошла к завершению тема .