Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

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

Viewport Grid View Медиа-запросы изображение видео(video) рамка

CSS справочное руководство

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

список стилей CSS (ул)

Роль CSS Свойства списка выглядит следующим образом:

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


список

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

  • Неупорядоченный список - элементы списка помечены специальной графики (например, черные пятнышки, маленькие коробки и т.д.)
  • Нумерованный список - элементы списка помечены цифрами или буквами

С помощью CSS, вы можете перечислить стиль дальше, и может сделать изображение маркера элемента списка.


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

Список атрибутов стиля типа определяет тип элемента списка маркера ::

примеров

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;}

Попробуйте »

Некоторые значения маркированные списки, а некоторые это упорядоченный список.


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

Чтобы указать изображение маркера элемента списка, используйте свойство список-стиль-изображения:

примеров

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

Попробуйте »

Приведенный выше пример показывает не то же самое во всех браузерах, IE и Opera отображать теги изображений, чем Firefox, Chrome и Safari немного выше.

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

Решения Совместимость с браузерами

Кроме того, во всех браузерах, следующий пример покажет тег изображения:

примеров

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

Попробуйте »

Объяснение примера:

  • уль:
    • Установить список-стиль-типа не удалить маркера элемента списка
    • Настройка заполнения и полей 0px (совместимость браузера)
  • Все уль ли:
    • Установите URL изображения, и установить его появляется только один раз (без повтора)
    • Вам нужно найти положение изображения (слева 0px и вертикальную 5px)
    • С отступа левого атрибута текста в списке

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

Вы можете указать список всех свойств в одно свойство. Это называется сокращенным свойством.

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

примеров

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

Попробуйте »

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

  • Список стиле типа
  • список-стиль-позиция (для получения инструкций см следующую таблицу атрибутов CSS)
  • список-стиль-изображение

Если эти значения отсутствуют один из оставшихся порядка по-прежнему указано, это не имеет значения.


примеров

Другие примеры

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


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

свойство описание
Список стиле Сокращённое свойство. Для получения списка всех свойств приводится в заявлении
список-стиль-изображение Изображение устанавливается подписать список элементов.
список-стиль-позиция Установите позицию в списке маркера элемента списка.
Список стиле типа Установите тип флага элемента списка.