Web Standards Solutions 網頁設計標準規格
列印樣式
如何指定列印時採用的樣式?
<link rel="stylesheet" type="text/css" media="screen" href="screenstyle.css" />
媒體種類:all
braille:點字觸覺回饋裝置
embossed:點字頁印表機
handheld:手持裝置
projection
screen
speech:語音合成器, aural
tty
tv
方法A:media屬性
<link rel="stylesheet" type="text/css" media="screen" href="screenstyle.css" />
方法B:@media或@import
<style type="text/css">
@import url("screenstyles.css") screen;
@media print{
列印時使用的樣式放置於此......
}
</style>
放在標頭或外部
可以使用多重設定
<link rel="stylesheet" type="text/css" media="screen, print" href="screenstyle.css" />
<style type="text/css">
@import url("screenstyles.css") screen, print;
@media print{
列印時使用的樣式放置於此......
}
</style>
分開螢幕顯示與列印的樣式
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
設計一份列印樣式表
用「點數指定大小」
body{
font-family: "Times New Roman", serif;
font-size: 12pt;
background" none;
}
隱藏不必要的標籤節省墨水
#nav, #sidebar, #advertising, #search{
display: none;
}
揭露連結:after假階類在超連結文字後面印出所連結的url
#content a:link:after, #content a:visited:after{
content: " (" attr(href) ") ";
}
連結文字
a:link, a:visited{
color: blue;
text-decoration: underline;
}
預覽列印節省墨水
參考資料
Eric Meyer「CSS Design:Going to Print」http://www.alistapart.com/articles/goingtoprint
「Print Different」http://www.meyerweb.com/eric/articles/webrev/200001.html
全站熱搜
留言列表