[ Pobierz całość w formacie PDF ]
top
center
bottom
left
center
right
Percentages of Parent Element s Width and Height
Percentages enable you to pin different parts of the background to the
corresponding part of the element. The x coordinate is given as a percentage
ranging from 0% (left-hand side) to 100% (right-hand side). The y coordinate is
given as a percentage ranging from 0% (top) to 100% (bottom). For example, this
rule places the upper-right corner of the image in the upper-right corner of the
INVITATIONelement. Figure 12-15 shows the result.
INVITATION { background-image: url(party.gif);
background-repeat: no-repeat;
background-position: 100% 0% }
Figure 12-15: A background image aligned with the upper-right
corner of the content
3236-7 ch12.F.qc 6/29/99 1:08 PM Page 367
Chapter 12 &' Cascading Style Sheets Level 1
367
Absolute Lengths
Absolute lengths position the upper-left corner of the background in an absolute
position in the element. The next rule places the upper-left corner of the
background image party.gif one centimeter to the right and two centimeters below
the upper-left corner of the element. Figure 12-16 shows the result.
INVITATION { background-image: url(party.gif);
background-repeat: no-repeat;
background-position: 1cm 2cm }
Figure 12-16: A background image 1.0 cm to the right and 2.0
cm below the left-hand corner of the element
Keywords
The top left and left topkeywords are the same as 0% 0%. The top, top
center, and center topare the same as 50% 0%. The right topand top right
keywords are the same as 100% 0%. The left,left center, and center left
keywords are the same as 0% 50%. The centerand center centerkeywords are
the same as 50% 50%. The right, right center,andcenter rightkeywords are
the same as 100% 50%. The bottom leftand left bottomkeywords are the same
as 0% 100%. The bottom,bottom center,andcenter bottommean the same as
50% 100%. The bottom rightand right bottomkeywords are the same as 100%
100%. Figure 12-17 associates these with individual positions on an element box.
3236-7 ch12.F.qc 6/29/99 1:08 PM Page 368
Part III &' Style Languages
368
top
top left top right
top center
left top right top
center top
0% 0% 100% 0%
50% 0%
left right
center
center left center right
center center
left center right center
50% 50%
0% 50% 100% 50%
bottom
bottom left bottom right
bottom center
left bottom right bottom
center bottom
0% 100% 100% 100%
50% 100%
Figure 12-17: Relative positioning of background images
For instance, for our running invitation example, the best effect is achieved by
pinning the centers together, as shown in Figure 12-18. Here s the necessary rule:
INVITATION { background-image: url(party.gif);
background-repeat: no-repeat;
background-position: center center }
Figure 12-18: An untiled background image pinned to the
center of the INVITATION element
3236-7 ch12.F.qc 6/29/99 1:08 PM Page 369
Chapter 12 &' Cascading Style Sheets Level 1
369
If the background-attachmentproperty has the value fixed, then the image is
placed relative to the windowpane instead of the element.
The Background Shorthand Property
The backgroundproperty is shorthand for setting the background-color,
background-image, background-repeat, background-attachment, and
background-positionproperties in a single rule. For example, to set
background-colorto white, background-imageto party.gif, background-
repeatto no-repeat, and background-attachmentto fixedin the INVITATION
element, you can use this rule:
INVITATION { background: url(party.gif) white no-repeat fixed }
This means exactly the same thing as this longer but more legible rule:
INVITATION { background-image: url(party.gif);
background-color: white;
background-repeat: no-repeat;
background-attachment: fixed }
When using the backgroundshorthand property, values for any or all of the five
properties may be given in any order. However, none may occur more than once.
For example, the upper-right corner alignment rule used for Figure 12-16 could have
been written like this instead:
INVITATION { background: url(party.gif) no-repeat 100% 0% }
Text Properties
There are eight properties affecting the appearance of text, irrespective of font.
These are:
1. word-spacing
2. letter-spacing
3. text-decoration
4. vertical-align
5. text-transform
6. text-align
7. text-indent
8. line-height
3236-7 ch12.F.qc 6/29/99 1:08 PM Page 370
Part III &' Style Languages
370
The word-spacing Property
The word-spacingproperty expands the text by adding additional space between
words. A negative value removes space between words. The only reason I can think
of to alter the word spacing on a Web page is if you are a student laboring under
tight page-count limits who wants to make a paper look bigger or smaller than it is.
Note
Desktop publishers love adjusting these kinds of properties. The problem is that all
the rules they ve learned about how and when to adjust spacing are based on ink
on paper, and really don t work when transferred to the medium of electrons on
phosphorus (a typical CRT monitor). You re almost always better off letting the
browser make decisions about word and letter spacing for you.
If, on the other hand, your target medium is ink on paper, then there s a little more
to be gained by adjusting these properties. The main difference is that with ink on
paper you control the delivery medium. You know exactly how big the fonts are,
how wide and high the display is, how many dots per inch are being used, and so
forth. On the Web, you simply don t have enough information about the output
medium available to control everything at this level of detail.
[ Pobierz całość w formacie PDF ]