HTML/CSS/Text/p

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

Change color and font size of paragraph

   <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" title="text/css"> .warningText { 

   color: #ff0000;
   font-size: 120%;

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

this is a test. this is a test. this is a test.

Only this is a test. this is a test.

</body> </html> 

</source>


Different methods of separating paragraphs

   <source lang="html4strict">

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

Paragraphs separated by space

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

Paragraphs separated by indenting

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

</body> </html> 

</source>


Get attribute of a paragraph in Javascript

   <source lang="html4strict">

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

}

  1. purchases {
 border: 1px solid white;
 background-color: #333;
 color: #ccc;
 padding: 1em;

} 

 </style>
 </head>
 <body>

Title

This is a test.

This is just a test

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

</source>


Paragraph highlighting

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

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

this is a test.

</body> </html> 

</source>


Paragraphs tag

   <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>Paragraphs</title>

</head> <body>

This is a text

</body> </html> 

</source>


paragraph with different font

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

This font is Times New Roman.

This font is Arial. 

   </body>

</html> 

</source>


P text-align: justify

   <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" lang="en" xml:lang="en"> <head> <title></title> <style type="text/css"> p { 

text-align: justify;

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

header 1

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.

</body> </html> 

</source>


Set font size for a paragraph

   <source lang="html4strict">

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

before span

</body> </html> 

</source>


Set line height of a Paragraph in content section

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

div#content p { 

 line-height:1.5;

}

</style> </head> <body>

Contact Form

This is a test.

Please fill out our form below in order to contact me.

Note: Due to our busy schedules, we cannot answer every message.

header

This is a text

</body> </html> 

</source>


Set width for a paragraph

   <source lang="html4strict">

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

The most important heading

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.

A less important heading

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.

</body> </html> 

</source>


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

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

  • .padded-dropcap1 {
 padding-left: 10px;
 font-size: 80px;
 line-height: normal;
 font-weight: bold;
 vertical-align: middle;

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

Padded Aligned Drop Cap.

</body> </html> 

</source>


Text is larger than wrapper box

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

Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter
Peter

       </body>
   </html>
</source>


This is a paragraph with a dashed border

   <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>Borders</title>
 <style rel="stylesheet" type="text/css">

.dashed { 

 border-style: dashed;
 border-color: #666666;
 border-width: 3px;

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

This is a paragraph with a dashed border

</body> </html> 

</source>


This is a paragraph with a dotted border

   <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>Borders</title>
 <style rel="stylesheet" type="text/css">

.dotted { 

 border-style: dotted;
 border-color: #999999;
 border-width: 2px;

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

This is a paragraph with a dotted border

</body> </html> 

</source>


This is a paragraph with a double border

   <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>Borders</title>
 <style rel="stylesheet" type="text/css">

.double { 

 border-style: double;

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

This is a paragraph with a double border

</body> </html> 

</source>


This is a paragraph with a groove border

   <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>Borders</title>
 <style rel="stylesheet" type="text/css">

.groove { 

 border-style: groove;

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

This is a paragraph with a groove border

</body> </html> 

</source>


This is a paragraph with an inset border

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

This is a paragraph with an inset border

</body> </html> 

</source>


This is a paragraph with a ridge border

   <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>Borders</title>
 <style rel="stylesheet" type="text/css">

.ridge { 

 border-style: ridge;

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

This is a paragraph with a ridge border

</body> </html> 

</source>


This is a paragraph with a solid border

   <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>Borders</title>
 <style rel="stylesheet" type="text/css">

.solid { 

 border-style: solid;
 border-color: #000000;
 border-width: 1px;

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

This is a paragraph with a solid border

</body> </html> 

</source>


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

   <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#paragraph-2 {
           padding: 20px;
           width: 180px;
           border: 1px solid black;
           margin: 10px;
           background: lightgrey;
       }
           </style>
       </head>
       <body>

This is a test. This is a test. 

       </body>
   </html>
</source>


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

   <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#paragraph-2 {
           padding: 20px;
           width: 180px;
           border: 1px solid black;
           margin: 10px;
           background: lightgrey;
       }
           </style>
       </head>
       <body>

this is a test. 

       </body>
   </html>
</source>


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

   <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#paragraph-1 {
           padding: 10px;
           width: 200px;
           border: 1px solid black;
           margin: 10px;
           background: gray;
       }
           </style>
       </head>
       <body>

This is a test. 

       </body>
   </html>
</source>


This paragraph is floated left

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

This paragraph is floated left.

The text if this paragraph is beside the floated paragraph. 

           </body>
   </html>
</source>


Use style to hide text

   <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"> .no { 

display: none;

} </style> </head>

Earth News

before <a href="">after</a></p </body> </html> </source>

Using inline styles

   <source lang="html4strict">

<?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.

This text has the font-size style applied to it, making it 20pt.

This text has the font-size and color styles applied to it, making it 20pt. and blue.

  </body>

</html> 

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