Linked items css li

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.

Источник

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

Источник

Linked items css li

) and one unordered (
) HTML list:

More «Try it Yourself» examples below.

Definition and Usage

and , the list items will usually be displayed with bullet points.

, the list items will usually be displayed with numbers or letters.

Browser Support

Attributes

Global Attributes

Event Attributes

More Examples

Example

Use of the value attribute in an ordered list:

Example

Set different list style types (with CSS):

Example

Create a list inside a list (a nested list):

Example

Create a more complex nested list:

Related Pages

Default CSS Settings

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.

Источник

Linked items css li

Example of the value attribute:

html> html> head> title>Title of the document. title> head> body> ol> li value="5">Coffee li> li>Tea li> li>Coca Cola li> ol> body> html>

Styling List Item Marker

Example of styling list item marker:

html> html> head> title>Title of the document title> style> ul.a < list-style-type: circle; > ul.b < list-style-type: square; > ol.c < list-style-type: upper-roman; > ol.d < list-style-type: lower-alpha; > style> head> body> h1>The list-style-type property h1> p>Example of unordered lists: p> ul class="a"> li>Coffee li> li>Tea li> li>Coca Cola li> ul> ul class="b"> li>Coffee li> li>Tea li> li>Coca Cola li> ul> p>Example of ordered lists: p> ol class="c"> li>Coffee li> li>Tea li> li>Coca Cola li> ol> ol class="d"> li>Coffee li> li>Tea li> li>Coca Cola li> ol> body> html>

Replace the bullet points with an image with the CSS list-style-image property .

Example of image marker:

html> html> head> title>Title of the document title> style> ul < list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png"); > style> head> body> h2>List-style-image property example h2> ul> li>List item 1 li> li>List item 2 li> li>List item 3 li> ul> body> html>

CSS list-style-position property specifies whether the list marker should appear inside or outside the list-item box.

Example of inside and outside positioning of a marker:

html> html> head> title>Title of the document title> style> .inside < list-style-position: inside; > li < border: 1px solid #666; padding: 5px; > .outside < list-style-position: outside; > li < border: 1px solid #666; padding: 5px; > style> head> body> h2>List-style-position property example h2> p>Here the list-style is positioned "inside". p> ul class="inside"> li>List item 1 li> li>List item 2 li> li>List item 3 li> ul> p>Here the list-style is positioned "outside". p> ul class="outside"> li>List item 1 li> li>List item 2 li> li>List item 3 li> ul> body> html>

Attributes

Attribute	Value	Description
type	1 A a I i disc square circle	Defines the bullet type of ordered or unordered list. The attribute isn’t used anymore. We recommend using the CSS list-style-type or list-style-image property instead, by the help of which you can use images instead of bullets.
value	number	Specifies the number, from which the order list will start. You can use negative values. It works only with the ordered list.

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

• CSS text-shadow property adds shadow to text.
• CSS text-align-last property sets the alignment of the last line of the text.
• CSS line-height property specifies the height of a line.
• CSS letter-spacing property defines the spaces between letters/characters in a text.
• CSS word-spacing property sets the spacing between words.

Источник

Linked items css li

This element includes the global attributes.

type Deprecated Non-standard

This character attribute indicates the numbering type:

• a : lowercase letters
• A : uppercase letters
• i : lowercase Roman numerals
• I : uppercase Roman numerals
• 1 : numbers

This type overrides the one used by its parent element, if any.

Note: This attribute has been deprecated; use the CSS list-style-type property instead.

Examples

For more detailed examples, see the and pages.

Ordered list

ol> li>first itemli> li>second itemli> li>third itemli> ol> 

Result

Ordered list with a custom value

ol type="I"> li value="3">third itemli> li>fourth itemli> li>fifth itemli> ol> 

Result

Unordered list

ul> li>first itemli> li>second itemli> li>third itemli> ul> 

Result

Technical summary

Content categories	None.
Permitted content	Flow content.
Tag omission	The end tag can be omitted if the list item is immediately followed by another element, or if there is no more content in its parent element.
Permitted parents	An , , or element. Though not a conforming usage, the obsolete can also be a parent.
Implicit ARIA role	listitem when child of an ol , ul or menu
Permitted ARIA roles	menuitem , menuitemcheckbox , menuitemradio , option , none , presentation , radio , separator , tab , treeitem
DOM interface	HTMLLIElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Other list-related HTML Elements: , , , and the obsolete ;
• CSS properties that may be specially useful to style the
• element:
  • the list-style property, to choose the way the ordinal is displayed,
  • CSS counters, to handle complex nested lists,
  • the margin property, to control the indent of the list item.

  Found a content problem with this page?

  This page was last modified on Jul 17, 2023 by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  Читайте также:  Python unix epoch to time