[ Pobierz całość w formacie PDF ]
*
{} /* a=0 b=0 c=0 d=0 - specificity = 0,0,0,0 */
li
{} /* a=0 b=0 c=0 d=1 - specificity = 0,0,0,1 */
ul li
{} /* a=0 b=0 c=0 d=2 - specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 - specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 - specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 - specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 - specificity = 0,0,2,1 */
#x34y
{} /* a=0 b=1 c=0 d=0 - specificity = 0,1,0,0 */
style=""
/* a=1 b=0 c=0 d=0 - specificity = 1,0,0,0 */
HEAD
STYLE type="text/css"
#x97z { color: red }
/STYLE
/HEAD
BODY
P ID=x97z style="color: green"
/BODY
In the above example, the color of the P element would be green. The declaration
in the "style" attribute will override the one in the STYLE element because of cascad-
ing rule 3, since it has a higher specificity.
Note: The specificity is based only on the form of the selector. In particular, a
selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1,
d=0), even if the id attribute is defined as an "ID" in the source document’s DTD.
6.4.4 Precedence of non-CSS presentational hints
If the user agent chooses to honor presentational hints from other sources than style
sheets, these hints must be given the same weight as the user agent’s default style
sheet.
Note. Non-CSS presentational hints had a higher weight in CSS2.
79
2 Aug 2002 21:33
Assigning property values, Cascading, and Inheritance
2 Aug 2002 21:33
80
Media types
7 Media types
Contents
7.1 Introduction to media types
.
.
.
.
.
.
.
.
.
.
.
8
7.2 Specifying media-dependent style sheets
.
.
.
.
.
.
.
81
7.2.1 The @media rule .
.
.
.
.
.
.
.
.
.
.
.
.
7.3 Recognized media types .
.
.
.
.
.
.
.
.
.
.
.
.
7.3.1 Media groups .
.
.
.
.
.
.
.
.
.
.
.
.
.
7.1 Introduction to media types
One of the most important features of style sheets is that they specify how a docu-
ment is to be presented on different media: on the screen, on paper, with a speech
synthesizer, with a braille device, etc.
Certain CSS properties are only designed for certain media (e.g., the
’page-break-before’ property only applies to paged media). On occasion, however,
style sheets for different media types may share a property, but require different
values for that property. For example, the ’font-size’ property is useful both for
screen and print media. The two media types are different enough to require differ-
ent values for the common property; a document will typically need a larger font on a
computer screen than on paper. Therefore, it is necessary to express that a style
sheet, or a section of a style sheet, applies to certain media types.
7.2 Specifying media-dependent style sheets
There are currently two ways to specify media dependencies for style sheets:
Specify the target medium from a style sheet with the @media or @import
at-rules.
Example(s):
@import url("fancyfonts.css") screen;
@media print {
/* style sheet for print goes here */
}
Specify the target medium within the document language. For example, in
HTML 4.0 ([HTML40]), the "media" attribute on the LINK element specifies the
target media of an external style sheet:
81
2 Aug 2002 21:33
1
82
82
83
.
.
Media types
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLELink to a target medium/TITLE
LINK REL="stylesheet" TYPE="text/css"
MEDIA="print, handheld" HREF="foo.css"
/HEAD
BODY
PThe body...
/BODY
/HTML
The @import [p. 75] rule is defined in the chapter on the cascade [p. 73] .
7.2.1 The @media rule
An @media rule specifies the target media types [p. 82] (separated by commas) of a
set of rules (delimited by curly braces). The @media construct allows style sheet
rules for various media in the same style sheet:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
7.3 Recognized media types
The names chosen for CSS media types reflect target devices for which the relevant
properties make sense. The names of media types are normative. In the following
list of CSS media types, the parenthetical descriptions are not normative. Likewise,
the "Media" field in the description of each property is informative.
all
Suitable for all devices.
aural
Intended for speech synthesizers. See the section on aural style sheets [p. 241]
for details.
braille
Intended for braille tactile feedback devices.
embossed
Intended for paged braille printers.
handheld
Intended for handheld devices (typically small screen, monochrome, limited
bandwidth).
2 Aug 2002 21:33
82
Media types
print
Intended for paged material and for documents viewed on screen in print
preview mode. Please consult the section on paged media [p. 179] for informa-
[ Pobierz całość w formacie PDF ]