Продолжаем изучать 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) ". "; /* Выводим число */ }
Результат:
Жду вас на следующих уроках! Не забывайте подписываться!
Предыдущая запись
Следующая запись
С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.
В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.
Свойство | Значение | Описание | Пример |
---|---|---|---|
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 | Универсальное свойство, включает одновременно все вышеперечисленные свойства. |
Поскольку тег
-
или
- Заголовок должен быть короче трех строк.
- При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.
- Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- работоспособность всех ссылок
- поддержку разных браузеров
- читабельность текста
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- первый
- второй
- третий
- None — маркирация осуществляться вообще не будет (list-style-type:none; применено для этого пункта и поэтому у него нет маркера)
- Disc — закрашенный кружок (для этой строки как раз применено list-style-type:disc;)
- Circle — окружность в качестве маркера
- Square — квадратик в качестве маркера
- Decimal — арабские цифры (list-style-type:decimal;)
- lower-alpha — латинские буквы в нижнем регистре
- upper-alpha — латинские буквы в верхнем регистре
- lower-roman — римские цифры в нижнем регистре
- upper-roman — римские цифры в верхнем регистре
- Поменяли цвет текста (list-style-type:lower-roman;color:red) и поменялся цвет маркера
- Здесь все по умолчанию
- Вот так будет выглядеть размещение области маркера с inside. Обратите внимание, что вторая строка в этом элементе и маркер расположены на одном уровне
- Здесь все по умолчанию
- Здесь все по умолчанию
- Вот так может выглядеть использование картинки в качестве маркера. Понятно, что можно подобрать более подходящее для этой цели изображение
- Например, как здесь.
-
,
который выступает в качестве его родителя, то можно устанавливать стиль как
для селектора UL
, так и для селектора LI
.
Так, в примере 1 используется селектор UL
, для
него и задаются стилевые параметры.
Пример 1. Создание маркированного списка
Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.
Рис. 1. Вид списка, измененого с помощью стилей
Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.
Пример 2. Использование изображений в качестве маркера
Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.
Рис. 2. Изображения в качестве маркеров
Некоторые примеры создания различных списков приведен в табл. 2.
Код HTML | Пример |
---|---|
|
|
Что следует учитывать при тестировании сайта:
|
|
Что следует учитывать при тестировании сайта:
|
|
Нумерованный список с арабскими цифрами: |
|
Нумерованный список со строчными римскими цифрами: |
|
Нумерованный список с заглавными римскими цифрами: |
|
Нумерованный список со строчными буквами латинского алфавита: |
|
Нумерованный список с заглавными буквами латинского алфавита: |
Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья в копилку . Речь в ней пойдет об оформлении с помощью правил таблиц каскадных стилей. Здесь все очень просто, но тем не менее я решил посвятить этой теме отдельный пост.
Чуть раньше мы уже успели узнать как , как и как можно работать со . Ну, а еще чуть раньше мы во всех подробностях рассмотрели всевозможные и их различные комбинации для указания именно того элемента Html кода, для которого нужно будет применить определенные свойства стилевого оформления.
List style — оформление списков в Html коде
Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода. Но обо всем по порядку.
То, что мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI, так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения list-style для этих тегов?
Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:
Давайте начнем с list-style-type , которое позволяет задать тип маркирации для отдельных элементов Html списка. Для этого правила допустимы следующие значения:
Как вы думаете, с помощью каких элементов Ul или Ol был создан расположенный чуть выше список? Вопрос на засыпку. Оказывается, что это уже не важно, хотя в данном конкретном случае я использовал Ol, но изменив его на Ul — внешний вид останется прежним, ибо он задается для каждого элемента своим значением CSS правила list style type.
По сути Ul и Ol отличаются только поведением по умолчанию (Ul — маркирует, а Ol — нумерует). Но если вы захотите, то сможете легко превратить один вид списка в другой с помощью list-style-type. Шрифт для маркирования цифрами или буквами используется точно такой же, какой был вами определен для содержимого тегов LI. Например, поменяв цвет шрифта для списка мы поменяем и цвет маркеров :
Давайте перейдем с следующему CSS свойству — list-style-position . С помощью него можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:
Т.е. по сути в list-style-position мы указываем, где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы, т.е. используется значение outside.
Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:
List-style-image и сборное Css правило
Далее у нас на очереди List-style-image — позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но вы можете прописать функционал Url (), указав в нем путь до изображения, которое в последствие будет выполнять роль маркера в этом списке:
Выглядеть это может так:
List-style-image: url(https://сайт/images/list_star.png);
Как вы помните, в статье про я говорил, что картинки относятся к строчным элементам (собственно, для браузера эта та же самая буква, но иногда очень большого размера).
Вот картинка и встает на место маркера (буквы или цифры). При этом высота строки с элементом списка будет увеличена, если вы вставите в качестве маркера большую картинку (как это произошло во втором элементе приведенного чуть выше примера).
В функционале для list style image можно указывать как на изображения. Если картинка не подгрузится, то будет использоваться маркер или нумерация по умолчанию, либо то, что прописано в list-style-type для этого элемента списка.
Чтобы записать все три описанных выше CSS правила в одно единое, можно будет использовать List-style, которое является сборным для оформления списков. Порядок указания значений в нем не имеет никакого значения. Те значения, которые вы не зададите в List-style, в явном виде будут интерпретированы браузером со значениями принятыми по умолчанию.
Где посмотреть значения по умолчанию? Да все там же — в спецификации CSS валидатора W3C в столбце «Initial value» напротив интересующих вас свойств:
Значения для отдельных свойств в сборном правиле List-style разделяются пробелами. Места расположения, как уже упоминал, не важны:
На практике это может выглядеть, например, так:
List-style:inside upper-roman url(https://сайт/images/list_star.png);
Можно использовать значения в любом порядке и любом количестве (начиная от одного). Кстати говоря, с помощью списков чаще всего формируются на сайтах меню и свойство List-style при этом используется для того, чтобы убрать маркеры из списков меню , которые там совершенно не нужны:
List-style-type:none;
List-style:none;
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Float и clear в CSS - инструменты блочной верстки
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
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
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.