Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS Списки



Неупорядоченные списки:

  • Кофе
  • Чай
  • Кока Кола
  • Кофе
  • Чай
  • Кока Кола

Упорядоченные списки:

  1. Кофе
  2. Чай
  3. Кока Кола
  1. Кофе
  2. Чай
  3. Кока Кола

HTML списки и список CSS свойства

В HTML существуют два основных вида списков:

  • Неупорядоченные списки <ul>
  • - элементы списка обозначаются кружками
  • Упорядоченные списки <ol>
  • - элементы списка обозначаются цифрами или буквами

CSS свойства списка позволит Вам:

  • Установить множество разных маркеров списка для упорядоченных списков
  • Установить множество элементов списка маркеров для маркированных списков
  • Установить изображение в качестве элемента списка маркера
  • Установить цвет фона для списков и элемента списка

Различные маркеры элементов списка

CSS свойство list-style-type указывает тип элемента маркера списка.

Следующий пример показывает некоторые из доступных маркеров списка:

ul.a {
   list-style-type: circle;
}

ul.b {
   list-style-type: square;
}

ol.c {
   list-style-type: upper-roman;
}

ol.d {
   list-style-type: lower-alpha;
}
Попробуйте сами »

Примечание: Несколько из значений для неупорядоченных списков, и несколько для упорядоченных списков.



Изображение в качестве маркера элемента списка

CSS свойство list-style-image определяет изображение как элемент маркер, списка:

ul {
   list-style-image: url('sqpurple.gif');
}
Попробуйте сами »

Расположение маркера элементов списка

CSS свойство list-style-position определяет, будет ли элемент списка маркер находиться внутри или снаружи содержимого:

ul {
   list-style-position: inside;
}
Попробуйте сами »

Удалить настройки списка по умолчанию

CSS свойство list-style-type:none также может быть использован для удаления маркеров/кружков. Обратите внимание, что в списке также есть поля и отступы по умолчанию. Чтобы удалить или добавить margin:0 или padding:0 в <ul> или <ol>:

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
Попробуйте сами »

Списки - свойство сокращений

CSS свойство list-style свойство сокращений. Свойство используется, для установки всех свойств списка в одном объявлении

ul{
   list-style: square inside url("sqpurple.gif");
}
Попробуйте сами »

При использовании свойства list-style - сокращения, порядок значения свойств:

  • list-style-type ( если задано свойство list-style-image, то значение его будет отображено, если изображение по каким-то причинам не может быть отображены )
  • list-style-position (определяет, будет ли маркер элемент списка находиться внутри или снаружи содержимого)
  • list-style-image (определяет изображение в качестве маркера элемента списка)

Если одно из значений свойств отсутствует, значение будет по умолчанию.


Стиль цвета списка

Также можно установить стиль списков цветными, сделать их немного интересными.

Все, что добавляется к тегам <ol> или <ul>, влияет на весь список, а в то время как свойства добавленны в тег <li> будет влиять на отдельные элементы списка:

ol {
   background: #ff9999;
   padding: 20px;
}

ul {
   background: #3399ff;
   padding: 20px;
}

ol li {
   background: #ffe5e5;
   padding: 5px;
   margin-left: 35px;
}

ul li {
   background: #cce5ff;
   margin: 5px;
}

Результат:

  1. Кофе
  2. Чай
  3. Кока Кола
  • Кофе
  • Чай
  • Кока Кола
Попробуйте сами »

Еще примеры списка

Установить список с красной левой границей
Пример демонстрирует, как создать список с красной левой границей.

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

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


Практика: стиль списка

Упражнение: стиль списка ul

Установите стиль списка для неупорядоченных списков на "квадратный".

<style>
ul {
  : ;
}
</style>

<body>
<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Кока Кола</li>
</ul>
</body>


Все CSS свойства list-style

Свойство Описание
list-style Устанавливает все свойства списка в одном объявлении
list-style-image Устанавливает изображение в качестве элемента списка, маркер
list-style-position Определяет, что элемента списка маркер должны находиться внутри или снаружи содержимого
list-style-type Указывает тип элемента списка, маркер


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.