|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en" class="yui3-loading"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Adjusting a Page Theme on the Fly</title> |
|
|
6 |
<link rel="stylesheet" type="text/css" href="../assets/stylesheet/w3.css"> |
|
|
7 |
<style> |
|
|
8 |
/* For supporting browsers, the overlay is rendered semi-transparent with |
|
|
9 |
* fancy rounded corners */ |
|
|
10 |
.yui3-overlay { |
|
|
11 |
background: rgba(128,128,128,0.3); |
|
|
12 |
-moz-border-radius: 10px; |
|
|
13 |
-webkit-border-radius: 10px; |
|
|
14 |
border-radius: 10px; |
|
|
15 |
padding: 7px; |
|
|
16 |
cursor: move; |
|
|
17 |
} |
|
|
18 |
.yui3-overlay-content { |
|
|
19 |
background: rgba(205,205,205,0.3); |
|
|
20 |
-moz-border-radius: 10px; |
|
|
21 |
-webkit-border-radius: 10px; |
|
|
22 |
border-radius: 10px; |
|
|
23 |
padding: 1px; |
|
|
24 |
} |
|
|
25 |
.yui3-overlay form { |
|
|
26 |
background: #f2fbff url(../assets/stylesheet/gradient-promo.png) repeat-x scroll 0 0; |
|
|
27 |
border: 2px solid #fff; |
|
|
28 |
-moz-border-radius: 10px; |
|
|
29 |
-webkit-border-radius: 10px; |
|
|
30 |
border-radius: 10px; |
|
|
31 |
margin: 0; |
|
|
32 |
padding: 0; |
|
|
33 |
font-size: 13px; |
|
|
34 |
} |
|
|
35 |
.yui3-overlay fieldset { |
|
|
36 |
border: 1px solid #cde; |
|
|
37 |
-moz-border-radius: 10px; |
|
|
38 |
-webkit-border-radius: 10px; |
|
|
39 |
border-radius: 10px; |
|
|
40 |
margin: 0; |
|
|
41 |
padding: 20px; |
|
|
42 |
} |
|
|
43 |
.yui3-overlay h3 { |
|
|
44 |
border-bottom: 2px solid #fff; |
|
|
45 |
color: #479; |
|
|
46 |
background: transparent; |
|
|
47 |
margin: 0; |
|
|
48 |
font-size: 175%; |
|
|
49 |
} |
|
|
50 |
.yui3-overlay label { |
|
|
51 |
display: block; |
|
|
52 |
margin: 1.3em 0 0.5ex; |
|
|
53 |
font-weight: bold; |
|
|
54 |
color: #003; |
|
|
55 |
} |
|
|
56 |
.yui3-overlay p { |
|
|
57 |
margin: 2em 0 0; |
|
|
58 |
} |
|
|
59 |
/* override the move cursor for the Slider */ |
|
|
60 |
.yui3-overlay .yui3-slider:hover { |
|
|
61 |
cursor: default; |
|
|
62 |
} |
|
|
63 |
</style> |
|
|
64 |
|
|
|
65 |
</head> |
|
|
66 |
<body> |
|
|
67 |
<div class="navbar" align="center"> |
|
|
68 |
<a href="http://www.w3.org/TR/html401/struct/objects.html"> |
|
|
69 |
previous</a> <a href="http://www.w3.org/TR/html401/present/graphics.html">next</a> <a href="http://www.w3.org/TR/html401/cover.html#minitoc">contents</a> <a href="http://www.w3.org/TR/html401/index/elements.html"> |
|
|
70 |
elements</a> <a href="http://www.w3.org/TR/html401/index/attributes.html">attributes</a> <a href="http://www.w3.org/TR/html401/index/list.html">index</a> |
|
|
71 |
|
|
|
72 |
<hr></div> |
|
|
73 |
|
|
|
74 |
<h1 align="center"><a name="h-14">14</a> <a name="stylesheets">Style |
|
|
75 |
Sheets</a></h1> |
|
|
76 |
|
|
|
77 |
<div class="subtoc"> |
|
|
78 |
<p><strong>Contents</strong></p> |
|
|
79 |
|
|
|
80 |
<ol> |
|
|
81 |
<li><a class="tocxref" href="#h-14.1">Introduction to style sheets</a></li> |
|
|
82 |
|
|
|
83 |
<li><a class="tocxref" href="#h-14.2">Adding style to HTML</a> |
|
|
84 |
|
|
|
85 |
<ol> |
|
|
86 |
<li><a class="tocxref" href="#h-14.2.1">Setting the default style sheet |
|
|
87 |
language</a></li> |
|
|
88 |
|
|
|
89 |
<li><a class="tocxref" href="#h-14.2.2">Inline style information</a></li> |
|
|
90 |
|
|
|
91 |
<li><a class="tocxref" href="#h-14.2.3">Header style information: the <samp class="einst2">STYLE</samp> element</a></li> |
|
|
92 |
|
|
|
93 |
<li><a class="tocxref" href="#h-14.2.4">Media types</a></li> |
|
|
94 |
</ol> |
|
|
95 |
</li> |
|
|
96 |
|
|
|
97 |
<li><a class="tocxref" href="#h-14.3">External style sheets</a> |
|
|
98 |
|
|
|
99 |
<ol> |
|
|
100 |
<li><a class="tocxref" href="#h-14.3.1">Preferred and alternate style |
|
|
101 |
sheets</a></li> |
|
|
102 |
|
|
|
103 |
<li><a class="tocxref" href="#h-14.3.2">Specifying external style |
|
|
104 |
sheets</a></li> |
|
|
105 |
</ol> |
|
|
106 |
</li> |
|
|
107 |
|
|
|
108 |
<li><a class="tocxref" href="#h-14.4">Cascading style sheets</a> |
|
|
109 |
|
|
|
110 |
<ol> |
|
|
111 |
<li><a class="tocxref" href="#h-14.4.1">Media-dependent cascades</a></li> |
|
|
112 |
|
|
|
113 |
<li><a class="tocxref" href="#h-14.4.2">Inheritance and cascading</a></li> |
|
|
114 |
</ol> |
|
|
115 |
</li> |
|
|
116 |
|
|
|
117 |
<li><a class="tocxref" href="#h-14.5">Hiding style data from user |
|
|
118 |
agents</a></li> |
|
|
119 |
|
|
|
120 |
<li><a class="tocxref" href="#h-14.6">Linking to style sheets with HTTP |
|
|
121 |
headers</a></li> |
|
|
122 |
</ol> |
|
|
123 |
</div> |
|
|
124 |
|
|
|
125 |
<h2><a name="h-14.1">14.1</a> <span class="index-inst" title="style |
|
|
126 |
sheet::introduction to"><a name="idx-style_sheet-3">Introduction to style |
|
|
127 |
sheets</a></span></h2> |
|
|
128 |
|
|
|
129 |
<p>Style sheets represent a major breakthrough for Web page designers, |
|
|
130 |
expanding their ability to improve the appearance of their pages. In the |
|
|
131 |
scientific environments in which the Web was conceived, people are more |
|
|
132 |
concerned with the content of their documents than the presentation. As people |
|
|
133 |
from wider walks of life discovered the Web, the limitations of HTML became a |
|
|
134 |
source of continuing frustration and authors were forced to sidestep HTML's |
|
|
135 |
stylistic limitations. While the intentions have been good -- to improve the |
|
|
136 |
presentation of Web pages -- the techniques for doing so have had unfortunate |
|
|
137 |
side effects. These techniques work for some of the people, some of the time, |
|
|
138 |
but not for all of the people, all of the time. They include:</p> |
|
|
139 |
|
|
|
140 |
<ul> |
|
|
141 |
<li>Using proprietary HTML extensions</li> |
|
|
142 |
|
|
|
143 |
<li>Converting text into images</li> |
|
|
144 |
|
|
|
145 |
<li>Using images for white space control</li> |
|
|
146 |
|
|
|
147 |
<li>Use of tables for page layout</li> |
|
|
148 |
|
|
|
149 |
<li>Writing a program instead of using HTML</li> |
|
|
150 |
</ul> |
|
|
151 |
|
|
|
152 |
<p>These techniques considerably increase the complexity of Web pages, offer |
|
|
153 |
limited flexibility, suffer from interoperability problems, and create |
|
|
154 |
hardships for people with disabilities.</p> |
|
|
155 |
|
|
|
156 |
<p>Style sheets solve these problems at the same time they supersede the |
|
|
157 |
limited range of presentation mechanisms in HTML. Style sheets make it easy to |
|
|
158 |
specify the amount of white space between text lines, the amount lines are |
|
|
159 |
indented, the colors used for the text and the backgrounds, the font size and |
|
|
160 |
style, and a host of other details.</p> |
|
|
161 |
|
|
|
162 |
<div class="example"> |
|
|
163 |
<p>For example, the following short CSS style sheet (stored in the file |
|
|
164 |
"special.css"), sets the text color of a paragraph to green and surrounds it |
|
|
165 |
with a solid red border:</p> |
|
|
166 |
|
|
|
167 |
<pre>P.special { |
|
|
168 |
color : green; |
|
|
169 |
border: solid red; |
|
|
170 |
} |
|
|
171 |
</pre> |
|
|
172 |
|
|
|
173 |
<p>Authors may link this style sheet to their source HTML document with the <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst"> |
|
|
174 |
LINK</samp></a> element:</p> |
|
|
175 |
|
|
|
176 |
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
|
177 |
"http://www.w3.org/TR/html4/strict.dtd"> |
|
|
178 |
<HTML> |
|
|
179 |
<HEAD> |
|
|
180 |
<LINK href="special.css" rel="stylesheet" type="text/css"> |
|
|
181 |
</HEAD> |
|
|
182 |
<BODY> |
|
|
183 |
<P class="special">This paragraph should have special green text. |
|
|
184 |
</BODY> |
|
|
185 |
</HTML> |
|
|
186 |
</pre> |
|
|
187 |
</div> |
|
|
188 |
|
|
|
189 |
<p>HTML 4 provides support for the following style sheet features:</p> |
|
|
190 |
|
|
|
191 |
<dl> |
|
|
192 |
<dt><b>Flexible placement of style information</b></dt> |
|
|
193 |
|
|
|
194 |
<dd>Placing style sheets in separate files makes them easy to reuse. Sometimes |
|
|
195 |
it's useful to include rendering instructions within the document to which they |
|
|
196 |
apply, either grouped at the start of the document, or in attributes of the |
|
|
197 |
elements throughout the body of the document. To make it easier to manage style |
|
|
198 |
on a site basis, this specification describes how to use HTTP headers to set |
|
|
199 |
the style sheets to be applied to a document.</dd> |
|
|
200 |
|
|
|
201 |
<dt><b>Independence from specific style sheet languages</b></dt> |
|
|
202 |
|
|
|
203 |
<dd>This specification doesn't tie HTML to any particular style sheet language. |
|
|
204 |
This allows for a range of such languages to be used, for instance simple ones |
|
|
205 |
for the majority of users and much more complex ones for the minority of users |
|
|
206 |
with highly specialized needs. The examples included below all use the CSS |
|
|
207 |
(Cascading Style Sheets) language <a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-CSS1" class="informref">[CSS1]</a>, but other style |
|
|
208 |
sheet languages would be possible.</dd> |
|
|
209 |
|
|
|
210 |
<dt><b>Cascading</b></dt> |
|
|
211 |
|
|
|
212 |
<dd>This is the capability provided by some style sheet languages such as CSS |
|
|
213 |
to allow style information from several sources to be blended together. These |
|
|
214 |
could be, for instance, corporate style guidelines, styles common to a group of |
|
|
215 |
documents, and styles specific to a single document. By storing these |
|
|
216 |
separately, style sheets can be reused, simplifying authoring and making more |
|
|
217 |
effective use of network caching. The cascade defines an ordered sequence of |
|
|
218 |
style sheets where rules in later sheets have greater precedence than earlier |
|
|
219 |
ones. Not all style sheet languages support cascading.</dd> |
|
|
220 |
|
|
|
221 |
<dt><span class="index-inst" title="accessibility::and style sheets"><a name="idx-accessibility"><b>Media dependencies</b></a></span></dt> |
|
|
222 |
|
|
|
223 |
<dd>HTML allows authors to specify documents in a media-independent way. This |
|
|
224 |
allows users to access Web pages using a wide variety of devices and media, |
|
|
225 |
e.g., graphical displays for computers running Windows, Macintosh OS, and X11, |
|
|
226 |
devices for television sets, specially adapted phones and PDA-based portable |
|
|
227 |
devices, speech-based browsers, and braille-based tactile devices. |
|
|
228 |
|
|
|
229 |
<p>Style sheets, by contrast, apply to specific media or media groups. A style |
|
|
230 |
sheet intended for screen use may be applicable when printing, but is of little |
|
|
231 |
use for speech-based browsers. This specification allows you to define the |
|
|
232 |
broad categories of media a given style sheet is applicable to. This allows |
|
|
233 |
user agents to avoid retrieving inappropriate style sheets. Style sheet |
|
|
234 |
languages may include features for describing media dependencies within the |
|
|
235 |
same style sheet.</p> |
|
|
236 |
</dd> |
|
|
237 |
|
|
|
238 |
<dt><b>Alternate styles</b></dt> |
|
|
239 |
|
|
|
240 |
<dd>Authors may wish to offer readers several ways to view a document. For |
|
|
241 |
instance, a style sheet for rendering compact documents with small fonts, or |
|
|
242 |
one that specifies larger fonts for increased legibility. This specification |
|
|
243 |
allows authors to specify a preferred style sheet as well as alternates that |
|
|
244 |
target specific users or media. User agents should give users the opportunity |
|
|
245 |
to select from among alternate style sheets or to switch off style sheets |
|
|
246 |
altogether.</dd> |
|
|
247 |
|
|
|
248 |
<dt><b>Performance concerns</b></dt> |
|
|
249 |
|
|
|
250 |
<dd>Some people have voiced concerns over performance issues for style sheets. |
|
|
251 |
For instance, retrieving an external style sheet may delay the full |
|
|
252 |
presentation for the user. A similar situation arises if the document head |
|
|
253 |
includes a lengthy set of style rules. |
|
|
254 |
|
|
|
255 |
<p>The current proposal addresses these issues by allowing authors to include |
|
|
256 |
rendering instructions within each HTML element. The rendering information is |
|
|
257 |
then always available by the time the user agent wants to render each |
|
|
258 |
element.</p> |
|
|
259 |
|
|
|
260 |
<p>In many cases, authors will take advantage of a common style sheet for a |
|
|
261 |
group of documents. In this case, distributing style rules throughout the |
|
|
262 |
document will actually lead to worse performance than using a linked style |
|
|
263 |
sheet, since for most documents, the style sheet will already be present in the |
|
|
264 |
local cache. The public availability of good style sheets will encourage this |
|
|
265 |
effect.</p> |
|
|
266 |
</dd> |
|
|
267 |
</dl> |
|
|
268 |
|
|
|
269 |
<h2><a name="h-14.2">14.2</a> Adding style to HTML</h2> |
|
|
270 |
|
|
|
271 |
<div class="note"> |
|
|
272 |
<p><em><strong>Note.</strong> The sample default style sheet for HTML 4 that is |
|
|
273 |
included in <a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-CSS2" class="informref">[CSS2]</a> expresses generally accepted default style information |
|
|
274 |
for each element. Authors and implementors alike might find this a useful |
|
|
275 |
resource.</em></p> |
|
|
276 |
</div> |
|
|
277 |
|
|
|
278 |
<p>HTML documents may contain style sheet rules directly in them or they may |
|
|
279 |
import style sheets.</p> |
|
|
280 |
|
|
|
281 |
<p>Any style sheet language may be used with HTML. A simple style sheet |
|
|
282 |
language may suffice for the needs of most users, but other languages may be |
|
|
283 |
more suited to highly specialized needs. This specification uses the style |
|
|
284 |
language "Cascading Style Sheets" (<a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-CSS1" class="informref">[CSS1]</a>), abbreviated CSS, |
|
|
285 |
for examples.</p> |
|
|
286 |
|
|
|
287 |
<p>The <a href="http://www.w3.org/TR/html401/types.html#type-style">syntax of style data</a> depends on |
|
|
288 |
the style sheet language.</p> |
|
|
289 |
|
|
|
290 |
<h3><a name="h-14.2.1">14.2.1</a> <span class="index-inst" title="default::style sheet language|style sheet |
|
|
291 |
language::default|HTTP::Content-Style-Type header|Content-Style-Type header"><a name="default-style">Setting the default style sheet language</a></span></h3> |
|
|
292 |
|
|
|
293 |
<p>Authors must specify the style sheet language of style information |
|
|
294 |
associated with an HTML document.</p> |
|
|
295 |
|
|
|
296 |
<p>Authors should use the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">META</samp></a> element to set the default style |
|
|
297 |
sheet language for a document. For example, to set the default to CSS, authors |
|
|
298 |
should put the following declaration in the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst"> |
|
|
299 |
HEAD</samp></a> of their documents:</p> |
|
|
300 |
|
|
|
301 |
<pre><META http-equiv="Content-Style-Type" content="text/css"> |
|
|
302 |
</pre> |
|
|
303 |
|
|
|
304 |
<p>The default style sheet language may also be set with HTTP headers. The |
|
|
305 |
above <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">META</samp></a> declaration is equivalent to the HTTP header:</p> |
|
|
306 |
|
|
|
307 |
<pre>Content-Style-Type: text/css |
|
|
308 |
</pre> |
|
|
309 |
|
|
|
310 |
<p>User agents should determine the default style sheet language for a document |
|
|
311 |
according to the following steps (highest to lowest priority):</p> |
|
|
312 |
|
|
|
313 |
<ol> |
|
|
314 |
<li>If any <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">META</samp></a> declarations specify the "Content-Style-Type", |
|
|
315 |
the last one in the character stream determines the default style sheet |
|
|
316 |
language.</li> |
|
|
317 |
|
|
|
318 |
<li>Otherwise, if any HTTP headers specify the "Content-Style-Type", the last |
|
|
319 |
one in the character stream determines the default style sheet language.</li> |
|
|
320 |
|
|
|
321 |
<li>Otherwise, the default style sheet language is "text/css".</li> |
|
|
322 |
</ol> |
|
|
323 |
|
|
|
324 |
<p>Documents that include elements that set the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-style" class="noxref"><samp class="ainst">style</samp></a> |
|
|
325 |
attribute but which don't define a default style sheet language are incorrect. |
|
|
326 |
<span class="index-inst" title="authoring tool::and default style sheet |
|
|
327 |
language"><a name="idx-authoring_tool">Authoring tools</a></span> should |
|
|
328 |
generate default style sheet language information (typically a <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst"> |
|
|
329 |
META</samp></a> declaration) so that user agents do not have to rely on a |
|
|
330 |
default of "text/css".</p> |
|
|
331 |
|
|
|
332 |
<h3><a name="h-14.2.2">14.2.2</a> <a name="style-element">Inline style |
|
|
333 |
information</a></h3> |
|
|
334 |
|
|
|
335 |
<div class="adef-list"> |
|
|
336 |
<p><em>Attribute definitions</em></p> |
|
|
337 |
|
|
|
338 |
<dl> |
|
|
339 |
<dt><a name="adef-style"><samp class="adef">style</samp></a> = <a href="http://www.w3.org/TR/html401/types.html#type-style"><em>style</em></a> <a href="http://www.w3.org/TR/html401/types.html#case-neutral">[CN]</a></dt> |
|
|
340 |
|
|
|
341 |
<dd>This attribute specifies style information for the current element.</dd> |
|
|
342 |
</dl> |
|
|
343 |
</div> |
|
|
344 |
|
|
|
345 |
<p><span class="index-inst" title="style sheet::inline rules"><a name="idx-style_sheet-4">The</a></span> <a href="http://www.w3.org/TR/html401/types.html#type-style"> |
|
|
346 |
syntax</a> of the value of the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-style" class="noxref"> |
|
|
347 |
<samp class="ainst">style</samp></a> attribute is determined by the <a href="#default-style">default style sheet language</a>. For example, for [[CSS2]] |
|
|
348 |
inline style, use the declaration block syntax described in section 4.1.8 |
|
|
349 |
(without curly brace delimiters).</p> |
|
|
350 |
|
|
|
351 |
<div class="example"> |
|
|
352 |
<p>This CSS example sets color and font size information for the text in a |
|
|
353 |
specific paragraph.</p> |
|
|
354 |
|
|
|
355 |
<pre><P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful? |
|
|
356 |
</pre> |
|
|
357 |
|
|
|
358 |
<p>In CSS, property declarations have the form "name : value" and are separated |
|
|
359 |
by a semi-colon.</p> |
|
|
360 |
</div> |
|
|
361 |
|
|
|
362 |
<p>To specify style information for more than one element, authors should use |
|
|
363 |
the <samp class="edef">STYLE</samp> element. For optimal flexibility, authors |
|
|
364 |
should define styles in external style sheets.</p> |
|
|
365 |
|
|
|
366 |
<h3><a name="h-14.2.3">14.2.3</a> <a name="style-group">Header style |
|
|
367 |
information</a>: the <a name="edef-STYLE"><samp class="edef">STYLE</samp></a> |
|
|
368 |
element</h3> |
|
|
369 |
|
|
|
370 |
<div class="dtd-fragment"> |
|
|
371 |
<pre class="dtd-fragment"><!ELEMENT <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> - - <a href="http://www.w3.org/TR/html401/sgml/dtd.html#StyleSheet">%StyleSheet</a> -- style info --> |
|
|
372 |
<!ATTLIST STYLE |
|
|
373 |
<a href="http://www.w3.org/TR/html401/sgml/dtd.html#i18n">%i18n;</a> -- <a href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-lang">lang</a>, <a href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-dir">dir</a>, for use with title -- |
|
|
374 |
<a href="http://www.w3.org/TR/html401/present/styles.html#adef-type-STYLE" class="noxref"><samp class="ainst-STYLE">type</samp></a> <a href="http://www.w3.org/TR/html401/sgml/dtd.html#ContentType">%ContentType;</a> #REQUIRED -- content type of style language -- |
|
|
375 |
<a href="http://www.w3.org/TR/html401/present/styles.html#adef-media" class="noxref"><samp class="ainst-STYLE">media</samp></a> <a href="http://www.w3.org/TR/html401/sgml/dtd.html#MediaDesc">%MediaDesc;</a> #IMPLIED -- designed for use with these media -- |
|
|
376 |
<a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst-STYLE">title</samp></a> <a href="http://www.w3.org/TR/html401/sgml/dtd.html#Text">%Text;</a> #IMPLIED -- advisory title -- |
|
|
377 |
> |
|
|
378 |
</pre> |
|
|
379 |
</div> |
|
|
380 |
|
|
|
381 |
<p><em>Start tag: <strong>required</strong>, End tag: <strong> |
|
|
382 |
required</strong></em></p> |
|
|
383 |
|
|
|
384 |
<div class="adef-list"> |
|
|
385 |
<p><em>Attribute definitions</em></p> |
|
|
386 |
|
|
|
387 |
<dl> |
|
|
388 |
<dt><a name="adef-type-STYLE"><samp class="adef">type</samp></a> = <a href="http://www.w3.org/TR/html401/types.html#type-content-type"><em>content-type</em></a> <a href="http://www.w3.org/TR/html401/types.html#case-insensitive">[CI]</a></dt> |
|
|
389 |
|
|
|
390 |
<dd>This attribute specifies the style sheet language of the element's contents |
|
|
391 |
and overrides the default style sheet language. The style sheet language is |
|
|
392 |
specified as a content type (e.g., "text/css"). Authors must supply a value for |
|
|
393 |
this attribute; there is no default value for this attribute.</dd> |
|
|
394 |
|
|
|
395 |
<dt><a name="adef-media"><samp class="adef">media</samp></a> = <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors"><em>media-descriptors</em></a> <a href="http://www.w3.org/TR/html401/types.html#case-insensitive">[CI]</a></dt> |
|
|
396 |
|
|
|
397 |
<dd>This attribute specifies the intended destination medium for style |
|
|
398 |
information. It may be a single media descriptor or a comma-separated list. The |
|
|
399 |
default value for this attribute is "screen".</dd> |
|
|
400 |
</dl> |
|
|
401 |
</div> |
|
|
402 |
|
|
|
403 |
<div class="aref-list"> |
|
|
404 |
<p><em>Attributes defined elsewhere</em></p> |
|
|
405 |
|
|
|
406 |
<ul> |
|
|
407 |
<li><a href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-lang" class="noxref"><samp class="ainst">lang</samp></a> (<a href="http://www.w3.org/TR/html401/struct/dirlang.html#language-info">language information</a>), <a href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-dir" class="noxref"><samp class="ainst"> |
|
|
408 |
dir</samp></a> (<a href="http://www.w3.org/TR/html401/struct/dirlang.html#bidirection">text |
|
|
409 |
direction</a>)</li> |
|
|
410 |
|
|
|
411 |
<li><a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">title</samp></a> (<a href="http://www.w3.org/TR/html401/struct/global.html#title">element |
|
|
412 |
title</a>)</li> |
|
|
413 |
</ul> |
|
|
414 |
</div> |
|
|
415 |
|
|
|
416 |
<p>The <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst"> |
|
|
417 |
STYLE</samp></a> element allows authors to put style sheet rules in the <span class="index-inst" title="style sheet::rules in HEAD"><a name="idx-style_sheet-5">head</a></span> of the document. HTML permits any number of |
|
|
418 |
<a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst"> |
|
|
419 |
STYLE</samp></a> elements in the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst">HEAD</samp></a> section of a document.</p> |
|
|
420 |
|
|
|
421 |
<p>User agents that don't support style sheets, or don't support the specific |
|
|
422 |
style sheet language used by a <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"> |
|
|
423 |
<samp class="einst">STYLE</samp></a> element, must hide the contents of the <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst"> |
|
|
424 |
STYLE</samp></a> element. <span class="index-inst" title="error::rendering |
|
|
425 |
style rules in STYLE"><a name="idx-error">It is an error</a></span> to render |
|
|
426 |
the content as part of the document's text. Some style sheet languages support |
|
|
427 |
syntax for <a href="#hiding">hiding the content</a> from non-conforming user |
|
|
428 |
agents.</p> |
|
|
429 |
|
|
|
430 |
<p>The <a href="http://www.w3.org/TR/html401/types.html#type-style">syntax of style data</a> depends on |
|
|
431 |
the style sheet language.</p> |
|
|
432 |
|
|
|
433 |
<p>Some style sheet implementations may allow a wider variety of rules in the |
|
|
434 |
<a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst"> |
|
|
435 |
STYLE</samp></a> element than in the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-style" class="noxref"><samp class="ainst">style</samp></a> attribute. For example, with CSS, |
|
|
436 |
rules may be declared within a <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"> |
|
|
437 |
<samp class="einst">STYLE</samp></a> element for:</p> |
|
|
438 |
|
|
|
439 |
<ul> |
|
|
440 |
<li>All instances of a specific HTML element (e.g., all <a href="http://www.w3.org/TR/html401/struct/text.html#edef-P" class="noxref"><samp class="einst">P</samp></a> |
|
|
441 |
elements, all <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst">H1</samp></a> elements, etc.)</li> |
|
|
442 |
|
|
|
443 |
<li>All instances of an HTML element belonging to a specific class (i.e., whose |
|
|
444 |
<a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst"> |
|
|
445 |
class</samp></a> attribute is set to some value).</li> |
|
|
446 |
|
|
|
447 |
<li>Single instances of an HTML element (i.e., whose <a href="http://www.w3.org/TR/html401/struct/global.html#adef-id" class="noxref"><samp class="ainst"> |
|
|
448 |
id</samp></a> attribute is set to some value).</li> |
|
|
449 |
</ul> |
|
|
450 |
|
|
|
451 |
<p>Rules for style rule precedences and inheritance depend on the style sheet |
|
|
452 |
language.</p> |
|
|
453 |
|
|
|
454 |
<div class="example"> |
|
|
455 |
<p>The following CSS <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> declaration puts a border around every <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst"> |
|
|
456 |
H1</samp></a> element in the document and centers it on the page.</p> |
|
|
457 |
|
|
|
458 |
<pre><HEAD> |
|
|
459 |
<STYLE type="text/css"> |
|
|
460 |
H1 {border-width: 1; border: solid; text-align: center} |
|
|
461 |
</STYLE> |
|
|
462 |
</HEAD> |
|
|
463 |
</pre> |
|
|
464 |
|
|
|
465 |
<p>To specify that this style information should only apply to <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst"> |
|
|
466 |
H1</samp></a> elements of a specific class, we modify it as follows:</p> |
|
|
467 |
|
|
|
468 |
<pre><HEAD> |
|
|
469 |
<STYLE type="text/css"> |
|
|
470 |
H1.myclass {border-width: 1; border: solid; text-align: center} |
|
|
471 |
</STYLE> |
|
|
472 |
</HEAD> |
|
|
473 |
<BODY> |
|
|
474 |
<H1 class="myclass"> This H1 is affected by our style </H1> |
|
|
475 |
<H1> This one is not affected by our style </H1> |
|
|
476 |
</BODY> |
|
|
477 |
</pre> |
|
|
478 |
|
|
|
479 |
<p>Finally, to limit the scope of the style information to a single instance of |
|
|
480 |
<a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst"> |
|
|
481 |
H1</samp></a>, set the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-id" class="noxref"> |
|
|
482 |
<samp class="ainst">id</samp></a> attribute:</p> |
|
|
483 |
|
|
|
484 |
<pre><HEAD> |
|
|
485 |
<STYLE type="text/css"> |
|
|
486 |
#myid {border-width: 1; border: solid; text-align: center} |
|
|
487 |
</STYLE> |
|
|
488 |
</HEAD> |
|
|
489 |
<BODY> |
|
|
490 |
<H1 class="myclass"> This H1 is not affected </H1> |
|
|
491 |
<H1 id="myid"> This H1 is affected by style </H1> |
|
|
492 |
<H1> This H1 is not affected </H1> |
|
|
493 |
</BODY> |
|
|
494 |
</pre> |
|
|
495 |
</div> |
|
|
496 |
|
|
|
497 |
<p><span class="index-inst" title="style sheet::used with DIV and SPAN"><a name="idx-style_sheet-6">Although style information</a></span> may be set for |
|
|
498 |
almost every HTML element, two elements, <a href="http://www.w3.org/TR/html401/struct/global.html#edef-DIV" class="noxref"><samp class="einst"> |
|
|
499 |
DIV</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN" class="noxref"> |
|
|
500 |
<samp class="einst">SPAN</samp></a>, are particularly useful in that they do |
|
|
501 |
not impose any presentation semantics (besides <a href="http://www.w3.org/TR/html401/struct/global.html#block-inline">block-level vs. inline</a>). When combined |
|
|
502 |
with style sheets, these elements allow users to extend HTML indefinitely, |
|
|
503 |
particularly when used with the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst">class</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#adef-id" class="noxref"><samp class="ainst"> |
|
|
504 |
id</samp></a> attributes.</p> |
|
|
505 |
|
|
|
506 |
<div class="example"> |
|
|
507 |
<p>In the following example, we use the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN" class="noxref"><samp class="einst"> |
|
|
508 |
SPAN</samp></a> element to set the font style of the first few words of a |
|
|
509 |
paragraph to small caps.</p> |
|
|
510 |
|
|
|
511 |
<pre><HEAD> |
|
|
512 |
<STYLE type="text/css"> |
|
|
513 |
SPAN.sc-ex { font-variant: small-caps } |
|
|
514 |
</STYLE> |
|
|
515 |
</HEAD> |
|
|
516 |
<BODY> |
|
|
517 |
<P><SPAN class="sc-ex">The first</SPAN> few words of |
|
|
518 |
this paragraph are in small-caps. |
|
|
519 |
</BODY> |
|
|
520 |
</pre> |
|
|
521 |
</div> |
|
|
522 |
|
|
|
523 |
<div class="example"> |
|
|
524 |
<p>In the following example, we use <a href="http://www.w3.org/TR/html401/struct/global.html#edef-DIV" class="noxref"><samp class="einst">DIV</samp></a> and the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst"> |
|
|
525 |
class</samp></a> attribute to set the text justification for a series of |
|
|
526 |
paragraphs that make up the abstract section of a scientific article. This |
|
|
527 |
style information could be reused for other abstract sections by setting the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst"> |
|
|
528 |
class</samp></a> attribute elsewhere in the document.</p> |
|
|
529 |
|
|
|
530 |
<pre><HEAD> |
|
|
531 |
<STYLE type="text/css"> |
|
|
532 |
DIV.Abstract { text-align: justify } |
|
|
533 |
</STYLE> |
|
|
534 |
</HEAD> |
|
|
535 |
<BODY> |
|
|
536 |
<DIV class="Abstract"> |
|
|
537 |
<P>The Chieftain product range is our market winner for |
|
|
538 |
the coming year. This report sets out how to position |
|
|
539 |
Chieftain against competing products. |
|
|
540 |
|
|
|
541 |
<P>Chieftain replaces the Commander range, which will |
|
|
542 |
remain on the price list until further notice. |
|
|
543 |
</DIV> |
|
|
544 |
</BODY> |
|
|
545 |
</pre> |
|
|
546 |
</div> |
|
|
547 |
|
|
|
548 |
<h3><a name="h-14.2.4">14.2.4</a> <span class="index-inst" title="media::used |
|
|
549 |
with style sheets|style sheet::target media for"><a name="media-types">Media |
|
|
550 |
types</a></span></h3> |
|
|
551 |
|
|
|
552 |
<p>HTML allows authors to design documents that take advantage of the |
|
|
553 |
characteristics of the media where the document is to be rendered (e.g., |
|
|
554 |
graphical displays, television screens, handheld devices, speech-based |
|
|
555 |
browsers, braille-based tactile devices, etc.). By specifying the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-media" class="noxref"><samp class="ainst">media</samp></a> |
|
|
556 |
attribute, authors allow user agents to load and apply style sheets |
|
|
557 |
selectively. Please consult the list of recognized <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors">media descriptors</a>.</p> |
|
|
558 |
|
|
|
559 |
<div class="example"> |
|
|
560 |
<p>The following sample declarations apply to <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst"> |
|
|
561 |
H1</samp></a> elements. When projected in a business meeting, all instances |
|
|
562 |
will be blue. When printed, all instances will be centered.</p> |
|
|
563 |
|
|
|
564 |
<pre><HEAD> |
|
|
565 |
<STYLE type="text/css" media="projection"> |
|
|
566 |
H1 { color: blue} |
|
|
567 |
</STYLE> |
|
|
568 |
|
|
|
569 |
<STYLE type="text/css" media="print"> |
|
|
570 |
H1 { text-align: center } |
|
|
571 |
</STYLE> |
|
|
572 |
</pre> |
|
|
573 |
|
|
|
574 |
<p>This example adds sound effects to anchors for use in speech output:</p> |
|
|
575 |
|
|
|
576 |
<pre> <STYLE type="text/css" media="aural"> |
|
|
577 |
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} |
|
|
578 |
</STYLE> |
|
|
579 |
</HEAD> |
|
|
580 |
</pre> |
|
|
581 |
</div> |
|
|
582 |
|
|
|
583 |
<p>Media control is particularly interesting when applied to external style |
|
|
584 |
sheets since user agents can save time by retrieving from the network only |
|
|
585 |
those style sheets that apply to the current device. For instance, speech-based |
|
|
586 |
browsers can avoid downloading style sheets designed for visual rendering. See |
|
|
587 |
the section on <a href="#media-cascades">media-dependent cascades</a> for more |
|
|
588 |
information.</p> |
|
|
589 |
|
|
|
590 |
<h2><a name="h-14.3">14.3</a> <span class="index-inst" title="style |
|
|
591 |
sheet::external"><a name="style-external">External style sheets</a></span></h2> |
|
|
592 |
|
|
|
593 |
<p>Authors may separate style sheets from HTML documents. This offers several |
|
|
594 |
benefits:</p> |
|
|
595 |
|
|
|
596 |
<ul> |
|
|
597 |
<li>Authors and Web site managers may share style sheets across a number of |
|
|
598 |
documents (and sites).</li> |
|
|
599 |
|
|
|
600 |
<li>Authors may change the style sheet without requiring modifications to the |
|
|
601 |
document.</li> |
|
|
602 |
|
|
|
603 |
<li>User agents may load style sheets selectively (based on media |
|
|
604 |
descriptions).</li> |
|
|
605 |
</ul> |
|
|
606 |
|
|
|
607 |
<h3><a name="h-14.3.1">14.3.1</a> Preferred and alternate style sheets</h3> |
|
|
608 |
|
|
|
609 |
<p>HTML allows authors to associate any number of external style sheets with a |
|
|
610 |
document. The style sheet language defines how multiple external style sheets |
|
|
611 |
interact (for example, the CSS "cascade" rules).</p> |
|
|
612 |
|
|
|
613 |
<p><span class="index-def" title="style sheet::alternate|alternate style |
|
|
614 |
sheets"><a name="didx-style_sheet">Authors may specify a number of mutually |
|
|
615 |
exclusive style sheets called <dfn>alternate</dfn> style sheets.</a></span> |
|
|
616 |
Users may select their favorite among these depending on their preferences. For |
|
|
617 |
instance, an author may specify one style sheet designed for small screens and |
|
|
618 |
another for users with weak vision (e.g., large fonts). User agents should |
|
|
619 |
allow users to select from alternate style sheets.</p> |
|
|
620 |
|
|
|
621 |
<p><span class="index-def" title="style sheet::preferred|preferred style |
|
|
622 |
sheets"><a name="didx-style_sheet-1">The author may specify that one of the |
|
|
623 |
alternates is a <dfn>preferred</dfn> style sheet.</a></span> User agents should |
|
|
624 |
apply the author's preferred style sheet unless the user has selected a |
|
|
625 |
different alternate.</p> |
|
|
626 |
|
|
|
627 |
<p>Authors may group several alternate style sheets (including the author's |
|
|
628 |
preferred style sheets) under a single <dfn>style name</dfn>. When a user |
|
|
629 |
selects a named style, the user agent must apply all style sheets with that |
|
|
630 |
name. User agents must not apply alternate style sheets with a different style |
|
|
631 |
name. The section on <a href="#specifying-external">specifying external style |
|
|
632 |
sheets</a> explains how to name a group of style sheets.</p> |
|
|
633 |
|
|
|
634 |
<p><span class="index-def" title="style sheet::persistent|persistent style |
|
|
635 |
sheets"><a name="didx-style_sheet-2">Authors may also specify <dfn> |
|
|
636 |
persistent</dfn> style sheets that user agents must apply in addition to any |
|
|
637 |
alternate style sheet.</a></span></p> |
|
|
638 |
|
|
|
639 |
<p>User agents must respect <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors"> |
|
|
640 |
media descriptors</a> when applying any style sheet.</p> |
|
|
641 |
|
|
|
642 |
<p>User agents should also allow users to disable the author's style sheets |
|
|
643 |
entirely, in which case the user agent must not apply any persistent or |
|
|
644 |
alternate style sheets.</p> |
|
|
645 |
|
|
|
646 |
<h3><a name="h-14.3.2">14.3.2</a> <span class="index-inst" title="style |
|
|
647 |
sheet::specification of external|link::and external style sheets"><a name="specifying-external">Specifying external style sheets</a></span></h3> |
|
|
648 |
|
|
|
649 |
<p>Authors specify external style sheets with the following attributes of the |
|
|
650 |
<a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst"> |
|
|
651 |
LINK</samp></a> element:</p> |
|
|
652 |
|
|
|
653 |
<ul> |
|
|
654 |
<li>Set the value of <a href="http://www.w3.org/TR/html401/struct/links.html#adef-href" class="noxref"> |
|
|
655 |
<samp class="ainst">href</samp></a> to the location of the style sheet file. |
|
|
656 |
The value of <a href="http://www.w3.org/TR/html401/struct/links.html#adef-href" class="noxref"><samp class="ainst">href</samp></a> is a <a href="http://www.w3.org/TR/html401/types.html#type-uri"> |
|
|
657 |
URI</a>.</li> |
|
|
658 |
|
|
|
659 |
<li>Set the value of the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-type-A" class="noxref"><samp class="ainst-A">type</samp></a> attribute to indicate the |
|
|
660 |
language of the linked (style sheet) resource. This allows the user agent to |
|
|
661 |
avoid downloading a style sheet for an unsupported style sheet language.</li> |
|
|
662 |
|
|
|
663 |
<li>Specify that the style sheet is persistent, preferred, or alternate: |
|
|
664 |
|
|
|
665 |
<ul> |
|
|
666 |
<li>To make a style sheet persistent, set the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst"> |
|
|
667 |
rel</samp></a> attribute to "stylesheet" and don't set the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst"> |
|
|
668 |
title</samp></a> attribute.</li> |
|
|
669 |
|
|
|
670 |
<li>To make a style sheet preferred, set the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst"> |
|
|
671 |
rel</samp></a> attribute to "stylesheet" and name the style sheet with the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst"> |
|
|
672 |
title</samp></a> attribute.</li> |
|
|
673 |
|
|
|
674 |
<li>To specify an alternate style sheet, set the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst"> |
|
|
675 |
rel</samp></a> attribute to "alternate stylesheet" and name the style sheet |
|
|
676 |
with the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">title</samp></a> attribute.</li> |
|
|
677 |
</ul> |
|
|
678 |
</li> |
|
|
679 |
</ul> |
|
|
680 |
|
|
|
681 |
<p>User agents should provide a means for users to view and pick from the list |
|
|
682 |
of alternate styles. The value of the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst"> |
|
|
683 |
title</samp></a> attribute is recommended as the name of each choice.</p> |
|
|
684 |
|
|
|
685 |
<div class="example"> |
|
|
686 |
<p>In this example, we first specify a persistent style sheet located in the |
|
|
687 |
file <tt>mystyle.css</tt>:</p> |
|
|
688 |
|
|
|
689 |
<pre><LINK href="mystyle.css" rel="stylesheet" type="text/css"> |
|
|
690 |
</pre> |
|
|
691 |
|
|
|
692 |
<p>Setting the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">title</samp></a> attribute makes this the author's preferred |
|
|
693 |
style sheet:</p> |
|
|
694 |
|
|
|
695 |
<pre> <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css"> |
|
|
696 |
</pre> |
|
|
697 |
|
|
|
698 |
<p>Adding the keyword "alternate" to the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst"> |
|
|
699 |
rel</samp></a> attribute makes it an alternate style sheet:</p> |
|
|
700 |
|
|
|
701 |
<pre><LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css"> |
|
|
702 |
</pre> |
|
|
703 |
</div> |
|
|
704 |
|
|
|
705 |
<p>For more information on external style sheets, please consult the section on |
|
|
706 |
<a href="http://www.w3.org/TR/html401/struct/links.html#linksandss">links and external style |
|
|
707 |
sheets.</a></p> |
|
|
708 |
|
|
|
709 |
<p><span class="index-inst" title="HTTP::Default-Style header|style |
|
|
710 |
sheet::specification of preferred">Authors may also use the <a name="idx-HTTP-1" href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">META</samp></a> element to set the document's preferred style |
|
|
711 |
sheet.</span> For example, to set the preferred style sheet to "compact" (see |
|
|
712 |
the preceding example), authors may include the following line in the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst"> |
|
|
713 |
HEAD</samp></a>:</p> |
|
|
714 |
|
|
|
715 |
<div class="example"> |
|
|
716 |
<pre><META http-equiv="Default-Style" content="compact"> |
|
|
717 |
</pre> |
|
|
718 |
</div> |
|
|
719 |
|
|
|
720 |
<p>The preferred style sheet may also be specified with HTTP headers. The above |
|
|
721 |
<a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst"> |
|
|
722 |
META</samp></a> declaration is equivalent to the HTTP header:</p> |
|
|
723 |
|
|
|
724 |
<div class="example"> |
|
|
725 |
<pre>Default-Style: "compact" |
|
|
726 |
</pre> |
|
|
727 |
</div> |
|
|
728 |
|
|
|
729 |
<p>If two or more <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"> |
|
|
730 |
<samp class="einst">META</samp></a> declarations or HTTP headers specify the |
|
|
731 |
preferred style sheet, the last one takes precedence. HTTP headers are |
|
|
732 |
considered to occur earlier than the document <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst"> |
|
|
733 |
HEAD</samp></a> for this purpose.</p> |
|
|
734 |
|
|
|
735 |
<p>If two or more <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">LINK</samp></a> elements specify a preferred style sheet, the |
|
|
736 |
first one takes precedence.</p> |
|
|
737 |
|
|
|
738 |
<p>Preferred style sheets specified with <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst"> |
|
|
739 |
META</samp></a> or HTTP headers have precedence over those specified with the |
|
|
740 |
<a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst"> |
|
|
741 |
LINK</samp></a> element.</p> |
|
|
742 |
|
|
|
743 |
<h2><a name="h-14.4">14.4</a> <span class="index-inst" title="style |
|
|
744 |
sheet::cascading|cascading style sheets"><a name="idx-style_sheet-11">Cascading |
|
|
745 |
style sheets</a></span></h2> |
|
|
746 |
|
|
|
747 |
<p><dfn>Cascading</dfn> style sheet languages such as CSS allow style |
|
|
748 |
information from several sources to be blended together. However, not all style |
|
|
749 |
sheet languages support cascading. To define a cascade, authors specify a |
|
|
750 |
sequence of <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">LINK</samp></a> and/or <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> elements. The style information |
|
|
751 |
is cascaded in the order the elements appear in the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst"> |
|
|
752 |
HEAD</samp></a>.</p> |
|
|
753 |
|
|
|
754 |
<div class="note"> |
|
|
755 |
<p><em><strong>Note.</strong> This specification does not specify how style |
|
|
756 |
sheets from different style languages cascade. Authors should avoid mixing |
|
|
757 |
style sheet languages.</em></p> |
|
|
758 |
</div> |
|
|
759 |
|
|
|
760 |
<div class="example"> |
|
|
761 |
<p>In the following example, we specify two alternate style sheets named |
|
|
762 |
"compact". If the user selects the "compact" style, the user agent must apply |
|
|
763 |
both external style sheets, as well as the persistent "common.css" style sheet. |
|
|
764 |
If the user selects the "big print" style, only the alternate style sheet |
|
|
765 |
"bigprint.css" and the persistent "common.css" will be applied.</p> |
|
|
766 |
|
|
|
767 |
<pre><LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> |
|
|
768 |
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> |
|
|
769 |
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> |
|
|
770 |
<LINK rel="stylesheet" href="common.css" type="text/css"> |
|
|
771 |
</pre> |
|
|
772 |
</div> |
|
|
773 |
|
|
|
774 |
<div class="example"> |
|
|
775 |
<p>Here is a cascade example that involves both the <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst"> |
|
|
776 |
LINK</samp></a> and <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> elements.</p> |
|
|
777 |
|
|
|
778 |
<pre><LINK rel="stylesheet" href="corporate.css" type="text/css"> |
|
|
779 |
<LINK rel="stylesheet" href="techreport.css" type="text/css"> |
|
|
780 |
<STYLE type="text/css"> |
|
|
781 |
p.special { color: rgb(230, 100, 180) } |
|
|
782 |
</STYLE> |
|
|
783 |
</pre> |
|
|
784 |
</div> |
|
|
785 |
|
|
|
786 |
<h3><a name="h-14.4.1">14.4.1</a> <span class="index-inst" title="media::and |
|
|
787 |
external style sheets|link::and media-dependent style sheets"><a name="media-cascades">Media-dependent cascades</a></span></h3> |
|
|
788 |
|
|
|
789 |
<p>A cascade may include style sheets applicable to different media. Both <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst"> |
|
|
790 |
LINK</samp></a> and <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> may be used with the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-media" class="noxref"><samp class="ainst">media</samp></a> |
|
|
791 |
attribute. The user agent is then responsible for filtering out those style |
|
|
792 |
sheets that do not apply to the current medium.</p> |
|
|
793 |
|
|
|
794 |
<div class="example"> |
|
|
795 |
<p>In the following example, we define a cascade where the "corporate" style |
|
|
796 |
sheet is provided in several versions: one suited to printing, one for screen |
|
|
797 |
use and one for speech-based browsers (useful, say, when reading email in the |
|
|
798 |
car). The "techreport" stylesheet applies to all media. The color rule defined |
|
|
799 |
by the <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst"> |
|
|
800 |
STYLE</samp></a> element is used for print and screen but not for aural |
|
|
801 |
rendering.</p> |
|
|
802 |
|
|
|
803 |
<pre><LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css"> |
|
|
804 |
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css"> |
|
|
805 |
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css"> |
|
|
806 |
<LINK rel="stylesheet" href="techreport.css" type="text/css"> |
|
|
807 |
<STYLE media="screen, print" type="text/css"> |
|
|
808 |
p.special { color: rgb(230, 100, 180) } |
|
|
809 |
</STYLE> |
|
|
810 |
</pre> |
|
|
811 |
</div> |
|
|
812 |
|
|
|
813 |
<h3><a name="h-14.4.2">14.4.2</a> Inheritance and cascading</h3> |
|
|
814 |
|
|
|
815 |
<p>When the user agent wants to render a document, it needs to find values for |
|
|
816 |
style properties, e.g. the font family, font style, size, line height, text |
|
|
817 |
color and so on. The exact mechanism depends on the style sheet language, but |
|
|
818 |
the following description is generally applicable:</p> |
|
|
819 |
|
|
|
820 |
<p>The cascading mechanism is used when a number of style rules all apply |
|
|
821 |
directly to an element. The mechanism allows the user agent to sort the rules |
|
|
822 |
by specificity, to determine which rule to apply. If no rule can be found, the |
|
|
823 |
next step depends on whether the style property can be inherited or not. Not |
|
|
824 |
all properties can be inherited. For these properties the style sheet language |
|
|
825 |
provides default values for use when there are no explicit rules for a |
|
|
826 |
particular element.</p> |
|
|
827 |
|
|
|
828 |
<p>If the property can be inherited, the user agent examines the immediately |
|
|
829 |
enclosing element to see if a rule applies to that. This process continues |
|
|
830 |
until an applicable rule is found. This mechanism allows style sheets to be |
|
|
831 |
specified compactly. For instance, authors may specify the font family for all |
|
|
832 |
elements within the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-BODY" class="noxref"> |
|
|
833 |
<samp class="einst">BODY</samp></a> by a single rule that applies to the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-BODY" class="noxref"><samp class="einst"> |
|
|
834 |
BODY</samp></a> element.</p> |
|
|
835 |
|
|
|
836 |
<h2><a name="h-14.5">14.5</a> <span class="index-inst" title="user agent::and |
|
|
837 |
style data|style sheet::comments to hide|comments::used to hide style sheet |
|
|
838 |
data"><a name="hiding">Hiding style data from user agents</a></span></h2> |
|
|
839 |
|
|
|
840 |
<p>Some style sheet languages support syntax intended to allow authors to hide |
|
|
841 |
the content of <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> elements from non-conforming user agents.</p> |
|
|
842 |
|
|
|
843 |
<div class="example"> |
|
|
844 |
<p>This example illustrates for CSS how to comment out the content of <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> |
|
|
845 |
elements to ensure that older, non-conforming user agents will not render them |
|
|
846 |
as text.</p> |
|
|
847 |
|
|
|
848 |
<pre><STYLE type="text/css"> |
|
|
849 |
<!-- |
|
|
850 |
H1 { color: red } |
|
|
851 |
P { color: blue} |
|
|
852 |
--> |
|
|
853 |
</STYLE> |
|
|
854 |
</pre> |
|
|
855 |
</div> |
|
|
856 |
|
|
|
857 |
<h2><a name="h-14.6">14.6</a> <span class="index-inst" title="HTTP::used to |
|
|
858 |
link external style sheets"><a name="idx-HTTP-2">Linking to style sheets with |
|
|
859 |
HTTP headers</a></span></h2> |
|
|
860 |
|
|
|
861 |
<p><em>This section only applies to user agents conforming to versions of HTTP |
|
|
862 |
that define a Link header field. Note that HTTP 1.1 as defined by <a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-RFC2616" class="informref"> |
|
|
863 |
[RFC2616]</a> does not include a Link header field (refer to section |
|
|
864 |
19.6.3).</em></p> |
|
|
865 |
|
|
|
866 |
<p>Web server managers may find it convenient to configure a server so that a |
|
|
867 |
style sheet will be applied to a group of pages. The HTTP <tt>Link</tt> header |
|
|
868 |
has the same effect as a <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">LINK</samp></a> element with the same attributes |
|
|
869 |
and values. Multiple <tt>Link</tt> headers correspond to multiple <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst"> |
|
|
870 |
LINK</samp></a> elements occurring in the same order. For instance,</p> |
|
|
871 |
|
|
|
872 |
<pre>Link: <http://www.acme.com/corporate.css>; REL=stylesheet |
|
|
873 |
</pre> |
|
|
874 |
|
|
|
875 |
<p>corresponds to:</p> |
|
|
876 |
|
|
|
877 |
<pre><LINK rel="stylesheet" href="http://www.acme.com/corporate.css"> |
|
|
878 |
</pre> |
|
|
879 |
|
|
|
880 |
<p>It is possible to specify several alternate styles using multiple <tt> |
|
|
881 |
Link</tt> headers, and then use the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst">rel</samp></a> attribute to determine the |
|
|
882 |
default style.</p> |
|
|
883 |
|
|
|
884 |
<div> |
|
|
885 |
<p>In the following example, "compact" is applied by default since it omits the |
|
|
886 |
"alternate" keyword for the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst">rel</samp></a> attribute.</p> |
|
|
887 |
|
|
|
888 |
<pre>Link: <compact.css>; rel="stylesheet"; title="compact" |
|
|
889 |
Link: <bigprint.css>; rel="alternate stylesheet"; title="big print" |
|
|
890 |
</pre> |
|
|
891 |
</div> |
|
|
892 |
|
|
|
893 |
<p>This should also work when HTML documents are sent by email. Some email |
|
|
894 |
agents can alter the ordering of <a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-RFC822" class="informref">[RFC822]</a> headers. To |
|
|
895 |
protect against this affecting the cascading order for style sheets specified |
|
|
896 |
by <tt>Link</tt> headers, authors can use header concatenation to merge several |
|
|
897 |
instances of the same header field. The quote marks are only needed when the |
|
|
898 |
attribute values include whitespace. Use SGML entities to reference characters |
|
|
899 |
that are otherwise not permitted within HTTP or email headers, or that are |
|
|
900 |
likely to be affected by transit through gateways.</p> |
|
|
901 |
|
|
|
902 |
<p><a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst"> |
|
|
903 |
LINK</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"> |
|
|
904 |
<samp class="einst">META</samp></a> elements implied by HTTP headers are |
|
|
905 |
defined as occurring before any explicit <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst"> |
|
|
906 |
LINK</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"> |
|
|
907 |
<samp class="einst">META</samp></a> elements in the document's <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst"> |
|
|
908 |
HEAD</samp></a>.</p> |
|
|
909 |
|
|
|
910 |
<div class="navbar" align="center"> |
|
|
911 |
<hr><a href="http://www.w3.org/TR/html401/struct/objects.html">previous</a> <a href="http://www.w3.org/TR/html401/present/graphics.html">next</a> <a href="http://www.w3.org/TR/html401/cover.html#minitoc">contents</a> |
|
|
912 |
<a href="http://www.w3.org/TR/html401/index/elements.html">elements</a> <a href="http://www.w3.org/TR/html401/index/attributes.html">attributes</a> <a href="http://www.w3.org/TR/html401/index/list.html"> |
|
|
913 |
index</a></div> |
|
|
914 |
|
|
|
915 |
<div id="form_container"> |
|
|
916 |
<form class="yui3-widget-bd" id="theme_form" action="#" method="get"> |
|
|
917 |
<fieldset> |
|
|
918 |
<h3>Update Theme</h3> |
|
|
919 |
<label for="font_size">Font size:</label> |
|
|
920 |
<input type="text" size="3" id="font_size" value="16px"> |
|
|
921 |
|
|
|
922 |
<label for="heading_color">Heading color:</label> |
|
|
923 |
<input type="text" size="12" id="heading_color" value="#005A9C"> |
|
|
924 |
|
|
|
925 |
<label for="link_hover">Link hover backgound:</label> |
|
|
926 |
<input type="text" size="12" id="link_hover" value="#ffa"> |
|
|
927 |
</fieldset> |
|
|
928 |
<input type="submit"> |
|
|
929 |
</form> |
|
|
930 |
</div> |
|
|
931 |
|
|
|
932 |
|
|
|
933 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
934 |
<script> |
|
|
935 |
// Create a new YUI instance, requiring stylesheet, overlay, slider, and the |
|
|
936 |
// dd-plugin to make the overlay draggable |
|
|
937 |
YUI().use("stylesheet","overlay","slider","dd-plugin", function (Y) { |
|
|
938 |
|
|
|
939 |
var myStyleSheet = new Y.StyleSheet(), |
|
|
940 |
overlayContent = Y.one('#form_container'), |
|
|
941 |
overlay, |
|
|
942 |
slider, |
|
|
943 |
slider_container, |
|
|
944 |
fontSizeInput, |
|
|
945 |
|
|
|
946 |
// Create the Overlay, using the form container as the contentBox. |
|
|
947 |
// The form is assigned a class yui-widget-bd that will be automatically |
|
|
948 |
// discovered by Overlay to populate the Overlay's body section. |
|
|
949 |
// The overlay is positioned in the top right corner, but made draggable |
|
|
950 |
// using Y.Plugin.Drag, provided by the dd-plugin module. |
|
|
951 |
overlay = new Y.Overlay({ |
|
|
952 |
srcNode: overlayContent, |
|
|
953 |
alignOn: [], |
|
|
954 |
width: '225px', |
|
|
955 |
align: { points: [ Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TR ] }, |
|
|
956 |
plugins: [ Y.Plugin.Drag ] |
|
|
957 |
}).render(); |
|
|
958 |
|
|
|
959 |
// Slider needs a parent element to have the sam skin class for UI skinning |
|
|
960 |
overlayContent.addClass('yui3-skin-sam'); |
|
|
961 |
|
|
|
962 |
// Progressively enhance the font-size input with a Slider |
|
|
963 |
fontSizeInput = Y.one('#font_size'); |
|
|
964 |
fontSizeInput.set('type','hidden'); |
|
|
965 |
fontSizeInput.get('parentNode').insertBefore( |
|
|
966 |
Y.Node.create('6 <span></span> 36'), |
|
|
967 |
fontSizeInput); |
|
|
968 |
|
|
|
969 |
slider_container = fontSizeInput.previous( "span" ); |
|
|
970 |
|
|
|
971 |
// Create a Slider to contain font size between 6px and 36px, using the |
|
|
972 |
// page's current font size as the initial value. |
|
|
973 |
// Set up an event subscriber during construction to update the replaced |
|
|
974 |
// input field's value and apply the change to the StyleSheet |
|
|
975 |
slider = new Y.Slider({ |
|
|
976 |
length: '100px', |
|
|
977 |
min: 6, |
|
|
978 |
max: 36, |
|
|
979 |
value: parseInt(Y.one('body').getStyle('fontSize')) || 13, |
|
|
980 |
after: { |
|
|
981 |
valueChange: function (e) { |
|
|
982 |
var size = e.newVal + 'px'; |
|
|
983 |
|
|
|
984 |
this.thumb.set('title', size); |
|
|
985 |
fontSizeInput.set('value', size); |
|
|
986 |
|
|
|
987 |
myStyleSheet.set('body', { fontSize: size }); |
|
|
988 |
} |
|
|
989 |
} |
|
|
990 |
}).render( slider_container ); |
|
|
991 |
|
|
|
992 |
// The color inputs are assigned keyup listeners that will update the |
|
|
993 |
// StyleSheet if the current input value is a valid CSS color value |
|
|
994 |
|
|
|
995 |
// The heading input affects all h1s, h2, and h3s |
|
|
996 |
Y.on('keyup', function (e) { |
|
|
997 |
var color = this.get('value'); |
|
|
998 |
|
|
|
999 |
if (isValidColor(color)) { |
|
|
1000 |
myStyleSheet.set('h1, h2, h3', { color: color }); |
|
|
1001 |
} |
|
|
1002 |
}, '#heading_color'); |
|
|
1003 |
|
|
|
1004 |
// The link hover affects the background color of links when they are |
|
|
1005 |
// hovered. There is no way other than via stylesheet modification to |
|
|
1006 |
// change pseudo-class styles. |
|
|
1007 |
Y.on('keyup', function (e) { |
|
|
1008 |
var color = this.get('value'); |
|
|
1009 |
|
|
|
1010 |
if (isValidColor(color)) { |
|
|
1011 |
myStyleSheet.set('a:hover', { backgroundColor: color }); |
|
|
1012 |
} |
|
|
1013 |
}, '#link_hover'); |
|
|
1014 |
|
|
|
1015 |
// Progressive form enhancement complete, now prevent the form from |
|
|
1016 |
// submitting normally. |
|
|
1017 |
Y.one('#theme_form input[type=submit]').remove(); |
|
|
1018 |
|
|
|
1019 |
Y.on('submit', function (e) { |
|
|
1020 |
e.halt(); |
|
|
1021 |
}, '#theme_form'); |
|
|
1022 |
|
|
|
1023 |
// A rudimentary validator to make sure we're not trying to set |
|
|
1024 |
// invalid color values in StyleSheet. |
|
|
1025 |
function isValidColor(v) { |
|
|
1026 |
return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) || |
|
|
1027 |
/^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) || |
|
|
1028 |
/^[a-z]{3,}$/i.test(v); |
|
|
1029 |
} |
|
|
1030 |
|
|
|
1031 |
}); |
|
|
1032 |
</script> |
|
|
1033 |
|
|
|
1034 |
|
|
|
1035 |
<script> |
|
|
1036 |
YUI.Env.Tests = { |
|
|
1037 |
examples: [], |
|
|
1038 |
project: '../assets', |
|
|
1039 |
assets: '../assets/stylesheet', |
|
|
1040 |
name: 'stylesheet-theme', |
|
|
1041 |
title: 'Adjusting a Page Theme on the Fly', |
|
|
1042 |
newWindow: '', |
|
|
1043 |
auto: false |
|
|
1044 |
}; |
|
|
1045 |
YUI.Env.Tests.examples.push('stylesheet-theme'); |
|
|
1046 |
YUI.Env.Tests.examples.push('photo-browser'); |
|
|
1047 |
|
|
|
1048 |
</script> |
|
|
1049 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
1050 |
|
|
|
1051 |
|
|
|
1052 |
|
|
|
1053 |
</body> |
|
|
1054 |
|
|
|
1055 |
</html> |