Неуредени списъци:
- Кафе
- Чай
- Кока Кола
- Кафе
- Чай
- Кока Кола
Подредени списъци:
- Кафе
- Чай
- Кока Кола
- Кафе
- Чай
- Кока Кола
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-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;
}Резултат:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Още примери
Персонализиран списък с червена лява граница
Този пример демонстрира как да създадете списък с червена лява граница.
Ограничен списък с пълна ширина
Този пример демонстрира как да създадете ограден списък без символи.
Всички различни маркери за елементи от списъка за списъци
Този пример демонстрира всички различни маркери за елементи от списък в CSS.
