將XHTML CSS頁面轉換為打印機頁面(2)_XHTML教程
這些鏈接幾乎和前面的完全一樣;不同之處在于CSS文件里包含有用于打印媒體的樣式。
CSS文件里同media="all"聯(lián)系在一起的樣式可以應用于屏幕顯示、打印,以及其他所有的媒體,所以你可以把所有創(chuàng)建的樣式都放到這個文件里。同media="print"單獨聯(lián)系在一起的CSS文件可以小得多,因為頁面從所有的媒體文件繼續(xù)了所有的樣式,這就沒有必要再復制打印媒體文件里的這些樣式了。
打印媒體CSS文件里唯一需要的樣式是那些為打印輸出而更改或者添加頁面樣式。一般來說,這只不過是一些禁止顯示包含有圖形和導航內(nèi)容的div的樣式,和把主體標簽以及主要div的寬度和空白設置替換成適合打印輸出的設置。
這個技巧能夠起作用是因為所有的媒體CSS文件和打印媒體CSS文件都組合成了相同的層疊樣式規(guī)則。因此,對這些CSS文件的鏈接順序相當重要。所有的媒體文件鏈接都必須要放在打印媒體文件鏈接之前。
下面是一些關于使用打印媒體CSS文件的提示:
假如禁止某個div的顯示,就要使用display: none而不能用visibility: hidden。
點(pt)和英寸(in)都不是用于屏幕顯示的正確度量單位,但是它們是打印輸出的正確度量單位。
在打印媒體文件里使用的選擇器要和你在所有媒體文件里使用的選擇器完全相同。例如,假如你使用div #sidenav來選擇所有媒體文件里id為sidenav的div,那么在打印媒體文件里使用#sidenav就可能無法成功地達到你的目的。
不要忘記明確地強制替代從一個文件到另一個文件都會發(fā)生改變的規(guī)則聲明。例如,假如你在所有的媒體文件里為一個元素設置了padding,并希望在打印輸出里去掉這個padding,那么在打印媒體文件里加入一個忽略padding聲明的樣式是不夠的——你必須明確地設置padding: 0pt,以取代前面的設置。
假如你正在使用諸如Dreamweaver這樣的圖形編輯器,你就可以預覽生成頁面的屏幕效果,而不是打印輸出的效果。要在Dreamweaver的設計(Design)查看窗里預覽打印樣式,就要把到打印媒體CSS文件的鏈接改成media="screen"。這就讓你可以預覽打印媒體文件里的CSS樣式。不要忘了在發(fā)布你的頁面之前把媒體描述符改回到media="print"。
當你需要為自己的訪問者提供一個打印機友好的Web頁面,你不再需要為原有的頁面創(chuàng)建一個單獨的版本。添加一個對帶有media="print"媒體描述符的CSS樣式表的鏈接,就能夠把任何XHTML/CSS頁面轉換成為一個打印機友好的頁面。
- HTML5 INPUT placeholder及兼容性處理
- HTML表單里的Label標簽
- 淺析HTML與javascript中常用編碼
- CSS網(wǎng)頁布局中必須要了解的幾個XHTML標簽
- title和alt 標簽介紹及其異同
- 淺析HTML標簽strong和em的區(qū)別
- 說說XHTML中的alt屬性和title屬性
- Semantics語義是Html Xhtml是否真正符合標準的重要部分
- 九個W3C XHTML1.0及CSS標準認證需要注意的問題
- 請注意頁面head區(qū)域的編碼是不是規(guī)范
- HTML validate - 驗證HTML代碼穿越多重瀏覽器標準
- XHTML具有語義的標簽:有關H1位置的討論
- 相關鏈接:
- 教程說明:
XHTML教程-將XHTML CSS頁面轉換為打印機頁面(2)
。