What attributes are used to control the style of lists in css

Control the attributes of the list style: 1. "list-style-type", set the type of the list mark; 2. "list-style-position", set the placement position of the mark; 3. "list-style -image", set the image as a list mark; 4. "list-style".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

List attribute

(1) list-style-type: used to control the appearance shape of the marker.

For unordered lists, the values ​​of this attribute are as follows: 1. none, no marker; 2. disc (default value), filled circle; 3. circle, hollow circle; 4. square, filled square.

For ordered lists, the values ​​of this attribute are as follows: 1. decimal, numbers; 2. decimal-leading-zero, numbers preceded by 0; 3. lower-alpha, lowercase letters; 4. upper- alpha, uppercase letters; 5. lower-roman, lowercase Roman letters; 6. upper-roman, uppercase Roman letters.

(2) list-style-position: This attribute is used to declare the position of the list mark relative to the content of the list item.

The outside flag will be placed at a certain distance from the border of the list item, but this distance is undefined in CSS. Inside flags are treated as if they were inline elements inserted at the front of the list item's content. For nested lists, you can use the value inherit to specify that the value of the list-style-position attribute should be inherited from the parent element.

(3) list-style-image: Specify the image as the mark.

Use as follows:

li { list-style-image: url("haha.gif") }

It should be noted that if you are using a nested list, this attribute will inherit the parent element. In order to prevent inheritance, you must change list-style-image Set to none.

(4) list-style: The abbreviated form

can express multiple attributes among the above three attributes at one time and can appear in any order.

The test rendering is as follows:

The CSS code is as follows:

li { border: red solid thin; }
ul { list-style: square outside }
ol { list-style: upper-alpha inside; }
 ul.one { list-style: url("test1.jpg") inside;  }

The HTML code is as follows:

	
		  
		
		
		
	

	
	
		

			

				
无序列表样式
				
有序列表样式
				
使用图片做标记符
			
			

				

					

						
one
						
two
						
three
					
				
				

					

						
one
						
two
						
three
					
				
				

					

						
one
						
two
						
three
					
				
			
			

				
注意outside与inside其标记符与li元素框的位置
			
		
		
	

(Learning video sharing: css video tutorial)

The above is the detailed content of What attributes are used to control the style of lists in css. For more information, please follow other related articles on the PHP Chinese website!