HTML/CSS/Text/p class

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

Adding quotation marks with p:before and after with "content"

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

blockquote p:before {

content: "\201C"; 
font-size: 1.2em;
font-weight: bold;  
font-family: Georgia, Times, "Times New Roman", serif;

} blockquote p:after {

content: "\201D"; 
font-size: 1.2em;
font-weight: bold;
font-family: Georgia, Times, "Times New Roman", serif;

} cite:before {

content: "\2014 ";

} cite {

 display: block;
 text-align: center;

}

 </style>

</head> <body>

There is a tendency for things to right themselves.

Ralph Waldo Emerson

</body> </html>

</source>
   
  


drop caps with p:first-letter

   <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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>drop caps</title> <style type="text/css"> p:first-letter {

 float:left;
 display:block;
 font-size:300%;
 line-height:100%;
 padding-right: 0.1em;

} p {

 margin: 0;
 padding: 0;

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

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>
   
  


first line pseudo-class

   <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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>first line pseudo-class</title> <style type="text/css"> p:first-line { font-weight: bold; } </style> </head> <body>

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>
   
  


p#dropcap:first-letter

   <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>First-letter Pseudo-element</title>
 <style type="text/css" media="screen">
   p#dropcap:first-letter {
     font-size:300%;
     font-weight:bold;
     float:left;
   }
   
 </style>
 

</head> <body>

This is a test.

</body> </html>

</source>
   
  


p::first-letter

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-/pp/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">
           h1::first-letter, p::first-letter {
               text-transform: capitalize; 
           }
           h1 {
               font-weight: normal;
               text-align: center;
               text-decoration: underline;
           }
           p {
               text-indent: 25px;
               text-align: justify;
               letter-spacing: 1px;
               word-spacing: 5px;
           }
           p::first-letter {
               font: 120% "Monotype Corsiva";
           }
       </style>
   </head>
   <body>

this is the title

This is a test.

   </body>

</html>

</source>
   
  


p::first-letter font: 120% "Monotype Corsiva"

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-/pp/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">
           h1::first-letter, p::first-letter {
               text-transform: capitalize; 
           }
           p::first-letter {
               font: 120% "Monotype Corsiva";
           }
       </style>
   </head>
   <body>

This is a test.

This is a test.

   </body>

</html>

</source>
   
  


p#initialcap:first-letter

   <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>First-letter Pseudo-element</title>
 <style type="text/css" media="screen">
   p#initialcap:first-letter {
     font-size:400%;
     font-weight:bold;
   }
   
 </style>
 

</head> <body>

This is a test.

</body> </html>

</source>
   
  


p.note:before, p.note:after

   <source lang="html4strict">

<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>:before and :after Pseudo-elements</title>
 <style type="text/css" media="screen">
   body {
     padding:.5em;
     font-family:"lucida grande";
   }
   
   p.note {
     font-size:85%;
     color:#666;
   }
   p.note:before {
     content:"[";
   }
   p.note:after {
     content:"]";
   }
   
 </style>
 

</head> <body>

G

</body> </html>

</source>
   
  


Pseudo-element Selectors

   <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"> p:first-line { font-weight:bold; word-spacing:2px; letter-spacing:1px; } p:first-letter { font-size:48px; }

</style> </head> <body>

first-letter selects the first letter, and first-line selects the first line of a terminal block element, like this paragraph.

</body> </html>

</source>
   
  


Set the style for first line of P

   <source lang="html4strict">

<html> <head>

<title>Set the style for first line of

</title> <style type="text/css"> p:first-line { font-size: 200%; font-weight: bold; } </style> </head> <body>

Title of Page

<p>This is a sample paragraph with a <a href="http://www.wbex.ru" class="warning">link</a>. After link. in em warning. After em.

</body> </html>

</source>