📄 css_mediatypes.asp@output=print
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@media print
{
p.test {font-family:times,serif; font-size:10px}
}
</style>
<title>CSS2 Media Types</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
<h1>CSS2 Media Types</h1>
<a href="css_image_transparency.asp"><img border="0" src="../images/btn_previous.gif" alt="Previous" /></a>
<a href="css_dont.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<p class="intro">Media Types allow you to specify how documents will be presented
in different media. The document can be displayed differently on the screen, on
the paper, with an aural browser, etc. </p>
<hr />
<h2>Media Types</h2>
<p class="test">Some CSS properties are only designed for a certain media. For example the
"voice-family" property is designed for aural user agents. Some other
properties can be used for different media types. For example, the
"font-size" property can be used for both screen and print media, but
perhaps with different values. A document usually needs a larger font-size on a
screen than on paper, and sans-serif fonts are easier to read on the screen, while
serif fonts are easier to read on paper.</p>
<hr />
<h2>The @media Rule</h2>
<p>The @media rule allows different style rules for different media in the same style
sheet.</p>
<p>The style in the example below tells the browser to display a 14 pixels
Verdana font on the screen. But if the page is printed, it will be in a 10
pixels Times font. Notice that the font-weight is set to bold, both on screen
and on paper:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre><html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print
{
p.test {font-family:times,serif; font-size:10px}
}</pre>
<pre>@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head></pre>
<pre><body></pre>
<pre>....</pre>
<pre></body>
</html></pre>
</td></tr></table>
<p><b>See it yourself !</b> If you are using Mozilla/Firefox or IE 5+ and print this page, you will see
that the
paragraph under "Media Types" will be displayed in another font, and
have a
smaller font size than the rest of the text.</p>
<hr />
<h2>Different Media Types
</h2>
<p><b>Note:</b> The media type names are not case-sensitive.
</p>
<table class="ex" cellspacing="0" border="1" width="100%" cellpadding="3">
<tr>
<th width="20%" align="left" valign="top">Media Type</th>
<th width="80%" align="left" valign="top">Description</th>
</tr>
<tr>
<td valign="top">all</td>
<td valign="top">
Used for all media type devices</td>
</tr>
<tr>
<td valign="top">aural</td>
<td valign="top">
Used for speech and sound synthesizers</td>
</tr>
<tr>
<td valign="top">braille</td>
<td valign="top">
Used for braille tactile feedback devices</td>
</tr>
<tr>
<td valign="top">embossed</td>
<td valign="top">
Used for paged braille printers</td>
</tr>
<tr>
<td valign="top">handheld</td>
<td valign="top">
Used for small or handheld devices</td>
</tr>
<tr>
<td valign="top">print</td>
<td valign="top">
Used for printers</td>
</tr>
<tr>
<td valign="top">projection</td>
<td valign="top">
Used for projected presentations, like slides</td>
</tr>
<tr>
<td valign="top">screen</td>
<td valign="top">
Used for computer screens</td>
</tr>
<tr>
<td valign="top">tty</td>
<td valign="top">
Used for media using a fixed-pitch character grid, like teletypes and terminals</td>
</tr>
<tr>
<td valign="top">tv</td>
<td valign="top">
Used for television-type devices</td>
</tr>
</table>
<br />
<hr />
<a href="css_image_transparency.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_dont.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -