HTML/CSS/List Style/list style type

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

Changing unordered list markers to square

 
<!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>
  <ul>
    <li>Combine.</li>
    <li>Gradually.</li>
    <li>Place.</li>
    <li>Transfer.</li>
    <li>divide.</li>
  </ul>
</body>
</html>



Character marker for list

 

<!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>
<div id="section1">
    <h2>Normal Lists</h2> 
    
    <ul>
       <li class="none"><span class="marker">*</span>faux marker</li> 
    </ul>
</div> 

</body>
</html>



Entity marker

 

<!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>
<div id="section1">
    <h2>Normal Lists</h2> 
    
    <ul>
       <li class="none"><span class="marker">&ndash;</span>&amp;ndash;</li> 
    </ul>
</div> 

</body>
</html>



list-style-type: circle

 
<!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>
<div id="section1">
    <h2>Normal Lists</h2> 
    
    <ul>
       <li class="circle">List item with circle bullet</li> 
    </ul>
</div> 

</body>
</html>



list-style-type: decimal

 
<!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>
<div id="section1">
    <h2>Normal Lists</h2> 
    
    <ul>
      <li class="decimal">List item with numbered bullet</li> 
    </ul>
</div> 

</body>
</html>



list-style-type: georgian

 
<!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>
        <ol>
            <li>This is the first list item.</li>
            <li>This is the second list item.</li>
            <li>This is the third list item.</li>
            <li>This is the fourth list item.</li>
            <li>This is the fifth list item.</li>
        </ol>
    </body>
</html>



list-style-type: lower-greek

 
<!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>
        <ol>
            <li>This is the first list item.</li>
            <li>This is the second list item.</li>
            <li>This is the third list item.</li>
            <li>This is the fourth list item.</li>
            <li>This is the fifth list item.</li>
        </ol>
    </body>
</html>



list-style-type: lower-latin

 
<!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>
        <ol>
            <li>This is the first list item.</li>
            <li>This is the second list item.</li>
            <li>This is the third list item.</li>
            <li>This is the fourth list item.</li>
            <li>This is the fifth list item.</li>
        </ol>
    </body>
</html>



list-style-type: lower-latin/upper-latin

 
<!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>
        <ol id="lower-latin">
            <li>This is the first list item.</li>
            <li>This is the second list item.</li>
            <li>This is the third list item.</li>
        </ol>
        <ol id="upper-latin">
            <li>This is the first list item.</li>
            <li>This is the second list item.</li>
            <li>This is the third list item.</li>
        </ol>
    </body>
</html>



list-style-type: lower-roman

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

    <ol>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ol>
  
</body>
</html>



list-style-type: lower-roman/upper-roman

 
<!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>
        <ol id="lower-roman">
            <li>This is the first list item.</li>
            <li>This is the second list item.</li>
            <li>This is the third list item.</li>
        </ol>
        <ol id="upper-roman">
            <li>This is the first list item.</li>
            <li>This is the second list item.</li>
            <li>This is the third list item.</li>
        </ol>
    </body>
</html>



list-style-type: none

 
<!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>
<div id="section1">
    <h2>Normal Lists</h2> 
    
    <ul>
       <li class="none"><span class="marker">-</span>faux marker</li> 
    </ul>
</div> 

</body>
</html>



list-style-type: square/disc/circle

 
<!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>
        <ul>
            <li class="square">This list item has a square marker.</li>
            <li class="square">This list item has a square marker.</li>
            <li class="disc">This list item has a disc marker.</li>
            <li class="disc">This list item has a disc marker.</li>
            <li class="circle">This list item has a circle marker.</li>
            <li class="circle">This list item has a circle marker.</li>
        </ul>
    </body>
</html>



list-style-type: upper-greek

 
<!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>
        <ol>
            <li>This is the first list item.</li>
            <li>This is the second list item.</li>
            <li>This is the third list item.</li>
            <li>This is the fourth list item.</li>
            <li>This is the fifth list item.</li>
        </ol>
    </body>
</html>



UL list-style-type: disc;

 
<!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>
  
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>