| Although most writers will simply use the keyboard to add quotation marks to their text, HTML includes the quotation tag: <q>...</q>. This tag places the browser default quotation marks around the indicated text. With CSS, you can define the exact characters to be used as quotation marks using the quotes property (Table 10.4). Although English uses either single ('…') or double ("…") quotation marks, this is by no means how all other languages do it. Table 10.4. Quotes ValuesVALUE | COMPATIBILITY |
|---|
'<string>' | FF1, O4 CSS2 | none | FF1, O4, CSS2 | inherit | FF1, O4, CSS2 |
In this example (Figure 10.4), the quotation marks are set to use « …», which is standard for many other European languages, including French. Figure 10.4. Quotes appear in the French form (« »), rather than the English form (" "). 
To define the bullet style: | | 1. | quotes:
In your declaration block, type the quotes property name, followed by a colon (:) and one of the values or value pairs listed below (Code 10.3).
Code 10.3. The quotes property is used to specify what the quotation marks should look like.| [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 | Specifying the Quote Style</title> <style type="text/css" media="screen"> h1, h2 { color: #999; margin: .5em 0em; } h2 { clear: both; } p q { quotes: '« ' ' »' '« ' ' '; } #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 ol a { display: list-item; list-style-type: decimal-leading-zero; list-style-position: inside; margin-left: -40px; } #navigation p { margin: 8px; font-weight: bold; } .author { margin-top: 0cm; font: bold 1em Arial, Helvetica, sans-serif } .chapterTitle { display: block; 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>CHAPTER VIII <span > The Queen's Croquet-Ground </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice28a.gif" alt="# Cards arguing" width="220" height="295" /> <q>Would you tell me,</q> said Alice, a little timidly, <q>why you are painting those roses?</q> </div> <p>A large rose-tree stood near the entrance of the garden: the roses growing on it were white, but there were three gardeners at it, busily painting them red. Alice thought this a very curious thing, and she went nearer to watch them, and just as she came up to them she heard one of them say, <q>Look out now, Five! Don't go splashing paint over me like that!< /q> </p> </div> </body></html>
|
| 2. | ' « ' ' » '
Set the value of the open and closed quotation marks within standard English quotation marks.
| 3. | ' < ' ' >;
After a space, you can add another grouping of quotation styles for the second level quotes.
|
 Tip
Because only Opera and Firefox currently support the quotes property, it is of limited use, especially since neither browser supports the :language pseudo-class, which would allow you to define the quotation marks to use with a particular language.
|
