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
Каждый пункт является блочным контейнером с особым типом отображения display: list-item. По умолчанию это значение устанавливается для элементов li, расположенных внутри контейнеров ul и ol, и обеспечивает отображение маркера перед блоком.
При необходимости такой тип отображения можно установить для любого HTML-контейнера. Появившийся маркирующий элемент стилизуется с помощью группы свойств CSS list-style.
P { display: list-item; list-style-type: decimal; }
Все три перечисленные ниже свойства наследуются дочерними элементами, имеющими display: list-item, и в случае необходимости требуют явного переопределения.
Положение маркера списка
Первое свойство группы - list-style-position. Оно определяет, остается ли маркер в блоке текста или выносится за его пределы.
Свойство принимает одно из двух значений:
- inside,
- outside.
Разница между ними особенно хорошо заметна на многострочных пунктах.
List1 { list-style-position: outside; } .list2 { list-style-position: inside; }
По умолчанию установлено значение 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, которое скрывает маркеры у списка любого типа. Оно особенно полезно при создании навигационных панелей, когда требуется сохранить семантику списка, но маркирующие элементы не вписываются в дизайн. Также свойство часто используется для пользовательской стилизации.
List { list-style-type: none; }
Пользовательский маркер
Вместо определенных CSS видов маркирующих элементов можно использовать любое изображение. Для этого необходимо передать ссылку на него свойству list-style-image.
Можно использовать даже изображения в формате gif - анимация будет сохранена. Важно помнить, что отображает изображение в натуральную величину.
List { list-style-image: url(image.jpg); line-height: 25px; }
Например:
Помимо файлов изображений, можно использовать CSS-функции радиальных или линейных градиентов:
List { list-style-image: radial-gradient(lightblue, aqua, blue); }
Форма маркера при этом остается квадратной.
Объединенный синтаксис
Все свойства, определяющие отображение маркера списка, могут быть объединены в одном - CSS list-style.
List-style: list-style-type list-style-position list-style-image
Конкретные свойства перечисляются через пробел, нарушать их порядок нельзя, но любое из них можно опустить:
List1 { list-style: none; } .list2 { list-style: upper-roman inside; } .list3 { list-style: inside url(/images/img1.png); }
Для сброса стилей к исходным параметрам существует значение initial , которое может быть передано любому из четырех перечисленных свойств.
Используя группу в сочетании с эффектами наведения, можно создавать красивые уникальные списки, привлекающие внимание пользователя.
Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении с помощью правил 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 свойства различных элементов. И в этом уроке пойдет речь об оформлении списков. Списки на практике используются достаточно часто, поэтому эти свойства нужно запомнить.
Обычный вид маркера
И, первое - задать внешний вид маркеров. Маркеры у списков бывают разные. В уроках по HTML Нумерованных списках показывается, как менять маркеры с помощью атрибута type . Но зная CSS данный атрибут больше не нужен, так как все это делается, куда удобней, благодаря таблице стилей CSS .
Для демонстрации давайте создадим список, с использованием CSS . Особо не имеет значения какой нумерованный список или ненумерованный список , так как с помощью свойства list-style-typet мы можем добавить маркеры или удалить их.
HTML
- Ненумерованный список
- Ненумерованный список
- Ненумерованный список
- Ненумерованный список
И так, обычный список создали, и по умолчанию у него создались маркеры в виде закрашенных кругов. И очень часто возникает вопрос, как убрать маркеры списка ?
Убирается маркер у списка с помощью свойства list-style-typet и присваивая ему значение none . Это является самым популярным вариантом по удалению маркеров у списка. И для списка зададим то самое свойство.
Ul{ list-style-type: none; }
Теперь если обновить страницу то увидим, что данное свойство убрало маркеры из списка.
- none - Удаляет маркеры у списка
- circle - Маркер в виде круга
- disc" - Маркер в виде заполненного круга. Значение по умолчанию
- square - Маркер в виде квадрата
- armenian - Армянская нумерация
- decimal - Маркер в виде цифры
- decimal-leading-zero - Цифры с «0» перед началом (01, 02, 03, и т.д.)
- georgian - Грузинская нумерация
- lower-alpha - (а, Ь, с, d, е, и т.д.)
- lower-greek - (alpha, beta, gamma, и т.д.)
- lower-latin - (a, b, с, d, e, и т.д.)
- Iower-roman - (i, ii, iii, iv, v, и т.д.)
- upper-alpha - (А, В, С, D, Е, и т.д.)
- upper-latin - (А, В, С, D, Е, и т.д.)
- upper-roman - (I, II, III, IV, V, и т.Д.)
- inherit - Значение должно быть унаследовано от элемента родителя
Это все вида маркеров для списков. Первые четыре вида самые распространённые, остальные виды применяются достаточно редко.
Ну и для примера давайте выберем и зададим маркер в виде больших римских цифр. Делается это просто: в место значения none ставим название нашего маркера upper-roman .
Ul{ list-style-type: upper-roman; }
Если обновить страницу, то у списков в виде маркеров появились римские большие цифры. Вот таким способом можно менять внешний вид маркеров списков, задавая нужный вид через свойство list-style-type .
Маркер в виде изображения
Второй, достаточно важный момент, и часто используемый маркер - это изображение в виде маркера. Часто нужно использовать маркер в виде красивой картинки и обычные варианты маркеров представленных CSS не подходят. Для этого используется изображения. И делается это с помощью специального свойства, которое называется list-style-image . Это будет указывать браузеру, что маркером у нас будет картинка.
Возьмите любую картинку в интернете размером (15px x 15px) , которую планируется использовать в качестве маркера и поместите ее в ранее уже созданную папку с картинками images . После этого, остается свойству list-style-image указать путь к картинке и браузер вместо маркера подставит картинку.
В CSS путь указывается с помощью ключевого слова url() . В скобках указываем путь к картинке ../images/Название картинки.jpg , относительно таблицы стилей.
То есть, что значит относительно таблицы стилей? Наша таблица стилей - файл style.css , лежит в каталоге CSS , а картинка лежит в каталоге images . Это значит, что браузеру нужно указать, что ему сначала нужно выйти из каталога CSS , это делается так: ../ , а затем зайти в в каталог с картинкой images и уже затем найти нужную картинку.
Ul{
list-style-image: url(../images/Название картинки маркера.jpg);
}
Если вы указали правильный путь к картинке, то браузер вместо обычных маркеров подгрузит Вашу картинку.
Применяя в качестве маркера картинки Вам понадобится знать еще одно свойство, которое отвечает за расположение маркера картинки. Чтобы увидеть, как это свойство работает, мы сделаем рамку
красного цвета для всех элементов
Ul li{ border: 2px solid #ff0000; }
Теперь, если вы посмотрите, то Ваш маркер-картинка находится за пределами элемента списка, той самой рамки, что мы создали выше. Поэтому бывают моменты, когда нужно чтобы маркер находился внутри элемента списка. Для этого и существует свойство list-style-position , в которое изначально установлено значение outside , то есть устанавливать маркеры за пределами элемента.
Чтобы внедрить маркер внутрь элемента, используется значение inside . Теперь, если установить это свойство в значение inside , то маркер окажется внутри элемента списка и красная рамка это наглядно нам показывает.
Ul{ list-style-image: url(../images/Название картинки маркера.jpg); list-style-position:inside; } ul li{ border: 2px solid #ff0000; }
Вот таким образом работают три этих свойства. Существует и сокращенный вариант записи, который объединяет все эти свойства.
То есть, указывается свойство list-style и затем, по порядку, значения типа маркера, позиции маркера и, если нужно путь к картинке, которая и будет маркером. И, картина у нас получится следующая:
Ul{ list-style: inside url(../images/Название картинки маркера.jpg); }
Вот таким образом записывается краткий вариант правил, относящихся к внешнему виду списков. Данная запись говорит, что маркер должен находится внутри элемента, а маркером, будет является, та самая картинка
На этом со списками все, но уделите немного больше времени спискам, по тренируйтесь сами с установкой различных маркеров почувствуйте, как это все работает. В демо будут показаны варианты установок маркера, где Вы сможете, путем сравнения, проверить корректность своей работы.
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; /* Маркеры в виде незакрашенного кружочка */ }
Полный пример:
- текст №1
- текст №2
Результат:
Если нужно убрать маркер из списка, тогда воспользуйтесь свойством «none »:
Li { list-style-type: none; /* Убираем маркеры */ }
Результат:
Положение маркера в списке
Свойство «
LIST-STYLE-POSITION
»
Правилом «list-style-position
» можно указать положение маркера.
Свойство:
- outside – за пределами основного блока списка;
- inside – внутри основного блока списка.
Li { list-style-position: inside; /* положение маркера */ }
Цвет маркера в списке
Свойство «
COLOR
»
Вам уже известно правило «color
», с помощью которого можно не только менять цвет текста, но и цвет маркера. Посмотрите .
- Текст №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) ". "; /* Выводим число */ }
Результат:
Жду вас на следующих уроках! Не забывайте подписываться!
Предыдущая запись
Следующая запись