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

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

Add content through css

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

ooo

This is a test. This is a test. This is a test. 

   </body>

</html> 

</source>


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

   <source lang="html4strict">

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

Heading One

Here is a paragraph.

Here is a paragraph.

Heading Two

Here is a paragraph.

Here is a paragraph.

Heading Three

Here is a paragraph.

Here is a paragraph.

</body> </html> 

</source>


content: "Hello, world!"

   <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> The content property </title>
       <style type="text/css" media="all">
           div {
               content: "Hello, world!";
           }
       </style>
   </head>
   <body>

   </body>

</html> 

</source>


counter-reset: paragraphNumber

   <source lang="html4strict">

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

Heading One

Here is a paragraph.

Here is a paragraph.

Heading Two

Here is a paragraph.

Here is a paragraph.

Heading Three

Here is a paragraph.

Here is a paragraph.

</body> </html> 

</source>


CSS content with quotation mark

   <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> The content property </title>
       <style type="text/css" media="all">
           div {
         content: "This is a test. \"";
     }
       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Including Content from a Style Sheet

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

   <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>
The world said, "Hello, yourself!"
   </body>

</html> 

</source>


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

   <source lang="html4strict">

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

  1. List Item
  2. List Item
    1. List Item
    2. List Item
      1. List Item
      2. List Item
    3. List Item
  3. List Item

</body> </html> 

</source>


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

   <source lang="html4strict">

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

Here is a note.

Here is a reference.

Here is an explanation.

</body> </html> 

</source>


string is placed inside of all div elements

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

   </body>

</html> 

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