CSS UL (list style)

CSS Ul (List style)

CSS List properties function as follows:

• To set a different list item to mark as an ordered list
• To set a different list item to mark as unordered list
• Set list items to be marked as images

First, List

In HTML, there are two types of lists:

• Unordered List-list item markers with special graphics (such as small black dots, small squares, etc.)
• Sequence table-the list item is marked with a number or letter

Using CSS, you can list further styles and use the image as a list item marker.

Ii. different list item markers

The List-style-type property specifies the type of the list item tag:

UL.A{List-style-type:Circle;}/*unordered, Hollow circle*/ul.b{List-style-type:Square;}/*unordered, achieve four square*/ol.c{List-style-type:Upper-roman;}/*orderly, sort of Roman numerals*/OL.D{List-style-type:Lower-alpha;}/*ordered, lowercase alphabetical order*/

List-style-type Property Value:

Value	Describe
None	No tag
Disc	Default. Mark is a solid circle
Circle	Mark is a hollow circle
Square	Mark is a solid block
Decimal	Tag is a number
Decimal-leading-zero	0 The number marks that begin with. (01, 02, 03, etc.)
Lower-roman	Lowercase roman Numerals (i, II, III, IV, V, etc.)
Upper-roman	Uppercase Roman Numerals (I, II, III, IV, V, etc.)
Lower-alpha	lowercase English Letter The marker is Lower-alpha (A, B, C, D, E, etc.)
Upper-alpha	Uppercase English Letters The marker is Upper-alpha (A, B, C, D, E, etc.)
Lower-greek	Lowercase Greek letters (alpha, beta, gamma, etc.)
Lower-latin	Lowercase Latin alphabet (A, B, C, D, E, etc.)
Upper-latin	Uppercase Latin alphabet (A, B, C, D, E, etc.)
Hebrew	The traditional Hebrew numbering method
Armenian	The traditional Armenian numbering method
Georgian	Traditional Georgian numbering method (an, ban, gan, etc.)
Cjk-ideographic	Simple ideographic Numbers
Hiragana	The marks are: A, I, U, e, O, Ka, ki, etc. (Japanese Katakana)
Katakana	The marks are: A, I, U, E, O, KA, KI, etc. (Japanese Katakana)
Hiragana-iroha	The markings are: I, Ro, ha, ni, ho, he, to, etc. (Japanese Katakana)
Katakana-iroha	The markings are: I, RO, HA, NI, HO, HE, to, etc. (Japanese Katakana)

Iii. images that are tagged as list items

List-style-image to specify an image for a list item tag, use the list-style image property:

ul {    list-style-image: url (' sqpurple.gif ');}

The above example is not the same in all browsers, IE and opera display image markers a little higher than Firefox, Chrome and Safari.

If you want to place the same image logo on all browsers, you should use a browser compatibility solution, as follows

Browser Compatibility Solutions:

Also in all browsers, the following example will show the image tag:

ul {    list-style-type: none;     padding: 0px;     margin: 0px;} ul Li {    background-image: url (sqpurple.gif);     background-repeat: no-repeat;     background-position: 0px 5px;      padding-left: 14px;}

Example Explanation:

Ul:

• Set list style type to no delete list item marker
• Set padding and margins 0px (browser compatibility)

All Li in ul:

• Set the URL of the image and set it to show only once (No duplicates)
• Location of the position image you need (left 0px and up and down 5px)
• Use the Padding-left property to place text in the list

Iv. relative content Draw list markers

The List-style-position property indicates how to draw a list item tag relative to the object's content, the property value:

Effect:

V. List-Shorthand properties

You can specify all of the list properties in a single property. This is known as the shorthand attribute.

To use the shorthand attribute for the list, set the list style property as follows:

ul {    list-style: square url ("Sqpurple.gif");}

The following properties can be set sequentially:

• List-style-type
• List-style-position
• List-style-image

If the above values are missing one, the remainder is still in the specified order, and it is not related.

Vi. All CSS List properties

Vii. Sample Code

/*unordered list*/UL.A{List-style-type:Circle;}/*unordered, Hollow circle "0"*/ul.b{List-style-type:Disc;}/*unordered, Solid circle ""*/ul.c{List-style-type:Square;}/*unordered, Solid square ""*//*list with sequence*/OL.D{List-style-type:Armenian;}/*orderly, traditional Armenian numerals*/OL.E{List-style-type:cjk-ideographic;}/*an orderly, plain, ideographic figure*/OL.F{List-style-type:decimal;}/*ordered, numbers 1, 2, 3*/OL.G{List-style-type:Decimal-leading-zero;}/*Orderly, Number 01, 02,*/ol.h{List-style-type:Georgian;}/*orderly, the traditional George number*/ol.i{List-style-type:Hebrew;}/*Orderly, Traditional Hebrew numerals*/OL.J{List-style-type:Hiragana;}/*ordered, Japanese hiragana characters*/OL.K{List-style-type:Hiragana-iroha;}/*ordered, Japanese hiragana serial number*/OL.L{List-style-type:Katakana;}/*ordered, Japanese katakana characters*/OL.M{List-style-type:Katakana-iroha;}/*ordered, Japanese katakana serial number*/OL.N{List-style-type:Lower-alpha;}/*orderly, lowercase English letters A, B, c ...*/OL.O{List-style-type:Lower-greek;}/*orderly, basic Greek small letter*/OL.P{List-style-type:Lower-latin;}/*ordered, lowercase latin alphabet*/ol.q{List-style-type:Lower-roman;}/*ordered, lowercase roman numerals I, II, III ...*/OL.R{List-style-type:Upper-alpha;}/*orderly, uppercase English letters A, B, C ...*/Ol.s{List-style-type:Upper-latin;}/*ordered, uppercase Latin alphabet*/ol.t{List-style-type:Upper-roman;}/*orderly, uppercase Roman numerals I, II, III ...*/ol.u{List-style-type:None;}/*do not use bullets*/OL.V{List-style-type:Inherit;}/*Inheritance*/

CSS UL (list style)