HTML/CSS/List Style/list style

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

list-style all values

 
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
body {
  background-color: #ffffff;
}
li.a {
  list-style: none;
}
li.b {
  list-style: disc;
}
li.c {
  list-style: circle;
}
li.d {
  list-style: square;
}
li.e {
  list-style: decimal;
}
li.f {
  list-style: lower-alpha;
}
li.g {
  list-style: upper-alpha;
}
li.h {
  list-style: lower-roman;
}
li.i {
  list-style: upper-roman;
}
</style>
</head>
<body>
<ul>
  <li class="a">Point one</li>
  <li class="b">Point two</li>
  <li class="c">Point three</li>
  <li class="d">Point four</li>
  <li class="e">Point five</li>
  <li class="f">Point six</li>
  <li class="g">Point seven</li>
  <li class="h">Point eight</li>
  <li class="i">Point nine</li>
</ul>
</body>
</html>



list-style: circle

 
<!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">
    <head>
        <title>list-style</title>
        <style rel="stylesheet" type="text/css">
li {
    background: pink;
}
li#marker {
    list-style: circle;
}     
        </style>
    </head>
    <body>
        <ul>

            <li id="marker">
                Just the marker.
            </li>
        </ul>
    </body>
</html>



list-style: inside

 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>list-style</title>
        <style rel="stylesheet" type="text/css">
li {
    background: pink;
}
li#position {
    list-style: inside;
}  
        </style>
    </head>
    <body>
        <ul>

            <li id="position">
                Just the position.
            </li>
        </ul>
    </body>
</html>



list-style: square inside

 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>list-style</title>
        <style rel="stylesheet" type="text/css">
li {
    background: pink;
}
li#marker-inside {
    list-style: square inside;
}
        
        </style>
    </head>
    <body>
        <ul>
            <li id="marker-inside">
                The marker and the position.
            </li>
        </ul>
    </body>
</html>



list-style: square url("arrow.png")

 
<!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">
    <head>
        <title>list-style</title>
        <style rel="stylesheet" type="text/css">
li {
    background: pink;
}
li#marker-image {
    list-style: square url("arrow.png");
}
        
        </style>
    </head>
    <body>
        <ul>
            <li id="marker-image">
                The marker and the image.
            </li>
        </ul>
    </body>
</html>



list-style: url("arrow.png")

 
<!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">
    <head>
        <title>list-style</title>
        <style rel="stylesheet" type="text/css">
li {
    background: pink;
}
li#arrow-only {
    list-style: url("arrow.png");
}
        
        </style>
    </head>
    <body>
        <ul>
            <li id="arrow-only">
                Just the image.
            </li>
        </ul>
    </body>
</html>



list-style: url("arrow.png") inside

 
<!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">
    <head>
        <title>list-style</title>
        <style rel="stylesheet" type="text/css">
li {
    background: pink;
}
li#arrow-inside {
    list-style: url("arrow.png") inside;
}
        
        </style>
    </head>
    <body>
        <ul>
            <li id="arrow-inside">
                The image and the position.
            </li>
        </ul>
    </body>
</html>



The image and the position can be specified

 
      <!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">
          <head>
              <title>list-style</title>
              <style rel="stylesheet" type="text/css">
      li {
          background: lightyellow;
          border: 1px solid gold;
          padding: 5px;
          margin: 2px;
      }
      li#image-position {
          list-style: url("arrow.png") inside;
      }
              
              </style>
          </head>
          <body>
              <ul>
                  <li id="image-position">
                      The image and the position can be specified.
                  </li>
              </ul>
          </body>
      </html>



The marker and the image can be specified

 
      <!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">
          <head>
              <title>list-style</title>
              <style rel="stylesheet" type="text/css">
      li {
          background: lightyellow;
          border: 1px solid gold;
          padding: 5px;
          margin: 2px;
      }
      li#marker-image {
          list-style: square url("http://www.wbex.ru/style/logo.png");
      }
              
              </style>
          </head>
          <body>
              <ul>
                  <li id="marker-image">
                      The marker and the image can be specified.
                  </li>
              </ul>
          </body>
      </html>



The marker and the position can be specified

 
      <!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">
          <head>
              <title>list-style</title>
              <style rel="stylesheet" type="text/css">
      li {
          background: lightyellow;
          border: 1px solid gold;
          padding: 5px;
          margin: 2px;
      }
      li#marker-position {
          list-style: square inside;
      }
              
              </style>
          </head>
          <body>
              <ul>
                  
                  <li id="marker-position">
                      The marker and the position can be specified.
                  </li>
              </ul>
          </body>
      </html>



You can specify only a marker

 
      <!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">
          <head>
              <title>list-style</title>
              <style rel="stylesheet" type="text/css">
      li {
          background: lightyellow;
          border: 1px solid gold;
          padding: 5px;
          margin: 2px;
      }
      li#marker {
          list-style: square;
      }
              
              </style>
          </head>
          <body>
              <ul>
                  <li id="marker">You can specify only a marker.</li>
              </ul>
          </body>
      </html>



You can specify only a marker image

 
      <!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">
          <head>
              <title>list-style</title>
              <style rel="stylesheet" type="text/css">
      li {
          background: lightyellow;
          border: 1px solid gold;
          padding: 5px;
          margin: 2px;
      }
      li#image {
          list-style: url("arrow.png");
      }
              
              </style>
          </head>
          <body>
              <ul>
                 <li id="image">You can specify only a marker image.</li>
              </ul>
          </body>
      </html>



You can specify only the position.

 
      <!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">
          <head>
              <title>list-style</title>
              <style rel="stylesheet" type="text/css">
      li {
          background: lightyellow;
          border: 1px solid gold;
          padding: 5px;
          margin: 2px;
      }
      li#position {
          list-style: inside;
      }
              
              </style>
          </head>
          <body>
              <ul>
                  <li id="position">You can specify only the position.</li>
              </ul>
          </body>
      </html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/List_Style/list_style&oldid=5621»