Css пример описание маркированного списка. HTML: Нумерованный и маркированный список

- 4.5 out of 5 based on 2 votes

Очень часто определенную информацию на сайте необходимо представить в виде списков.

Списки позволяют упорядочить и систематизировать различную информацию и представить ее для посетителя в удобном виде.

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

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

Данный вид списка используется наиболее часто. Маркированный список в HTML создается при помощи тегов

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

  Код маркированного списка будет выглядеть так:

  • Вариант такой
  • Вариант сякой
  • Вариант эдакий

  Можете попробовать создать HTML страничку, используя данный код и у вас, в результате получится следующий список:

  

  Как вы можете заметить, каждый элемент списка располагается с новой строки, при этом слева, сверху и снизу создаются определенные отступы. Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик. У тега

  есть атрибут type, при помощи которого, и задается стиль маркера. Данный атрибут имеет следующие значения:
  • disc - круг;
  • circle - окружность;
  • square - квадрат.

  Значение disc используется по умолчанию.

  Пример создания маркированного списка с маркерами в виде окружности:

  • Вариант такой
  • Вариант сякой
  • Вариант эдакий

  В результате список примет, следующий вид:

  

  Создание маркированного списка с маркерами в виде квадратиков:

  • Вариант такой
  • Вариант сякой
  • Вариант эдакий

  Список будет иметь вид:

  

  Атрибут type можно применять не только к тегу

  , но и к тегу
  • . Таким образом можно создать список с разнообразными маркерами.
    • Вариант такой
    • Вариант сякой
    • Вариант эдакий

    В результате получится следующее:

    

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

    Нумерованные списки в HTML представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега

    и вложенных в его тегов

    1. 1. Первая строчка
       2. Вторая строчка
       3. Третья строчка

       Выглядит такой список следующим образом:

       

       По умолчанию нумерация производится арабскими цифрами. Но у тега

       есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type="A") или строчными (type="a") латинскими буквами, римскими цифрами в верхнем (type="I") и нижнем (type="i") регистре.

       Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае.

       Вид списка:

       Вид списка:

       

       Нумерация строчными буквами латинского алфавита:

       Вид списка:

       

       Вид списка:

       

       Вид списка:

       

       Список определений в HTML.

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

       . Тег

       создает контейнер для списка, тег

       устанавливает термин, а тег

       описание или определение термина.

       Записывается данный список следующим образом:

       Термин 1

       Определение термина 1

       Термин 2

       Определение термина 2

       Термин 3

       Определение термина 3

       В результате получится следующий список:

       

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

       Вложенные или многоуровневые списки в HTML.

       Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков.

       Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки.

       • Вариант такой
         1. Первая строчка
         2. Вторая строчка
         3. Третья строчка
       • Вариант сякой
         1. Первая строчка
         2. Вторая строчка
         3. Третья строчка
       • Вариант эдакий
         1. Первая строчка
         2. Вторая строчка
         3. Третья строчка

       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 – без маркера.

       Пример :

       • Верь в лучшее, ожидай худшее.
       • Жизнь - это болезнь, со смертельным исходом.
       • Никогда не говори никогда.

       Результат :

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

       list-style-type: none;

       Пример :

       • Верь в лучшее, ожидай худшее.
       • Никогда не говори никогда.

       Результат :

       

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

       list-style-image

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

       Пример :

       • Верь в лучшее, ожидай худшее.
       • Жизнь - это болезнь со смертельным исходом.
       • Никогда не говори никогда.

       Результат :

       

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

       Пример :

       • Верь в лучшее, ожидай худшее.
       • Жизнь - это болезнь со смертельным исходом.
       • Никогда не говори никогда.

       Результат :

       

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

       текст

       Пример :

       • Верь в лучшее, ожидай худшее.
       • Жизнь - это болезнь со смертельным исходом.
       • Никогда не говори никогда.

       Результат :

       

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

       Пример :

       • Верь в лучшее, ожидай худшее.Пункт 1
       • Жизнь - это болезнь со смертельным исходом.Пункт 2
       • Никогда не говори никогда.Пункт 3
       • Это все что я знал. Пункт 4

       Результат :

       

       Вот и подошла к завершению тема .

       23.02.2017

       Пока нет

       
       

       Всем привет!
       В сегодняшнем уроке я расскажу о том, как в 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; /* Маркеры в виде незакрашенного кружочка */ }

       Полный пример:

       • текст №1
       • текст №2

       Результат:

       

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

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

       Результат:

       

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

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

       Свойство:

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

       

       Li { list-style-position: inside; /* положение маркера */ }

       Цвет маркера в списке
       

       Свойство « COLOR »
       Вам уже известно правило «color », с помощью которого можно не только менять цвет текста, но и цвет маркера. Посмотрите .

       • Текст №1
       • Текст №2

       Результат:

       

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

       Свойство « 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) ". "; /* Выводим число */ }

       Результат:

       

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

       Предыдущая запись
       Следующая запись
       

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

       В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

       Табл. 1. Свойства CSS для управления видом списка

       Свойство	Значение	Описание	Пример
       list-style-type	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none	Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного.	LI {list-style-type: circle} LI {list-style-type: upper-alpha}
       list-style-image	none URL	Устанавливает символом маркера любую картинку.	LI {list-style-image: url(check.gif)}
       list-style-position	outside inside	Выбор положения маркера относительно блока строк текста.	LI {list-style-position: inside}
       list-style		Универсальное свойство, включает одновременно все вышеперечисленные свойства.

       Поскольку тег

       наследует стилевые свойства тега

       или
       , который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL , так и для селектора LI . Так, в примере 1 используется селектор UL , для него и задаются стилевые параметры.

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

       Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

       Рис. 1. Вид списка, измененого с помощью стилей

       Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

       Пример 2. Использование изображений в качестве маркера

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

       Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

       

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

       Некоторые примеры создания различных списков приведен в табл. 2.

       Табл. 2. Возможные виды списков

       Код HTML	Пример
       	работоспособность всех ссылок поддержку разных браузеров читабельность текста
       	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
       	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
       	Нумерованный список с арабскими цифрами: первый второй третий
       	Нумерованный список со строчными римскими цифрами: первый второй третий
       	Нумерованный список с заглавными римскими цифрами: первый второй третий
       	Нумерованный список со строчными буквами латинского алфавита: первый второй третий
       	Нумерованный список с заглавными буквами латинского алфавита: первый второй третий

       Доброго всем времени суток, мои дорогие друзья и читатели. Вчера я справлял и хочу сказать, что прошло всё хорошо, как и планировалось — в семейном кругу. Ну это так и должно было быть. Всё таки сидели в семейном кругу. Ну 19 июня буду отмечать уже с друзьями, так что будет продолжение банкета. Но сегодня мы наконец можем вернуться в рабочие будни (правда я в отпуске) и продолжить изучение html языка.

       Вы знаете? Вчера мы как раз с супругой составляли список того, что нужно покупать в дом, на день рождения, на отдых, и мне как раз пришло в голову: «О. А следующую статью я как раз посвящу спискам в html.» Вообще существует два основных типа, поэтому каждому типу я захотел посвятить отдельную статью. И вот сегодня мы будем изучать маркированный список html.

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

       Компьютерные комплектующие:

       • Материнская плата
       • Оперативная память
       • Жесткий диск
       • Видеокарта
       • И т.д.

       Давайте теперь посмотрим как это всё воспроизвести в html

       Чтобы делать такие списки, нам нужно будет использовать два парных .

       • — unordered list (неупорядоченный список). Этот тег ставится в начале списка и закрывается в самом конце. Он сообщает нам, что здесь будет находиться маркированный неупорядоченный список.
         • — list item (пункт списка). В эти теги заключается каждый элемент списка.

         На деле процедура создания маркированного списка очень легкая и я покажу вам на примере:

         • Peugeot
         • Opel

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

         

         Атрибуты

         Ну и конечно я не могу не рассказать вам про , относящиеся к данным тегам. Правда на самом деле эти атрибуты в html уже не используются, так как всё тоже самое проще и удобнее проделывать через стили, то есть CSS. Но я всё равно хотел бы рассказать вам для общего развития, поэтому я познакомлю вас с атрибутом type и его значениями.

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

         

         • — это значение стоит по умолчанию, так что его вообще нет смысла прописывать. Маркеры выглядят как черные закрашенные кружочки;
           • — благодаря этому значению маркер останется круглым, но будет уже не закрашенным;
             • — в данном случаем маркеры превратятся в маленькие черные квадратики.

               Попробуйте сами посмотреть, как это работает и вы увидите все изменения.

               

               Вложенный список

               Бывают моменты, когда единым списком сыт не будешь и тогда нам просто необходимо сделать вложенный список, чтобы всё правильно распределить. Давайте возьмем наш пример с машинами. В предыдущих примерах я делал просто список автомобилей, а теперь в каждую марку положим еще по несколько моделей.

               Сделать это абсолютно несложно, просто в тот тег

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

                 

                 Теперь сохраняем и запускаем всё это дело в браузере. Смотрите, что у нас получилось: теперь в каждом элементе списка есть еще один новый cписок. Этого-то мы и добивались. И если вы заметили, то маркеры по умолчанию ставятся другие, нежели родительские. Это сделано специально, чтобы не путаться, но вы можете поставить нужный атрибут и выбрать свой маркер. Я думаю, что тут всё должно быть понятно.

                 

                 Но в дальнейшем мы изучим CSS и будем делать уже всё в соответствии, как и надо. Благодаря стилям можно намного улучшить отображение списка и даже сделать собственный маркер. Видите меню у меня на блоге (Главная, Все статьи, Об авторе и т.д.)? Да и вообще можно зайти практически на любой сайт и увидеть подобное меню. Так вот, все эти пункты меню — это элементы списка, только он обработаны через CSS.

                 

                 Ну в общем я думаю, что суть вы уловили. Но если вы хотите хорошо разбираться в HTML и CSS, то я вам настоятельно рекомендую посмотреть курс "HTML5 и CSS3 с нуля до профи ". Благодаря этому курсу вы с легкостью изучите все основы html и css, а также научитесь самостоятельно верстать несколько типов сайтов: сайты-визитки, блоги, интернет-магазины, и даже лендинги. Курс действительно потрясающий.

                 С уважением, Дмитрий Костин.