HTML/CSS/List Style/list style type

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

Changing unordered list markers to 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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Changing unordered list markers</title>
 <style type="text/css">

body { 

   line-height: 1.5em;

} ul { 

   list-style-type: square;

} 

 </style>

</head> <body>

  • Combine.
  • Gradually.
  • Place.
  • Transfer.
  • divide.

</body> </html> 

</source>


Character marker for list

   <source lang="html4strict">

<!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> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> ul { 

 margin-left: 0;
 padding-left: 0;

} ul li { 

 margin-left: 60px;

}

  • .none {
 list-style-type: none;

}

  • .marker {
 float: left;
 margin-left: -60px;
 width: 60px;
 text-align: center;

} </style> </head> <body>

Normal Lists

  • *faux marker

</body> </html> 

</source>


Entity marker

   <source lang="html4strict">

<!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> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> ul { 

 margin-left: 0;
 padding-left: 0;

} ul li { 

 margin-left: 60px;

}

  • .none {
 list-style-type: none;

}

  • .marker {
 float: left;
 margin-left: -60px;
 width: 60px;
 text-align: center;

} </style> </head> <body>

Normal Lists

  • –&ndash;

</body> </html> 

</source>


list-style-type: circle

   <source lang="html4strict">

<!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> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> ul { 

 margin-left: 0;
 padding-left: 0;

} ul li { 

 margin-left: 60px;

}

  • .circle {
 list-style-type: circle;

} </style> </head> <body>

Normal Lists

  • List item with circle bullet

</body> </html> 

</source>


list-style-type: decimal

   <source lang="html4strict">

<!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> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> ul { 

 margin-left: 0;
 padding-left: 0;

} ul li { 

 margin-left: 60px;

}

  • .decimal {
 list-style-type: decimal;

} </style> </head> <body>

Normal Lists

  • List item with numbered bullet

</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 {
               list-style-type: georgian;
           }
       </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-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 {
               list-style-type: lower-greek;
           }
       </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-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 {
               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-latin/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#lower-latin li {
               list-style-type: lower-latin;
           }
           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.
  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: 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 xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { 

list-style-type: lower-roman;

} </style> </head> <body>

  1. V
  2. S
  3. T
  4. P

</body> </html> 

</source>


list-style-type: lower-roman/upper-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#lower-roman li {
               list-style-type: lower-roman;
           }
           ol#upper-roman li {
               list-style-type: upper-roman;
           }
       </style>
   </head>
   <body>
  1. This is the first list item.
  2. This is the second list item.
  3. This is the third list item.
  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: none

   <source lang="html4strict">

<!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> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> ul { 

 margin-left: 0;
 padding-left: 0;

} ul li { 

 margin-left: 60px;

}

  • .none {
 list-style-type: none;

} </style> </head> <body>

Normal Lists

  • -faux marker

</body> </html> 

</source>


list-style-type: square/disc/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">
           li.square {
               list-style-type: square;
           }
           li.disc {
               list-style-type: disc;
           }
           li.circle {
               list-style-type: circle;
           }
       </style>
   </head>
   <body>
  • This list item has a square marker.
  • This list item has a square marker.
  • This list item has a disc marker.
  • This list item has a disc marker.
  • This list item has a circle marker.
  • This list item has a circle 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 {
               list-style-type: upper-greek;
           }
       </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>


UL 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 xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul { 

list-style-type: disc;

} </style> </head> <body>

  • V
  • S
  • T
  • P

</body> </html> 

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