Web Standards Solutions 網頁設計標準規格


列印樣式


如何指定列印時採用的樣式?
<link rel="stylesheet" type="text/css" media="screen" href="screenstyle.css" />
媒體種類:all
          braille:點字觸覺回饋裝置
          embossed:點字頁印表機
          handheld:手持裝置
          print
          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                             

jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()