How to realize automatic numbering in css
This article mainly shows you "css how to achieve automatic numbering", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css how to achieve automatic numbering" this article.
I. automatic numbering
Automatic numbering in CSS2.1 is controlled by two attributes: "counter-increment" and "counter-reset". The counters defined by these properties (counter) are used with the counter () and counters () functions of the "content" property.
'counter-increment'
Syntax:
Counter-increment: [?] + | none | inherit
Description:
Initial: no
For: all elements
Inheritance: no
Percentage: NCMA
Media: all
Calculated values: as specified
One or more names of counters (identifiers) accepted by the counter-increment' property, each optionally followed by an integer. Integers represent the degree of increment of the counter each time an element appears, with a default increment of 1, allowing zeros and negative integers.
'counter-reset'
Syntax:
Counter-reset: [?] + | none | inherit
Description:
Initial: no
For: all elements
Inheritance: no
Percentage: NCMA
Media: all
Calculated values: as specified
The counter-reset property contains one or more names of counters, each optionally followed by a list of integers. The integer gives the value set by the counter each time an element appears. The default value is 0.
Note: the keywords' none','inherit' 'and' initial' 'must not be used as counter names; the value' none' itself means that the counter is not reset, 'inherit' itself has its usual meaning (inheritance), and "initial" is reserved for future use.
Example: shows how to number chapters using "Chapter 1", "1.1", "1.2", etc.
Html Code:
Headline
Subtitle 1
Subtitle 2
Css Code:
Body {
Counter-reset:chapter;/* create chapter counter range * /
}
H2:before {
Content: chapter "counter (chapter)", "
Counter-increment:chapter;/* adds 1 percent / to the chapter
}
H2 {
Counter-reset:section;/* sets the section to 0 percent /
}
H3:before {
Content:counter (chapter) "." counter (section)"
Counter-increment:section
}
The above is all the contents of the article "how to achieve automatic numbering in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
