HTML/CSS/CSS Attributes and Javascript Style Properties/counter increment

Материал из Web эксперт
Перейти к: навигация, поиск

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>

  1. List Item
  2. List Item
    1. List Item
    2. List Item
      1. List Item
      2. List Item
    3. List Item
  3. 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>

  1. List Item
  2. List Item
    1. List Item
    2. List Item
      1. List Item
      2. List Item
    3. List Item
  3. 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>

  1. List Item
  2. List Item
    1. List Item
    2. List Item
      1. List Item
      2. List Item
    3. List Item
  3. List Item

</body> </html>

</source>