BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про CSS » Свойства списков в css.

Свойства списков в css.

2013-04-30 / Вр:23:38 / просмотров: 7517

CSS дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.

CSS стили списка маркера.

list-style-type

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

Значение:

disk – маркированный список в виде закрашенного кружка

circle – маркированный список в виде не закрашенного кружка

square – маркированный список в виде закрашенного квадратика

decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

lower-alpha – нумерованный список строчными буквами (a,b,c  и т. д.)

none – без маркера.

Пример:

<!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">
 UL {
 list-style-type: circle; /* Маркеры в виде не закрашенного кружочка */
 color: navy; /* Цвет текста списка */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.</li>
 <li>Жизнь - это болезнь, со смертельным исходом.</li>
 <li>Никогда не говори никогда.</li>
 </ul>
 </body>
</html>

Результат:

Свойства списков в css

Убрать отображение маркера из списка.

Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

list-style-type: none;

Пример

<!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">
 UL {
 list-style-type: none; /* Убираем маркеры */
 color: navy; /* Цвет текста списка */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.</li>
 <li>Жизнь - это болезнь со смертельным исходом.</li>
 <li>Никогда не говори никогда.</li>
 </ul>
 </body>
</html>

Результат:

Убрать отображение маркера из списка.

Изображение вместо маркера.

Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image.

list-style-image

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

Пример

<!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 {
 list-style-image: url("images/marker1.png"); /* Путь к изображению */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.</li>
 <li>Жизнь - это болезнь со смертельным исходом.</li>
 <li>Никогда не говори никогда.</li>
 </ul>
 </body>
</html>

Результат:

Изображение вместо маркера

Отступ маркера от текста

Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

Пример:

<!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 {
 padding-left: 30px; /* Отступ от маркера до текста */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.</li>
 <li>Жизнь - это болезнь со смертельным исходом.</li>
 <li>Никогда не говори никогда.</li>
 </ul>
 </body>
</html>

Результат:

Отступ маркера от текста

Цвет маркеров.

Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег <span>.
Это выглядит вот так:

<li><span>текст</span></li>

Пример:

<!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: #0f66с0; /* Цвет маркеров */
 }
 li span {
 color: #cc0000; /* Цвет текста */
 }
 </style>
 </head>
 <body>
 <ul>
 <li><span>Верь в лучшее, ожидай худшее.</span></li>
 <li><span>Жизнь - это болезнь со смертельным исходом.</span></li>
 <li><span>Никогда не говори никогда.</span></li>
 </ul>
 </body>
</html>

Результат:

Цвет маркеров

Дополнение к общей теме.
Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.

Пример:

<!DOCTYPE html>
<html>
 <head>
 <title>Свойства списков в css</title>
 <style>
 li { list-style-type: none; } /* Убираем исходную нумерацию у списка */
 ul { counter-reset: list 8; } /* Инициируем счетчик */
 ul li:before {
 counter-increment: list; /* Увеличиваем значение счетчика */
 content: counter(list) ". "; /* Выводим число */
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Верь в лучшее, ожидай худшее.Пункт 1</li>
 <li>Жизнь - это болезнь со смертельным исходом.Пункт 2</li>
 <li>Никогда не говори никогда.Пункт 3</li>
 <li>Это все что я знал. Пункт 4</li>
 </ul>
 </body>
</html>

Результат:

задать нумерацию списка маркера не с нуля а допустим с 8

Вот и подошла к завершению тема "Свойства списков в css".

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

4 Ответов на комментарий - Свойства списков в css.

  1. Геннадий

    Подскажите где меняется этот код в стилях CSS а то не очень понятно?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    меняется код в стилях CSS. Почитайте вот это

    Ответить

  2. Сергей

    Спасибо за статью, все коротко и ясно.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    И Вам, Сергей, спасибо за комментарий!

    Ответить

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

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

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

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

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 671
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3683