在新聞組中, 經常有問題問到如何能在打印情況下依然能組織良好。從前, 研發者需要通過為站點中的任何網頁分別創建一個僅包含文本和相關圖像的副本來達到這個目的。CSS 完全改變了這樣的狀況。 在 Community MX 中, 我們已通過層疊樣式表為打印單獨指定樣式表的特性而得益。由于 Community MX 有大量的教程, 這樣做能大大地節省時間。跟上來看看決定背后的原因和方法。

　　本文將會分析我們的布局是如何在屏幕上顯示一套元素, 而當打印時使用一套包含沒有顯示在屏幕上元素的布局。您將會學習媒體類型連同如何利用他們，更有就是使用層疊技巧來創建輕量級、實用的打印布局。由于Community MX 經常性更改他的站點, 假如您在本文發布幾個月后閱讀他，有些東西可能會有少許不同。

　　
需要

　　要完成本教程，您需要安裝下面的軟件和文檔:

　　
Dreamweaver MX 2004

　　
vcenter_dw_try">Try

　　
vcenter_dw_buy">Buy

　　
Media 屬性: Screen, Print, 和 All

　　在 Community MX, 由于用戶主要由網頁研發者組成, 我們決定不在站點上支持Netscape 4 (NN4) 和 Internet Explorer 4 (IE 4) 瀏覽器。您將不會在本文中看到兼容老式瀏覽器的示例, 但您會知道假如您要提供NN4支持的話，媒體類型是如何影響他的。一共有九種媒體描述符來讓您為不同的設備上自定義顯示方式。假如您還對媒體類型連同他們的應用不太熟悉, 查看Stephanie Sullivan 在Community MX上的文章 media types。

　　我們的網站使用了三個不同的樣式表來控制每個教程。每個XHTML文檔都鏈接到媒體類型配置為all的主樣式表(cmxlayout.css) 。這指明了任何的設備都會使用這個樣式表。然后我們把主打印樣式表(newprint.css) 的媒體類型配置為 print。這指示瀏覽器在打印預覽和打印時應用他。除了 newprint.css中的內容以外，我們把cmxlayout.css 中的任何選擇符用在了打印中，原因是層疊規則連同他的媒體類型―― all。 我們只需為那些需要在打印時被隱藏或更改的選擇符使用 newprint.css 。

　　
注: NN4 僅理解沒有指定媒體類型或指定為screen 的媒體類型的CSS文檔。他無法理解 all 媒體類型。 因此, 假如您希望 NN4 能看到樣式, 您必須使用這里其中一個方法。 IE4 能夠讀取媒體類型為 all的css。假如一定要支持那么老的瀏覽器, 您可能需要用JavaScript的方法或通過包含的方式來隱藏媒體類型為 all 的 CSS。請記住當打印的時候，媒體類型為 screen 的樣式表將不會參和打印的樣式層疊。為此,您需要重寫任何在 screen 樣式表中出現的選擇符，將其轉移到 print 樣式表中以便令他們能用于打印。

　　我們在 Community MX 上使用的第三個樣式表(pdfprint.css) 用于從每篇文章或教程中動態創建 PDF 文檔。由于 PDF 文檔和文檔打印時使用相同的樣式表, 我們于是用ColdFusion 設計了一個動態的方法來指定我們所需的樣式表。使用這三個樣式表的長處在于我們能從一個集中位置統籌全局― 那些 XHTML 文檔。假如我們需要更改一篇教程，我們只需簡單快速地修改XHTML文檔。然后，得益于 CSS 的力量, 我們能夠立即創建一份PDF，CSS會自動照看屏幕和打印版本。

順序是很重要的

　　基于層疊的原因, 在X/HTML文檔頭部鏈接的樣式表的順序,會影響到在任何設備的處理效果。由于 cmxlayout.css 使用了 all 媒體類型, 他在繼承順序中處于最上層。 任何顯示信息的設備都將訪問這個文檔。當有一天, 手持設備對CSS提供更多支持時, 我們將很可能添加一個使用handheld 媒體類型的樣式表來在那些設備上重新格式化信息。假如用了 handheld 樣式表的話, 他會跟隨在主樣式表后。下一步, 我們放置了newprint.css so 以便他也能夠通過繼承 cmxlayout.css 得到好處。最后,我們還配置了動態的 PDF樣式表, 您在這里是看不到的。PDF 樣式表將對PDF使用用一個和打印樣式稍有不同的、包含更豐富色彩的外觀。他看起來更像是屏幕和打印版本的混合體。下面是以正確順序排列(XHTML格式) 的樣式表: