DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 將XHTML+CSS頁面轉換為打印機頁面技巧(2)
將XHTML+CSS頁面轉換為打印機頁面技巧(2)
編輯:CSS詳解     

簡化CSS

如果你願意放棄照顧老版本的浏覽器,並假設你的用戶正在使用支持CSS2的浏覽器(比如說IE5及以上版本或者Netscape6及以上版本),你可以使用新的all媒體描述符來極大地簡化CSS代碼。

下面就是使用CSS2媒體描述符的鏈接的例子:

ExampleSourceCode

  1. <linkrellinkrel="stylesheet"type="text/CSS"
  2. media="all"href="mysite-all.CSS"/>
  3. <linkrellinkrel="stylesheet"type="text/CSS"
  4. media="print"href="mysite-print2.CSS"/>

這些鏈接幾乎和前面的完全一樣;不同之處在於CSS文件裡包含有用於打印媒體的樣式。

CSS文件裡同media="all"聯系在一起的樣式可以應用於屏幕顯示、打印,以及其他所有的媒體,所以你可以把所有創建的樣式都放到這個文件裡。同media="print"單獨聯系在一起的CSS文件可以小得多,因為頁面從所有的媒體文件繼承了所有的樣式,這就沒有必要再復制打印媒體文件裡的這些樣式了。

打印媒體CSS文件裡唯一需要的樣式是那些為打印輸出而更改或者添加頁面樣式。一般來說,這只不過是一些禁止顯示包含有圖形和導航內容的div的樣式,和把主體標簽以及主要div的寬度和空白設置替換成適合打印輸出的設置。

這個技巧能夠起作用是因為所有的媒體CSS文件和打印媒體CSS文件都組合成了相同的層疊樣式規則。因此,對這些CSS文件的鏈接順序相當重要。所有的媒體文件鏈接都必須要放在打印媒體文件鏈接之前。

◆下面是一些關於使用打印媒體CSS文件的提示:

如果禁止某個div的顯示,就要使用display:none而不能用visibility:hidden。

點(pt)和英寸(in)都不是用於屏幕顯示的正確度量單位,但是它們是打印輸出的正確度量單位。
在打印媒體文件裡使用的選擇器要和你在所有媒體文件裡使用的選擇器完全相同。例如,如果你使用
div#sidenav來選擇所有媒體文件裡id為sidenav的div,那麼在打印媒體文件裡使用#sidenav就可能無法成功地達到你的目的。

不要忘記明確地強制替代從一個文件到另一個文件都會發生改變的規則聲明。例如,如果你在所有的媒體文件裡為一個元素設置了padding,並希望在打印輸出裡去掉這個padding,那麼在打印媒體文件裡加入一個忽略padding聲明的樣式是不夠的——你必須明確地設置padding:0pt,以取代前面的設置。

如果你正在使用諸如Dreamweaver這樣的圖形編輯器,你就可以預覽生成頁面的屏幕效果,而不是打印輸出的效果。要在Dreamweaver的設計(Design)查看窗裡預覽打印樣式,就要把到打印媒體CSS文件的鏈接改成media="screen"。這就讓你可以預覽打印媒體文件裡的CSS樣式。不要忘了在發布你的頁面之前把媒體描述符改回到media="print"。

當你需要為自己的訪問者提供一個打印機友好的Web頁面,你不再需要為原有的頁面創建一個單獨的版本。添加一個對帶有media="print"媒體描述符的CSS樣式表的鏈接,就能夠把任何XHtml/CSS頁面轉換成為一個打印機友好的頁面。

文章來源:Div-Css.net設計網參考:http://www.div-CSS.Net/div_CSS/topic/index.ASP?id=6969

【編輯推薦】

  1. DIV布局規范中CSS類及id命名方式
  2. CSS中margin邊界疊加問題及解決方案
  3. CSS樣式表高效使用八大秘訣
  4. 創建和插入CSS樣式表秘笈
  5. 實現CSS垂直居中的五大方法及優缺點
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved