HTML/CSS/CSS Attributes and Javascript Style Properties/p.class

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

p.abstract:after content

 
<?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" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
h1 {
  font-size: 18pt;
}
p {
  font-size: 12pt;
}
p.abstract:after {
  content: "from CSS.";
  color: #ff0000;
}
</style>
</head>
<body>
<p class="abstract">this is a test. this is a test.  </p>
</body>
</html>



p::first-letter

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Albert Einstein </title>
        <style type="text/css" media="all">
            p::first-letter {
                font-size: 200%;
                background-color: red;
                border: 1px solid black;
            }
            p::first-line {
                letter-spacing: 5px;
            }
        </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>



p::first-letter: font-style: italic

 

<!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-style: italic;
                font-size: 120%;   
            }
        </style>
    </head>
    <body>
        <h1>ode</h1>
        <p>This is a test. </p>
    </body>
</html>



p::first-line: letter-spacing: 5px;

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Albert Einstein </title>
        <style type="text/css" media="all">
            p::first-letter {
                font-size: 200%;
                background-color: red;
                border: 1px solid black;
            }
            p::first-line {
                letter-spacing: 5px;
            }
        </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>



p.QuickTip:before

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
p.QuickTip:before {
  content: " Tip: "
}
</style>
</head>
<body>
<p>a normal paragraph.</p>
<p class="QuickTip">QuickTip.</p>
<p>paragraph.</p>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/p.class&oldid=4810»