單一CSS同時定義螢幕與列印樣式

作者: Jas / 發表於 2008-04-28

如果你有一個深底色的網站,而你的訪客又不巧經常會有列印你某些網頁的需要(比方說:產品型錄、操作說明、表格文件、訂單等等),一般的CSS解法,通常是寫成兩個滿足不同需求的CSS檔:

<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />

其中,前者,即 styles.css 所定義的是網頁的螢幕(screen)樣式,也就是我們從電腦螢幕所看到的網站樣貌。如上圖所示的黑底黃字樣式,CSS定義可能宣告如下:

/* 螢幕樣式 */
body { color: #fc0; background: #000; }
}

你的網站訪客或許跟你一樣,在螢幕瀏覽網站頁面時,偏好這種黑底黃字的樣式設計,但,如果遇到需要將網頁列印出來參考閱讀時,白底黑字或許是更合適實用的選擇:

如上圖所示,前例提到的列印樣式定義檔 print.css,可能就定義成這樣的白底黑字:

/* 列印樣式 */
body { color: #000; background: #fff; }
}

然而,如果你嫌麻煩,不想寫兩個CSS檔來分別定義螢幕與列印樣式,其實可以用@media在單一CSS檔裡作相同效果的定義宣告:

/* 螢幕與列印樣式 */
@media all
{
body { color: #fc0; background: #000; }
}

@media print
{
body { color: #000; background: #fff; }
}

technorati tag




回上方