HTML/CSS/CSS Attributes and Javascript Style Properties/text indent

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

  • text indent: -0.75em
  •    <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 {

    width: 30%;
    padding: 0 0 0.75em 0; 
    margin: 0; 
    list-style: none;
    

    } li {

    text-indent: -0.75em; 
    margin: 0.33em 0.5em 0.5em 1.5em;
    

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

    Table of Contents

    • D
    • P
    • B
    • A?
    • S

    </body> </html>

    </source>
       
      
    


    text-indent: 25%

       <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">
               p {
                   text-indent: 25%;
                   width: 200px;
               }
           </style>
       </head>
    

    <body>

    This is a test. This is a test. This is a test. This is a test.

    </body> </html>

    </source>
       
      
    


    text-indent: 25px;

       <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">
         p {
             text-indent: 25px;
             width: 200px;
         }
           </style>
       </head>
       <body>
    

    This is a test. This is a test. This is a test. This is a test.

       </body>
    

    </html>

    </source>
       
      
    


    text-indent: -25px (positive value)

       <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">
         p {
             text-indent: -25px;
             width: 200px;
         }
           </style>
       </head>
       <body>
    

    This is a test. This is a test. This is a test. This is a test.

       </body>
    

    </html>

    </source>
       
      
    


    text-indent: 3em

       <source lang="html4strict">
    
    

    <?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>

     <title>CSS Example</title>
     <style rel="stylesheet" type="text/css">
    

    body {

     color: #000000;
     background-color: #ffffff;
     font-family: arial, verdana, sans-serif;
     font-size: 12px;
    

    } .indent {

     text-indent: 3em;
    

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

    text-indent

    aligned with the left-hand side of the browser window.

    The content of this paragraph should be indented by 3 em.

    </body> </html>

    </source>
       
      
    


    text-indent: -5%

       <source lang="html4strict">
    
    

    <html> <head> <title>Percentages Demo</title> <style type="text/css"> p {text-indent: -5%;

              margin-left: 25%;
              margin-right: 15%;
              font-size: 150%;
    

    </style> </head> <body>

    This paragraph"s font and margins have been set with percentages. The indent was set with a negative percentage.

    </body> </html>

    </source>
       
      
    


    "text-indent" Example

       <source lang="html4strict">
       
    

    <html> <body>

    This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px. This is a sample paragraph with an indent of 100px.

    </body> </html>


    </source>