HTML/CSS/CSS Attributes and Javascript Style Properties/list style type

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

list-style-type: armenian

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ol {
               font-family: sans-serif;
               list-style-type: armenian;
           }
       </style>
   </head>
   <body>
  1. first list item.
  2. second list item.
  3. third list item.
  4. fourth list item.
  5. fifth list item.
   </body>

</html> 

</source>


list-style-type: circle

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ul {
               font-family: sans-serif;
           }
           li.circle {
               list-style-type: circle;
           }
       </style>
   </head>
   <body>
  • This list item has a circle marker.
  • This list item has a circle marker.
   </body>

</html> 

</source>


list-style-type: decimal

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ol {
               font-family: sans-serif;
           }
           ol#decimal li {
               list-style-type: decimal;
           }
       </style>
   </head>
   <body>
  1. This is the first list item.
  2. This is the second list item.
  3. This is the third list item.
   </body>

</html> 

</source>


list-style-type: decimal-leading-zero

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ol {
               font-family: sans-serif;
           }
           ol#decimal-leading-zero li {
               list-style-type: decimal-leading-zero;
           }
       </style>
   </head>
   <body>
  1. This is the first list item.
  2. This is the second list item.
  3. This is the third list item.
   </body>

</html> 

</source>


list-style-type: disc

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ul {
               font-family: sans-serif;
           }
           li.disc {
               list-style-type: disc;
           }
       </style>
   </head>
   <body>
  • This list item has a disc marker.
  • This list item has a disc marker.
   </body>

</html> 

</source>


"list-style-type" Example

   <source lang="html4strict">

<html> <body>

  1. Item 1.
  2. Item 2.
  3. Item 3.
  4. Item 4.
  5. Item 5.
  <input type="button" 
         value="Set listStyleType to "circle"" 
         onclick="myL.style.listStyleType="circle"">
  

  <input type="button" 
         value="Set listStyleType to "square"" 
         onclick="myL.style.listStyleType="square"">
  

  <input type="button" 
         value="Set listStyleType to "disc""   
         onclick="myL.style.listStyleType="disc"">
  

  <input type="button" 
         value="Set listStyleType to "lower-alpha"" 
         onclick="myL.style.listStyleType="lower-alpha"">
  

  <input type="button" 
         value="Set listStyleType to "lower-roman"" 
         onclick="myL.style.listStyle="lower-roman"">

</body> </html> 


     </source>


list-style-type: georgian

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ol {
               font-family: sans-serif;
               list-style-type: georgian;
           }
       </style>
   </head>
   <body>
  1. first list item.
  2. second list item.
  3. third list item.
  4. fourth list item.
  5. fifth list item.
   </body>

</html> 

</source>


list-style-type: lower-greek

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ol {
               font-family: sans-serif;
               list-style-type: lower-greek;
           }
       </style>
   </head>
   <body>
  1. first list item.
  2. second list item.
  3. third list item.
  4. fourth list item.
  5. fifth list item.
   </body>

</html> 

</source>


list-style-type: lower-latin

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ol {
               font-family: sans-serif;
               list-style-type: lower-latin;
           }
       </style>
   </head>
   <body>
  1. This is the first list item.
  2. This is the second list item.
  3. This is the third list item.
  4. This is the fourth list item.
  5. This is the fifth list item.
   </body>

</html> 

</source>


list-style-type: lower-roman

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ol {
               font-family: sans-serif;
               list-style-type: lower-roman;
           }
       </style>
   </head>
   <body>
  1. first list item.
  2. second list item.
  3. third list item.
  4. fourth list item.
  5. fifth list item.
   </body>

</html> 

</source>


list-style-type: square

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ul {
               font-family: sans-serif;
           }
           li.square {
               list-style-type: square;
           }
       </style>
   </head>
   <body>
  • This list item has a square marker.
  • This list item has a square marker.
   </body>

</html> 

</source>


list-style-type: upper-greek

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ol {
               font-family: sans-serif;
               list-style-type: upper-greek;
           }
       </style>
   </head>
   <body>
  1. first list item.
  2. second list item.
  3. third list item.
  4. fourth list item.
  5. fifth list item.
   </body>

</html> 

</source>


list-style-type: upper-latin

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           ol {
               font-family: sans-serif;
           }
           ol#upper-latin li {
               list-style-type: upper-latin;
           }
       </style>
   </head>
   <body>
  1. This is the first list item.
  2. This is the second list item.
  3. This is the third list item.
   </body>

</html> 

</source>


The list-style-type Property

   <source lang="html4strict">

Value Marker none None disc (default) A filled-in circle circle An empty circle square A filled-in square 

</source>


The table that follows lists the popularly supported values for ordered lists.

   <source lang="html4strict">

Value Meaning Example decimal Number 1, 2, 3, 4, 5 decimal-leading-zero 0 before the number 01, 02, 03, 04, 05 lower-alpha Lowercase alphanumeric a, b, c, d, e 

                         characters

upper-alpha Uppercase alphanumeric A, B, C, D, E 

                       characters

lower-roman Lowercase Roman numerals i, ii, iii, iv, v upper-roman Uppercase Roman numerals I, II, III, IV, V 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/list_style_type&oldid=4886»