Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.