Маркированный список css

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" "https://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" "https://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" "https://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" "https://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" "https://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) ".    
uot;; /* Выводим число */ } </style> </head> <body> <ul> <li>Верь в лучшее, ожидай худшее.Пункт 1</li> <li>Жизнь - это болезнь со смертельным исходом.Пункт 2</li> <li>Никогда не говори никогда.Пункт 3</li> <li>Это все что я знал. Пункт 4</li> </ul> </body> </html>

Результат:

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

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

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

bloggood.ru

list-style-type

Задаёт маркер или нумерацию списков вместо атрибута type в HTML-коде. Значения свойств для маркированных списков могут быть:

  • disk — кружок, установлен по умолчанию.
  • circle — окружность.
  • square — квадрат.

Для нумерованных списков свойству обычно присваиваются значения:

  • decimal — арабские цифры, значение установлено по умолчанию.
  • lower-roman — маленькие римские цифры.
  • upper-roman — заглавные римские цифры.
  • lower-alpha — строчные латинские буквы.
  • upper-alpha — прописные латинские буквы.

Также для любого типа списка свойству list-style-type можно указать значение none, которое вообще уберёт маркер.

Для нумерованных списков доступны и другие значения, например, cjk-ideographic задаёт идеографическую нумерацию, Armenian — традиционную армянскую, а decimal-leading-zero установит нумерацию римскими цифрами, но с нулём в начале: 01, 02, 03… 09, однако на практике эти и подобные им значения используются крайне редко.

Пример ниже отображает три списка: нумерованный с традиционной армянской нумерацией, маркированный с окружностью и нумерованный, элементы в котором нумеруются идеографически.

Код:

Результат.

Цвет маркеров совпадает с цветом текста в списке, указанного свойством color.

list-style-image

Позволяет установить в качестве маркера списка собственное изображение. Например, если в папке с содержащей список страницей находится файл marker.png, который вы и хотите использовать, то код оформления будет следующим:

list-style-position


Определяет положение маркера: либо он вынесен за границу элемента списка (list-style-position: outside), либо текст его обтекает (list-style-position: inside).

В примере ниже показана разница между этими значениями. В первом случае маркер внутри списка, во втором случае он вынесен за его пределы.

В результате создаётся такая страница:

list-style

Позволяет сократить код, записав все три перечисленных свойства одной строкой. Записываются правила через пробел:

Рассмотрим пример страницы с тремя списками. Первый нумеруется цифрами в формате 01, 02, второй маркируется пользовательским рисунком (файл marker.png в папке со страницей), маркер третьего списка отключен.

HTML-код приведён ниже.

Браузер отобразит следующую страницу.

www.seostop.ru

Изменение типа маркера

Первое свойство, которое хотелось бы рассмотреть это свойство list-style-type, оно задает тип маркера элемента списка.

Меню навигации, к примеру, часто составляется из обычных маркированных списков (HTML элемент <ul>), по умолчанию маркер которых, отображается в форме закрашенного круга, чтобы его убрать необходимо, воспользоваться CSS свойством list-style-type со значением none:


 ul { list-style-type : none; /* убираем маркер у списка */ } 

Для маркированных (неупорядоченных) списков (HTML элемент <ul>) предусмотрено три типа маркеров: в форме закрашенного кружка (disc — это значение по умолчанию), маркер в форме полого круга (сircle) и в форме квадрата (square), а для нумерованных (упорядоченных) списков (элемент <ol>) все оставшиеся варианты. Полный перечень размещен в следующей таблице:


Обращаю Ваше внимание, что значения hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha не поддерживаются браузером Internet Explorer.


Давайте рассмотрим пример использования свойства list-style-type в тексте:

 <!DOCTYPE html> <html> <head> 	<title>Пример использования свойства list-style-type</title> <style>  .test { list-style-type : lower-roman; /* устанавливаем тип маркера - римские числа в нижнем регистре */ color : orange; /* обратите внимание, что текст цвета соответствует цвету маркера */ } .test2 { list-style-type : circle; /* устанавливаем тип маркера в форме круга */ color : IndianRed; /* обратите внимание, что текст цвета соответствует цвету маркера */ } </style> </head> 	<body> 		<ul> /* список со значением типа маркера по умолчанию (disc)..    
i> <li>Элемент списка</li> </ul> </body> </html>

В данном примере мы создали два стиля, первый устанавливает тип маркера — римские числа в нижнем регистре (значение lower-roman), мы его применили к нумерованном списку (HTML элемент <ol>), а к маркированному списку (HTML элемент <ul>) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle).

Результат нашего примера:

Рис. 69 Пример использования свойства list-style-type (установка типа маркера).
Рис. 69 Пример использования свойства list-style-type (установка типа маркера).

Обращаю Ваше внимание, что вы можете применить свойство list-style-type даже к отдельно взятому элементу списка (HTML элемент <li>), чтобы установить свой тип маркера, либо создать стили, которые будет применять определённый маркер к чётным, либо нечетным элементам списка, как рассмотрено в следующем примере:


 <!DOCTYPE html> <html> <head> 	<title>Пример чередования стилей свойства list-style-type</title> <style>  li:nth-child(even) { /* четное чередование стиля */ list-style-type : none; color : red; } li:nth-child(odd) { /* нечетное чередование стиля */ list-style-type : square; color : green; } </style> </head> 	<body> 		<ul> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 		</ul> 	</body> </html> 

В этом примере мы стилизовали все нечетные элементы списка — указали тип маркера квадрат, а цвет текста указали зеленый. Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.

Результат нашего примера:

Рис. 70 Пример чередования стилей свойства list-style-type.
Рис. 70 Пример чередования стилей свойства list-style-type.

Расположение маркера относительно элемента списка

С помощью CSS свойства list-style-position вы можете определить расположение маркера, либо цифры относительно элемента списка. Для того, чтобы расположить маркер (цифру) внутри элемента списка вместе с содержимым, то необходимо использовать значение inside, а для того, чтобы расположить за границей элемента списка необходимо использовать значение outside.

Давайте для наглядности рассмотрим пример, в котором помимимо свойства list-style-position используем еще одно новое свойство, которое позволит нам установить границы элемента.

 <!DOCTYPE html> <html> <head> 	<title>Пример использования свойства list-style-position</title> <style>  li { border : 1px solid orange; /* устанавливаем сплошную границу размером 1px оранжевого цвета для всех элементов списка*/ } .test { list-style-position : outside; /* указываем, что маркер располагается слева от текста за границей элемента списка */ background-color : khaki; /* устанавливаем цвет заднего фона */ } .test2 { list-style-position : inside; /* указываем, что маркер располагается слева от текста внутри элемента вместе с содержимым */ background-color : khaki; /* устанавливаем цвет заднего фона */ } </style> </head> 	<body> 		<ul class = "test"> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 		</ul> 		<ol class = "test2"> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 		</ol> 	</body> </html> 

В данном примере для маркированного списка (HTML элемент <ul>) мы расположили маркер внутри элемента списка вместе с содержимым, использовав свойство list-style-position со значение outside, а для нумерованного списка (HTML элемент <ol>) разместили цифру слева от текста внутри элемента вместе с содержимым (свойство list-style-position со значение inside).

Универсальное свойство border, которое позволяет установить границу для всех элементов списка, мы использовали для лучшего понимания работы свойства list-style-position. Работа с границами элементов в скором времени будет подробно рассмотрена в учебнике в статье «Границы элемента в CSS».

Результат нашего примера:

Рис.71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).
Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

Создание собственных маркеров

Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.

Синтаксис свойства следующий:

 ol { list-style-image : url('images/primer.png'); /* указываем относительный путь к изображению */ } ul { list-style-image : url('http://basicweb.ru/images/mini5.png'); /* указываем абсолютный путь к изображению */ } 

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


Если вы планируете оформить собственные маркеры, то вам придется использовать программу для редактирования графики, либо воспользоваться уже готовыми наборами. Обратите внимание на такой момент, который может произойти, даже если Вы все сделали правильно, изображение может не загрузиться на страницу, в этом случае необходимо отредактировать изображение таким образом, чтобы его фон стал прозрачным.


Давайте рассмотрим пример использования собственных маркеров в документе:

 <!DOCTYPE html> <html> <head> 	<title>Пример использования CSS свойства list-style-image</title> .test { list-style-image : url('http://basicweb.ru/images/mini5.png'); /* указываем абсолютный путь к изображению, которое будет использовано в качестве маркера */ } </style> </head> 	<body> 		<ul class = "test"> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 		</ul> 	</body> </html> 

В данном примере мы указываем абсолютный путь к изображению, которое будет использовано в качестве маркера.

Результат нашего примера:

Рис. 72 Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).
Рис. 72 Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).

Изменение цвета маркера в CSS

В завершении этой статьи давайте рассмотрим продвинутый способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before:

 <!DOCTYPE html> <html> <head> 	<title>Пример изменения цвета маркера</title> <style>  ul { list-style : none; /* убираем маркеры у маркированного списка */ } li:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <li> */ content : "•"; /* вставляем содержимое, которое выглядит как маркер */ padding-right : 10px; /* устанавливаем правый внутренний отступ элемента. */ color : orange; /* устанавливаем цвет шрифта */ } </style> </head> 	<body> 		<ul> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 			<li>Элемент списка</li> 		</ul> 	</body> </html> 

Суть этого способа заключается в том, что мы перед каждым элементом списка (HTML элемент <li>) вставляем псевдоэлементом (:before) сгенерированный контент (CSS свойство content), который идентичен по внешнему виду маркеру в маркированном списке (HTML элемент <ul>), только уже необходимого для нашей задачи цвета.

Обращаю Ваше внимание, что в данном примере использовано свойство padding-right, которое нам позволило сделать внутренний отступ справа в каждом элементе списка (HTML элемент <li>). Если в данном случае не применять это свойство, то маркер будет находится в упор к тексту, что зрительно некрасиво. Работа с внутренними и внешними отступами элементов будет подробно рассмотрена в следующей статье учебника «Блочная и строчная модель в CSS».

Рис. 73 Пример изменения цвета маркера с использованием свойства content и псевдоэлемента :before
Рис. 73 Пример изменения цвета маркера с использованием свойства content и псевдоэлемента :before.


basicweb.ru

Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера <ul>, а каждый пункт списка начинается с тега <li>, как показано ниже.

<ul>  <li>Первый пункт</li>  <li>Второй пункт</li>  <li>Третий пункт</li> </ul>

В списке непременно должен присутствовать закрывающий тег </ul>, иначе возникнет ошибка. Закрывающий тег </li> хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.

В примере  11.1 приведен код HTML для добавления маркированного списка на веб-странице.

Пример 11.1. Создание маркированного списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Маркированный список</title>  </head>  <body>  <hr>  <ul>  <li>Чебурашка</li>  <li>Крокодил Гена</li>  <li>Шапокляк</li>  <li>Крыса Лариса</li>  </ul>  <hr>  </body> </html>

Результат данного примера показан на рис. 11.1.

Рис. 11.1

Рис. 11.1. Вид маркированного списка

Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега <ul>. Допустимые значения приведены в табл. 11.1

Табл. 11.1. Стили маркеров списка
Тип списка Код HTML Пример
Список с маркерами в виде круга <ul type="disc">
<li>…</li>
</ul>
  • Первый
  • Второй
  • Третий
Список с маркерами в виде окружности <ul type="circle">
<li>…</li>
</ul>
  • Первый
  • Второй
  • Третий
Список с квадратными маркерами <ul type="square">
<li>…</li>
</ul>
  • Первый
  • Второй
  • Третий

Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.

Создание списка с квадратными маркерами показано в примере 11.2.

Пример 11.2. Вид маркеров

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Маркированный список</title>  </head>  <body>  <p><strong>Изменение убеждений</strong></p>  <ul type="square">  <li>изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм).   Специальное предложение - иудаизм и мусульманство вместе;</li>  <li>изменение веры в непогрешимость любимой партии;</li>  <li>убеждение в том, что инопланетяне существуют;</li>  <li>предпочтение политического строя, как самого лучшего в своем роде   (на выбор: феодализм, социализм, коммунизм, капитализм).</li>  </ul>  </body> </html>

Результат данного примера показан на рис. 11.2.

Рис. 11.2

Рис. 11.2. Вид списка с квадратными маркерами

htmlbook.ru

Маркированный списокЗдравствуйте, друзья. Иногда полезно возвращаться к основам HTML, чтобы освежить память и проверить не забыли ли что-нибудь. И в этой статье речь пойдет про оформление маркированного списка, а если более конкретно, то попробуем сделать маркеры списка картинками. Да, именно так. Все эти кружочки и квадратики нас вовсе не интересуют, будем оформлять свои списки красиво. И для этого есть 3 способа оформления. Начнем по порядку. Для начала вспомним, как же пишутся маркированные списки на HTML. А пишутся они вот так:

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

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5

Итак, давайте поменяем эти черные кружочки на картинку. Я использовал в примере изображение зеленой галочки. Вы же можете подобрать другую картинку, звездочки, сердечки, что угодно. Только желательно, чтобы размер этой картинки был небольшим, а лучше всего 16×16 пикселей. Надеюсь, что вы знаете, как изменить размер изображения. Все, что нужно это в CSS свойстве прописать путь до картинки.

И давайте посмотрим, что у нас из этого получилось.
Демо

По большому счету все получилось как надо, наш список стал намного симпатичнее и не нуждается в дальнейшей коррекции. Однако я говорил о трех способах и теперь перейдем ко второму, который тоже нужно знать.

Выглядеть будет это так же, как и в первом примере, но лишь слегка будет отличатся положением самой картинки. Для наглядности я сделал вторую страницу. Посмотрите и сравните оба варианта оформления маркированных списков.

Демо

И наконец третий способ и он достаточно гибкий. В нем мы используем псевдокласс before. То есть мы укажем в CSS, что будет выводится перед каждым пунктом списка. Посмотрим на код:

В дополнение ко всему мы используем в этом примере относительное позиционирование, что позволяет нам размещать наши маркеры так, как нам удобно и располагать их в любом месте. Посмотрите пример. Он практически не отличается от второго варианта.

Демо

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

serblog.ru

Маркированные списки (или ненумерованные списки)

Первый вид списка, который мы рассмотрим, это маркированный.

Ненумерованные списки — тег <ul>

Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов <ul> </ul>. Ниже приводится простой его пример:

Сначала весь список берется в теги <ul> </ul>. При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка.

Атрибут type

Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов (в том числе и в нумерованном списке HTML):

Элементы списка — тег <li>

Каждый элемент в списке обворачивают в отдельную пару тегов <li> </ li>. Часто можно обойтись и без <li>, но я бы рекомендовал придерживаться этого правила.

Приведенный выше список помещен в отдельный тег <ul>, но каждый <li> также поддерживает собственный атрибут type, и таким образом можно создать следующий список:

Отступ маркированного списка

Перед тем, как к списку будет применен любой стиль CSS, HTML (а точнее браузер) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом <p>.

Упорядоченный / нумерованный список — тег <ol>

Если вы хотите упорядочить элементы списка, тогда тег <ol> поможет в этом. По умолчанию он задает нумерованный список HTML:

что на выходе дает нам:

A. Элемент 1
B. Элемент 2
C. Элемент 3

Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.

Начало нумерованного списка с определенного номера

Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков.

Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А). Это бы внесло неразбериху в ваше руководство!

К счастью, в HTML есть свойство start, которое позволяет начать нумерацию с указанного номера:

Что дает нам следующее:
4. Шаг четыре
5. Шаг пять
6. Шаг шесть

Обратный порядок

Если вы хотите вывести номера (или буквы) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed:

В результате список будет выглядеть следующим образом:
5. Пятый пункт.
4. Четвертый пункт.
3. Третий пункт.
2. Второй пункт.
1. Первый пункт.

Многоуровневый маркированный список в HTML

С помощью установленных в браузерах патчей поддержки (и иногда с помощью отмены CSS для некоторых сайтов) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой:

Что дает нам:

• Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
• Элемент верхнего уровня

Вы можете использовать комбинацию тегов <ul> и <ol>. Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.

1. Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
2. Элемент верхнего уровня

Используйте нумерованные списки HTML на своих страницах.

www.internet-technologies.ru

Списки в HTML (XHTML)

 Списки в HTML (XHTML) используются для оформления и форматирования видимой текстовой части html-документа. Дополнительно, на основании кодов списков, в HTML-разметке веб-страницы создаются и группируются элементы управления и навигации – кнопочки и менюшки (простые и выпадающие). Коды списков языка гипертекстовой разметки HTML ничем не отличаются от кодов списков XHTML…

  1. Код и видимая часть списков HTML
  2. Виды списков в HTML
    • Маркированный список
    • Нумерованный список
    • Список определений
    • Многоуровневые (вложенные) списки
    • Ненумерованные и немаркированные списки
    • Выпадающие списки
  3. Теги списков в HTML
    <ul>,<ol>,<li>,<dl>, dt>,<dd>
  4. Как создать список в html
  5. Примеры списков html
    • Маркированный | Теги <ul> и <li>
    • Нумерованный | Теги <ol> и <li>
    • Многоуровневые (вложенные) списки
    • Список определений | Теги <dl>, <dt> и <dd>
    • Ненумерованные и немаркированные списки

Код и видимая часть списков HTML

Равно как и все объекты веб-страницы, списки в HTML имеют две составляющие – код списка и его видимую часть (интерпретацию кода). Код списка HTML невидим пользователю. Код записывается в HTML-разметку веб-документа и интерпретируется браузером непосредственно на экран монитора пользователя – это будет видимая часть списка.

Виды списков в HTML

В HTML существует три вида списков – маркированный, нумерованный и список определений. Все виды списков могут быть многоуровневыми и содержать вложенные списки. Степень и вложенность списков определяется их кодом – порядком записи тегов.

Теги списков в HTML

Для создания кода списков в HTML используются теги:
<ul>, <ol> и <li>, а также <dl>, <dt> и <dd>
Все теги парные – закрывающий тег обязателен.
Теги списков в HTML создают и обозначают:

  • <ul> – маркированный список
  • <ol> – нумерованный список
  • <li> – элементы (строки) маркированного и нумерованного списков
  • <dl> – список определений
  • <dt> – элемент-термин в списке определений
  • <dd> – элемент-описание в списке определений

Как создать список в html

Чтобы создать список в веб-документе, нужно в его HTML-разметке написать html-код списка. Код любого html-списка начинается и заканчивается обрамляющими (оборачивающими) тегами (ol, ul, dl) которые указывают браузеру на вид списка. Между оборачивающими (обрамляющими) тегами располагаются элементы списка, обёрнутые, в свою очередь – тегами элементов списка (li, dd, dt).

Существует множество визуальных html-редакторов, облегчающих работу по созданию разнообразных списков. В этой статье, речь – непосредственно про коды списка на веб-странице. Выбор способа создания кода, в Notepad-е (блокноте) или в хитрющем html-редакторе – личное дело юзера. Практически все текстовые html-редакторы слишком упрощённо подходят к созданию html-списков.

Маркированный html-список | Теги <ul> и <li>

Код маркированного списка начинается с открывающего тега <ul>. Потом идут элементы, обрамлённые парными тегами <li></li>. Код маркированного списка заканчивается закрывающим тегом </ul>. Пример кода маркированного списка:

Маркированный (неупорядоченный) список по-англицки звучит, как Unordered List. Становится понятной аббревиатура его обрамляющего тега – <ul> (Unordered List). Написание тега <ul> заглавными литерами – <UL>. В спецификации HTML нет верхнего регистра. Правильно писать – <ul>

Нумерованный html-список | Теги <ol> и <li>

Код нумерованного списка ничем не отличается от кода маркированного списка, с той разницей, что обрамляющие список теги <ul> заменяются на <ol> (анг. Ordered List – нумерованный, упорядоченный список). Код нумерованного списка открывает тег <ol>. Внутри находятся элементы, обрамлённые парными тегами, вида <li>элемент</li>. Закрывается код нумерованного списка тегом </ol>. Пример кода нумерованного списка:

Многоуровневые (вложенные списки)

Вложенные (многоуровневые, ступенчатые) списки в HTML представляют наибольший интерес. Чтобы создать многоуровневый вложенный список в HTML, нужно в код одного списка вставить код другого списка. Код вложенного списка вставляется в виде отдельного элемента, между тегами <li></li>. Порядок и степень вложения не имеет значения. Допускается вкладывать маркированный список в нумерованный и наоборот, на любую глубину и пока не надоест. Браузер всё вытерпит. Пример кода многоуровневого списка со вложенными списками (код основного списка обозначен синим цветом, первого вложенного – жёлтым, второго вложенного – зелёным):

Список определений | Теги <dl>, <dt> и <dd>

Список определений (описаний, объяснений) – перечень терминов и пояснений к ним. Этот вид текстовой записи списка специально придуман для объяснения и описания терминов и определений, например – описания списка товаров. Список определений отличается от обычных списков. Элементы списка определений разделены на две части – слово (термин) и его описание (определение, пояснение для этого слова или термина).

Код списка определений начинается открывающим тегом <dl> (анг. Definition Lists – список определений). После него идёт элемент-термин списка, который требуется объяснить – этот элемент обрамлён парным тегом <dt></dt>. Дальше идёт текстовый объясняющий элемент списка, он обрамлён парным тегом <dd></dd>. Код списка определений заканчивается закрывающим тегом </dl>. Пример кода списка определений:

Для усиления визуального эффекта использован CSS,
который к данному коду не имеет никакого отношения.

Элементы списка определений не имеют бу́ллетов – специальных типографских знаков. В HTML, списки определений существует исключительно для создания описаний и оформления текстовой видимой части веб-документа. Маркированный и нумерованный списки значительно универсальней и разнообразней. Управление их внешним видом производится при помощи атрибутов тегов списка и атрибутов тегов элементов (строк) списка. Дополнительно, маркированный и нумерованный списки используются в html-разметке веб-страниц для создания и группирования элементов управления и навигации.

Ненумерованные и немаркированные списки

Список без ничего – без нумерации, маркировки и прочих списочных причиндалов (бу́ллетов), получится из маркированного или нумерованного списка, после присвоения последнему свойства list-style:none;

Более сложный способ скрыть/убрать бу́ллеты (маркеры) у списка – это добавить ему свойство overflow: hidden;, которое обрезает выступающую за пределы списка маркировку (нумерацию, или что там у него есть). Прим. Обрезание маркеров (overflow: hidden;) работает только за пределами списка – свойство list-style-position: outside; Это свойство устанавливается дефолтными настройками по-умолчанию для всех видов браузеров и, если специально нигде не указано другое (list-style-position:inside;) то тогда добавляем просто overflow: hidden;. Пример кода немаркированного и ненумерованного списка (<ul> или <ol>, не важно):

tehnopost.info

Изменение и удаление маркеров

Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.

Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:

Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>   .class1 { list-style-type: circle; }   .class2 { list-style-type: disc; }   .class3 { list-style-type: square; }   </style>   </head>     <body>   <ul class="class1">   <li>Кофе</li><li>Чай</li>   </ul>   <ul class="class2">   <li>Кофе</li><li>Чай</li>   </ul>   <ul class="class3">   <li>Кофе</li><li>Чай</li>   </ul>   </body>  </html>

Попробовать »

С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>   ul { list-style-type: none; }  	 ol { list-style-type: none; }   </style>   </head>     <body>   <ul>   <li>Кофе</li><li>Чай</li>   </ul>  	<ol>   <li>Кофе</li><li>Чай</li>   </ol>   </body>  </html>

Попробовать »

Замена маркеров картинками

Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image, в значении которого нужно прописать путь к выбранному изображению.

Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>   ul { list-style-image: url('sqpurple.gif'); }   ol { list-style-image: url('donald.gif'); }   </style>   </head>     <body>   <ul>   <li>Кофе</li><li>Чай</li>   </ul>   <ol>   <li>Кофе</li><li>Чай</li>   </ol>   </body>  </html>

Попробовать »

puzzleweb.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector