Css li: Стилизация списков — Изучение веб-разработки

Содержание

seodon.ru | CSS справочник — list-style-type

Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

Свойство CSS list-style-type используется для указания внешнего вида маркера или типа нумерации в упорядоченных (нумерованных) и неупорядоченных (маркированных) списках.

Вместо list-style-type можно использовать универсальное свойство list-style.

Тип свойства

Назначение: списки.

Применяется: к тегам <OL>, <UL>,<LI> и элементам с display: list-item.

Наследуется: да.

Значения

Значением свойства list-style-type является одно из ключевых слов, задающее внешний вид маркера или тип нумерации.

Значения для маркированного списка
disc	Маркер в виде кружка	Ниф-Ниф Нуф-Нуф Наф-Наф
circle	Маркер в виде окружности	Ниф-Ниф Нуф-Нуф Наф-Наф
square	Маркер в виде квадрата	Ниф-Ниф Нуф-Нуф Наф-Наф

Значения для нумерованного списка
decimal	Нумерация обычными арабскими числами	Ниф-Ниф Нуф-Нуф Наф-Наф
decimal-leading-zero	Нумерация арабскими числами с начальными нулями	Ниф-Ниф Нуф-Нуф Наф-Наф
upper-roman	Римские числа написанные заглавной латиницей	Ниф-Ниф Нуф-Нуф Наф-Наф
lower-roman	Римские числа написанные строчной латиницей	Ниф-Ниф Нуф-Нуф Наф-Наф
upper-latin	Заглавные латинские буквы	Ниф-Ниф Нуф-Нуф Наф-Наф
lower-latin	Строчные латинские буквы	Ниф-Ниф Нуф-Нуф Наф-Наф
upper-alpha	Заглавные латинские буквы (аналогично upper-latin)	Ниф-Ниф Нуф-Нуф Наф-Наф
lower-alpha	Строчные латинские буквы (аналогично lower-latin)	Ниф-Ниф Нуф-Нуф Наф-Наф
armenian	Традиционная армянская нумерация	Ниф-Ниф Нуф-Нуф Наф-Наф
georgian	Традиционная грузинская нумерация	Ниф-Ниф Нуф-Нуф Наф-Наф
lower-greek	Нумерация греческими строчными буквами	Ниф-Ниф Нуф-Нуф Наф-Наф

none — Убирает маркеры или нумерацию у списка.
inherit — наследует значение list-style-type от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: decimal для нумерованных списков, disc для маркированных.

Синтаксис

Пример CSS: использование list-style-type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство list-style-type</title>
  <style type="text/css">
   ol {
    list-style-type: lower-alpha; /* нумерация строчной латиницей */
   }
  </style>
 </head>
 <body>
  <ol>
   <li>Ниф-Ниф</li>
   <li>Нуф-Нуф</li>
   <li>Наф-Наф</li>
  </ol>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS list-style-type.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Да	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и 7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Да	Да	Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit, а также значения: decimal-leading-zero, upper-latin, lower-latin, armenian, georgian и lower-greek.

Списки Tailwind CSS — Flowbite

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

веб-страница.

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

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

Изменить на GitHub Включить полноэкранный режим

Переключить вид планшета

Переключить мобильное представление

Переключить темный режим

Загрузка…

HTML

Скопировать в буфер обмена

Требования к паролю:

Минимум 10 символов (и до 100 символов)
Хотя бы один символ нижнего регистра
Включение хотя бы одного специального символа, например, ! @ # ?

  Требования к паролю: 
<ул>
    
        Минимум 10 символов (и до 100 символов)
    
    
        Хотя бы один символ нижнего регистра
    
    
        Включение хотя бы одного специального символа, например, ! @ # ?

Значки #

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

Изменить на GitHub Включить полноэкранный режим

Переключить вид планшета

Переключить мобильное представление

Переключить темный режим

Загрузка…

HTML

Скопировать в буфер обмена

Требования к паролю:

Не менее 10 символов
Хотя бы один символ нижнего регистра
Хотя бы один специальный символ, например, ! @ # ?

  Требования к паролю: 
<ул>
    
         293a1 1 0 0 1 1,414 1,414Z"/>
         
        Не менее 10 символов
    
    
         
         
        Хотя бы один символ нижнего регистра
    
    
        
        Хотя бы один специальный символ, например, ! @ # ?

Вложенный #

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

Изменить на GitHub Включить полноэкранный режим

Переключить вид планшета

Переключить мобильное представление

Переключить темный режим

Загрузка.

HTML

Скопировать в буфер обмена

Элемент списка один
1. Вам может показаться, что вы действительно «организованы» o
2. Вложенная навигация в пользовательском интерфейсе тоже плохая идея, делайте все как можно более плоским.
3. Вложение множества папок в исходный код также бесполезно.
Второй элемент списка
- Я не уверен, что мы будем стилизовать более двух уровней в глубину.
- Два уже слишком много, три гарантированно будет плохой идеей.
- Если вы гнездитесь на четыре уровня глубже, вам место в тюрьме.
Третий элемент списка
- Опять же, пожалуйста, не вставляйте списки, если хотите
- Никто не хочет на это смотреть.
- Я расстроен, что нам даже приходится возиться со стилем.

 <ул>
    
        Элемент списка один
        <ол>
            
Вам может показаться, что вы действительно "организованы" o
            Вложенная навигация в пользовательском интерфейсе тоже плохая идея, делайте ее как можно более плоской.
            Вложение множества папок в исходный код также бесполезно.
        
    
    
        Второй элемент списка
        <ул> 
            
Я не уверен, что мы будем заморачиваться со стилями более двух уровней глубины.
            Два — это уже слишком, три — это точно плохая идея.
            Если вы вкладываете четыре уровня в глубину, вам место в тюрьме.
        
    
    
        Третий элемент списка
        <ул>
            
Пожалуйста, не встраивайте списки, если хотите.
            Никто не хочет на это смотреть. 
            Я расстроен тем, что нам даже приходится возиться со стилем.

без оформления #

Используйте класс list-none , чтобы отключить маркеры или числа в стиле списка.

Изменить на GitHub Включить полноэкранный режим

Переключить вид планшета

Переключить мобильное представление

Переключить темный режим

Загрузка…

HTML

Скопировать в буфер обмена

Требования к паролю:

Минимум 10 символов (и до 100 символов)
Хотя бы один символ нижнего регистра
Включение хотя бы одного специального символа, например, ! @ # ?

  Требования к паролю: 
<ул>
    
        Минимум 10 символов (и до 100 символов)
    
    
        Хотя бы один символ нижнего регистра
    
    
        Включение хотя бы одного специального символа, например, ! @ # ?

Заказной список #

Используйте тег

HTML

Лучшие студенты:

Бонни Грин с 70 очками
Хесе Леос с 63 очками
Лесли Ливингстон с 57 очками

  Лучшие ученики: 
<ол>
    
        Бонни Грин с 70 баллами
    
    
        Хезе Леос с 63 баллами
    
    
        Лесли Ливингстон с 57 баллами

Вложенный #

Этот пример можно использовать для вложения нескольких списков друг в друга.

HTML

Элемент списка один
- Вам может показаться, что вы действительно «организованы» o
- Вложенная навигация в пользовательском интерфейсе тоже плохая идея, делайте все как можно более плоским.
- Вложение множества папок в исходный код также бесполезно.
Второй элемент списка
- Я не уверен, что мы будем стилизовать более двух уровней в глубину.
- Два уже слишком много, три гарантированно будет плохой идеей.
- Если вы гнездитесь на четыре уровня глубже, вам место в тюрьме.
Третий элемент списка
- Опять же, пожалуйста, не вставляйте списки, если хотите
- Никто не хочет на это смотреть.
- Я расстроен, что нам даже приходится возиться со стилем.

 <ол>
   
      Элемент списка один
      <ул>
         
Вам может показаться, что вы действительно "организованы" o
         Вложенная навигация в пользовательском интерфейсе тоже плохая идея, делайте ее как можно более плоской.
         Вложение множества папок в исходный код также бесполезно.
      
   
   
      Второй элемент списка
      <ул>
         
Я не уверен, что мы будем заморачиваться со стилями более двух уровней глубины.
         Два — это уже слишком, три — это точно плохая идея.
         Если вы вкладываете четыре уровня в глубину, вам место в тюрьме. 
      
   
   
      Третий элемент списка
      <ул>
         
Пожалуйста, не встраивайте списки, если хотите.
         Никто не хочет на это смотреть.
         Я расстроен тем, что нам даже приходится возиться со стилем.

Список описаний #

Создайте список описаний с помощью тега

Адрес электронной почты: вашеимя@flowbite.com

<дел>

Домашний адрес

<дд>92 Miles Drive, Ньюарк, Нью-Джерси 07103, Калифорния, США

Css li: Стилизация списков — Изучение веб-разработки

seodon.ru | CSS справочник — list-style-type

Тип свойства

Значения

Синтаксис

Версии CSS

Браузеры

Списки Tailwind CSS — Flowbite

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

Требования к паролю:

Требования к паролю:

Значки #

Требования к паролю:

Требования к паролю:

Вложенный #

без оформления #

Требования к паролю:

Требования к паролю:

Заказной список #

Лучшие студенты:

Лучшие ученики:

Вложенный #

Список описаний #

Список со значками #

Расширенный макет #

Горизонтальный список #

Получить больше обновлений.

На этой странице

Изучите концепции дизайна

Дизайн Teach Me

[CSS] — Как сделать список в горизонтальном CSS — SheCodes

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Инструкции по коду CSS

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

👩‍💻 Технический вопрос

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

Рубрики

Рубрики