Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Списки в CSS. Основы CSS для начинающих. Урок №10

23.02.2017


13:21


2616


пока нет


Списки в CSS. Основы CSS для начинающих. Урок №10

Списки в 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>

Результат:

Списки в CSS. Основы CSS для начинающих. Урок №10

Если нужно убрать маркер из списка, тогда воспользуйтесь свойством «none»:

Пример:

li
{
list-style-type: none; /* Убираем маркеры */
}

Результат:

Списки в CSS. Основы CSS для начинающих. Урок №10

Положение маркера в списке

Свойство «LIST-STYLE-POSITION»
Правилом «list-style-position» можно указать положение маркера.

Свойство:

  • outside – за пределами основного блока списка;
  • inside – внутри основного блока списка.

Схемка:

Списки в CSS. Основы CSS для начинающих. Урок №10

Пример:

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>

Результат:

Списки в CSS. Основы CSS для начинающих. Урок №10

Картинка вместо маркера в списке

Свойство «LIST-STYLE-IMAGE»
Если вам не нравится стандартный вид нумерованных или маркированных списков, вы можете воспользоваться правилом «list-style-image» и вместо обычных маркеров поставить картиночные.

Синтаксис:

list-style-image: url(картинка.png);

Пример:

LI
{
list-style-image: url("marker1.png"); /* изображение маркера */
}

«marker1.png» - это картинка маркера.

Результат:

Списки в CSS. Основы CSS для начинающих. Урок №10

Отступ маркера в списке

Свойство «PADDING-LEFT»
Если вам нужно сделать отступ от маркера до текста, воспользуйтесь правилом «padding-left».

li
{
padding-left: 30px; /* Отступ от маркера до текста */
}

Результат:

Списки в CSS. Основы CSS для начинающих. Урок №10

 

ПОДАРОК ДЛЯ ТЕХ, КТО ДОЧИТАЛ ДО КОНЦА

Нумерация списка с любой цифры
Это не обязательно знать, но я решил сделать подарок для тех, кто дочитал до этого места. Если вам нужно, задать нумерацию списка не с 1, а, к примеру, с 6, вы можете сделать такой ход:

li
{
list-style-type: none; /* Убираем исходную нумерацию у списка */
}

ul
{
counter-reset: list 5; /* Инициируем счетчик */
}

ul li:before
{
counter-increment: list; /* Увеличиваем значение счетчика */
content: counter(list) ". "; /* Выводим число */
}

Результат:

Списки в CSS. Основы CSS для начинающих. Урок №10

Жду вас на следующих уроках! Не забывайте подписываться!



Случайные записи:

  1. Состояние кнопки – Bootstrap 3
  2. Бесплатный курс по основам HTML
  3. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Списки в CSS. Основы CSS для начинающих. Урок №10

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16
  5. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?