Lists in html and css

W3.CSS Lists

The w3-ul class is used to display a basic list:

Example

Bordered List

The w3-border class adds a border around the list:

Example

List Header

An example of how to add a heading element inside the list item:

Names

Example

List as a Card

The w3-card-number classes can be used to show a list as a card:

Example

Centered List

The w3-center class can be used to center the list items in a list:

Example

Colored List

The w3-color classes can be used to add a color to the list:

Example

Colored List Item

The w3-color classes can be used to add a color to the list item:

Example

Hoverable List

The w3-hoverable class adds a grey background color to each list item on mouse-over:

Example

Example

Closable List Item

Click on the «x» to close/hide a list item:

Example

Tip: The HTML × entity is the preferred icon for close buttons (rather than the letter «X»).

List With Padding

The w3-padding classes can be used to add padding to list items:

Example

Avatar List

Example

w3-button w3-xlarge w3-right»>×

Tip: You will learn more about the w3-bar classes in our W3.CSS Bars and W3.CSS Navigation chapters.

List Width

Lists have a 100% width by default. Use the width property to change this.

Example

Tiny List

Use the w3-tiny class to display a tiny list:

Example

Small List

Use the w3-small class to display a small list:

Example

Large List

Use the w3-large class to display a large list:

Example

XLarge List

Use the w3-xlarge class to display an extra large list:

Example

XXLarge List

Use the w3-xxlarge class to display an XXLarge list:

Example

XXXLarge List

Use the w3-xxxlarge class to display an XXXLarge list:

Example

Jumbo List

Use the w3-jumbo class to display an enormous «jumbo» list:

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS Lists

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Example

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Remove Default Settings

Example

List — Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

When using the shorthand property, the order of the property values are:

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

or
tag, affects the entire list, while properties added to the
tag will affect the individual list items:

Example

ol <
background: #ff9999;
padding: 20px;
>

ul background: #3399ff;
padding: 20px;
>

ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>

ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>

More Examples

Customized list with a red left border
This example demonstrates how to create a list with a red left border.

Full-width bordered list
This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

Источник

Полное руководство по спискам в HTML и CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «A complete guide about lists in HTML and CSS».

Что такое списки

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

Списки в HTML

Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным вариантом оформления. Благодаря спискам пользователи легче воспринимают информацию.

Виды списков

В HTML списки бывают трех видов:

Что такое упорядоченный список?

Упорядоченный список это набор элементов, представленных в определенном порядке. Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.

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

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

Для создания упорядоченных списков используется тег (ordered list – «упорядоченный список»), а для каждого из его элементов – тег (list – «список»).

1. Налейте воду в кастрюлю.
2. Добавьте сахар, чайные листья и специи.
3. Доведите до кипения и подержите на медленном огне около минуты.
4. Добавьте молоко.
5. Доведите до кипения и подержите на медленном огне 3-5 минут.
6. Процедите чай и перелейте его в чайник.

1. Налейте воду в кастрюлю.
2. Добавьте сахар, чайные листья и специи.
3. Доведите до кипения и подержите на медленном огне около минуты.
4. Добавьте молоко.
5. Доведите до кипения и подержите на медленном огне 3-5 минут.
6. Процедите чай и перелейте его в чайник.

Значения по умолчанию:

По умолчанию пункты списка обозначаются арабскими цифрами.

Это можно изменить, используя разные значения CSS-свойства list-style-type.

list-style-type: upper-alpha

list-style-type: upper-roman

list-style-type: lower-alpha

list-style-type: lower-roman

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

Что такое неупорядоченный список?

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

Примеры таких списков – списки покупок, списки запланированных дел.

Для создания упорядоченных списков используется тег (unordered list), а для каждого из его элементов – тег (как и в упорядоченном списке).

Значения по умолчанию:

По умолчанию маркеры элементов представлены в виде кружочков. Это можно изменить, используя все то же CSS-свойство list-style-type.

list-style-type: circle

list-style-type: square

list-style-type: disc

Дальше мы разберем и другие варианты стилей.

Что такое список определений?

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

Вы можете создать список определений при помощи тега (definition list – «список определений»). В пунктах списка термины (term) создаются при помощи тега , а описание (description) – при помощи тега .

See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.

Что такое вложенные списки?

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

Читайте также:  Php function code style

See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.

Стиль списка

Для придания стилей списку используются три CSS-свойства.

list-style-type

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

Это свойство может принимать несколько значений:

• disc (круг)
• square (квадрат)
• circle (окружность)
• decimal (арабские цифры)
• lower-alpha (строчные латинские буквы, =lower-latin)
• lower-roman (римские цифры в нижнем регистре)
• lower-latin (строчные латинские буквы, =lower-alpha)
• lower-greek (строчные греческие буквы)
• upper-alpha (заглавные латинские буквы, =upper-latin)
• upper-roman (римские цифры в верхнем регистре)
• upper-latin (заглавные латинские буквы, =upper-alpha)

С полным списком возможных значений свойства list-style-type можно ознакомиться здесь.

list-style-image

Это свойство используется, чтобы в качестве маркера списка установить изображение. Свойство может принимать два значения: url изображения или none.

See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.

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

list-style-position

Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: inside (внутри) и outside (снаружи).

Пример применения значения inside

Пример применения значения outside

А теперь давайте поиграем с цветами списка

Расцвеченный маркированный список

Вариант 1: элементы списка и маркеры имеют один цвет.

Вариант 2: элементы списка и маркеры имеют разные цвета.

Расцвеченный нумерованный список

Вариант 1: элементы списка и их номера имеют один цвет.

Вариант 2: элементы списка и их номера имеют разные цвета.

Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!

Источник

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example

Unordered HTML List

tag. Each list item starts with the
tag.

The list items will be marked with bullets (small black circles) by default:

Example

Ordered HTML List

tag. Each list item starts with the
tag.

The list items will be marked with numbers by default:

Example

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The tag defines the description list, the tag defines the term (name), and the tag describes each term:

Example

HTML List Tags

Tag	Description
	Defines an unordered list
	Defines an ordered list
	Defines a list item
	Defines a description list
	Defines a term in a description list
	Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник