web網頁列印設計的CSS樣式
大多數Web設計師對列印控制還不是很熟悉，而不是印表機。在現實世界中，很多人依賴從網站上列印網頁來參考：
為印表機而不是螢幕設計的樣式
| 1 2 3 4 5 |
/* 樣式將只應用於列印 */
@media print
{
}
|
CSS檔案, 設定link的 media="print" 屬性來指定此樣式專用於列印
<link type="text/<span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=6233e85abbc9f3bc&k=css&k0=css&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=bcf3c9bb5ae83362&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5933%2Ehtml&urlid=0" id="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css</span></a></span>" rel="stylesheet" href="css/print.css" media="print">
由列印繼承預設樣;僅對不同的需要加以限定。為了節省列印時的碳粉，大多數瀏覽器會自動反轉顏色。
為了達到最佳效果，應使色彩變化明顯：
| 1 2 3 4 5 6 7 |
/*白紙黑字*/
@media print {
body {
color: #000;
background: #fff;
}
}
|
我們不是在建立整個網頁的截圖,只是為了展現一個設計良好,可讀性強的網站:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*去除背景圖片, 節約筆黑 */
h1 {
color: #fff;
background: url(banner.jpg);}
@media print {
h1 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
}
|
為了使印表機更具效率,應只顯示主體內容,去除頁首頁尾導航欄
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@media print {
h1 {
color: #000;
background: none;
}
nav, aside {
display: none;
}
body, article {
width: 100%;margin: 0;
padding: 0;
}
@page {
margin: 2cm;
}
}
|
連結的處理
| 1 2 3 4 5 6 7 8 9 10 11 12 |
/*在超連結後面新增帶<http://XXX>的完整地址*/
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}
article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}
|
顯示效果可能是這樣的
控制列印設定選項 @PAGE規則紙張大小設定
通過CSS您可以設定紙張大小,5.5英寸寬,8.5英寸高.
| 1 2 3 |
@page {
size: 5.5in 8.5in;
}
|
通過別名控制紙張大小,如"A4"或“legal.”
| 1 2 3 |
@page {
size: A4;
}
|
控制列印方向， portrait： 縱向列印地, landscape: 橫向
| 1 2 3 |
@page {
size: A4 landscape;
}
|
PAGE模型 The Page Model
文件被轉移到一個或多個頁面框。該頁框是對映到一個矩形平面。這大致類似於css盒子模型。
| 1 |
@page { width: 50em; }
|
PAGE邊距模型 Page-Margin Boxes
在進一步討論之前，我們應該瞭解的頁面的盒子模型，因為它的行為跟如何在螢幕上的工作有些不同。
頁面模型定義了頁面區域，然後劃分了16個周邊緣盒。可以控制頁區域的大小和頁區域的邊緣和頁面本身的端部之間的餘量的尺寸。
左右頁邊距
| 1 2 3 4 5 6 7 8 |
@page :left {
margin-left: 30cm;
}
@page :right {
margin-left: 4cm;
}
|
下面的css將在底部左邊顯示標題，在右下角的網頁計數器，並在右上角顯示一章的標題。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@page:right{
@bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "Our Cats";
font-size: 9pt;
color: #333;
}
@bottom-right {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: counter(page);
font-size: 9pt;
}
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 9pt;
color: #333;
}
}
|
顯示效果如下：
