📄 media.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><TITLE>Media types</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="cascade.html"><link rel="next" href="box.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></HEAD><BODY><div class="navbar" align="center"><p><a href="cascade.html">previous</a> <a href="box.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><H1 align="center">7 Media types</H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="media.html#q1" class="tocxref">7.1 Introduction to media types</a> <li class="tocline2"><a href="media.html#q2" class="tocxref">7.2 Specifying media-dependent style sheets</a> <ul class="toc"> <li class="tocline3"><a href="media.html#at-media-rule" class="tocxref">7.2.1 The @media rule</a> </ul> <li class="tocline2"><a href="media.html#media-types" class="tocxref">7.3 Recognized media types</a> <ul class="toc"> <li class="tocline3"><a href="media.html#media-groups" class="tocxref">7.3.1 Media groups</a> </ul> </ul></div><H2><a name="q1">7.1 Introduction to media types</a></H2>One of the most important features of style sheets is that theyspecify how a document is to be presented on different media: on thescreen, on paper, with a speech synthesizer, with a braille device,etc.<P>Certain CSS properties are only designed for certain media (e.g.,the <a href="aural.html#propdef-cue-before" class="noxref"><span class="propinst-cue-before">'cue-before'</span></a> property foraural user agents). On occasion, however, style sheets for differentmedia types may share a property, but require different values forthat property. For example, the <a href="fonts.html#propdef-font-size" class="noxref"><spanclass="propinst-font-size">'font-size'</span></a> property is useful bothfor screen and print media. However, the two media are differentenough to require different values for the common property; a documentwill typically need a larger font on a computer screen than on paper.Experience also shows that sans-serif fonts are easier to read onscreen, while fonts with serifs are easier to read on paper. Forthese reasons, it is necessary to express that a style sheet -- or asection of a style sheet -- applies to certain media types.<H2><a name="q2">7.2 Specifying media-dependent style sheets</a></H2><P>There are currently two ways to specify media dependencies forstyle sheets:</p><UL><LI>Specify the target medium from a style sheet with the <a name="x0"><span class="index-inst" title="@media">@media</span></a> or <a name="x1"><span class="index-inst" title="@import">@import</span></a> at-rules.<div class="example"><P style="display:none">Example(s):</P><P><PRE>@import url("loudvoice.css") aural;@media print { /* style sheet for print goes here */}</PRE></div><LI>Specify the target medium within the document language. Forexample, in HTML 4.0 (<a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="informref">[HTML40]</span></a>), the "media" attribute on the LINKelement specifies the target media of an external style sheet:<div class="html-example"><P><PRE><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML> <HEAD> <TITLE>Link to a target medium</TITLE> <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> </HEAD> <BODY> <P>The body... </BODY></HTML></PRE></div></UL><p>The <a href="cascade.html#at-import">@import</a> rule is defined inthe <a href="cascade.html">chapter on the cascade</a>.<H3>7.2.1 <a name="at-media-rule">The @media rule</a></H3> <P>An <a name="x2"><span class="index-def" title="media">@media</span></a> rulespecifies the target <a href="#media-types">media types</a> (separatedby commas) of a set of rules (delimited by curly braces). The <a name="x3"><spanclass="index-inst" title="@media">@media</span></a> construct allows stylesheet rules for various media in the same style sheet:</P><pre class="example"> @media print { BODY { font-size: 10pt } } @media screen { BODY { font-size: 12pt } } @media screen, print { BODY { line-height: 1.2 } }</pre><H2>7.3 <a name="media-types">Recognized media types</a></H2> <P>A CSS <a name="x4"><span class="index-def" title="media type"><dfn>mediatype</dfn></span></a> names a set of CSS properties. A user agent thatclaims to support a media type by name must implement all of theproperties that apply to that media type.<P>The names chosen for CSS media types reflect target devices forwhich the relevant properties make sense. In the following list of CSSmedia types, the parenthetical descriptions are not normative. Theyonly give a sense of what device the media type is meant to refer to.<dl><dt><strong>all</strong><dd>Suitable for all devices.<dt><strong>aural</strong> <dd>Intended for speech synthesizers. See the section on <a href="./aural.html">aural style sheets</a> for details.<dt><strong>braille</strong><dd>Intended for braille tactile feedback devices.<dt><strong>embossed</strong><dd>Intended for paged braille printers.<dt><strong>handheld</strong><dd>Intended for handheld devices (typically smallscreen, monochrome, limited bandwidth).<dt><strong>print</strong> <dd>Intended for paged, opaque material and for documents viewed onscreen in print preview mode. Please consult the section on <ahref="page.html">paged media</a> for information about formattingissues that are specific to paged media.<dt><strong>projection</strong><dd>Intended for projected presentations, forexample projectors or print to transparencies.Please consult the section on <a href="page.html">paged media</a> forinformation about formatting issues that are specific to paged media.<dt><strong>screen</strong> <dd>Intended primarily for color computer screens. <dt><strong>tty</strong><dd>Intended for media using a fixed-pitch character grid, such asteletypes, terminals, or portable devices with limited displaycapabilities. Authors should not use <ahref="syndata.html#pixel-units">pixel units</a> with the "tty" mediatype.<dt><strong>tv</strong><dd>Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available). </dl><P>Media type names are case-insensitive. <P>Due to rapidly changing technologies, CSS2 does not specify adefinitive list of media types that may be values for <a name="x5"><spanclass="index-inst" title="@media">@media</span></a>.<div class="note"><P><em><strong>Note.</strong>Future versions of CSS may extend this list. Authorsshould not rely on media type names that are not yet definedby a CSS specification.</em></div><H3>7.3.1 <a name="media-groups">Media groups</a></H3><P>Each CSS property definition specifies the media types for whichthe property must be implemented by a <ahref="conform.html#conformance">conforming user agent</a>. Sinceproperties generally apply to several media, the "Applies to media"section of each property definition lists <a name="x6"><span class="index-def"title="media group">media groups</span></a> rather than individual mediatypes. Each property applies to all media types in the media groupslisted in its definition.<P>CSS2 defines the following media groups: </P><ul><li><span class="index-def" title="'continuous' media group"><aname="continuous-media-group"><strong>continuous</strong></a></span>or <span class="index-def" title="'paged' media group"><aname="paged-media-group"><strong>paged</strong></a></span>."Both" means that the property in question applies to both media groups.<li><spanclass="index-def" title="'visual' media group"><aname="visual-media-group"> <strong>visual</strong></a>,</span> <spanclass="index-def" title="'aural' media group"><aname="aural-media-group"><strong>aural</strong></a>,</span> or <spanclass="index-def" title="'tactile' media group"><aname="tactile-media-group"><strong>tactile</strong></a></span>.<li><spanclass="index-def" title="'grid' media group"><aname="grid-media-group"><strong>grid</strong></a></span> (forcharacter grid devices), or<spanclass="index-def" title="'bitmap' media group"><aname="bitmap-media-group"><strong>bitmap</strong></a></span>."Both" means that the property in question applies to both mediagroups.<li><spanclass="index-def" title="'interactive media group"><aname="interactive-media-group"><strong>interactive</strong></a></span> (fordevices that allow user interaction), or<spanclass="index-def" title="'static' media group"><aname="static-media-group"><strong>static</strong></a></span> (forthose that don't)."Both" means that the property in question applies to both mediagroups.<li><span class="index-def" title="'all'media group"> <a name="all-media-group"><strong>all</strong></a></span>(includes all media types)</ul><P>The following table shows the relationshipsbetween media groups and media types:</P><TABLE border summary="Relationship between media groups and media types"><CAPTION>Relationship between media groups and media types</CAPTION><TR><TH>Media Types <TH colspan="4">Media Groups<TR><TH> <TH>continuous/paged <TH>visual/aural/tactile <TH>grid/bitmap <TH>interactive/static<TR><TH>aural<TD align="center">continuous<TD align="center">aural<TD align="center">N/A<TD align="center">both</TR><TR><TH>braille<TD align="center">continuous<TD align="center">tactile<TD align="center">grid<TD align="center">both</TR><TR><TH>emboss<TD align="center">paged<TD align="center">tactile<TD align="center">grid<TD align="center">both</TR><TR><TH>handheld<TD align="center">both<TD align="center">visual<TDalign="center">both<TD align="center">both</TR><TR><TH>print<TD align="center">paged<TD align="center">visual<TDalign="center">bitmap<TD align="center">static</TR><TR><TH>projection<TD align="center">paged<TD align="center">visual<TD align="center">bitmap<TD align="center">static</TR><TR><TH>screen<TD align="center">continuous<TD align="center">visual<TD align="center">bitmap<TD align="center">both</TR><TR><TH>tty<TD align="center">continuous<TD align="center">visual<TD align="center">grid<TD align="center">both</TR><TR><TH>tv<TD align="center">both<TD align="center">visual, aural<TD align="center">bitmap<TD align="center">both</TR></TABLE><hr class="navbar"><div class="navbar" align="center"><p><a href="cascade.html">previous</a> <a href="box.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div></BODY></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -