HTML/CSS/CSS Attributes and Javascript Style Properties/counter increment
Содержание
counter-increment: paragraphNumber
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p:before {
content: counter(paragraphNumber, upper-roman) ": ";
} h1 {
counter-reset: paragraphNumber;
} p {
counter-increment: paragraphNumber;
} </style> </head> <body>
Heading One
Here is a paragraph.
Here is a paragraph.
Heading Two
Here is a paragraph.
Here is a paragraph.
Heading Three
Here is a paragraph.
Here is a paragraph.
</body> </html>
</source>
LI counter-increment
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> ol {
counter-reset: Item
} li:before {
content: counter(Item) " "; counter-increment: Item
} </style> </head> <body>
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
</body> </html>
</source>
List counter-increment: item
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> ol {
counter-reset: item
} li {
display: block;
} li:before {
counter-increment: item; content: counters(item, ".") " ";
} </style> </head> <body>
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
</body> </html>
</source>
List counter-reset: item
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> ol {
counter-reset: item
} li {
display: block;
} li:before {
counter-increment: item; content: counters(item, ".") " ";
} </style> </head> <body>
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
</body> </html>
</source>