|
| 1 | +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| 2 | +<html lang="en"> |
| 3 | + |
| 4 | +<HEAD> |
| 5 | +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| 6 | +<TITLE>About the CSS2 Specification</TITLE> |
| 7 | +<LINK rel="next" href="intro.html"> |
| 8 | +<LINK rel="previous" href="cover.html"> |
| 9 | +<LINK rel="STYLESHEET" href="style/default.css" type="text/css"> |
| 10 | +</HEAD> |
| 11 | +<BODY> |
| 12 | +<div class="navbar"> |
| 13 | +<center> <a href="cover.html">previous</a> <a href="intro.html">next</a> <a href="cover.html#toc">contents</a> <a href="indexlist.html">index</a> |
| 14 | +</center><hr> |
| 15 | +</div> |
| 16 | + |
| 17 | +<H1 align="center">About the CSS2 Specification</H1> |
| 18 | + |
| 19 | +<h2><a name="h-1.1">1.1</a> Reading the specification</h2> |
| 20 | + |
| 21 | +<P>This specification has been written with two types of readers in |
| 22 | +mind: CSS authors and CSS implementors. We hope the specification will |
| 23 | +provide authors with the tools they need to write efficient, |
| 24 | +attractive, and accessible documents, without overexposing them to |
| 25 | +CSS's implementation details. Implementors, however, should find all |
| 26 | +they need to build <a href="convent.html#conformance">conforming user |
| 27 | +agents</a>. |
| 28 | + |
| 29 | +The specification begins with a general presentation of CSS and |
| 30 | +becomes more and more technical and specific towards the end. For |
| 31 | +quick access to information, a general table of contents, |
| 32 | +specific tables of contents at the beginning of each section, |
| 33 | +and an index provide easy navigation, in both the electronic |
| 34 | +and printed versions. |
| 35 | + |
| 36 | +<P>The specification has been written with two modes of presentation |
| 37 | +in mind: electronic and printed. Although the two presentations will |
| 38 | +no doubt be similar, readers will find some differences. For example, |
| 39 | +links will not work in the printed version (obviously), and page |
| 40 | +numbers will not appear in the electronic version. In case of a |
| 41 | +discrepancy, the electronic version is considered the authoritative |
| 42 | +version of the document. |
| 43 | + |
| 44 | +<h2><a name="h-1.2">1.2</a> How the specification is organized</h2> |
| 45 | + |
| 46 | +<P>The specification is organized into the following sections: |
| 47 | + |
| 48 | +<dl> |
| 49 | + |
| 50 | +<dt><Strong>Section 2: An introduction CSS2</strong> |
| 51 | + |
| 52 | +<dd>The introduction includes a brief tutorial in CSS2 and |
| 53 | +a discussion of design principles behind CSS2. |
| 54 | + |
| 55 | +<dt><strong>Sections 3 - 19: CSS2 reference manual.</strong> |
| 56 | + |
| 57 | +<dd>The bulk of the reference manual consists of the CSS2 language |
| 58 | +reference. This reference defines what may go into a CSS2 style sheet |
| 59 | +(syntax, properties, property values) and how user agents must |
| 60 | +interpret these style sheets in order to claim <a |
| 61 | +href="convent.html#conformance">conformance</a>. |
| 62 | + |
| 63 | + |
| 64 | +<dt><strong>Appendixes:</strong> |
| 65 | + |
| 66 | +<dd>Five appendixes contain information about <a href="sample.html">a |
| 67 | +sample style sheet for HTML 4.0</a>, <a href="changes.html">changes |
| 68 | +from CSS1 </a>, <a href="notes.html">implementation and |
| 69 | +performance notes</a>, <a href="grammar.html">the grammar of CSS2</a>, and |
| 70 | +some helpful notes on implementing <a href="fonts.html">WebFonts</a>. |
| 71 | + |
| 72 | +<dt><strong>References:</strong> |
| 73 | + |
| 74 | +<dd>A list of normative and informative references. |
| 75 | + |
| 76 | +<dt><strong>General index:</strong> |
| 77 | + |
| 78 | +<dd>The <a href="indexlist.html">general index</a> contains links to key |
| 79 | +concepts, property and value definitions, and other useful |
| 80 | +information. |
| 81 | + |
| 82 | +</dl> |
| 83 | + |
| 84 | +<H2><a name="h-1.3">1.3</a> Conventions</H2> |
| 85 | + |
| 86 | +<H3><a name="h-1.3.1">1.3.1</a> <a href="convent.html#doclanguage">Document language</a> elements |
| 87 | +and attributes</H3> |
| 88 | + |
| 89 | +<ul> |
| 90 | +<li>CSS property, descriptor, and pseudo-class names are delimited |
| 91 | +by single quotes. |
| 92 | +<li>CSS values are delimited by single quotes. |
| 93 | +<li>Document language element names are in upper case letters. |
| 94 | +<li>Document language attribute names are in lower case letters |
| 95 | +and delimited by double quotes. |
| 96 | +</ul> |
| 97 | + |
| 98 | +<H3><a name="h-1.3.2">1.3.2</a> <a name="property-defs">CSS property definitions</a></H3> |
| 99 | +<P>Each CSS property definition begins with a summary of key |
| 100 | +information that resembles the following: |
| 101 | + |
| 102 | +<P><strong>'Property-name'</strong> |
| 103 | +<TABLE> |
| 104 | +<TR><TH align="right">Value:<TD>Possible constant values or value types</TR> |
| 105 | +<TR><TH align="right">Initial:<TD>The initial value</TR> |
| 106 | +<TR><TH align="right">Applies to:<TD>Elements this property applies to</TR> |
| 107 | +<TR><TH align="right">Inherited:<TD>Whether the property is inherited</TR> |
| 108 | +<TR><TH align="right">Percentage values:<TD>How percentage values should be interpreted</TR> |
| 109 | +</TABLE> |
| 110 | + |
| 111 | +<P>The five categories have the following meanings: |
| 112 | + |
| 113 | +<dl> |
| 114 | +<dt><strong>Value</strong> |
| 115 | +<dd>This part of the property definition specifies the set of valid |
| 116 | +values for the property. Value types may be designated in several ways: |
| 117 | + |
| 118 | +<ol> |
| 119 | +<li> constant values (e.g., 'auto', 'disc', etc.) |
| 120 | + |
| 121 | +<li> basic data types, which appear between "<" and ">" (e.g., |
| 122 | +<length>, <percentage>, etc.). In the electronic version |
| 123 | +of the document, each instance of a basic data type links to its |
| 124 | +definition. |
| 125 | + |
| 126 | +<li> non-terminals that have the same range of values as a property |
| 127 | +bearing the same name (e.g., <'border-width'> |
| 128 | +<'background-attachment'>, etc.). In this case, the non-terminal |
| 129 | +name is the property name (complete with quotes) between "<" and |
| 130 | +">" (e.g., <'border-width'>). In the electronic version of |
| 131 | +the document, each instance of this type of non-terminal links to the |
| 132 | +corresponding property definition. |
| 133 | + |
| 134 | +<li> non-terminals that do not share the same name as a property. In |
| 135 | +this case, the non-terminal name appears between "<" and ">" |
| 136 | +(e.g., <border-width>) and its definition is located near its |
| 137 | +first appearance in the specification. In the electronic version of |
| 138 | +the document, each instance of this type of non-terminal links to the |
| 139 | +corresponding value definition. |
| 140 | +</ol> |
| 141 | + |
| 142 | +Other words in these definitions are keywords that must appear |
| 143 | +literally, without quotes (e.g., red). The slash (/) and the comma (,) |
| 144 | +must also appear literally. |
| 145 | + |
| 146 | +<P>Values may be arranged as follows: |
| 147 | + |
| 148 | +<ul> |
| 149 | +<li>Several juxtaposed words mean that all of them must occur, in the |
| 150 | +given order. |
| 151 | +<li>A bar (|) separates alternatives: one of them must |
| 152 | +occur. |
| 153 | +<li>A double bar (A || B) means that either A or B or both must |
| 154 | +occur, in any order. |
| 155 | +<li>Brackets ([]) are for grouping. |
| 156 | +</ul> |
| 157 | + |
| 158 | +<P>Juxtaposition is stronger than the double bar, and the double bar |
| 159 | +is stronger than the bar. |
| 160 | + |
| 161 | +<div class="example"><P> |
| 162 | +Thus, <samp>a b | c || d e</samp> |
| 163 | +is equivalent to <samp>[ a b ] | [ c || [ d e ]]</samp>. |
| 164 | +</div> |
| 165 | + |
| 166 | +<P> Every type, keyword, or bracketed group may be followed by one of |
| 167 | +the following modifiers: |
| 168 | + |
| 169 | + <UL> |
| 170 | + <LI> |
| 171 | + An asterisk (*) indicates that the preceding type, word or group |
| 172 | + is repeated zero or more times. |
| 173 | + |
| 174 | + <LI> |
| 175 | + A plus (+) indicates that the preceding type, word or group is |
| 176 | + repeated one or more times. |
| 177 | + |
| 178 | + <LI> |
| 179 | + A question mark (?) indicates that the preceding type, word or |
| 180 | + group is optional. |
| 181 | + |
| 182 | + <LI> |
| 183 | + A pair of numbers in curly braces ({A,B}) indicates that the |
| 184 | + preceding type, word or group is repeated at least A and at most |
| 185 | + B times. |
| 186 | + </UL> |
| 187 | + |
| 188 | + |
| 189 | +<div class="example"><P> |
| 190 | +The following examples illustrate different value types: |
| 191 | + |
| 192 | +<BLOCKQUOTE> |
| 193 | + <EM>Value:</EM> N | NW | NE<BR> |
| 194 | + <EM>Value:</EM> [ <length> | thick | thin ]{1,4}<BR> |
| 195 | + <EM>Value:</EM> [<family-name> , ]* <family-name><BR> |
| 196 | + <EM>Value:</EM> <url>? <color> [ / <color> ]?<BR> |
| 197 | + <EM>Value:</EM> <url> || <color><BR> |
| 198 | +</BLOCKQUOTE> |
| 199 | +</div> |
| 200 | + |
| 201 | +<dt><strong>Initial</strong> |
| 202 | + |
| 203 | +<dd>The property's initial value. If the property is inherited, this |
| 204 | +is the value that is given to the root element of the <a |
| 205 | +href="convent.html#doctree">document tree</a>. Please consult the |
| 206 | +section on <a href="cascade.html">the cascade</a> for information |
| 207 | +about the interaction between style sheet-specified, inherited, and |
| 208 | +initial values. |
| 209 | +</dd> |
| 210 | + |
| 211 | +<dt><strong>Applies to</strong> |
| 212 | + |
| 213 | +<dd>Lists the elements to which the property applies. All elements are |
| 214 | +considered to have all properties, but some properties have no |
| 215 | +rendering effect on some types of elements. For example, <a href="aural.html#propdef-voice-family" class="propinst"><span |
| 216 | +class="propinst-voice-family">'voice-family'</span></a> has no effect if |
| 217 | +the element is an image. |
| 218 | +</dd> |
| 219 | + |
| 220 | +<dt><strong>Inherited</strong> |
| 221 | +<dd>Indicates whether the value of the property is inherited from a |
| 222 | +ancestor element. Please consult the |
| 223 | +section on <a href="cascade.html">the cascade</a> for information |
| 224 | +about the interaction between style sheet-specified, inherited, and |
| 225 | +initial values. |
| 226 | +</dd> |
| 227 | + |
| 228 | +<dt><strong>Percentage values</strong> |
| 229 | +<dd>Indicates how percentages should be interpreted, if they occur in |
| 230 | +the value of the property. If "N/A" appears here, it means that the |
| 231 | +property does not accept percentages as values.</dd> |
| 232 | + |
| 233 | +<dt><strong>Applies to media</strong> |
| 234 | +<dd>Indicates the <a href="media.html">media</a> |
| 235 | +for which the property applies. The |
| 236 | +<a href="convent.html">conformance</a> conditions state |
| 237 | +that user agents must support this property if they support |
| 238 | +rendering to the <a href="media.html">media types</a> listed |
| 239 | +here. |
| 240 | +</dd> |
| 241 | +</dl> |
| 242 | + |
| 243 | +<H4><a name="h-1.3.2.1">1.3.2.1</a> <a name="shorthand">Shorthand properties</a></H4> |
| 244 | + |
| 245 | +<p>Some properties are <span class="index-def" |
| 246 | +title="shorthand"><em>shorthand</em><a name="didx-shorthand"> </a></span> rules that allow authors |
| 247 | +to specify the values of several properties with a single property. |
| 248 | + |
| 249 | +<P>For instance, the <a href="fonts.html#propdef-font" class="propinst"><span class="propinst-font">'font'</span></a> property |
| 250 | +is a shorthand property for setting <a href="fonts.html#propdef-font-style" class="propinst"><span |
| 251 | +class="propinst-font-style">'font-style'</span></a>, <a href="fonts.html#propdef-font-variant" class="propinst"><span |
| 252 | +class="propinst-font-variant">'font-variant'</span></a>, <a href="fonts.html#propdef-font-weight" class="propinst"><span |
| 253 | +class="propinst-font-weight">'font-weight'</span></a>, <a href="fonts.html#propdef-font-size" class="propinst"><span |
| 254 | +class="propinst-font-size">'font-size'</span></a>, <a href="flowobj2.html#propdef-line-height" class="propinst"><span |
| 255 | +class="propinst-line-height">'line-height'</span></a>, and <a href="fonts.html#propdef-font-family" class="propinst"><span |
| 256 | +class="propinst-font-family">'font-family'</span></a> all at once.</p> |
| 257 | + |
| 258 | +<P>When values are omitted from a shorthand form, each |
| 259 | +"missing" property either inherits its value or is assigned |
| 260 | +its initial value (see the section on <a href="cascade.html">the |
| 261 | +cascade</a>). |
| 262 | + |
| 263 | +<div class="example"><p> |
| 264 | +The multiple style rules of the previous example:</p> |
| 265 | + |
| 266 | +<pre> |
| 267 | + H1 { |
| 268 | + font-weight: bold; |
| 269 | + font-size: 12pt; |
| 270 | + line-height: 14pt; |
| 271 | + font-family: Helvetica; |
| 272 | + font-variant: normal; |
| 273 | + font-style: normal; |
| 274 | + } |
| 275 | +</pre> |
| 276 | + |
| 277 | +<p>may be rewritten with a single shorthand property:</p> |
| 278 | + |
| 279 | +<pre> |
| 280 | + H1 { font: bold 12pt/14pt Helvetica } |
| 281 | +</pre> |
| 282 | + |
| 283 | +<p>In this example, <a href="fonts.html#propdef-font-variant" class="propinst"><span |
| 284 | +class="propinst-font-variant">'font-variant'</span></a> and <a href="fonts.html#propdef-font-style" class="propinst"><span |
| 285 | +class="propinst-font-style">'font-style'</span></a> have been omitted |
| 286 | +from the shorthand form, so they must be assigned either |
| 287 | +an inherited or initial value.</P> |
| 288 | +</div> |
| 289 | + |
| 290 | +<h3><a name="h-1.3.3">1.3.3</a> Notes and examples</h3> |
| 291 | + |
| 292 | +<P>Informative notes are emphasized to stand out from surrounding |
| 293 | +text and may be rendered specially by some user agents. |
| 294 | + |
| 295 | +<P>All examples illustrating deprecated usage are marked as "DEPRECATED |
| 296 | +EXAMPLE". Deprecated examples also include recommended alternate |
| 297 | +solutions. All examples that illustrates illegal usage are clearly |
| 298 | +marked as "ILLEGAL EXAMPLE". |
| 299 | + |
| 300 | +<P>Examples and notes are marked within the source HTML for the |
| 301 | +specification and some user agents may render them specially. |
| 302 | + |
| 303 | +<H2><a name="h-1.4">1.4</a> Acknowledgments</H2> |
| 304 | + |
| 305 | +<P>This specification is the product of the W3C Working Group on |
| 306 | +Cascading Style Sheets and Formatting Properties. In addition to the |
| 307 | +editors of this specification, the members of the Working Group are: |
| 308 | + |
| 309 | +Brad Chase (Bitstream), Chris Wilson (Microsoft), Daniel Glazman |
| 310 | +(Electricité de France), Dave Raggett (W3C/HP), Ed Tecot |
| 311 | +(Microsoft), Jared Sorensen (Novell), Lauren Wood (SoftQuad), Laurie |
| 312 | +Anna Kaplan (Microsoft), Mike Wexler (Adobe), Murray Maloney (Grif), |
| 313 | +Powell Smith (IBM), Robert Stevahn (HP), Steve Byrne (JavaSoft), |
| 314 | +Steven Pemberton (CWI), and Thom Phillabaum (Netscape). We thank them |
| 315 | +for their continued efforts. |
| 316 | + |
| 317 | +<P>A number of invited experts to the Working Group have contributed: |
| 318 | +George Kersher, Glenn Rippel (Bitstream), Jeff Veen (HotWired), Markku |
| 319 | +T. Hakkinen (The Productivity Works), Martin Dürst |
| 320 | +(Universität Zürich), Roy Platon (RAL), Todd Fahrner (Verso) |
| 321 | +and Vincent Quint (W3C). |
| 322 | + |
| 323 | +<p>The section on Web Fonts was strongly shaped by Brad Chase (Bitstream) |
| 324 | +David Meltzer (Microsoft Typography) and Steve Zilles (Adobe). The |
| 325 | +following people have also contributed in various ways to the section |
| 326 | +pertaining to fonts: Alex Beamon (Apple), Ashok Saxena (Adobe), Ben |
| 327 | +Bauermeister (HP), Dave Raggett (W3C/HP), David Opstad (Apple), David |
| 328 | +Goldsmith (Apple), Ed Tecot (Microsoft), Erik van Blokland |
| 329 | +(LettError), François Yergeau (Alis), Gavin Nicol (Inso), |
| 330 | +Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul |
| 331 | +Haeberli (SGI), and the late Phil Karlton (Netscape). |
| 332 | + |
| 333 | +<P>The section on Paged Media was in large parts authored by Robert |
| 334 | +Stevahn (HP) and Stephen Waters (Microsoft). |
| 335 | + |
| 336 | +<P>Robert Stevahn (HP), along with Scott Furman (Netscape) and Scott |
| 337 | +Isaacs (Microsoft) were key contributors to CSS Positioning. |
| 338 | + |
| 339 | +<P>Mike Wexler (Adobe) was the editor of the interim Working Draft |
| 340 | +which described many of the new features of CSS2. |
| 341 | + |
| 342 | +<p>T.V.Raman (Adobe) made pivotal contributions towards Aural |
| 343 | +Cascading Style Sheets and the concepts of aural presentation. |
| 344 | + |
| 345 | +<P>Todd Fahrner (Verso) researched contemporary and historical |
| 346 | +browsers to develop the sample style sheet in the appendix. |
| 347 | + |
| 348 | +<P>Through electronic and physical encounters, the following people |
| 349 | +have contributed to the development of CSS2: James Clark, Dan |
| 350 | +Connolly, Douglas Rand, Sho Kuwamoto, Donna Converse, Scott Isaacs, |
| 351 | +Lou Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Vincent Mallet, |
| 352 | +Philippe Le Hegaret, William Perry, David Siegel, Al Gilman, Jason |
| 353 | +White, Daniel Dardailler. |
| 354 | + |
| 355 | +<P>The discussions on www-style@w3.org have been influential in many |
| 356 | +key issues for CSS. Especially, we would like to thank Bjorn Backlund, |
| 357 | +Todd Fahrner, MegaZone, Eric Meyer, David Perrell, Liam Quinn, Chris |
| 358 | +Wilson, Neil St.Laurent and Andrew Marshall for their participation. |
| 359 | + |
| 360 | +<P>Special thanks to Arnaud Le Hors, whose engineering contributions |
| 361 | +made this document work. |
| 362 | + |
| 363 | +<P>Lastly, thanks to Tim Berners-Lee without whom none of this would |
| 364 | +have been possible. |
| 365 | + |
| 366 | +<div class="navbar"> |
| 367 | +<hr><center><a href="cover.html">previous</a> <a href="intro.html">next</a> <a href="cover.html#toc">contents</a> <a href="indexlist.html">index</a> |
| 368 | +</center></div> |
| 369 | +</BODY> |
| 370 | +</HTML> |
0 commit comments