The format attribute of the list (list) in CSS

The format attribute of the list (list) in CSS


The CSS lesson below Taimienphi.vn will introduce you to the list format properties in CSS. Also readers can refer to some other CSS lessons on Taimienphi.vn to learn about the Margin attribute in CSS.


CSS format attributes (list) in CSS include:

– Properties list-style-type Allows you to control the shape of the icons that introduce the items in the list.

– Properties list-style-position Specifies the position of the icons where they appear.

– Properties list-style-image Assign images to mark labels instead of numbers or bullet point (•) symbols to list items.

– Properties list-style is understood as an abbreviated attribute of the above properties.

– Properties marker-offset Determine the space between markers and text in a list.

The format attribute of the list (list) in CSS

Refer to the following CSS lesson of Taimienphi.vn to learn in detail the list format attributes in CSS.

Table of Contents:
1. List format attributes in HTML and CSS
2. The list format attribute in the CSS
2.1. The list-style-type attribute
2.2. The list-style-image attribute
2.3. The list-style-position attribute
2.4. The list-style-type: none property
2.5. The shortened list-style attribute
2.6. Add background color to the list item in the CSS list
2.7. CSS format attributes (list) in CSS

1. List format attributes in HTML and CSS

In HTML there are 2 main types of lists:

– unordered lists (ul tags): List items are marked with dots.

ordered lists (ol tag): List items are marked with numbers or letters.

The list format attributes in CSS allow:

– Set up bookmark different list items for ordered lists (ordered list).

– Set up bookmark different list items for unordered lists (unordered lists).

– Set images as labels to mark list items.

– Add a background color to lists and list items.

2. The list format attribute in the CSS

2.1 List-style-type attribute

Properties list-style-type in CSS specify the type of symbol used to mark list items, such as dots, squares, numbers, etc.

For example:

list of css properties list

The output will look like the following:

list of css list in css 2

2.2 List-style-image attribute

Properties list-style-image specify images to be used as markup tags instead of using numbers or dot symbols, numbers, etc. to introduce list items.

For example:

list of css list in css 3

The output will look like the following:

list of css list in css 4

2.3. The list-style-position attribute

Properties list-style-position Locate where the marker icon appears.

Inside:

– “list-style-position: outside; “ means the marker icons are outside the list of items flow.

“list-style-position: inside;” means the marker icons are inside a list of items.

For example:

list of css list in css 5

The output will look like the following:

list of css list in css 6

2.4. The list-style-type: none property

The list-style-type: none attribute is used to delete icons and labels that mark items in a list. Note the list must be aligned and default padding.

To delete icons, labels that mark items in a list, we add margin: 0 and padding: 0 to enter ul or ol.

For example:

list of css list in css 7

The output will look like the following:

Listed list css in CSS 8

2.5. The shortened list-style attribute

Properties list-style Shorten is used to set all list format attributes in one declaration.

For example:

list of css list in css 9

The output will look like the following:

list of css list in css 10

When using summary attribute, the order of attribute values ​​are:

– Properties list-style-type (If the list-style-image attribute is specified, the value of this attribute will be displayed if the image is corrupted, cannot be displayed).

– Properties list-style-position (specify the location of icons, labels marking list items that appear inside or outside the content stream).

– Properties list-style-image (specify images as labels that mark the list items).

If one of the above attribute values ​​is missing, the default value for the missing attribute will be inserted (if any).

2.6. Add background color to the list item in the CSS list

By adding a background color to categories in a list to make the list stand out even more.

Any attributes are added to the tags ol or ul all affect the whole list. Attributes added li card Only affect individual listing items.

For example:

list of listed properties in css 11

The output will look like the following:

list of css list in css 12

2.7. CSS format attributes (list) in CSS

The following table lists the list format properties in CSS:

Listed list properties in CSS 13

https://thuthuat.taimienphi.vn/thuoc-tinh-dinh-dang-danh-sach-list-trong-css-50597n.aspx
The above article Taimienphi.vn has just introduced you to the list format attributes (list) in CSS. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article. In the next CSS lesson, Taimienphi.vn will introduce you more about properties Padding in CSS.

.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *