StepkinBlog.top
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
23.02.2017
13:21
8557
пока нет
Списки в CSS. Основы CSS для начинающих. Урок №10
Всем привет!
В сегодняшнем уроке я расскажу о том, как в CSS можно управлять внешним видом списка, а именно, создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначение маркированного списка.
Постараюсь этот урок не затягивать и не писать много информации. Но это только постараюсь, а там как получится.
Вид маркера в списке
Свойство «LIST-STYLE-TYPE»
Правилом «list-style-type» можно задать вид маркера, например, чтобы отображались цифры, буквы, квадратики, кружочки и др.
Свойство:
- none – без маркера
- маркированные списки:
- disk – маркер в виде закрашенного круга;
- circle – маркер в виде незакрашенного круга;
- square – маркер в виде закрашенного квадрата;
- нумерованные списки:
- decimal – обычные десятичные числа (1,2,3,4,5 и т. д.);
- upper-roman – большие римские цифры (I, II, III, IV, V и т.д.);
- lower-roman – маленькие римские цифры (i, ii, iii, iv, v и т.д.);
- upper-alpha – большие буквы (A, B, C, D, E и т. д.);
- lower-alpha – малые буквы (a,b,c,d,e и т.д.)
Пример:
li
{
list-style-type: circle; /* Маркеры в виде незакрашенного кружочка */
}
Полный пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Основы CSS</title>
<style>
li
{
list-style-type: circle; /* Маркеры в виде незакрашенного кружочка */
}
</style>
</head>
<body>
<ul>
<li>текст №1</li>
<li>текст №2</li>
</ul>
</body>
</html>
Результат:
Если нужно убрать маркер из списка, тогда воспользуйтесь свойством «none»:
Пример:
li
{
list-style-type: none; /* Убираем маркеры */
}
Результат:
Положение маркера в списке
Свойство «LIST-STYLE-POSITION»
Правилом «list-style-position» можно указать положение маркера.
Свойство:
- outside – за пределами основного блока списка;
- inside – внутри основного блока списка.
Схемка:
Пример:
li
{
list-style-position: inside; /* положение маркера */
}
Цвет маркера в списке
Свойство «COLOR»
Вам уже известно правило «color», с помощью которого можно не только менять цвет текста, но и цвет маркера. Посмотрите список цветов.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Свойства списков в css</title>
<style type="text/css">
li {
color: #0f66c0; /* Цвет маркеров */
}
li span {
color: #cc0000; /* Цвет текста */
}
</style>
</head>
<body>
<ul>
<li><span>Текст №1</span></li>
<li><span>Текст №2</span></li>
</ul>
</body>
</html>
Результат:
Картинка вместо маркера в списке
Свойство «LIST-STYLE-IMAGE»
Если вам не нравится стандартный вид нумерованных или маркированных списков, вы можете воспользоваться правилом «list-style-image» и вместо обычных маркеров поставить картиночные.
Синтаксис:
list-style-image: url(картинка.png);
Пример:
LI
{
list-style-image: url("marker1.png"); /* изображение маркера */
}
«marker1.png» - это картинка маркера.
Результат:
Отступ маркера в списке
Свойство «PADDING-LEFT»
Если вам нужно сделать отступ от маркера до текста, воспользуйтесь правилом «padding-left».
li
{
padding-left: 30px; /* Отступ от маркера до текста */
}
Результат:
ПОДАРОК ДЛЯ ТЕХ, КТО ДОЧИТАЛ ДО КОНЦА
Нумерация списка с любой цифры
Это не обязательно знать, но я решил сделать подарок для тех, кто дочитал до этого места. Если вам нужно, задать нумерацию списка не с 1, а, к примеру, с 6, вы можете сделать такой ход:
li
{
list-style-type: none; /* Убираем исходную нумерацию у списка */
}
ul
{
counter-reset: list 5; /* Инициируем счетчик */
}
ul li:before
{
counter-increment: list; /* Увеличиваем значение счетчика */
content: counter(list) ". "; /* Выводим число */
}
Результат:
Жду вас на следующих уроках! Не забывайте подписываться!
Случайные записи:
- Синтаксис языка PHP. Основы PHP с нуля. Урок №2
- Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
- Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
- Приложение для смартфонов (андроид) – основы HTML
- Комментарии в php коде и как закомментировать код. Основы PHP с нуля. Урок №4