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

HTML и CSS с примерами кода

Тег <ul> (от англ. unordered list — неупорядоченный список) устанавливает маркированный (неупорядоченный) список.

Каждый пункт списка должен начинаться с элемента <li>.

Текстовые блоки
  • blockquote
  • dd
  • div
  • dl
  • dt
  • hr
  • li
  • ol
  • p
  • pre
  • ul

Синтаксис

<ul>
  <li>пункт маркированного списка</li>
</ul>

Закрывающий тег обязателен.

Атрибуты

Для этого элемента доступны универсальные атрибуты.

compact
Не используйте этот атрибут, так как он устарел: вместо этого используйте CSS. Чтобы получить эффект, аналогичный атрибуту compact, можно использовать свойство line-height со значением 80%.
Этот логический атрибут означает, что список должен отображаться в компактном стиле. Интерпретация этого атрибута зависит от пользовательского агента, и он работает не во всех браузерах.
type
Не используйте этот атрибут, так как он устарел; вместо этого используйте свойство CSS list-style-type.
Этот атрибут устанавливает стиль маркера для списка. Значения, определенные в HTML 3.2 и HTML 4.0 / 4.01:
  • circle
  • disc
  • square
  • Четвертый тип маркера был определен в интерфейсе WebTV, но не все браузеры поддерживают его: triangle.

Если этот элемент отсутствует, и если к элементу не применяется свойство CSS list-style-type, пользовательский агент выбирает тип маркера в зависимости от уровня вложенности списка.

Спецификации

  • WHATWG HTML Living Standard
  • HTML 5

Примеры

Пример 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>UL</title>
  </head>
  <body>
    <ul>
      <li>Баал</li>
      <li>Агарес</li>
      <li>Марбас</li>
      <li>Пруфлас</li>
      <li>Аамон</li>
    </ul>
  </body>
</html>

Пример 2

Вложенные списки

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Внимание, закрывающий тег </li> здесь не размещаем -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- Same for the second nested unordered list! -->
        <ul>
          <li>
            second item second subitem first sub-subitem
          </li>
          <li>
            second item second subitem second sub-subitem
          </li>
          <li>
            second item second subitem third sub-subitem
          </li>
        </ul>
      </li>
      <!-- Closing </li> tag for the li that
            contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Здесь размещается закрывающий тег </li> -->
  </li>
  <li>third item</li>
</ul>

Пример 3

Упорядоченный список внутри неупорядоченного списка

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

См.

также
  • <ol>
  • <li>
  • list-style
  • line-height

Ссылки

  • Тег <ul> MDN (рус.)

Смысл верстки через списки ul > li (html / css)?

Интересует несколько вопросов по теме «почему и когда использовать списки»?

  1. Возьмем за основу простое меню, для чего здесь нужны li список, если можно обойтись div > a, получается структура на 1 уровень менее вложенная. Может здесь есть какой-то более глубокий смысл?
<ul>
<li>
<a>Пункт меню</a>
</li>
<li>
<a>Пункт меню</a>
</li>
<li>
<a>Пункт меню</a>
</li>
</ul>
<div>
<a>Пункт меню</a>
<a>Пункт меню</a>
<a>Пункт меню</a>
</div>
  1. Допустим, что списки использовать нужно и для этого нашли разумный довод, тогда следующий вопрос. Например есть шапка из 3х блоков: логотип, блок с контактами 1, блок с контактами 2. Здесь тоже использовать ul.header > li.logo, li.contacts-1, li.contacts-2? Разве не будет разумно использовать div.header (или просто header) > div.logo, div.contacts-1, div.contacts-2?
  • html
  • css

1

для чего здесь нужны li список, если можно обойтись div > a, получается структура на 1 уровень менее вложенная.

Во-первых, поисковые системы поймут, что это не простой текст, и в поисковой выдаче не будет мешанины вроде текст до меню Пункт менюПункт менюПункт меню текст после меню

.

Во-вторых, разметка списком окажет большую услугу пользователям экранных дикторов, так как в этом случае каждый пункт меню словесно отделяется (что очень важно при отсутствии какой-либо пунктуации между вашими <a>).

В-третьих, ваше меню будет адекватно отображаться даже при сбое в загрузке CSS-стилей, либо полном отсутствии их поддержки (текстовые браузеры по типу lynx достаточно популярны до сих пор).

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Тип стиля списка — Tailwind CSS

Основное использование

​Установка типа стиля списка

Для создания маркированных или числовых списков используйте утилиты list-disc и list-decimal .

список-диск

  • Теперь это история о том, как моя жизнь перевернулась с ног на голову
  • И я хотел бы занять минутку, просто посидеть здесь
  • Я расскажу вам, как я стал принцем города под названием Бель-Эйр

список-десятичный

  • Теперь это история о том, как моя жизнь перевернулась с ног на голову
  • И я хотел бы занять минутку, просто посидеть здесь
  • Я расскажу вам, как я стал принцем города Бель-Эйр

список-нет

  • Теперь это история о том, как моя жизнь перевернулась с ног на голову
  • И я хотел бы занять минутку, просто посиди здесь
  • Я расскажу вам, как я стал принцем города Бель-Эйр
 <ул>
  
  • Это история о том, как моя жизнь перевернулась с ног на голову
  • <ол>
  • Это история о том, как моя жизнь перевернулась с ног на голову
  • <ул>
  • Это история о том, как моя жизнь перевернулась с ног на голову

  • ​Условное применение

    ​Наведение, фокус и другие состояния

    Tailwind позволяет вам условно применять служебные классы в различных состояниях с помощью модификаторов вариантов. Например, используйте hover:list-disc , чтобы применять утилиту list-disc только при наведении.

     <ул>
      
    
     

    Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.

    ​Точки останова и медиа-запросы

    Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как отзывчивые точки останова, темный режим, предпочтения с уменьшенным движением и т.

     д. Например, используйте md:list-disc , чтобы применить утилиту list-disc только к экранам среднего размера и выше.

     <ул>
      
    
     

    Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.


    ​Использование пользовательских значений

    ​Настройка темы

    По умолчанию Tailwind предоставляет три утилиты для наиболее распространенных типов стилей списков. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.listStyleType конфигурации Tailwind.

    tailwind.config.js

     module.exports = {
      тема: {
        списокСтильТип: {
          никто: 'нет',
          диск: 'диск',
          десятичный: 'десятичный',
          квадрат: 'квадрат',
          римский: 'верхний римский',
        }
      }
    }
     

    Узнайте больше о настройке темы по умолчанию в документации по настройке темы.

    Произвольные значения

    Если вам нужно использовать одноразовое значение типа списка , которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету, используя любое произвольное значение .

     <ул>
      
    
     

    Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

    Создание кнопок из элементов UL

    С HTML-элементом неупорядоченного списка можно манипулировать с помощью CSS для создания кликабельных кнопок. Повторное использование блочного элемента эффективно, поскольку базовая структура набора кнопок уже заложена в элементе UL, и все, что остается сделать, — изменить его стиль, чтобы он выглядел и вел себя как кнопки.


    Основное обучение CSS

    Если вы хотите узнать больше о CSS и связанных с ним технологиях, вы можете сделать это с помощью бесплатной пробной версии на LinkedInLearning.com.


    Для начала нам нужен список кнопок, которые мы хотим стилизовать. HTML очень прост:

      

    При просмотре в браузере он будет выглядеть следующим образом:

    • ГЛАВНАЯ
    • О НАС
    • ПРИСОЕДИНЯЙТЕСЬ
    • LOGIN

    Обратите внимание, что элементу UL присвоен идентификатор кнопок . Это используется CSS для идентификации неупорядоченного списка.

    Теперь о CSS. Мы стилизуем только два элемента списка.

    • Каждый элемент списка, чтобы он выглядел как кнопка
    • Ссылка и действие при наведении, чтобы они имели приятное поведение при наведении

    Чтобы создать вид кнопки, нам сначала нужно поднять каждый элемент списка, чтобы он горизонтально, а не вертикально. Мы делаем это, объявляя, что элементы поплавок на слева .

     поплавок: левый; 

    Теперь, когда элементы списка выровнены по горизонтали, нам нужно стилизовать их, чтобы они выглядели как кнопки, поэтому мы удаляем стиль списка.

     стиль списка: нет; 

    Мы выравниваем текст по центру, размер кнопки определяем width и line-height и создаем пространство между каждой кнопкой, определяя margin . Я также присвоил кнопкам фоновый цвет черного цвета.

     #кнопки ли {
    плыть налево;
    стиль списка: нет;
    выравнивание текста: по центру;
    цвет фона: #000000;
    поле справа: 30px;
    ширина: 150 пикселей;
    высота строки: 60 пикселей;
    } 

    Теперь стилизуем ссылку. Убираем строчку, которая появляется под ссылкой.

     украшение текста: нет; 

    Мы делаем это как для ссылки, так и для действия при наведении. Кроме того, мы хотим, чтобы элемент ссылки вел себя как блочный элемент. Это позволит нам придать фону элемента цвет при наведении на него курсора. Устанавливаем дисплей свойство по блок .

    Теперь у нас есть следующий код CSS.

     #кнопки ли {
      текстовое оформление: нет;
      цвет: #FFFFFF;
      дисплей: блок;
    }
    #кнопки li a:hover {
      текстовое оформление: нет;
      цвет: #000000;
      цвет фона: #33B5E5;
    } 

    Как видите, я определил цвет текста для ссылки и цвет фона для действия наведения.

    Кнопки из UL с использованием CSS

    Так кнопки будут выглядеть в браузере.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *