HTML/CSS/CSS Attributes and Javascript Style Properties/content

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

Add content through css

 
<!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: lightgray;
                border: 1px solid black;
            }
            p::first-line {
                letter-spacing: 5px;
            }
            h1#top::before, h1#top::after {
                content: "::";
            }
        </style>
    </head>
    <body>
            <h1 id="top">ooo</h1>
            <p>
              This is a test. This is a test. This is a test. 
            </p>
    </body>
</html>



content: counter(paragraphNumber, upper-roman) ": "

 

<?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:before {
  content: counter(paragraphNumber, upper-roman) ": ";
}
h1 {
  counter-reset: paragraphNumber;
}
p {
  counter-increment: paragraphNumber;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
<h1>Heading Two</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
<h1>Heading Three</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
</body>
</html>



content: "Hello, world!"

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> The content property </title>
        <style type="text/css" media="all">
            div {
                content: "Hello, world!";
            }
        </style>
    </head>
    <body>
            <div></div>
    </body>
</html>



counter-reset: paragraphNumber

 

<?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:before {
  content: counter(paragraphNumber, upper-roman) ": ";
}
h1 {
  counter-reset: paragraphNumber;
}
p {
  counter-increment: paragraphNumber;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
<h1>Heading Two</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
<h1>Heading Three</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
</body>
</html>



CSS content with quotation mark

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> The content property </title>
        <style type="text/css" media="all">
            div {
          content: "This is a test. \"";
      }
        </style>
    </head>
    <body>
            <div></div>
    </body>
</html>



Including Content from a Style Sheet

 
<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Generated content</title>
        <style type="text/css">
            div::before {
                content: "I said, \"Hello, world!\"";
                background: black;
                color: white;
                margin-right: 25px;
            }
        </style>
    </head>
    <body>
        <div>The world said, "Hello, yourself!"</div>
    </body>
</html>



List content: counters(item, ".") " "

 

<?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">
ol {
  counter-reset: item
}
li:before {
  counter-increment: item;
  content: counters(item, ".") " ";
}
</style>
</head>
<body>
<ol>
  <li>List Item</li>
  <li>List Item
    <ol>
      <li>List Item</li>
      <li>List Item
        <ol>
          <li>List Item</li>
          <li>List Item</li>
        </ol>
       </li>
      <li>List Item</li>
    </ol>
  </li>
  <li>List Item</li>
</ol>
</body>
</html>



p:before {content:attr(class) ": ";}

 
<?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:before {content:attr(class) ": ";}
</style>
</head>
<body>
<p class="Note">Here is a note.</p>
<p class="Reference">Here is a reference.</p>
<p class="Explanation">Here is an explanation.</p>
</body>
</html>



string is placed inside of all div elements

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> The content property </title>
        <style type="text/css" media="all">
            div {
                content: "This is a test. ";
                border: thick solid black;
                background: skyblue;
                color: black;
                font-size: xx-large;
                padding: 20px;
            }
        </style>
    </head>
    <body>
            <div></div>
            <div></div>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/content&oldid=4781»