HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS
Цвета RGB Шестнадцатеричный ВСЛ
CSS-фоны
Фоновый цвет Фоновая картинка Повторение фона Фоновое приложение Фоновая стенография
CSS границы
Границы Ширина рамки Цвет границы Пограничные стороны Пограничная стенография Закругленные границы
CSS поля
Поля Margin Collapse
CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-текст
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-шрифты
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-иконки CSS-ссылки CSS-списки CSS-таблицы
Table Borders Table Size Table Alignment Table Style Table Responsive
Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS
Float Clear Float Examples
Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS
Navbar Vertical Navbar Horizontal Navbar
Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты
Linear Gradients Radial Gradients Conic Gradients
CSS-тени
Shadow Effects Box Shadow
Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

CSS- списки

❮ Предыдущий Следующий ❯

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

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

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

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

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

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

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

Свойства списка 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;
}

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

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

Свойство list-style-imageуказывает изображение в качестве маркера элемента списка:

Пример

ul {
  list-style-image: url('sqpurple.gif');
}

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

Свойство list-style-positionуказывает положение маркеров элементов списка (маркеров).

"позиция стиля списка: снаружи;" означает, что маркеры будут находиться за пределами элемента списка. Начало каждой строки элемента списка будет выровнено по вертикали. Это по умолчанию:

  • Кофе - заварной напиток, приготовленный из обжаренных кофейных зерен...
  • Чай
  • кока-кола

"позиция стиля списка: внутри;" означает, что маркеры будут внутри элемента списка. Поскольку он является частью элемента списка, он будет частью текста и вставит текст в начало:

  • Кофе - заварной напиток, приготовленный из обжаренных кофейных зерен...
  • Чай
  • кока-кола

Пример

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

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

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

Пример

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

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

Пример

ul {
  list-style: square inside url("sqpurple.gif");
}

При использовании сокращенного свойства порядок значений свойства следующий:

  • 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. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Дополнительные примеры


В этом примере показано, как создать список с красной левой рамкой.


В этом примере показано, как создать список с рамками без маркеров.


В этом примере демонстрируются все различные маркеры элементов списка в CSS.

Проверьте себя с помощью упражнений

Упражнение:

Установите стиль списка для ненумерованных списков на «квадрат».

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

<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>

Все свойства списка CSS

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker

❮ Предыдущий Следующий ❯