HTML/CSS/Text/p

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

Change color and font size of paragraph

 
<!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" title="text/css">
.warningText {
    color: #ff0000;
    font-size: 120%;
}
</style>
</head>
<body>
    <p class="warningText">this is a test. this is a test. this is a test. </p>
  <p>Only <span class="warningText">this is a test. </span> this is a test. </p>
</body>
</html>



Different methods of separating paragraphs

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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>Different methods of separating paragraphs</title>
  <style type="text/css">
    body {
      font-size: 12px;
    }
    h1 { 
      margin: 2em 0 0 0;
      padding: 0;
    }
    div {
      margin: 0;
      width: 33em;
      font: 1em/1.5em Georgia, serif;
    }
    div.space p {
      margin: 0.5em 0 0 0;
      padding: 0;
    }
    div.space p.first {
      margin: 0;
    }
    div.indent p {
      margin: 0;
      padding: 0;
      text-indent: 1.5em;      
    }
    div.indent p.first {
      text-indent: 0;
    }
  </style>
</head>
<body>
  <div class="space">
    <h1>Paragraphs separated by space</h1>
    <p class="first">
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  </div>
  <div class="indent">
    <h1>Paragraphs separated by indenting</h1>
    <p class="first">
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  </div>    
</body>
</html>



Get attribute of a paragraph in Javascript

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Shopping list</title>
  <style type="text/css">
p {
  color: yellow;
  font-family: "arial", sans-serif;
  font-size: 1.2em;
}
body {
  color: white;
  background-color: black;
}
#purchases {
  border: 1px solid white;
  background-color: #333;
  color: #ccc;
  padding: 1em;
}
  </style>
  </head>
  <body>
    <h1>Title</h1>
    <p title="asdf">This is a test. </p>
  <p>This is just a test</p>
  <script type="text/JavaScript">
  var paras = document.getElementsByTagName("p");
  for (var i=0; i< paras.length; i++) {
    var title_text = paras[i].getAttribute("title");
    if (title_text != null) {
    alert(title_text);
    }
  }
  </script>
  </body>
</html>



Paragraph highlighting

 
<!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>
  <title>A Cautionary Demo</title>
  <style rel="stylesheet" type="text/css" media="All">
.danger {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  background-color: red;
  color: white;
  margin-left: 25%;
  margin-right: 25%;
  border: 3px solid red;
} 
  </style>
</head>
<body>
  <div class="danger ">this is a test. </div>
</body>
</html>



Paragraphs tag

 
<!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>Paragraphs</title>
</head>
<body>
  <p>This is a text</p>
</body>
</html>



paragraph with different font

 
<!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#times-new-roman {
          font-family: "Times New Roman";
      }
      p#arial {
          font-family: Arial;
      }
        </style>
    </head>
    <body>
    <p id="times-new-roman">
        This font is Times New Roman.
    </p>
    <p id="arial">
        This font is Arial.
    </p>
    </body>
</html>



P text-align: justify

 
<!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></title>
<style type="text/css">
p {
 text-align: justify;
}
</style>
</head>
<body>
  <h1>header 1</h1>
  <p>This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.</p>
</body>
</html>



Set font size for a paragraph

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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></title>
  <style type="text/css">
    p { 
      font: 1em/1.5em Georgia, serif; 
      width: 30em;
      margin: 0;
    }
  </style>
</head>
<body>
  <div>
    <p>before span</p>
  </div>
</body>
</html>



Set line height of a Paragraph in content section

 
<!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=ISO-8859-1" />
<title></title>
<style type="text/css">

div#content p  {
  line-height:1.5;
}

</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
    
    <p>This is a test.</p>
    
      <p>Please fill out our form below in order to contact me. </p>
      
     <p>Note: Due to our busy schedules, we cannot answer every message.</p>
    
    </div>
  </div>
  <div id="extra">
    <h2>header</h2>
    <p>This is a text</p>
  </div>
  <div id="footer">
    <p>All rights reserved except where noted.</p>
  </div>
</div>
</body>
</html>



Set width for a paragraph

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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>Headings example 2a</title>
  <style type="text/css">
    body {
      font: 12px/1.5em Georgia, serif;
    }
    h1 { 
            margin: 1.25em 0 0 0;
    }
    h2 { 
      margin: 1.25em 0 0 0;
    }
    p {
      margin: 0;
      width: 33em;
    }
  </style>
</head>
<body>
  <h1>The most important heading</h1>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <h2>A less important heading</h2>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</body>
</html>



Text is large, bold, and aligned at the baseline. Subsequent lines are not indented.

 
<!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">
* .padded-dropcap1 {
  padding-left: 10px;
  font-size: 80px;
  line-height: normal;
  font-weight: bold;
  vertical-align: middle;
}
</style>
</head>
<body>
    <p><span class="padded-dropcap1">P</span>added Aligned Drop Cap. </p> 
</body>
</html>



Text is larger than wrapper box

 
<!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 {
            border: thin solid black;
            text-align: justify;
            width: 150px;
            height: 150px;
        }
            </style>
        </head>
        <body>
      <p>
          Peter<BR/>Peter<BR/>Peter<BR/>
          Peter<BR/>Peter<BR/>Peter<BR/>
          Peter<BR/>Peter<BR/>Peter<BR/>
          Peter<BR/>Peter<BR/>Peter<BR/>
      </p>
        </body>
    </html>



This is a paragraph with a dashed border

 
<?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>Borders</title>
  <style rel="stylesheet" type="text/css">
.dashed {
  border-style: dashed;
  border-color: #666666;
  border-width: 3px;
}
</style>
</head>
<body>
<p class="dashed">This is a paragraph with a dashed border</p>
</body>
</html>



This is a paragraph with a dotted border

 
<?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>Borders</title>
  <style rel="stylesheet" type="text/css">
.dotted {
  border-style: dotted;
  border-color: #999999;
  border-width: 2px;
}
</style>
</head>
<body>
<p class="dotted">This is a paragraph with a dotted border</p>
</body>
</html>



This is a paragraph with a double border

 
<?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>Borders</title>
  <style rel="stylesheet" type="text/css">
.double {
  border-style: double;
}
</style>
</head>
<body>
<p class="double">This is a paragraph with a double border</p>
</body>
</html>



This is a paragraph with a groove border

 
<?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>Borders</title>
  <style rel="stylesheet" type="text/css">
.groove {
  border-style: groove;
}
</style>
</head>
<body>
<p class="groove">This is a paragraph with a groove border</p>
</body>
</html>



This is a paragraph with an inset border

 
<?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>Borders</title>
  <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}
.inset {
  border-style: inset;
}
</style>
</head>
<body>
<p class="inset">This is a paragraph with an inset border</p>
</body>
</html>



This is a paragraph with a ridge border

 
<?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>Borders</title>
  <style rel="stylesheet" type="text/css">
.ridge {
  border-style: ridge;
}
</style>
</head>
<body>
<p class="ridge">This is a paragraph with a ridge border</p>
</body>
</html>



This is a paragraph with a solid border

 

<?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>Borders</title>
  <style rel="stylesheet" type="text/css">
.solid {
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
}
</style>
</head>
<body>
<p class="solid">This is a paragraph with a <code>solid</code> border</p>
</body>
</html>



This paragraph has a 180-pixel width and 20 pixels of padding

 

<!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#paragraph-2 {
            padding: 20px;
            width: 180px;
            border: 1px solid black;
            margin: 10px;
            background: lightgrey;
        }
            </style>
        </head>
        <body>
      <p id="paragraph-2">
      This is a test. This is a test. 
      </p>
        </body>
    </html>



This paragraph has a 180-pixel width and 20 pixels of padding, and yet the backgrounds of both paragraphs are lined up together

 
<!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#paragraph-2 {
            padding: 20px;
            width: 180px;
            border: 1px solid black;
            margin: 10px;
            background: lightgrey;
        }
            </style>
        </head>
        <body>
      <p id="paragraph-2">
this is a test. 
      </p>
        </body>
    </html>



This paragraph has a 200 pixel width and 10 pixels of padding.

 
<!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#paragraph-1 {
            padding: 10px;
            width: 200px;
            border: 1px solid black;
            margin: 10px;
            background: gray;
        }
            </style>
        </head>
        <body>
      <p id="paragraph-1">This is a test. 
      </p>
        </body>
    </html>



This paragraph is floated left

 
<!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">
                div {
                    margin: 10px;
                    background: rgb(200, 200, 200);
                    height: 100px;
                }
                
                p#floated {
                    background: rgb(220, 220, 220);
                    margin: 10px;
                    padding: 10px;
                    border: 1px solid black;
                    float: left;
                }
                p#normal {
                    background: rgb(240, 240, 240);
                    border: 1px solid black;
                }
            </style>
        </head>
            <body>
                <div>
                    <p id="floated">
                        This paragraph is floated left.
                    </p>
                    <p id="normal">
                        The text if this paragraph is beside the floated paragraph.
                    </p>
                </div>
            </body>
    </html>



Use style to hide text

 

<!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">
.no {
 display: none;
}
</style>
</head>
<h2><span class="no">Earth News</span></h2>
<p>before <a href="">after</a></p
  
</body>
</html>



Using inline styles

 
<?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">
   <head>
      <title>Inline Styles</title>
   </head>
   <body>
      <p>This text does not have any style applied to it.</p>
      <p style = "font-size: 20pt">This text has the 
      <em>font-size</em> style applied to it, making it 20pt.
      </p>
      <p style = "font-size: 20pt; color: #0000ff">
      This text has the <em>font-size</em> and 
      <em>color</em> styles applied to it, making it
      20pt. and blue.</p>
   </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text/p&oldid=5837»