HTML/CSS/Text/p class

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

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

 
<!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>
<blockquote>
 <p>There is a tendency for things to right themselves.</p>
 <cite>Ralph Waldo Emerson</cite>
</blockquote>

</body>
</html>



drop caps with p:first-letter

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



first line pseudo-class

 
<!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>
<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. </p>
</body>
</html>



p#dropcap:first-letter

 
<!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>
  <p id="dropcap">This is a test. </p>
  
</body>
</html>



p::first-letter

 

<!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>
        <h1>this is the title</h1>
        <p>This is a test. </p>
    </body>
</html>



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

 
<!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>
        <h1>This is a test. </h1>
        <p>This is a test. </p>
    </body>
</html>



p#initialcap:first-letter

 
<!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>
  <p id="initialcap">This is a test. </p>
  
</body>
</html>



p.note:before, p.note:after

 
<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>
  <p class="note">G</p>
</body>
</html>



Pseudo-element Selectors

 
<!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>
<p><code>first-letter</code> selects the first letter, and 
<code>first-line</code> selects the first line of a terminal block element, 
like this paragraph.</p> 

</body> 
</html>



Set the style for first line of P

 
<html>
<head>
<title>Set the style for first line of <P></title>
<style type="text/css">
  p:first-line {
  font-size: 200%;
  font-weight: bold;
  }
</style>
</head>
<body>
  <h1>Title of Page</h1>
  <p>This is a sample paragraph with a <a href="http://www.wbex.ru" class="warning">link</a>. After link. <em class="warning"> in em warning</em>. After em.</p>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text/p_class&oldid=5897»