Оформление списков ul li для информационных блоков
.list4a {
padding:0;
list-style: none;
counter-reset: li;
}
.list4a li {
position: relative;
padding:12px 20px 20px 28px;
margin-left: 40px;
transition-duration: 0.3s;
}
.list4a li:before {
border: 6px solid transparent;
line-height: 30px;
position: absolute;
top: 0;
left:-30px;
width:42px;
text-align:center;
font-size: 13px;
font-weight: bold;
color: #77AEDB;
counter-increment: li;
content: counter(li);
transition-duration: 0.3s;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.list4a li:hover:before {
color: #337AB7;
}
.list4a li:after {
position: absolute;
top: 0;
left: -30px;
width: 42px;
height: 42px;
border: 6px solid #3399FF;
border-radius: 50%;
content: »;
opacity: 0.5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.list4a li:hover:after {
animation: 500ms ease-in-out 0s bounceIn;
opacity: 1;
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.3, 1.3, 1.3);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
Изучаем оформление списков на CSS
Время чтения: 2 мин. 
Здравствуй, уважаемый читатель.
Это восьмой урок изучения CSS. В этом уроке мы рассмотрим как задать стиль спискам и как вставить картинку вместо значка списка.
Перед изучением данного урока пройдите предыдущие уроки:
Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Теория и практика
В html мы изучали списки <ul>, <li>. В CSS существует несколько свойств для работы со списками. Но в CSS свойств больше и возможностей больше, чем в html.
list-style-type, list-style-position, list-style-image
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html>
<head>
<title>Главная</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Фрукты</p>
<ul>
<li>Банан</li>
<li>Яблоко</li>
<li>Апельсин</li>
<li>Груша</li>
</ul>
<p>Фрукты</p>
<ul>
<li>Банан</li>
<li>Яблоко</li>
<li>Апельсин</li>
<li>Груша</li>
</ul>
</body>
</html> |
Пример CSS кода:
1 2 3 4 5 6 7 8 9 | .fruits{
list-style-type:upper-roman;
list-style-position:outside;
}
.fruits_o{
list-style-type:upper-roman;
list-style-position:inside;
} |
Как это выглядит в браузере:
Также вместо обычных значков можно вставить изображение. Делается это с помощью свойства list-style-image.
Изменим наш CSS код:
1 2 3 4 5 6 7 8 9 | .fruits{
list-style-image:url('hand_point.png');
list-style-position:outside;
}
.fruits_o{
list-style-image:url('hand_point.png');
list-style-position:inside;
} |
Как это выглядит в браузере:
Посмотреть примерСкачать
Но так как и в прошлом уроке данную запись можно сократить.
Сегодня мы рассмотрели как оформить список, как добавить изображение вместо обычного значка, а также как написать сокращенную форму. Чтобы лучше запомнить материал пробуйте всё написать руками.
Больше практикуйтесь!
СSS Списки
- Кофе
- Чай
- Кока Кола
- Кофе
- Чай
- Кока Кола
Список 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 определяет изображение как элемент маркер, списка:
Расположение маркера списка
Свойство list-style-position определяет, будет ли элемент списка маркер находиться внутри или снаружи содержимого:
Удалить настройки по умолчанию
Свойство list-style-type:none также может быть использован для удаления маркеров/кружков.
Обратите внимание, что в списке также есть поля и отступы по умолчанию.
Чтобы удалить или добавить padding:0 в <ul> или <ol>:
Список — сокращение свойств
Свойство 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;
}
Результат:
- Кофе
- Чай
- Кока Кола
- Кофе
- Чай
- Кока Кола
Еще примеры
Установить список с красной левой границей
Пример демонстрирует, как создать список с красной левой границей.
Установить в полную ширину, границы списка
Пример демонстрирует, как создать границы списка без кружков.
Установить разные элементы маркеров списка
Пример демонстрирует разные элементы списка маркеров в CSS.
Проверьте себя с помощью упражнений!
Все CSS свойства списка
| Свойство | Описание |
|---|---|
| list-style | Устанавливает все свойства списка в одном объявлении |
| list-style-image | Устанавливает изображение в качестве элемента списка, маркер |
| list-style-position | Определяет, что элемента списка маркер должны находиться внутри или снаружи содержимого |
| list-style-type | Указывает тип элемента списка, маркер |
| border | Это свойство позволяет определить все атрибуты рамки HTML элемента за одну декларацию |
| border-bottom | Это свойство позволяет определить все атрибуты нижней рамки HTML элемента за одну декларацию |
| border-bottom-color | Это свойство определяет цвет нижней стороны рамки HTML элемента |
| border-bottom-left-radius | Устанавливает радиус скругления левого нижнего уголка рамки |
| border-bottom-right-radius | Устанавливает радиус скругления правого нижнего уголка рамки |
| border-bottom-style | Это свойство определяет стиль нижней стороны рамки HTML элемента |
| border-bottom-width | Это свойство определяет толщину нижней стороны рамки HTML элемента |
| border-color | Это свойство определяет цвет всех четырех сторон рамки HTML элемента |
| border-image | Позволяет устанавливать изображение вместо обычной рамки вокруг элемента |
| border-image-outset | Устанавливает отступ рамки-изображения за пределы границ элемента |
| border-image-repeat | Устанавливает способ заполнения фоновым изображением пространства между углами рамки |
| border-image-slice | Определяет размер частей изображения, используемых для оформления границ элемента |
| border-image-source | Задаёт путь к изображению, которое будет использоваться в качестве рамки элемента |
| border-image-width | Задаёт ширину изображения для рамки элемента |
| border-left | Это свойство позволяет определить все атрибуты левой рамки HTML элемента за одну декларацию |
| border-left-color | Это свойство определяет цвет левой стороны рамки HTML элемента |
| border-left-style | Это свойство определяет стиль левой стороны рамки HTML элемента |
| border-left-width | Это свойство определяет толщину левой стороны рамки HTML элемента |
| border-radius | Устанавливает радиус скругления уголков рамки |
| border-right | Это свойство позволяет определить все атрибуты правой рамки HTML элемента за одну декларацию |
| border-right-color | Это свойство определяет цвет правой стороны рамки HTML элемента |
| border-right-style | Это свойство определяет стиль правой стороны рамки HTML элемента |
| border-right-width | Это свойство определяет толщину правой стороны рамки HTML элемента |
| border-style | Это свойство определяет стиль всей рамки вокруг элемента |
| border-top | Это свойство позволяет определить все атрибуты верхней рамки HTML элемента за одну декларацию |
| border-top-color | Это свойство определяет цвет верхней стороны рамки HTML элемента |
| border-top-left-radius | Устанавливает радиус скругления левого верхнего уголка рамки |
| border-top-right-radius | Устанавливает радиус скругления правого верхнего уголка рамки |
| border-top-style | Это свойство определяет стиль верхней стороны рамки HTML элемента |
| border-top-width | Это свойство определяет толщину верхней стороны рамки HTML элемента |
| border-width | Это свойство определяет толщину всех четырех сторон рамки HTML элемента |
| outline | Универсальное свойство, которое устанавливает атрибуты контура элемента |
| outline-color | Определяет цвет контура |
| outline-offset | Задает величину отступа контура от элемента |
| outline-style | Определяет стиль контура |
| outline-width | Определяет толщину контура |
Красивое оформление списков на CSS3
Время чтения: 3 мин. 
При оформлении списков всегда есть желание выделить их наиболее красиво, чтобы они выделялись и привлекали внимание своим оформлением, и часто получается не так как хочется. В этом уроке я расскажу и покажу как можно оформить списки на CSS3 без изображений.
Пример оформления можно увидеть здесь:
Посмотреть примерСкачать
К сожалению только Mozilla поддерживает переходы псевдоэлементов, поэтому чтобы увидеть данный эффект используйте браузер Mozilla.
1 вид. Поворот цифры при наведении на элемент списка
Сначала создадим вот такой список.
HTML часть
Ниже вы можете увидеть структуру упорядоченного списка, который будем красиво оформлять:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ol>
<li><a href="">Элемент списка</a></li>
<li><a href="">Элемент списка</a></li>
<li><a href="">Элемент списка</a>
<ol>
<li><a href="">Подэлемент списка</a></li>
<li><a href="">Подэлемент списка</a></li>
<li><a href="">Подэлемент списка</a></li>
</ol>
</li>
<li><a href="">Элемент списка</a></li>
<li><a href="">Элемент списка</a></li>
</ol> |
CSS часть
А сейчас добавим оформление нашему списку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | .rounded-list a {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rounded-list a:hover {
background: #eee;
}
.rounded-list a:hover:before {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.rounded-list a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
} |
2 вид. Добавляется уголок при наведении на элемент списка
А это второй вариант оформления списка.
HTML часть
Структура такая же, как у прошлого списка:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ol>
<li><a href="">Элемент списка</a></li>
<li><a href="">Элемент списка</a></li>
<li><a href="">Элемент списка</a>
<ol>
<li><a href="">Подэлемент списка</a></li>
<li><a href="">Подэлемент списка</a></li>
<li><a href="">Подэлемент списка</a></li>
</ol>
</li>
<li><a href="">Элемент списка</a></li>
<li><a href="">Элемент списка</a></li>
</ol> |
CSS часть
Но оформление будет немного другое:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | .rectangle-list a {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rectangle-list a:hover {
background: #eee;
}
.rectangle-list a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle-list a:after {
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rectangle-list a:hover:after {
left: -.5em;
border-left-color: #fa8072;
} |
Вывод
Жаль пока что только Mozilla поддерживает переходы псевдоэлементов, об этом я уже писал в прошлом уроке CSS3 навигация с переходами. Но за основу смело можно брать данное оформление, т.к. оно явно привлечет внимание вашего посетителя :).
Успехов!
Источник: www.red-team-design.com
Шпаргалка стилей для списков CSS
Время чтения: < 1 мин. 
Списки используются практически везде. С помощью списков создаются меню для сайта, а также они используются для компактного расположения текста на странице. После того, как отошли от табличной верстки, списки заменили очень многие элементы. Но, чтобы красиво оформить списки, нужно знать хотя бы основные свойства CSS. Их я расположил на очередной шпаргалке по CSS.
Прошлые 3 шпаргалки, которые отвечают за другие свойства CSS находятся по ссылкам ниже:
Списки CSS
Цветовая гамма не изменилась, все блоки я расположил на сером фоне, где нет ярких цветов. То есть эта шпаргалка очень похожа на прошлые. Глядя на эту шпаргалку Вы легко запомните эти свойства и, если забудете как пишется какое-нибудь их них, всегда можете вернуться к этой шпаргалке. Вот как она выглядит:
Скачать эту шпаргалку в большом разрешении в формате JPG, а также в формате PDF можно с помощью кнопок ниже:
СмотретьСкачать
Вывод
Все шпаргалки сохраняйте в одной папке, чтобы Вы смогли быстро их найти и вспомнить нужное свойство и его значение.
Успехов!
С Уважением, Юрий Немец