Skip to content

Commit 769dad0

Browse files
ianbjacobsianbjacobs
committed
[css2] .
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%4025
1 parent 3395e65 commit 769dad0

5 files changed

Lines changed: 457 additions & 15 deletions

File tree

‎css2/colors.src‎

Lines changed: 323 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/WD-html40/sgml/HTML4.dtd">
22
<html lang="en">
3-
<!-- $Id: colors.src,v 1.2 1997-07-30 16:54:28 ijacobs Exp $ -->
3+
<!-- $Id: colors.src,v 1.3 1997-08-01 17:47:48 ijacobs Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>Colors and backgrounds</TITLE>
@@ -9,8 +9,327 @@
99
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
1010
</HEAD>
1111
<BODY>
12-
<H1 align="center">Colors and backgrounds</H1>
13-
<H2><a name="colors">Colors</a></H2>
14-
<H2><a name="backgrounds">Backgrounds</a></H2>
12+
<H1 align="center"><a name="colors">Colors</a> and <a name="backgrounds">backgrounds</a></H1>
13+
14+
<H2>Properties</H2>
15+
16+
<P> These properties describe the color (often called <EM>foreground
17+
color</EM>) and background of an element (i.e., the surface onto which
18+
the content is rendered). One can set a background color and/or a
19+
background image. The position of the image, if/how it is repeated,
20+
and whether it is fixed or scrolled relative to the canvas can also be
21+
set.
22+
23+
<P> The 'color' property inherits normally. The background properties
24+
do not inherit, but the parent element's background will shine through
25+
by default because of the initial 'transparent' value on
26+
'background-color'.
27+
28+
<DIV class="propdef">
29+
<H3 class=propname>
30+
<a name="propdef-color">
31+
<span class="index-def" title="'color', definition of">
32+
'color'</span></a></H3>
33+
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>color</TR>
34+
<TR><TH align="right">Value:<TD><span class="value-inst"><span class="index-inst" title="&lt;color&gt;">&lt;color&gt;</span></span></TR>
35+
<TR><TH align="right">Initial:<TD>UA specific</TR>
36+
<TR><TH align="right">Applies to:<TD>all elements</TR>
37+
<TR><TH align="right">Inherited:<TD>yes</TR>
38+
<TR><TH align="right">Percentage values:<TD>N/A</TR>
39+
</TABLE>
40+
</DIV>
41+
42+
<P> This property describes the text color of an element (often
43+
referred to as the <EM>foreground</EM> color). There are different
44+
ways to specify red:
45+
46+
<PRE>
47+
EM { color: red } /* natural language */
48+
EM { color: rgb(255,0,0) } /* RGB range 0-255 */
49+
</PRE>
50+
51+
<P> See the section on <a href="./syndata.html#color-units>color units</a>
52+
for a description of possible color values.
53+
54+
<DIV class="propdef">
55+
<H3 class=propname>
56+
<a name="propdef-background-color">
57+
<span class="index-def" title="'background-color', definition of">
58+
'background-color'</span></a></H3>
59+
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>background-color</TR>
60+
<TR><TH align="right">Value:<TD><span class="value-inst"><span
61+
class="index-inst" title="&lt;color&gt;">&lt;color&gt; | transparent</span></span></TR>
62+
<TR><TH align="right">Initial:<TD>transparent</TR>
63+
<TR><TH align="right">Applies to:<TD>all elements</TR>
64+
<TR><TH align="right">Inherited:<TD>no</TR>
65+
<TR><TH align="right">Percentage values:<TD>N/A</TR>
66+
</TABLE>
67+
</DIV>
68+
69+
<P> This property sets the background color of an element.
70+
71+
<PRE>
72+
H1 { background-color: #F00 }
73+
</PRE>
74+
75+
<DIV class="propdef">
76+
<H3 class=propname>
77+
<a name="propdef-background-image">
78+
<span class="index-def" title="'background-image', definition of">
79+
'background-image'</span></a></H3>
80+
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>background-image</TR>
81+
<TR><TH align="right">Value:<TD><span class="value-inst"><span class="index-inst" title="&lt;url&gt;">&lt;url&gt;</span></span></TR>
82+
<TR><TH align="right">Initial:<TD>none</TR>
83+
<TR><TH align="right">Applies to:<TD>all elements</TR>
84+
<TR><TH align="right">Inherited:<TD>no</TR>
85+
<TR><TH align="right">Percentage values:<TD>N/A</TR>
86+
</TABLE>
87+
</DIV>
88+
89+
<P> This property sets the background image of an element. When
90+
setting a background image, one should also set a background color
91+
that will be used when the image is unavailable. When the image is
92+
available, it is overlaid on top of the background color.
93+
94+
<PRE>
95+
BODY { background-image: url(marble.gif) }
96+
P { background-image: none }
97+
</PRE>
98+
99+
<DIV class="propdef">
100+
<H3 class=propname>
101+
<a name="propdef-background-repeat">
102+
<span class="index-def" title="'background-repeat', definition of">
103+
'background-repeat'</span></a></H3>
104+
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>background-repeat</TR>
105+
<TR><TH align="right">Value:<TD>repeat | repeat-x | repeat-y | no-repeat</TR>
106+
<TR><TH align="right">Initial:<TD>repeat</TR>
107+
<TR><TH align="right">Applies to:<TD>all elements</TR>
108+
<TR><TH align="right">Inherited:<TD>no</TR>
109+
<TR><TH align="right">Percentage values:<TD>N/A</TR>
110+
</TABLE>
111+
</DIV>
112+
113+
<P> If a background image is specified, the value of <span
114+
class="propinst">'background-repeat'</span> determines how/if the
115+
image is repeated.
116+
117+
<P> A value of 'repeat' means that the image is repeated both
118+
horizontally and vertically. The 'repeat-x' ('repeat-y') value makes
119+
the image repeat horizontally (vertically), to create a single band of
120+
images from one side to the other. With a value of 'no-repeat', the
121+
image is not repeated.
122+
123+
<PRE>
124+
BODY {
125+
background: red url(pendant.gif);
126+
background-repeat: repeat-y;
127+
}
128+
</PRE>
129+
130+
<P> In the example above, the image will only be repeated vertically.
131+
132+
<DIV class="propdef">
133+
<H3 class=propname>
134+
<a name="propdef-background-attachment">
135+
<span class="index-def" title="'background-attachment', definition of">
136+
'background-attachment'</span></a></H3>
137+
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>background-attachment</TR>
138+
<TR><TH align="right">Value:<TD>scroll | fixed</TR>
139+
<TR><TH align="right">Initial:<TD>scroll</TR>
140+
<TR><TH align="right">Applies to:<TD>all elements</TR>
141+
<TR><TH align="right">Inherited:<TD>no</TR>
142+
<TR><TH align="right">Percentage values:<TD>N/A</TR>
143+
</TABLE>
144+
</DIV>
145+
146+
<P> If a background image is specified, the value of <span
147+
class="propinst">'background-attachment'</span> determines if it is
148+
fixed with regard to the canvas or if it scrolls along with the
149+
content.
150+
151+
<PRE>
152+
BODY {
153+
background: red url(pendant.gif);
154+
background-repeat: repeat-y;
155+
background-attachment: fixed;
156+
}
157+
</PRE>
158+
159+
<div class="note"><P>
160+
<em><strong>Note.</strong>
161+
UAs may treat 'fixed' as 'scroll'. However, it is recommended they
162+
interpret 'fixed' correctly, at least on the HTML and BODY elements,
163+
since there is no way for an author to provide an image only for those
164+
browsers that support 'fixed'. See the section on <a
165+
href="conform.html">conformance</a> for details.
166+
</em>
167+
</div>
168+
169+
<DIV class="propdef">
170+
<H3 class=propname>
171+
<a name="propdef-background-position">
172+
<span class="index-def" title="'background-position', definition of">
173+
'background-position'</span></a></H3>
174+
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>background-position</TR>
175+
<TR><TH align="right">Value:<TD>[<span class="value-inst"><span class="index-inst" title="&lt;percentage&gt;">&lt;percentage&gt;</span></span>
176+
| <span class="value-inst"><span class="index-inst" title="&lt;length&gt;">&lt;length&gt;</span></span>
177+
]{1,2} | [top | center | bottom] || [left | center | right]
178+
</TR>
179+
<TR><TH align="right">Initial:<TD>0% 0%</TR>
180+
<TR><TH align="right">Applies to:<TD>block-level and replaced elements</TR>
181+
<TR><TH align="right">Inherited:<TD>no</TR>
182+
<TR><TH align="right">Percentage values:<TD>refer to the size of the element itself</TR>
183+
</TABLE>
184+
</DIV>
185+
186+
<P> If a background image has been specified, the value of <span
187+
class="propinst">'background-position'</span> specifies its initial
188+
position.
189+
190+
<P> With a value pair of '0% 0%', the upper left corner of the image
191+
is placed in the upper left corner of the box that surrounds the
192+
content of the element (i.e., not the box that surrounds the padding,
193+
border or margin). A value pair of '100% 100%' places the lower right
194+
corner of the image in the lower right corner of the element. With a
195+
value pair of '14% 84%', the point 14% across and 84% down the image
196+
is to be placed at the point 14% across and 84% down the element.
197+
198+
<P> With a value pair of '2cm 2cm', the upper left corner of the image
199+
is placed 2cm to the right and 2cm below the upper left corner of the
200+
element.
201+
202+
<P> If only one percentage or length value is given, it sets the
203+
horizontal position only, the vertical position will be 50%. If two
204+
values are given, the horizontal position comes first. Combinations of
205+
length and percentage values are allowed, e.g. '50% 2cm'. Negative
206+
positions are allowed.
207+
208+
<P> One can also use keyword values to indicate the position of the
209+
background image. Keywords cannot be combined with percentage values,
210+
or length values. The possible combinations of keywords and their
211+
interpretations are as follows:
212+
213+
<UL>
214+
<LI>
215+
'top left' and 'left top' both mean the same as '0% 0%'.
216+
<LI>
217+
'top', 'top center' and 'center top' mean the same as '50% 0%'.
218+
<LI>
219+
'right top' and 'top right' mean the same as '100% 0%'.
220+
<LI>
221+
'left', 'left center' and 'center left' mean the same as '0% 50%'.
222+
<LI>
223+
'center' and 'center center' mean the same as '50% 50%'.
224+
<LI>
225+
'right', 'right center' and 'center right' mean the same as '100% 50%'.
226+
<LI>
227+
'bottom left' and 'left bottom' mean the same as '0% 100%'.
228+
<LI>
229+
'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
230+
<LI>
231+
'bottom right' and 'right bottom' mean the same as '100% 100%'.
232+
</UL>
233+
234+
<P>Examples:
235+
<PRE>
236+
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
237+
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
238+
BODY { background: url(banner.jpeg) center } /* 50% 50% */
239+
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
240+
</PRE>
241+
242+
<P> If the background image is fixed with regard to the canvas (see
243+
the <span class="propinst">'background-attachment'</span> property
244+
above), the image is placed relative to the canvas instead of the
245+
element. E.g.,
246+
247+
<PRE>
248+
BODY {
249+
background-image: url(logo.png);
250+
background-attachment: fixed;
251+
background-position: 100% 100%;
252+
}
253+
</PRE>
254+
255+
<P> In the example above, the image is placed in the lower right
256+
corner of the canvas.
257+
258+
<DIV class="propdef">
259+
<H3 class=propname>
260+
<a name="propdef-background">
261+
<span class="index-def" title="'background', definition of">
262+
'background'</span></a></H3>
263+
<TABLE class="propinfo"><TR><TH align="right">Property name:<TD>background</TR>
264+
<TR><TH align="right">Value:<TD>
265+
<span class="value-inst"><span class="index-inst"
266+
title="&lt;background-color&gt;">&lt;background-color&gt;</span></span>
267+
|| <span class="value-inst"><span class="index-inst"
268+
title="&lt;background-image&gt;">&lt;background-image&gt;</span></span>
269+
|| <span class="value-inst"><span class="index-inst"
270+
title="&lt;background-repeat&gt;">&lt;background-repeat&gt;</span></span>
271+
|| <span class="value-inst"><span class="index-inst"
272+
title="&lt;background-attachment&gt;">&lt;background-attachment&gt;</span></span>
273+
|| <span class="value-inst"><span class="index-inst" title="&lt;background-position&gt;">&lt;background-position&gt;</span></span>
274+
</TR>
275+
<TR><TH align="right">Initial:<TD>not defined for shorthand properties</TR>
276+
<TR><TH align="right">Applies to:<TD>all elements</TR>
277+
<TR><TH align="right">Inherited:<TD>no</TR>
278+
<TR><TH align="right">Percentage values:<TD>allowed on <span class="value-inst"><span class="index-inst" title="&lt;background-position&gt;">&lt;background-position&gt;</span></span></TR>
279+
</TABLE>
280+
</DIV>
281+
282+
<P> The <span class="propinst">'background'</span> property is a
283+
shorthand property for setting the individual background properties
284+
(i.e., <span class="propinst">'background-color'</span>, <span
285+
class="propinst">'background-image'</span>, <span
286+
class="propinst">'background-repeat'</span>, <span
287+
class="propinst">'background-attachment'</span> and <span
288+
class="propinst">'background-position'</span>) at the same place in
289+
the style sheet.
290+
291+
<DL>
292+
<DT><span class="value-def"><span class="index-def"
293+
title="&lt;background-color&gt;, definition
294+
of">&lt;background-color&gt;</span></span>
295+
<DD>All values that are acceptable for the
296+
<span class="propinst">'background-color'</span> property.</DD>
297+
<DT><span class="value-def"><span class="index-def"
298+
title="&lt;background-image&gt;, definition
299+
of">&lt;background-image&gt;</span></span>
300+
<DD>All values that are acceptable for the
301+
<span class="propinst">'background-image'</span> property.</DD>
302+
<DT><span class="value-def"><span class="index-def"
303+
title="&lt;background-repeat&gt;, definition
304+
of">&lt;background-repeat&gt;</span></span>
305+
<DD>All values that are acceptable for the
306+
<span class="propinst">'background-repeat'</span> property.</DD>
307+
<DT><span class="value-def"><span class="index-def"
308+
title="&lt;background-attachment&gt;, definition
309+
of">&lt;background-attachment&gt;</span></span>
310+
<DD>All values that are acceptable for the
311+
<span class="propinst">'background-attachment'</span> property.</DD>
312+
<DT><span class="value-def"><span class="index-def"
313+
title="&lt;background-position&gt;, definition
314+
of">&lt;background-position&gt;</span></span>
315+
<DD>All values that are acceptable for the
316+
<span class="propinst">'background-position'</span> property.</DD>
317+
</DL>
318+
319+
<P> Possible values on the <span class="propinst">'background'</span>
320+
properties are the set of all possible values on the individual
321+
properties.
322+
323+
<PRE>
324+
BODY { background: red }
325+
P { background: url(chess.png) gray 50% repeat fixed }
326+
</PRE>
327+
328+
<P> The <span class="propinst">'background'</span> property always
329+
sets all the individual background properties. In the first rule of
330+
the above example, only a value for <span
331+
class="propinst">'background-color'</span> has been given and the
332+
other individual properties are set to their initial value. In the
333+
second rule, all individual properties have been specified.
15334
</BODY>
16335
</HTML>

‎css2/fonts.src‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/WD-html40/sgml/HTML4.dtd">
22
<html lang="en">
3-
<!-- $Id: fonts.src,v 1.2 1997-08-01 17:02:29 ijacobs Exp $ -->
3+
<!-- $Id: fonts.src,v 1.3 1997-08-01 17:48:04 ijacobs Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>Fonts</TITLE>
@@ -98,12 +98,13 @@ class="propinst">'font'</span>.
9898
<TABLE class="propinfo">
9999
<TR><TH align="right">Property name:<TD>'font-family'</TR>
100100
<TR><TH align="right">Value:<TD>[[
101-
<span class="value-inst"><span class="index-def" title="&lt;family-name&gt;
102-
">&lt;family-name&gt;</span></span> |
101+
<span class="value-inst"><span class="index-inst"
102+
title="&lt;family-name&gt;">&lt;family-name&gt;</span></span> |
103103
<span class="value-inst"><span class="index-def"
104-
title="&lt;generic-family&gt;">&lt;generic-family&gt;</span></span>],]*
105-
[<span class="value-inst"><span class="index-def" title="&lt;family-name&gt;">&lt;family-name&gt;</span></span>
106-
| <span class="value-inst"><span class="index-def" title="&lt;generic-family&gt;">&lt;generic-family&gt;</span></span>]</TR>
104+
title="&lt;generic-family&gt;">&lt;generic-family&gt;</span></span>],]*
105+
[<span class="value-inst"><span class="index-inst"
106+
title="&lt;family-name&gt;">&lt;family-name&gt;</span></span> |
107+
<span class="value-inst"><span class="index-def" title="&lt;generic-family&gt;">&lt;generic-family&gt;</span></span>]</TR>
107108
<TR><TH align="right">Initial:<TD>UA specific</TR>
108109
<TR><TH align="right">Applies to:<TD>all elements</TR>
109110
<TR><TH align="right">Inherited:<TD>yes</TR>

0 commit comments

Comments
 (0)