Маркированный список. HTML, XHTML и CSS на 100%
Маркированный список
Маркированные списки – это списки, в которых пункты отмечаются с помощью различных символов. Такие списки еще называют ненумерованными, или неупорядоченными, потому что для элементов данного списка последовательность неважна. Эти списки можно использовать для простого перечисления объектов или их свойств.
Для создания списков в HTML предусмотрен элемент UL, требующий наличия закрывающего тега. Пункты списка находятся внутри элемента UL. Каждый пункт начинается с элемента LI.
У элемента UL есть атрибут type, определяющий вид маркера списка. Он может принимать следующие значения:
• circle – создает маркер в виде круга, белого внутри;
• square – создает маркер в виде квадрата;
• disc – создает маркер в виде круга, закрашенного черным цветом.
Маркер можно выбирать любой, на ваш взгляд наиболее соответствующий виду страницы.
В листинге 2.5 представлен пример создания маркированных списков с разными маркерами.
Листинг 2.5. Маркированные списки
<html
<head>
<title>Списки</title>
<body>
<ul type=»circle»>
<li>Венера</li>
<li>Земля</li>
<li>Юпитер</li>
<li>Марс</li>
</ul>
<ul compact type=»square» >
<li>Венера</li>
<li>Земля</li>
<li>Юпитер</li>
<li>Марс</li>
</ul>
<ul compact type=»disc» >
<li>Венера</li>
<li>Земля</li>
<li>Юпитер</li>
<li>Марс</li>
</ul>
</body>
</html>
Результат обработки кода из листинга 2.5 показан на рис. 2.5. Здесь видно, как выглядят разные маркеры списков.
Рис. 2.5. Маркированные списки
При создании маркированных списков с помощью элемента LI можно задать вид маркера отдельно для каждого пункта списка.
В листинге 2.6 приведен пример создания списка с разными маркерами для различных пунктов.
Листинг 2.6. Список с разными маркерами
<html>
<head>
<title>Списки</title>
<body>
<ul>
<li type=»circle»>Земля</li>
<li type=»circle»>Марс</li>
<li type=»square»>Солнце</li>
<li type=»circle»>Венера</li>
<li type=»disc»>Луна</li>
</ul>
</body>
</html>
Результат обработки браузером кода из листинга 2.6 представлен на рис. 2.6.
Рис. 2.6. Список с разными маркерами
В примере различные маркеры отмечают объекты разных типов.
Иногда удобнее создавать свои маркеры для списков, в этом случае внешний вид списков будет намного лучше соответствовать стилю вашего сайта и вашим желаниям.
В HTML есть возможность создать список с графическими маркерами. Для этого нужно вместо элемента LI подставить картинку с желаемым изображением. Элемент UL укажет браузеру, что надо сделать отступ, а с помощью элемента BR можно перенести строку.
В листинге 2.7 представлен пример создания списка с графическими маркерами.
Листинг 2.7. Список с графическими маркерами
<html>
<head>
<title>Списки</title>
<body>
<ul>
<img src=»marker.jpg» />Венера<br />
<img src=»marker.jpg» />Марс<br />
<img src=»marker.jpg» />Земля<br />
</ul>
</body>
</html>
Результат обработки кода из листинга 2.7 показан на рис. 2.7.
Рис. 2.7.
Теперь можно использовать картинки для создания симпатичных списков, соответствующих стилю вашего сайта.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРесСтилизация списков — Изучение веб-разработки
Списки, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.
Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)
HTML для нашего примера списка представлен ниже:
<h3>Shopping (unordered) list</h3> <p>Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <ul> <li>Hummus</li> <li>Pita</li> <li>Green salad</li> <li>Halloumi</li> </ul> <h3>Recipe (ordered) list</h3> <p>Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <ol> <li>Toast pita, leave to cool, then slice down the edge.</li> <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>Wash and chop the salad.</li> <li>Fill pita with salad, hummus, and fried halloumi.</li> </ol> <h3>Ingredient description list</h3> <p>Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p> <dl> <dt>Hummus</dt> <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> <dt>Pita</dt> <dd>A soft, slightly leavened flatbread.</dd> <dt>Halloumi</dt> <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>Green salad</dt> <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> </dl>
Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя инструменты разработчика браузера, то вы заметите несколько стилей установленных по умолчанию:
- Элементы
<ul>
и<ol>
имеют верхний и нижнийmargin
по16px
(1em
) иpadding-left
40px
(2.5em
.) - Объекты списка (элементы
<li>
) не имеют заданных значений по умолчанию для интервалов. - Элемент
<dl>
имеет верхний и нижнийmargin
по16px
(1em
), но padding не задан. - Элементы
<dd>
имеютmargin-left
40px
(2.5em
.) - Элементы
которые мы включили для ссылок (сноски) имеют верхний и нижнийmargin
по16px
(1em
), точно так же, как и различные типы списков.
При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть законченный стилизированный пример на Github, а также найти исходный код.)
CSS, используемый для оформления текста и интервалов, выглядит следующим образом:
html { font-family: Helvetica, Arial, sans-serif; font-size: 10px; } h3 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.5rem; } li, p { line-height: 1.5; } dd, dt { line-height: 1.5; } dt { font-weight: bold; } dd { margin-bottom: 1.5rem; }
- Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.
- Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.
- Правило 4 задаёт одинаковую высоту
line-height
в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма. - Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту
line-height
между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.
Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов
<ul>
или <ol>
:list-style-type
(en-US): задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.list-style-position
(en-US): управляет будет ли маркер появляется внутри пунктов списка или вне их перед началом каждого элемента.list-style-image
: позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.
Стили маркеров
Как указано выше, свойство list-style-type
(en-US) позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:
ol {
list-style-type: upper-roman;
}
Это даёт нам следующий вид:
Вы можете найти гораздо больше опций, заглянув на справочную страницу list-style-type
(en-US).
Позиция маркера
Свойство list-style-position
(en-US) устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside
, которое заставляет маркеры находится снаружи пунктов списка, как видно выше.
Если вы установите значение на inside
, то маркеры будут находиться внутри строк:
ol {
list-style-type: upper-roman;
list-style-position: inside;
}
Использование пользовательского изображения как маркер
Свойство list-style-image
позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:
ul {
list-style-image: url(star.svg);
}
Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств background
, о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!
В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):
ul {
padding-left: 2rem;
list-style-type: none;
}
ul li {
padding-left: 2rem;
background-image: url(star.svg);
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
}
Мы сделали следующее:
- Установили
padding-left
элемента<ul>
с40px
по умолчанию на20px
, затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо. - Установили
list-style-type
(en-US) наnone
, для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойстваbackground
для управления маркерами. - Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:
background-image
: Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.background-position
: Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим0 0
, что значит что маркер будет появляться в самом верху слева каждого пункта списка.background-size
: Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер1.6rem
(16px
), что очень хорошо сочетается с отступом (padding)20px
, который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.background-repeat
: По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значениеno-repeat
.
Это даёт нам следующий результат:
короткая запись list-style
Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, list-style
(en-US). Например, следующий CSS:
ul {
list-style-type: square;
list-style-image: url(example.png);
list-style-position: inside;
}
Может быть заменён этим:
ul {
list-style: square url(example.png) inside;
}
Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc
, none
, и outside
). Если указаны и type
и image
, тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.
Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.
start
Атрибут start
позволит вам начать счёт списка с цифры отличной от 1. Например:
<ol start="4">
<li>Toast pita, leave to cool, then slice down the edge.</li>
<li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li>Wash and chop the salad.</li>
<li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
что даст вам такой результат:
reversed
Атрибут reversed
начнёт отсчёт по убыванию вместо возрастания. Например:
<ol start="4" reversed>
<li>Toast pita, leave to cool, then slice down the edge.</li>
<li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li>Wash and chop the salad.</li>
<li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
что даст вам такой результат:
Обратите внимание: Если пунктов в списке в обратном списке больше, чем значение атрибута start
, счёт продолжится до нуля и далее отрицательные значения.
value
Атрибут value
позволит вам установить специфичные цифровые значения к пунктам списка. Например:
<ol>
<li value="2">Toast pita, leave to cool, then slice down the edge.</li>
<li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li value="6">Wash and chop the salad.</li>
<li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
что даст вам такой результат:
Обратите внимание: Даже если вы используете нечисловой list-style-type
(en-US), вам всё равно надо использовать эквивалентное цифровое значение в атрибуте value
.
В этой сессии активного изучения, мы хотим, чтобы вы взяли всё что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:
- Задали неупорядоченному списку квадратные маркеры.
- Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
- Задали упорядоченному списку маркеры в виде строчных букв.
- Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдёте.
Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы застрянете, нажмите кнопку Show solution чтобы посмотреть возможный ответ.
Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:
В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.
Как в HTML создать маркированный список без маркеров (убрать точки у li)
В некоторых случаях может понадобиться создать маркированный список без маркеров. Ниже описано несколько способов реализации этого с помощью HTML. В том числе и с помощь list style none.
Пример HTML
Добавление стиля «list-style: none» в тег неупорядоченного (<ul>) или упорядоченного списка (<ol>) уберет любые маркеры или номера:
<ul> <li>Элемент списка без маркера</li> <li>Второй элемент</li> </ul>
Пример HTML с CSS
Приведенный выше пример работает почти в любой ситуации. Но лучше размещать CSS во внешнем файле стилей. Ниже приведены CSS и HTML, которые можно использовать для удаления маркеров.
Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков (<ul>). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:
<style type="text/css"> ul { list-style-type: none; } </style>
Но лучше создать класс list style none CSS, который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS:
<style type="text/css"> .nobull { list-style-type: none; } </style>
В приведенном выше коде CSS создается новый класс «nobull». Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:
<ul> <li>Элемент списка без маркера</li> <li>Второй элемент</li> </ul>
Подсказка: Этот класс можно применить для любого элемента списка (<li>), чтобы скрыть маркер напротив определенных элементов, но оставить другие маркеры.
Вывод примера
Ниже показано, как выводится на экран неупорядоченный список без маркеров с помощью list style type none.
Пожалуйста, оставляйте свои мнения по текущей теме статьи. За комментарии, дизлайки, лайки, отклики, подписки низкий вам поклон!
Данная публикация является переводом статьи «How to create a bullet list with no bullets in HTML» , подготовленная редакцией проекта.
маркированный список с различными отступами
Могу ли я сделать маркированные списки на своем сайте, которые используют теги <ul> и <li>, с разными расстояниями отступа?
- Элемент Первый
- Второй элемент и даже эта строка , которая не находится в теге <li>, имеют отступ
Я хотел бы сделать отступы для некоторых элементов, но расстояние по умолчанию слишком велико, а отступ без отступа слишком мал.
html css html-listsПоделиться Источник sova 28 декабря 2010 в 21:00
2 ответа
25
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
Я думаю , что отступ по умолчанию равен 40px
, это вдвое меньше.
Поделиться thirtydot 28 декабря 2010 в 21:05
3
li {
margin-left: 10px;
}
ul li{
margin-left: 20px;
}
Немного более чистый способ регулировки обоих углублений. Поля и отступы различаются, поэтому используйте то, что вам больше подходит.
Поделиться ebaum 28 декабря 2010 в 21:18
Похожие вопросы:
Маркированный список вместе с таблицей HTML
Я показываю маркированный список в таблице HTML следующим образом. <ul style=list-style-type: decimal;> <table> <tbody>…
Маркированный список стиль гиперссылки Asp .net
<asp:BulletedList ID=BulletedList1 runat=server DisplayMode=HyperLink style=list-style :none > Я динамически добавляю элемент списка в вышеприведенный маркированный список. Как добавить стиль…
Маркированный список с пулевым Флешем слева и висячим отступом
Я ищу правильный способ закодировать маркированный список в html или markdown, с пулей заподлицо слева, пробелом табуляции после пули и висячим отступом непосредственно под маркированной строкой. Я…
Можно ли иметь маркированный список с обработчиком событий?
Я использую качели для программирования интерфейса в Swing. Я хочу отобразить маркированный список элементов. Когда элемент нажат, я хочу, чтобы был вызван обработчик событий. Мне удалось заставить…
Маркированный список и нумерованный список в UITextView
Может ли кто-нибудь сказать мне, как добавить маркированный список и нумерованный список к выбранному тексту в UITextView.
Как добавить маркированный список в приложение android?
Я погуглил свой вопрос, но там нет рабочего ответа. Как добавить маркированный список в мой textview.
Как я должен отформатировать свою ячейку, чтобы иметь маркированный список элементов
Как я должен отформатировать свою ячейку, чтобы иметь маркированный список элементов. В настоящее время я создаю маркированный текст в word и вставляю его в ячейку excel, но когда я пытаюсь добавить…
Многострочный маркированный список в markdown
Поддерживает ли markdown многострочный (разрыв строки внутри элемента) маркированный список? В HTML году я могу поместить в него <br> . Пункт 1 бла бла бла Пункт 2 повестки дня бла бла бла В…
Создайте Маркированный Список Из Двух Столбцов
Как я могу создать маркированный список из 2 столбцов в HTML ? Я знаю, что могу использовать его для создания маркированного списка, но как я могу создать этот отдельный столбец непосредственно…
Добавить маркированный список с помощью python-pptx
Я использую библиотеку python-pptx для манипуляций pptx. Я хочу добавить маркированный список в документ pptx. Я использую следующий фрагмент кода для добавления элемента списка: p =…
Списки — Основы вёрстки контента
Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:
- Маркированные;
- Нумерованные;
- Списки определений.
В предложении выше виды списков были сгруппированы с помощью маркированного списка. Он имеет небольшой отступ слева и обозначается маркером у каждого отдельного пункта. Каждый вид списка имеет такие черты, что позволяет быстро определить их на странице.
Помимо этого все списки имеют контейнеры — теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.
В своём представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.
Маркированные списки
Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.
Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег <ul></ul>
. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег <li></li>
. Так браузер отделяет списки друг от друга.
Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега <li></li>
. Внутри каждого из этих тегов помещается один пункт списка.
<ul>
<li>Маркированные;</li>
<li>Нумерованные;</li>
<li>Списки определений.</li>
</ul>
Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега <li></li>
. Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:
<h2>Теги в HTML</h2>
<ul>
<li>Параграфы</li>
<li>Списки
<ul>
<li>Маркированные;</li>
<li>Нумерованные;</li>
<li>Списки определений.</li>
</ul>
</li>
</ul>
У вложенного списка изменился маркер. Это позволяет даже при отсутствии отступов отделить вложенные списки от основного уровня. CSS позволяет управлять маркерами и настраивать их внешний вид. В конце урока будет изучено свойство, которое позволяет стилизовать маркеры и даже использовать свои изображения для этого.
Нумерованные списки
Структура нумерованных списков повторяет маркированные списки. Имея свою специальную обёртку возможно вкладывать пункты списка. Семантическое отличие нумерованных списков заключается в последовательности. Такие списки идут строго по порядку и обозначают последовательность какой-либо информации.
Нумерованный список использует контейнер <ol></ol>
, в качестве пунктов списков используется тег <li></li>
. Примером такого списка может служить список дел на день.
<h2>Список дел на вторник</h2>
<ol>
<li>Позавтракать</li>
<li>Оплатить билет на метро</li>
<li>Съездить к бабушке</li>
<li>Лечь спать</li>
</ol>
Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.
<h2>Список дел на вторник</h2>
<ol>
<li>Позавтракать</li>
<li>Оплатить билет на метро</li>
<li>Съездить к бабушке
<ul>
<li>Купить цветы</li>
<li>Купить конфеты</li>
</ul>
</li>
<li>Лечь спать</li>
</ol>
Списки определений
С точки зрения HTML списки определения являются самыми сложными для вёрстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.
В качестве контейнера для списков определений используется тег <dl></dl>
, внутри которого не привычная схема <li></li>
, а система из двух тегов:
-
<dt></dt>
— термин; -
<dd></dd>
— определение.
Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:
<dl>
<dt>HTML</dt>
<dd>Язык гипертекстовой разметки</dd>
<dt>CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>
Стилизация списков
Основным способом стилизации списков является изменение маркера, который появляется в левой части пункта списка. В маркированных и нумерованных списках его можно изменить с помощью свойства list-style-type
. Оно принимает множество различных значений. Все их вы можете увидеть с помощью веб-инспекторов. Для создания маркера в виде квадрата используется значение square
.
Свойство list-style-type
позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none
.
Изменять маркер можно одним из двух способов:
- Установка свойства на контейнер. В этом случае все элементы списка получат тот маркер, который был указан в свойстве.
- Установка свойства на элемент списка. Маркер изменится только у одного пункта списка, другие получат маркер по умолчанию.
В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.
Картинка в качестве маркера списка
Помимо встроенных в браузер значений маркеров списка, CSS даёт возможность устанавливать пользовательские маркеры в виде картинок. Это позволяет сделать уникальную стилизацию списков для проекта, как для всего, так и для отдельных списков.
Чтобы установить маркер в виде своего изображения используется свойство list-style-image
, значением которого является ссылка на изображение. Оно указывается внутри url()
, например:
.list-image {
list-style-image: url('./good.png');
}
Важно: вы не можете контролировать размеры такого маркера. Это значит, что изображение нужно подстраивать по размерам заранее. Для стилизации списков с возможностью изменения размеров маркера используются псевдоэлементы, которые будут изучены в следующих уроках.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
- задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
- расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
- изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
Нумерованные списки. Стили для нумерации CSS Как сделать нумерованный список в css
В следующем примере рассмотрены различные стили оформления маркированных списков:
В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:
Пример: Графические маркеры
- Попробуй сам »
Знаки зодиака
- Телец
- Близнeцы
Знаки зодиака
- Овен
- Телец
- Близнeцы
Списки определений (описаний)
Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент
- (от англ. Definition List – список определений). Он включает в себя теги (от англ. Definition Term – определяемое слово, термин) и (от англ. Definition Description – описание определяемого термина).
- Первый термин
- Описание первого термина
- Второй термин
- Описание второго термина
- Попробуй сам »
- Всемирная паутина
- — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.
- Интернет
- — совокупность сетей, применяющих единый протокол обмена для передачи информации.
- Сайт
- — набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.
- Бадминтон
- Бейсбол
- Джомолунгма
- Чогори
- Канченджанга
- Summit Plummet
- Tantrum Alley
- Insano
- Филиппинское море
- Аравийское море
- Коралловое море
- Красный
- Зеленый
- Синий
- , который содержит в себе всё отображаемое содержимое списка):
Маркированный список:
- Кофе
- Чай
- Молоко
Виды маркеров
Виды маркеров нумерованного списка можно изменить с помощью атрибута type . Данный атрибут поддерживает пять видов маркеров:
Маркированные списки не имеют атрибута type , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type , с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square .
Изменение маркеров у списков:
Заголовок страницыНумерованный список c атрибутом type=»a»:
- Яблоки
- Бананы
- Лимоны
Нумерованный список c атрибутом type=»I»:
- Яблоки
- Бананы
- Лимоны
Виды маркеров маркированных списков:
- Яблоки
- Бананы
- Лимоны
- Яблоки
- Бананы
- Лимоны
CSS свойство list-style-type , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть .
Горизонтальный список
Если вы используете HTML список для создания горизонтального меню, то вам нужно будет расположить элементы списка друг за другом на одной строке. Средствами HTML это сделать не получится, поэтому нужно будет воспользоваться CSS.
Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block , в зависимости от того, какие ещё свойства вы собираетесь использовать.
Заголовок страницыНумерованный список
- Яблоки
- Бананы
- Лимоны
Маркированный список:
- Яблоки
- Бананы
- Лимоны
После этого все пункты списка выстроятся в одну строку. Обратите внимание, что у пунктов списка пропадут маркеры и между ними не будет даже пробела, но отступ слева у списка останется.
Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть .
Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера
, иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка. - Чебурашка
- Крокодил Гена
- Шапокляк
- Крыса Лариса
- Первый
- Второй
- Третий
- Первый
- Второй
- Третий
- Первый
- Второй
- Третий
- изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение — иудаизм и мусульманство вместе;
- изменение веры в непогрешимость любимой партии;
- убеждение в том, что инопланетяне существуют;
- предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.
Общая структура списка описаний имеет следующий вид:
В следующем примере показано одно из возможных использований списка определений:
Пример: Список определений
Всемирная паутина — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету. Интернет — совокупность сетей, применяющих единый протокол обмена для передачи информации. Сайт — набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.
По-умолчанию, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.
Доброго времени суток!
В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать.
Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:
Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер.
В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка.
1. Маркированные списки в HTML
Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:
А вот так выглядит в браузере:
Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере1.1 Стандартные маркеры для маркированного списка
На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:
1.2 Маркер списка в виде пустого круга
Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:
html > head > title > Пример маркированного списка с маркером в виде пустого круга/ title > / head > body > p > Звезды:/ p > ul type = «circle» > li > Сириус/ li > li > Арктур/ li > li > Поллукс/ li > li > Бетельгейзе/ li > li > Солнце/ li > / ul > / body > / html > |
Сразу смотрим как этот код будет выглядеть в браузере:
Рис. 1.2. Вид маркера для списка в виде окружности в браузере1.3 Маркер списка в виде квадрата
Посмотрим также и последний пример с квадратным маркером для HTML списка:
Обратите внимание на маркер, он стал квадратным:
Рис. 1.3. Вид маркера для списка в виде квадрата в браузереВажное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.
Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 («»), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .
Ошибка будет следующая:
Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у спискаС маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах.
2. Нумерованные списки в HTML
В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике:
Пример нумерованного списка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | html > head > title > Пример стандартного нумерованного списка/ title > / head > body > p > От одного до пяти:/ p > ol > li > Первый/ li > li > Второй/ li > li > Третий/ li > li > Четвертый/ li > li > Пятый/ li > / ol > / body > / html > |
Таким образом выглядит нумерованный список со стандартными настройками в браузере:
Рис. 2.1. Нумерованный список в браузере со стандартными настройкамиКак и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.
2.1 Стандартные маркеры для нумерованного списка
Здесь у нас есть выбор не из трех видов маркеров, а из пяти:
Название маркера | Значение атрибута «type» | Пример списка |
---|---|---|
Маркеры в виде арабских чисел | 1 | |
Маркеры в виде строчных латинских букв | a | |
Маркеры в виде заглавных латинских букв | A | |
Маркеры в виде римских цифр в нижнем регистре | i | |
Маркеры в виде римских цифр в верхнем регистре | I |
2.2 Своя нумерация в списке HTML
Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start» . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | html > head > title > Произвольная нумерация для нумерованного списка/ title > / head > body > p > Начинаем нумерацию с двенадцати:/ p > ol type = «a» start = «12» > li > Двенадцать/ li > li > Тринадцать/ li > li > Четырнадцать/ li > li > Пятнадцать/ li > li > Шестнадцать/ li > / ol > / body > / html > |
Вот как это будет отображаться на реальном сайте:
Рис. 2.2. Нумерация с произвольного числа в нумерованном спискеНа изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах.
Ну а сейчас перейдем к вложенным спискам HTML.
3. Как сделать многоуровневый (вложенный) список в HTML
Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.
На примере моделей автомобилей мы построим многоуровневый список в HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | html > head > title > Вложенный маркированный список HTML/ title > / head > body > ul > li > Citroen ul > li > Berlingo/ li > li > C1/ li > li > C2/ li > li > C3 Picasso/ li > li > C4 Grand Picasso/ li > / ul > / li > li > KIA/ li > li > Toyota/ li > li > Audi/ li > li > Lexus/ li > / ul > / body > / html > |
Обратите внимание, как выглядит многоуровневый список в браузере:
Рис. 3.1. Пример многоуровневого списка в HTMLМы делали многоуровневый список с помощью маркированного (тег
- ). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать ).
Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | html > head > title > Нумерованные, маркированные и многоуровневые списки в HTML/ title > / head > body > ul > li > Первая группа тюльпанов ol > li > Первый класс ul > li > Простые ранние тюльпаны/ li > / ul > / li > li > Второй класс ul > li > Махровые тюльпаны/ li > / ul > / li > / ol > / li > / ul > / body > / html > |
В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.
Смотрим его вид в браузере:
Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере4. Полезные материалы по спискам HTML
Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).
4.1 Как сделать список HTML в строку
Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:
4.2 Как сделать список HTML без значка
За это отвечает свойство list-style-type в CSS (подробнее ):
4.3 Как сделать список в HTML по центру
Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало:
4.4 Как сделать список в HTML с картинками
Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:
4.5 Маркированный список HTML свой маркер
В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome). Тогда можно сделать любую иконку вместо стандартного маркера:
4.6 Как сделать список в HTML в несколько столбцов
Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:
5. Комбинированный список HTML
Чтобы сделать комбинированный список в HTML лучше всего использовать иконочные шрифты. Например, Flaticon или Fontawesome .
Эта информация уже для продвинутых, поэтому для начала необходимо будет .
6. Практика работы со списками
На видео ниже вы можете увидеть всю работу со списками HTML на практике:
Чтобы закрепить полученную информацию, я рекомендую все действия проделать вручную. Попробовать разные маркеры для списков, создать нумерованные списки, а после перейти к многоуровневым (вложенным) спискам и поэкспериментировать с ними.
На этом со списками заканчиваем и переходите к следующему уроку по изображениям.
Если вам нужно больше, чем просто основы сайтостроения, а хотите освоить профессию Front-end разработчика, то обратите внимание на курс от онлайн-школу Нетология — « » и онлайн-школу Skillbox и курс « «.
Курс длится долго, но знания вы получите структурированные, с которыми можно сразу устроится на работу, если вам интересно это направление.
Каким тегом задается нумерованный список. Оформление при помощи CSS нумерованного списка
, в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.Маркированный список
Маркированный список — это ненумерованные, то есть неупорядоченные списки элементов, последовательность которых не имеет никакого значения. Все пункты маркированного списка имеют одинаковые маркеры, по умолчанию они отображаются в виде маленьких чёрных кругов.
Для создания маркированных списков в HTML применяется тег
- , внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками используется тег
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Маркированный списокРезультат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега
- . Допустимые значения приведены в табл. 11.1 Табл. 11.1. Стили маркеров списка
Тип списка | Код HTML | Пример |
---|---|---|
Список с маркерами в виде круга | ||
Список с маркерами в виде окружности | ||
Список с квадратными маркерами |
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Пример 11.2. Вид маркеров
Маркированный списокИзменение убеждений
Результат данного примера показан на рис. 11.2.
Нумерованные списки иногда называют упорядоченными. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от броузера и может задаваться атрибутами тегов списка. В остальном реализация нумерованного списка во многом похожа на реализацию маркированного списка.
Для создания нумерованного списка следует использовать тег-контейнер OL > OL >, внутри которого располагаются все элементы списка.
Каждый элемент списка должен начинаться тегом LI > и заканчиваться тегом LI >.
Спецификация элемента OL:
TYPE=»вид нумерации»
START=»начальная позиция»>
Атрибут TYPE задает вид нумерации, которой выделяются элементы списка. Он может иметь следующие значения:
A – маркеры в виде прописных латинских букв;
a – маркеры в виде строчных латинских букв;
I- маркеры в виде больших римских цифр;
i- маркеры в виде маленьких римских цифр;
1- маркеры в виде арабских цифр, это значение используется по
умолчанию.
Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации.
Спецификация элемента LI для нумерованного списка:
TYPE=»вид нумерации»
VALUE=»номер элемента»>
Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1.
Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов.
Пример использования нумерованного списка:
Пример спискаГорода России по величине:
Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списков. В отличие от других типов списков каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка указывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина.
Списки определений задаются с помощью тега-контейнера DL >. Внутри него тегом DT > отмечается определяемый термин, а тегом DD > – абзац с его определением. Внутри элемента
Списки — важная составляющая контента, так как они помогают упорядочить информацию. Текст в списках лучше воспринимается и проще запоминается.
Самый простой — перед каждым его элементом стоит маркер — кружок, квадрат или окружность. Последовательность элементов в маркированном списке не важна.
Чтобы его создать, нужно использовать всего два тега: и
Списки стилей CSS
заказанных списков:
- Кофе
- Чай
- Кока-Кола
- Кофе
- Чай
- Кока-Кола
Списки HTML и свойства списков CSS
В HTML есть два основных типа списков:
- неупорядоченные списки (
- ) — элементы списка отмечены маркерами
- упорядоченных списков (
- ) — элементы списка отмечены цифрами или буквами
Свойства списка CSS позволяют:
- Установка различных маркеров элементов списка для упорядоченных списков
- Установить разные маркеры элементов списка для неупорядоченных списков
- Установить изображение в качестве маркера элемента списка
- Добавление цвета фона в списки и элементы списков
Маркеры различных пунктов списка
Свойство
list-style-type
определяет тип элемента списка. маркер.В следующем примере показаны некоторые из доступных маркеров элементов списка:
Пример
ul.a {
список-стиль-тип: круг;
}ul.b {
list-style-type: квадрат;
}ol.c {
list-style-type: верхний римский алфавит;
}ol.d {
Попробуй сам »
list-style-type: lower-alpha;
}Примечание. Некоторые значения предназначены для неупорядоченных списков, а некоторые — для упорядоченных списков.
Изображение как маркер элемента списка
Свойство
list-style-image
определяет изображение как список маркер товара:Поместите маркеры пунктов списка
Свойство
list-style-position
определяет положение маркеров элемента списка. (отверстия от пуль).«позиция в стиле списка: снаружи;» означает, что маркеры будут снаружи элемент списка. Начало каждой строки элемента списка будет выровнено по вертикали. По умолчанию:
- Кофе — Сваренный напиток из обжаренных кофейных зерен …
- Чай
- Кока-кола
«позиция в стиле списка: внутри;» означает, что маркеры будут внутри элемент списка. Поскольку он является частью элемента списка, он будет частью текста и нажмите текст в начале:
- Кофе — Сваренный напиток, приготовленный из жареных кофейных зерен…
- Чай
- Кока-кола
Пример
ul.a {
список-стиль-позиция: снаружи;
}ul.b {
Попробуй сам »
list-style-position: внутри;
}Удалить настройки по умолчанию
Свойство
list-style-type: none
также может быть используется для удаления маркеров / пуль. Обратите внимание, что в списке также есть поле по умолчанию. и обивка. Чтобы удалить это, добавьтеmargin: 0
иpadding: 0
к- или
-
list-style-type
(если указано изображение-list-style, значение этого свойства будет отображаться, если изображение по каким-то причинам невозможно отобразить) -
list-style-position
(указывает, должны ли маркеры элементов списка появляться внутри или вне потока контента) -
list-style-image
(указывает изображение как элемент списка маркер) - , повлияют на отдельные элементы списка:
Пример
ол {
фон: # ff9999;
отступ: 20 пикселей;
}ul {
фон: # 3399ff;
отступ: 20 пикселей;
}ol li {
фон: # ffe5e5;
отступ: 5 пикселей;
маржа слева: 35 пикселей;
}ul li {
фон: # cce5ff;
маржа: 5 пикселей;
}Результат:
Попробуй сам »Другие примеры
Настраиваемый список с красной левой границей
В этом примере показано, как создать список с красной левой границей.Список с рамкой во всю ширину
В этом примере показано, как создать список с рамкой без маркеров.Все разные маркеры элементов списка для списков
В этом примере демонстрируются все различные маркеры элементов списка в CSS.Проверьте себя упражнениями!
Все свойства списка CSS
Списки стилей — Изучите веб-разработку
Списки по большей части ведут себя как любой другой текст, но есть некоторые свойства CSS, специфичные для списков, о которых вам нужно знать, и некоторые передовые методы, которые следует учитывать.Эта статья все объясняет.
Для начала рассмотрим простой пример списка. В этой статье мы рассмотрим неупорядоченные, упорядоченные и описательные списки — все они имеют схожие стили, а некоторые характерны для их типа списка. Пример без стиля доступен на Github (также посмотрите исходный код).
HTML-код нашего примера со списком выглядит так:
Список покупок (неупорядоченный)
Абзац для справки, абзац для справки, абзац для справки, параграф для справки, параграф для справки, параграф для справки.
- Хумус
- Пита
- Зеленый салат
- Халлуми
Список рецептов (упорядоченный)
Абзац для справки, абзац для справки, абзац для справки, параграф для справки, параграф для справки, параграф для справки.
- Поджарить лаваш, дать остыть, затем нарезать края.
- Обжарьте халуми на неглубокой сковороде с антипригарным покрытием до коричневого цвета с обеих сторон.
- Вымойте и нарежьте салат.
- Наполните лаваш салатом, хумусом и жареным халуми.
Список описаний ингредиентов
Абзац для справки, абзац для справки, абзац для справки, параграф для справки, параграф для справки, параграф для справки.
- Хумус
- Густой соус / соус, который обычно готовят из нута, смешанного с тахини, лимонным соком, солью, чесноком и другими ингредиентами.
- Пита
- Мягкие лепешки с легкой закваской.
- Халлуми
- Полутвердый, незрелый, рассоленный сыр с более высокой, чем обычно, температурой плавления, обычно изготавливаемый из козьего / овечьего молока.
- Зеленый салат
- Эта полезная зелень, которую многие из нас просто используют для украшения шашлыка.
Если вы сейчас перейдете к живому примеру и исследуете элементы списка с помощью инструментов разработчика браузера, вы заметите несколько значений стиля по умолчанию:
- Элементы
- Элементы списка (
- Элемент
16px
(1em
), но без заполнения. - Элементы
левое поле
40px
(2.5em
.) - Элементы
16px
(1em
), как и у разных типов списков.
16px
(1em
) иpadding-left
40px
(2.5em
.)При стилизации списков вам необходимо настроить их стили таким образом, чтобы они сохраняли тот же вертикальный интервал, что и окружающие их элементы (например, абзацы и изображения, иногда называемый вертикальным ритмом), и тот же горизонтальный интервал, что и друг друга (вы можете видеть законченные стилизованный пример на Github, а также найдите исходный код.)
CSS, используемый для стилизации текста и интервалов, выглядит следующим образом:
html { семейство шрифтов: Helvetica, Arial, sans-serif; размер шрифта: 10 пикселей; } h3 { размер шрифта: 2rem; } ul, ol, dl, p { размер шрифта: 1.5рем; } li, p { высота строки: 1,5; } dd, dt { высота строки: 1,5; } dt { font-weight: жирный; }
- Первое правило устанавливает шрифт по всему сайту и базовый размер шрифта 10 пикселей. Они наследуются всем на странице.
- Правила 2 и 3 устанавливают относительные размеры шрифта для заголовков, различных типов списков (их наследуют потомки элементов списка) и абзацев. Это означает, что каждый абзац и список будут иметь одинаковый размер шрифта и интервалы между верхними и нижними интервалами, что поможет сохранить согласованный вертикальный ритм.
- Правило 4 устанавливает одинаковую высоту строки
и
для абзацев и элементов списка — поэтому абзацы и каждый отдельный элемент списка будут иметь одинаковый интервал между строками. Это также поможет сохранить постоянный вертикальный ритм. - К списку описаний применяются правила 5 и 6 — мы устанавливаем ту же высоту строки
Теперь мы рассмотрели общие методы расстановки интервалов для списков, давайте рассмотрим некоторые специфические свойства списков. Есть три свойства, о которых вам следует знать для начала, которые могут быть установлены для элементов
-
list-style-type
: Устанавливает тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка или числа, буквы или римские цифры для упорядоченного списка. -
list-style-position
: устанавливает, будут ли маркеры отображаться внутри элементов списка или вне их перед началом каждого элемента. -
list-style-image
: позволяет использовать пользовательское изображение для маркера, а не простой квадрат или круг. - Установите
padding-left
для- Установите
list-style-type
наnone
, чтобы маркеры не отображались по умолчанию. Вместо этого мы собираемся использоватьфоновых свойств
для обработки пуль. - Вставил маркер в каждый элемент неупорядоченного списка. Соответствующие свойства следующие:
-
background-image
: здесь указывается путь к файлу изображения, которое вы хотите использовать в качестве маркера. -
background-position
: определяет, где на заднем плане выбранного элемента будет отображаться изображение — в этом случае мы говорим0 0
, что означает, что маркер появится в самом верхнем левом углу каждого элемента списка. -
background-size
: Устанавливает размер фонового изображения. В идеале мы хотим, чтобы маркеры были того же размера, что и элементы списка (или немного меньше или больше). Мы используем размер1.6rem
(16px
), который очень хорошо сочетается с отступом20px
, который мы допустили, чтобы пуля располагалась внутри — 16 пикселей плюс 4 пикселя между маркером и текстом элемента списка. работает хорошо. -
background-repeat
: по умолчанию фоновые изображения повторяются до тех пор, пока не заполнят доступное пространство фона. Мы хотим, чтобы в каждом случае вставлялась только одна копия изображения, поэтому мы устанавливаем для нее значениебез повтора
.
-
40px
до20px
, затем установите такое же количество в элементах списка. Это сделано для того, чтобы в целом элементы списка по-прежнему выстраиваются в линию с элементами списка порядка и описаниями списка описаний, но элементы списка имеют некоторые отступы для фоновых изображений, которые помещаются внутри.Если бы мы этого не сделали, фоновые изображения перекрывали бы текст элемента списка, что выглядело бы неаккуратно.Это дает нам следующий результат:
сокращенное обозначение стиля списка
Все три упомянутых выше свойства могут быть установлены с помощью одного сокращенного свойства
стиля списка
. Например, следующий CSS:ul { тип-стиль-список: квадрат; list-style-image: url (пример.png); позиция в стиле списка: внутри; }
Можно заменить на это:
ul { стиль списка: квадратный URL (example.png) внутри; }
Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два или все три (значения по умолчанию, используемые для свойств, которые не включены,
диск
,нет
ивне
). Если указаны и типИногда вам может потребоваться другой подсчет в упорядоченном списке — например, начиная с числа, отличного от 1, или считая в обратном направлении, или считая с шагом более 1. В HTML и CSS есть некоторые инструменты, которые могут вам помочь.
start
Атрибут
start
позволяет начать подсчет списка с числа, отличного от 1. Следующий пример:- Поджарить лаваш, дать остыть, затем нарезать края.
- Обжарьте халуми на неглубокой сковороде с антипригарным покрытием до коричневого цвета с обеих сторон.
- Вымойте и нарежьте салат.
- Наполните лаваш салатом, хумусом и жареным халуми.
Выдает следующий результат:
перевернутый
Атрибут
перевернутый
запустит обратный отсчет списка, а не вверх. Следующий пример:- Поджарить лаваш, дать остыть, затем нарезать края.
- Обжарьте халуми на неглубокой сковороде с антипригарным покрытием до коричневого цвета с обеих сторон.
- Вымойте и нарежьте салат.
- Наполните лаваш салатом, хумусом и жареным халуми.
Выдает следующий результат:
Примечание : Если в обратном списке больше элементов, чем значение атрибута
start
, счет будет продолжаться до нуля, а затем до отрицательных значений.value
Атрибут
value
позволяет вам устанавливать элементы списка на определенные числовые значения.Следующий пример:- Поджарить лаваш, дать остыть, затем нарезать края.
- Обжарьте халлуми на неглубокой сковороде с антипригарным покрытием до коричневого цвета с обеих сторон.
- Вымойте и нарежьте салат.
- Наполните лаваш салатом, хумусом и жареным халуми.
Выдает следующий результат:
Примечание : Даже если вы используете не числовой
тип списка
, вам все равно нужно использовать эквивалентные числовые значения в атрибутеvalue
.В этом активном сеансе обучения мы хотим, чтобы вы взяли то, что вы узнали выше, и попробовали стилизовать вложенный список. Мы предоставили вам HTML-код и хотим, чтобы вы указали:
- Дайте неупорядоченному списку квадратные маркеры.
- Присвойте элементам неупорядоченного списка и элементам упорядоченного списка высоту строки 1,5 от их размера шрифта.
- Дайте упорядоченному списку маркеры в нижнем алфавите.
- Не стесняйтесь играть с примером списка сколько угодно, экспериментируя с типами маркеров, интервалом или чем-то еще, что вы можете найти.
Если вы ошиблись, вы всегда можете сбросить его с помощью кнопки Reset . Если вы действительно застряли, нажмите кнопку Показать решение , чтобы увидеть потенциальный ответ.
СчетчикиCSS предоставляют расширенные инструменты для настройки подсчета и стилизации списков, но они довольно сложны. Мы рекомендуем изучить их, если хотите растянуться. См .:
Вы дошли до конца этой статьи и уже прошли некоторые проверки навыков в наших разделах «Активное обучение», но можете ли вы вспомнить наиболее важную информацию на будущее? Вы можете найти экзамен, чтобы убедиться, что вы сохранили эту информацию, в конце модуля — см. Ввод домашней страницы общеобразовательной школы.
Этот экзамен проверяет все знания, обсуждаемые в этом модуле, поэтому вы можете прочитать другие статьи, прежде чем переходить к нему.
Списки относительно легко освоить, если вы знаете несколько связанных основных принципов и конкретных свойств. В следующей статье мы перейдем к методам стилизации ссылок.
list-style — CSS: каскадные таблицы стилей
Сокращенное свойство стиля списка
Примечание: Это свойство применяется к элементам списка, т. Е. Элементам с отображением
- Установите
- Элемент списка1
- Элемент списка2
- Элемент списка3
- Элемент списка A
- Элемент списка B
- Элемент списка C
- В стандартном редакторе сообщений / страниц введите содержимое списка (по одной записи в строке).
- Выделите записи и нажмите соответствующую кнопку, чтобы отформатировать их в виде списка.
-
- для упорядоченного списка
-
- для неупорядоченного списка
- для каждого элемента списка, упорядоченного или неупорядоченного
По умолчанию большинство списков WordPress идентифицируются по идентификатору или классу.Отредактируйте файл WordPress style.css (доступен через «Внешний вид »> «Редактор»> «Таблица стилей») , чтобы изменить стиль вашего списка. Общие варианты включают изменение межстрочного интервала, переключение маркера или создание дополнительного пространства между списками и окружающими абзацами. Вы также можете отображать список по горизонтали, а не по вертикали, или в других расширенных форматах.
Создание вложенного списка
Популярным форматом списков, особенно для боковых панелей, являются вложенные списки.Например, у вас может быть список с маркерами, в которых каждая запись имеет несколько подпунктов. Для ясности лучше всего расположить подпункты справа от родительской записи.
Если вы работаете с вложенными списками и хотите иметь индивидуальный стиль для каждого списка, вам необходимо воссоздать «гнездо» в таблице стилей.
Форматирование CSS будет иметь следующую структуру:
#mylist ul {attributes} #mylist li {атрибуты} #mylist ul li {атрибуты} #mylist ul ul li {атрибуты} #mylist ul ul ul li {атрибуты} #pagenav {атрибуты} #pagenav ul {атрибуты} #pagenav ul li {атрибуты}
Давайте посмотрим на отдельные правила:
#mylist ul
Это правило настраивает внешний вид всего списка.Он содержит поля и стили заполнения и может содержать семейство шрифтов, цвет и другие детали списка.
#mylist li
Это правило назначает стиль фактическому элементу списка. Вы можете использовать его, чтобы установить формат для включения маркера или нет. Другие атрибуты, которые вы можете настроить, — это шрифт, размер шрифта, цвет и многое другое.
#mylist ul li
Это правило определяет стиль первого вложенного списка. Здесь можно настроить каждый вложенный список первого уровня, но вы можете стилизовать подсписки по-разному, если они содержатся в пределах определенного идентификатора.
#mylist ul ul li
Это правило стилизует ссылки в #sidebar ul ul, настраивая внешний вид списка.
#mylist ul ul ul li
Это правило стилизует вложенный «подсписок», например:
- Категория Название
- Первая категория
- Вторая категория
- Первая подкатегория
- Вторая подкатегория
- Третья категория
Список вариантов стиля
Стиль маркера или нумерации для списка определяется свойством list-style-type в таблице стилей.Значение по умолчанию — , диск . Другие значения, которые вы можете использовать:
- Круг
- Квадрат
- Десятичное
- десятичный-ведущий-ноль
- римская нижняя
- римский верхний
- нет
Чтобы изменить стиль маркера, добавьте в таблицу стилей CSS следующий код:
#mylist li { стиль списка: квадрат; }
Вместо кружков в маркерах списка теперь будут использоваться квадраты.
Другие доступные настройки включают полное удаление маркеров (list-style: none;) или даже использование изображения для маркеров ( list-style-image: url (/ wp-images / myimage.jpg).
Загляните в Кодекс WordPress, чтобы узнать больше о стилях списков с помощью CSS. Если вам нужна помощь с вашей учетной записью HostPapa, пожалуйста, откройте заявку в службу поддержки на своей панели управления.
полностью настраиваемых стилей списков | Современные решения CSS
Это выпуск №5 из серии, посвященной современным решениям CSS для проблем, которые я решал за последние 14 с лишним лет работы в качестве фронтенд-разработчика .
Из этого туториала Вы узнаете, как использовать макет сетки CSS для упрощения пользовательского стиля списка в дополнение к:
- Атрибуты данных как содержимое псевдоэлементов
- CSS-счетчики для стилизации упорядоченных списков
- Пользовательские переменные CSS для стилизации элементов списка
- Адаптивные многоколоночные списки
Обновление : псевдоселектор
:: marker
теперь хорошо поддерживается в современных браузерах.Хотя это руководство содержит полезные советы по CSS для перечисленных выше элементов, вы можете перейти к решению:: marker
Список HTML #
Сначала мы настроим наш HTML с одним
ul
и однимli
. Я добавил более длинный пункт, чтобы помочь в проверке выравнивания, интервала и высоты строки.- Элемент неупорядоченного списка
- Пирожное мороженое сладкое кунжутное печенье с драже кекс вафельное печенье
- Элемент неупорядоченного списка
- Заказанный элемент списка
- Пирожное мороженое, сладкое кунжутное печенье, драже, кекс, вафельное печенье
- Заказанный элемент списка
Обратите внимание на использование
role = "list"
.Поначалу это может показаться лишним, но мы собираемся удалить неотъемлемый стиль списка с помощью CSS. Хотя CSS не часто влияет на семантическое значение элементов,list-style: none
может удалить семантику списка для некоторых программ чтения с экрана. Самое простое решение — определить атрибутrole
, чтобы восстановить эту семантику. Вы можете узнать больше из этой статьи от Скотта О’Хара.Базовый список CSS #
Сначала мы добавляем сброс стилей списка в дополнение к определению их как сетки с пробелом.
ol,
ul {
margin: 0;
отступ: 0;
стиль списка: нет;
дисплей: сетка;
сетка-зазор: 1бэр;
}Преимущество
grid-gap
заключается в добавлении пространства междуli и
вместо более старого метода, такого какli + li {margin-top: ...}
.Далее подготовим элементы списка:
li {
дисплей: сетка;
сетка-шаблон-столбцы: 0 1fr;
сетка-зазор: 1,75 эм;
align-items: start;
размер шрифта: 1.5рем;
высота строки: 1,25;
}Мы также настроили элементы списка для использования сетки. И мы обновили старую «хитрость» использования
padding-left
, чтобы оставить место для псевдоэлемента с абсолютным позиционированием с комбинацией первого столбца шириной0
иgrid-gap
. Мы скоро увидим, как это работает. Затем мы используемalign-items: запускаем
вместо значения по умолчаниюstretch
и применяем стили некоторых типов.UL: атрибуты данных для маркеров эмодзи №
Возможно, это не совсем масштабируемое решение, но для развлечения мы собираемся добавить настраиваемый атрибут данных, который будет определять эмодзи, который будет использоваться в качестве маркера для каждого элемента списка.
Во-первых, давайте обновим
ul
HTML:- Элемент неупорядоченного списка
- Торт-мороженое, сладкое, кунжутное печенье, драже, кекс, вафельное печенье < / li>
- Элемент неупорядоченного списка
А чтобы применить смайлики как маркеры, мы используем довольно волшебную технику, в которой атрибуты данных могут использоваться в качестве значения свойства
content
для псевдоэлементов:ul li :: before {
content: attr (data-icon);
размер шрифта: 1.25em;
}Вот результат с проверкой элемента
:: before
, чтобы проиллюстрировать, как работает сетка:Смайлик по-прежнему может занимать ширину, чтобы быть видимым, но фактически находится в промежутке между сеткой. Вы можете поэкспериментировать с установкой первого столбца сетки
li
наauto
, что приведет к полному применению разрыва сетки между столбцом смайликов и столбцом текста списка.OL: счетчики CSS и пользовательские переменные CSS #
СчетчикиCSS были жизнеспособным решением со времен IE8, но мы собираемся добавить дополнительный эффект использования пользовательских переменных CSS для изменения цвета фона каждого числа.
Сначала мы применим стили счетчиков CSS, назвав наш счетчик
orderlist
:ol {
сброс счетчика: заказанный список;
}ol li :: before {
counter-increment: orderlist;
содержание: счетчик (упорядоченный список);
}Этим достигается следующее, что не сильно отличается от стиля по умолчанию
ol
:Затем мы можем применить базовый стиль к номерам счетчиков:
семейство шрифтов: "Indie Flower";
размер шрифта: 1.25em;
line-height: 0,75;
ширина: 1,5 бэр;
набивка: 0,25 бэр;
выравнивание текста: по центру;
цвет: #fff;
цвет фона: фиолетовый;
border-radius: 0,25em;Сначала мы применяем шрифт Google и увеличиваем размер шрифта
до
. Высота строкиli
(по крайней мере, это то, что сработало для этого шрифта, это может быть немного магическим числом). Он выравнивает число там, где мы хотели бы, по отношению к основному текстовому контентуli
.Хотели бы вы, чтобы советы по CSS в вашем почтовом ящике? Подпишитесь на мою рассылку, чтобы получать обновления статей, советы по CSS и внешние ресурсы!
Затем нам нужно указать явную ширину. В противном случае фон не появится, хотя текст появится.
Добавлен Padding для фиксации выравнивания текста по фону.
Теперь у нас есть это:
Это, безусловно, кажется более индивидуальным, но мы немного расширим его, заменив цвет фона
ol {
--li-bg: пурпурный;
}ol li :: before {
background-color: var (- li-bg);
}Он будет выглядеть так же, пока мы не добавим встроенные стили ко второму и третьему
li
для обновления значения переменной:- Заказанный элемент списка
- Пирожное мороженое сладкое кунжутное печенье драже кекс вафельное печенье
- Заказанный элемент списка
И вот последние
ul
иol
все вместе:Стефани Эклс (@ 5t3ph)
Обновите свои алгоритмы: многостолбцовые списки #
В нашем примере было всего 3 элемента короткого списка, но не забывайте, что мы применили сетку к базовым
ol
иul
.В то время как в предыдущей жизни я делал забавные вещи с модулем в PHP, чтобы разбивать списки и применять дополнительные классы для получения равномерно разделенных многоколоночных списков.
С сеткой CSS теперь вы можете применить его в трех строках с присущей ему отзывчивостью, равными столбцами и длиной строки содержимого:
ol,
ul {
дисплей: сетка;
grid-template-columns: повторение (автозаполнение, minmax (22ch, 1fr));
сетка-зазор: 1бэр;
}Применяя к нашему существующему примеру (не забудьте сначала удалить
max-width
наli
) дает:Вы можете переключить это представление, обновив переменную
$ multicolumn
в Codepen доtrue
.Попался: больше, чем просто текст как
li
content #Если у вас есть более чем простой текст внутри
li
— включая что-то вроде невинногоОбновление до CSS-маркера №
разрешены только несколько свойств.-
анимация- *
-
цвет
-
содержание
-
направление
-
шрифт- *
-
переход- *
-
юникод-биди
-
белое пространство
Стиль неупорядоченного списка с
:: marker
#Поскольку содержимое
data-icon
для разрешения настраиваемых маркеров эмодзи 🎉Нам просто нужно поменять местами с
:: до
на:: маркер
:ul li :: marker {
content: attr (значок данных);
размер шрифта: 1.25em;
}Затем удалите свойства сетки, которые больше не нужны, из
li
и добавьте обратно в некоторые отступыli {
padding-left: 0,5em;
}Наконец, мы ранее удалили поле
:: marker
, чтобы предотвратить его обрезание из-за переполнения:
ol,
ul {
маржа: 0 0 0 2em;
}И визуальные результаты идентичны нашему предыдущему решению, как вы можете видеть в демонстрации.
Стиль упорядоченного списка с
:: marker
#Для нашего списка заказов теперь мы можем переключиться и воспользоваться встроенным счетчиком.
Нам также нужно отбросить наш
background-color
иborder-radius
, поэтому мы поменяем местами на использование нашего настраиваемого свойства для значенияcolor
. И мы изменим имя нашего настраиваемого свойства на--marker-color
для ясности.Итак, наши сокращенные стили выглядят следующим образом:
ol {
- цвет маркера: пурпурный;
}li :: marker {
content: counter (элемент списка); Семейство шрифтов
: "Indie Flower";
размер шрифта: 1.5em;
color: var (- маркер-цвет);
}Не забудьте также обновить имя настраиваемого свойства CSS в HTML!
Остерегайтесь этой ошибки : изменение свойства
display
дляli
приведет к удалению псевдоэлемента:: marker
. Поэтому, если вам нужен другой тип отображения для содержимого списка, вам нужно будет применить его, вложив дополнительный элемент оболочки.:: маркер
Демо #Вот наши обновленные стили пользовательских списков, которые теперь используют
:: marker
.Обязательно проверьте текущую поддержку браузера, чтобы решить, какое решение для стиля настраиваемого списка использовать с учетом вашей уникальной аудитории! Возможно, вы захотите использовать
:: marker
как прогрессивное усовершенствование одного из ранее продемонстрированных решений.Стефани Эклс (@ 5t3ph)
Для получения более подробной информации об использовании
:: marker
ознакомьтесь с этой отличной статьей Адама Аргайла.Как создавать объединенные списки маркеров с помощью CSS, BBC News-style
Когда есть прямые трансляции, BBC News часто создает список в стиле «шкалы времени» для историй.Например:
Я был заинтригован, узнав, как они добились динамического объединения пунктов списка в строку, и отправился с моим верным Chrome DevTools, чтобы выяснить это.
И, мальчик, их наценка — поездка!
Короче говоря, это стандартный список HTML (BBC использует
: до
, который пустой по содержанию, но помечен как имеющий ширину 2 пикселя с красным цветом фона.Это создает «строку» перед каждымКлючевая часть CSS для псевдоэлемента:
li: до { цвет фона: # c00; ширина: 2 пикселя; содержание: ''; позиция: абсолютная; верх: 0px; внизу: 0px; слева: 5 пикселей; }
Вам также необходимо убедиться, что сам элемент списка использует относительное позиционирование
position: absolute
псевдоэлемента основывалась не на странице, а на самом элементе списка:li { / * Вам нужно включить относительное позиционирование, чтобы линия размещалась относительно элемента, а не абсолютно на странице * / положение: относительное; / * Используйте отступы для разнесения элементов, а не полей, так как в противном случае линия будет разорвана * / маржа: 0; нижняя обивка: 1em; отступ слева: 20 пикселей; }
(Также обратите внимание, что если вы хотите, чтобы теперь между вашими позициями были промежутки, вам нужно использовать отступы, иначе строка будет разбита на поля!)
Пункты списка не являются стандартными пунктами списка HTML, а представляют собой просто кружки, нарисованные с использованием встроенного SVG.Теоретически вы можете использовать любую форму (звезды, квадраты, что угодно) или, может быть, даже что-то вроде эмодзи, но я просто скопировал круговой подход, который использует BBC.
Вместо того, чтобы утомлять вас до слез техническим объяснением того, как это работает, я свел его к простейшему примеру кода, который я мог придумать, добавил множество комментариев и поместил его на CodePen, чтобы вы поиграли с ним.
Поиграйте с ним здесь:
ПОЗДНЕЕ ДОБАВЛЕНИЕ:
Saadat в Twitter немного расширил вышеупомянутую концепцию, запекнув SVG для маркеров в CSS с помощью псевдоэлемента
: after
! Это делает код еще чище.Их код находится в этой ручке, но суть в следующем:/ * Маленькие маркеры для обычных пунктов списка * / li :: after { содержание: ''; позиция: абсолютная; background-image: url ("data: image / svg + xml,% 3Csvg xmlns = 'http: //www.w3.org/2000/svg' aria-hidden = 'true' viewBox = '0 0 32 32' с возможностью фокусировки = 'false'% 3E% 3Ccircle stroke = 'none' fill = '% 23c00' cx = '16 'cy = '16' r = '10'% 3E% 3C / circle% 3E% 3C / svg% 3E ") ; фон-повтор: без повторения; размер фона: содержать; слева: 0; верх: 2 пикселя; ширина: 12 пикселей; высота: 12 пикселей; }
Как установить цвета маркеров в списках HTML, используя только CSS?
Учитывая неупорядоченные списки (UL) маркеров, нам нужно изменить цвет маркеров в списке с помощью CSS.
Примечание : Не разрешается использовать какие-либо изображения или теги span.
Прежде всего, в CSS нет прямого способа изменить цвет маркеров в неупорядоченном списке. Однако, чтобы изменить цвет маркеров в неупорядоченном списке с помощью CSS, нам придется сначала отказаться от стиля списка по умолчанию и вручную определить содержимое , которое идет с до для каждого элемента списка в списке.
Этот контент представляет собой Unicode того типа маркера, который вы хотите использовать для своего списка.Символы Юникода для разных стилей маркеров следующие:
- Квадрат :
"\ 25AA"
- Круг :
"\ 2022"
- Диск :
"\ 2022"
Ниже приведен пример кода CSS, который удаляет стиль по умолчанию из неупорядоченного списка в HTML и использует юникоды:
ul {
стиль списка
:
нет
;
}
ul li :: before {
content
:;
цвет
:
зеленый
;
дисплей
: встроенный -
блок
;
ширина
:
1em
;
поле слева
:
-0.9em
;
}
Программы ниже иллюстрируют описанный выше подход к изменению цветов маркеров элементов списка:
Пример 1 :
<
html
>
<
голова
>
<
заголовок
> Изменение цвета маркера
заголовок
>
<
стиль
>
h4 {
цвет: зеленый;
}
ul {
стиль списка: нет;
}
ul li :: before {
/ * \ 2022 - код CSS / юникод для диска * /
содержимое: «\ 2022»;
цвет: зеленый;
дисплей: встроенный блок;
ширина: 1em;
левое поле: -0.9em;
font-weight: жирный;
font-size: 1.1rem;
}
стиль
>
головка
>
<
корпус
>
<
h4
> Компьютерные фильмы
h4
>
<
ul
>
<
li
> Звездные войны
li
>
<
li
> Назад в будущее
li
>
<
li
> Охотники за привидениями
li 900 49
>
<
li
> Принцесса-невеста
li
>
<
li
> Шон из мертвых
li
>
ul
>
корпус
>
html
>
Выход:
Пример 2:
<
html
>
<
голова
25> 900
<
title
> Изменение цвета маркера
title
>
90 024
<
стиль
>
h4 {
цвет: зеленый;
}
ul {
стиль списка: нет;
}
ul li :: before {
/ * \ 25E6 - код CSS / юникод для круга * /
содержимое: «\ 25E6»;
цвет: зеленый;
дисплей: встроенный блок;
ширина: 1em;
левое поле: -0.9em;
font-weight: жирный;
font-size: 1.1rem;
}
стиль
>
головка
>
<
корпус
>
<
h4
> Компьютерные фильмы
h4
>
<
ul
>
<
li
> Звездные войны
li
>
<
li
> Назад в будущее
li
>
<
li
> Охотники за привидениями
li 900 49
>
<
li
> Принцесса-невеста
li
>
<
li
> Шон из мертвых
li
>
ul
>
корпус
>
html
>
Выход:
Пример 3:
<
html
>
<
головка
25> 900
<
title
> Изменение цвета маркера
title
>
90 024
<
стиль
>
h4 {
цвет: зеленый;
}
ul {
стиль списка: нет;
}
ul li :: before {
/ * \ 25AA - код CSS / юникод для квадрата * /
содержимое: «\ 25AA»;
цвет: зеленый;
дисплей: встроенный блок;
ширина: 1em;
левое поле: -0.9em;
font-weight: жирный;
font-size: 1.1rem;
}
стиль
>
головка
>
<
корпус
>
<
h4
> Компьютерные фильмы
h4
>
<
ul
>
<
li
> Звездные войны
li
>
<
li
> Назад в будущее
li
>
<
li
> Охотники за привидениями
li 900 49
>
<
li
> Принцесса-невеста
li
>
<
li
> Шон из мертвых
li
>
ul
>
корпус
>
html
>
Вывод:
Вниманию читателя! Не прекращайте учиться сейчас.
- Квадрат :
-
Это свойство является сокращением для следующих свойств CSS:
стиль списка: квадрат; стиль списка: url ('../img/shape.png '); стиль списка: внутри; стиль списка: грузинский внутри; стиль списка: нижний римский URL ('../ img / shape.png') снаружи; стиль списка: нет; стиль списка: наследовать; стиль списка: начальный; стиль списка: вернуться; стиль списка: не задано;
Свойство в стиле списка задается как одно, два или три ключевых слова в любом порядке. Если заданы
list-style-type
иlist-style-image
, тоlist-style-type
используется в качестве запасного варианта, если изображение недоступно.Значения
В Safari есть проблема, из-за которой неупорядоченные списки со значением
в стиле списка
, равнымnone
, примененным к ним, не будут распознаны как список в дереве специальных возможностей. Чтобы решить эту проблему, добавьте пробел нулевой ширины в качестве псевдоконтента перед каждым элементом списка, чтобы обеспечить правильное распознавание списка. Это гарантирует, что исправление ошибки не повлияет на дизайн и что элементы списка не будут неправильно описаны.ul { стиль списка: нет; } ul li :: before { содержание: "\ 200B"; }
Тип и положение стиля списка настроек
HTML
Список 1
CSS
.один { стиль списка: круг; } .два { стиль списка: квадрат внутри; }
Результат
Таблицы BCD загружаются только в браузере
Как создавать и стилизовать списки с помощью CSS в WordPress
Вы можете создавать упорядоченные (нумерованные) и неупорядоченные (маркированный список) списки в записях и на страницах WordPress. В этой статье мы покажем вам, как создавать и стилизовать списки с помощью CSS.
Как создать список в WordPress
3. Используйте раскрывающиеся меню для отображения простых параметров форматирования маркера.
Списки стилей с CSS
Для более сложных стилей вам необходимо использовать правила CSS для следующих тегов:
Стили маркеров
Как упоминалось выше, свойство
list-style-type
позволяет вам установить, какой тип маркера использовать для маркеров. В нашем примере мы установили упорядоченный список для использования римских цифр в верхнем регистре:ol { тип-стиль-список: верхний римский; }
Это дает нам следующий вид:
Вы можете найти гораздо больше вариантов, просмотрев справочную страницу
list-style-type
.Позиция маркера
Свойство
list-style-position
устанавливает, будут ли маркеры появляться внутри элементов списка или вне их перед началом каждого элемента. Значение по умолчанию —за пределами
, что приводит к тому, что маркеры находятся за пределами элементов списка, как показано выше.Если вы установите значение
внутри
, маркеры будут находиться внутри строк:ol { тип-стиль-список: верхний римский; позиция в стиле списка: внутри; }
Использование пользовательского изображения маркера
Свойство
list-style-image
позволяет использовать пользовательское изображение для маркера.Синтаксис довольно прост:ul { изображение в стиле списка: URL (star.svg); }
Однако это свойство немного ограничено с точки зрения управления положением, размером и т. Д. Пуль. Лучше использовать семейство свойств
background
, о которых вы узнали в статье «Фон и границы». А пока вот дегустатор!В нашем законченном примере мы стилизовали неупорядоченный список следующим образом (поверх того, что вы уже видели выше):
ul { padding-left: 2rem; тип-стиль-список: нет; } ul li { padding-left: 2rem; background-image: url (star.svg); background-position: 0 0; размер фона: 1,6 бэр 1,6 бэр; фон-повтор: без повторения; }
Здесь мы сделали следующее:
- Элементы списка (
- :
Список — Сокращенное свойство
Свойство в стиле списка является сокращенным свойством.Он используется для установки всех перечислить свойства в одном объявлении:
При использовании сокращенного свойства порядок значений свойств следующий:
Если одно из значений свойств выше отсутствует, значение по умолчанию для отсутствующее свойство будет вставлено, если таковое имеется.
Список стилей с цветами
Мы также можем стилизовать списки с помощью цветов, чтобы они выглядели немного красивее. интересный.
Все, что добавлено к тегу
- или
- , влияет на весь список, в то время как
свойства, добавленные в тег
- упорядоченных списков (