Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Списки


  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 {
    list-style-position: inside;
}
Попробуй сам "

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

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

пример

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

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

  • list-style-type (если указан список-стиль-образ, будет отображаться значение этого свойства , если не может отображаться изображение по какой - то причине)
  • 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.


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

Упражнение 1 » Упражнение 2» Упражнение 3 »


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

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