| For the purposes of search engine optimization, it is usually best to keep all of content of your page within the body tags, so that search engines can find it. However, there are times where you might have repetitive content that will not help your standing in a search index, or might even hinder it. To add content, you can use the content property (Table 10.1), which allows you to specify a text string, image or sound file URL, counter, quote, or even an attribute value that should be displayed on the page. Table 10.1. Content ValuesVALUE | COMPATIBILITY |
|---|
normal | FF1, S2, O4, CSS2 | none | FF1, S2, O4, CSS2 | <string> | FF1, S2, O4 CSS2 | <url> | FF1, S2, O7, CSS2 | <counter> | FF1, O4, CSS2 | attr(<selector>) | O4, CSS2 | open-quote | FF1, O4, CSS2 | close-quote | FF1, O4, CSS2 | no-open-quote | FF1, O4, CSS2 | no-close-quote | FF1, O4, CSS2 | inherit | FF1, S2, O4, CSS2 |
In this example (Figure 10.1), the word "Chapter" is inserted before the h2 tag; three copies of the flourish image (Figure 10.2) are inserted after the h2 tag; and the alt attribute text is displayed before the image as the caption. Figure 10.1. The word "Chapter" and the flourishes are inserted using CSS rather than being placed directly in the HTML, although visitors will not be able to tell the difference. 
Figure 10.2. The image file bg_flourish.png. 
To define generated content: | | 1. | h2:before {...}
Type a selector with the :before or :after pseudo-class (see "Defining Link and Dynamic Styles with Pseudo-classes" in Chapter 2), which defines where the content will be positioned in relation to the selector (Code 10.1).
Code 10.1. The content property is used to specify content that is inserted either before or after the selector.| [View full width] <!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=utf-8" /> <title>CSS, DHTML & Ajax | Adding content With CSS</title> <style type="text/css" media="screen"> h1, h2 { color: #999; margin: .5em 0em; } h2 { clear: both; } h2:before { content: 'Chapter '; } h2:after { content: url(bg_flourish.png) url(bg_flourish.png) url(bg_flourish.png); display: block; } img:after { content: attr(alt); display: block; } #navigation { width: 240px; margin: 0px 8px 8px 0px; background-color: #ccc; float: left; font: small Arial, Helvetica, sans-serif; } #navigation a { padding: 2px 4px; border-top: 3px solid #fff; text-decoration: none; display: block; color: red; } #navigation p { margin: 8px; font-weight: bold; } .author { margin-top: 0cm; font: bold 1em Arial, Helvetica, sans-serif } .chapterTitle { display: block; margin-bottom: 8px; font-size: smaller; color:black; } .dropBox { width: 228px; padding: 6px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; font: small Arial, Helvetica, sans-serif; } </style> </head> <body> <div > <p>Flip To Chapter</p> <a href="#">A Mad Tea-Party</a> <a href="#">The Queen's Croquet-Ground</a> <a href="#">The Mock Turtle's Story</a> <a href="#">The Lobster Quadrille</a> <a href="#">Who Stole The Tarts? </a> <a href="#">Alice's Evidence</a> <a href="#">← Previous </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>VII <span >A Mad Tea-Party</span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice26a.gif" alt="The Hatter opened his eyes very wide on hearing this; but all he SAID was, 'Why is a raven like a writing-desk?'" width="220" height="246" /> </div> <p>There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it...'</p> </div> </body></html>
|
| 2. | content:
In your declaration block, type the content property name, followed by a colon (:) and one of the values listed in Step 3.
| | | 3. | 'Chapter';
Type one or more of the following values to define the content that is being added. Separate each value by a space:
Type a string value within quotes (either single or double quotes), such as 'Chapter'. Anything within the quotes will be displayed just as you typed it, even HTML code, although spaces are collapsed (i.e., more than two spaces are collapsed into a single space when displayed). url(), with an absolute or relative url within the parentheses pointing to an external file, such as an image or sound file. For example, url(bg_flourish.png) will load an image. counter(), with a counter name in parentheses. For example, counter(chapterNum) adds the counter number for the chapterNum counter. Counters are explained in the next section. open-quote or close-quote to add a quotation mark using the current quotation style (see the section "Specifying the Quote Style Later" later in this chapter). no-open-quote or no-close-quote to increase the level of quoting by one level. attr(), to display the value of the indicated attribute. For example, attr(alt) will display the value for the alt attribute. inherit, which will use whatever content is defined for the parent element. normal or none, which will not add any content or apply any other values.
|
 Tips
Since the content property is not supported in Internet Explorer (not even version 7), it is best not to rely on this property for critical information. Information rendered using the content property will not be searchable by search-engine spiders, so never use it to insert information that defines what your page is about.
|
