 | Cascading Style Sheets: The Definitive Guide |  |
Wednesday 19th of June 2013 02:13:37 AM
Don't get too excited yet. We aren't talking about media types in the sense of things like audio and video authoring. Well, not exactly, anyway. We're talking about creating rules for presentation within various kinds of media. The defined types of media thus far are:
screen, as in a computer screen
print, for things like printouts and print-preview displays
projection, for projected presentations such as slide shows
braille and embossed, for tactile feedback devices and printers
aural, for speech generators
tv, for television-type displays (think WebTV)
tty, for fixed-width character displays
handheld , for palmtop computers
the ubiquitous all
These are all values of @media, one of several new @-rules. Some others are:
@font-face, which is used in the definition of a font by manual means
@import, which has more power than under CSS1 by allowing authors to associate media types with @import statements; for example, @import (print.css) print;
@page, which allows you to define the styles of a page when using paged-media style sheets; for example, @page {size: 8.5in 11in;}
Since I just brought up paged media, I should probably mention that there are some new properties that apply to such media. Five of them apply to page breaks and where they appear:
page-break-before page-break-after page-break-inside orphans widows
The first two are used to control whether a page break should appear before or after a given element, and the latter two are common desktop publishing terms for the minimum number of lines that can appear at the end or beginning of a page. They mean the same thing in CSS2 as they do in desktop publishing.
page-break-inside (first proposed by this author, as it happens) is used to define whether or not page breaks should be placed inside a given element. For example, you might not want unordered lists to have page breaks inside them. You would then declare UL {page-break-inside: avoid;}. The rendering agent (your printer, for example) would avoid breaking unordered lists whenever possible.
There is also size, which is simply used to define whether a page should be printed in landscape or portrait mode and the length of each axis. If you plan to print your page to a professional printing system, you might want to use marks, which can apply either cross or crop marks to your page. Thus you might declare:
@page {size: 8.5in 11in; margin: 0.5in; marks: cross;}This will set the pages to be U.S. letter-standard, 8.5 inches wide by 11 inches tall, and place cross marks in the corners of each page.
In addition, there are the new pseudo-classes :left , :right, and :first, all of which are applied only to the @page rule. Thus, you could set different margins for left and right pages in double-sided printing:
@page:left {margin-left: 0.75in; margin-right: 1in;}
@page:right{margin-left: 1in; margin-right: 0.75in;} The :first selector applies only to the first page of a document, so that you could give it a larger top margin or a bigger font size: which is <B STYLE="font-size: 24px;">boldfaced</B>and <SPAN STYLE="vertical-align: top;">tall</SPAN> and which is<BR>larger than the surrounding text.</P>
Now we're back to our earlier example, where the middle linebox is taller than the other line boxes. However, notice how the"tall" text is aligned in Figure 8-54.
What's happened here is that the top of the "tall"
@page:first {margin-top: 2in; font-size: 150%;}To round things out, we'll cover some of the properties in the area of aural style sheets. These are properties that help define how a speaking browser will actually speak the page. This may not be important to many people, but for the visually impaired, these properties are a necessity.
First off, there is voice-family, which is much the same as font-family in its structure: the author can define both a specific voice and a generic voice family. There are several properties controlling the speed at which the page is read (speech-rate), as well as properties for the pitch , pitch-range, stress, richness, and volume of a given voice. There are also properties that let you control how acronyms, punctuation, dates, numerals, and time are spoken. There are ways to specify audio cues, which can be played before, during, or after a given element (such as a hyperlink), ways to insert pauses before or after elements, and even the ability to control the apparent position in space from which a sound comes via the properties azimuth and elevation. With these last two properties, you could define a style sheet where the text is read by a voice "in front of" the user, whereas background music comes from "behind" and audio cues come from "above" the user!
|  | |
| 10.7. Tables |  | 10.9. Summary |
Copyright © 2002 O'Reilly & Associates. All rights reserved.
ends with .css, even if you do include the correct TYPE of text/css in the LINK element. So make sure you name your style sheets appropriately.For the rest of the LINK tag, the attributes and values are fairly straightforward. the page's background color!</FONT>
Let's return to the happier realm of how things should work. Thanks to color and background-color, you can create some nice effects. This example is shown in Figure 6-18:
P {color: black;}
H1 {color: white; background-color: rgb(20%,20%,20%);}
Again, this rule is subject to restrictions introduced in thepreceding rules. There are similar caveats here as in Rule 8,although they are not quite so fuzzy. As you can see from Figure 8-38, it is pretty easy to tell when an element hasgone as far as possible to the right or left.
