專為控制列印設計的CSS樣式
大多數Web設計師對列印控制還不是很熟悉,他們往往更迷戀畫素,而不是印表機。在現實世界中,很多人依賴從網站上列印網頁來參考: 在這個數字時代, 在一些特殊的場合,很多人手中還會拿著紙張。Web開發人員可以採取一些措施來彌補印表機和液晶屏之間的差距。
為印表機而不是螢幕設計的樣式
/* 樣式將只應用於列印 */ @media print { }
注* 也可通單獨的CSS檔案, 設定link的 media="print" 屬性來指定此樣式專用於列印
<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
為您的網站重塑整個CSS是沒有必要的,整體而言,由列印繼承預設樣;僅對不同的需要加以限定。為了節省列印時的碳粉,大多數瀏覽器會自動反轉顏色。為了達到最佳效果,應使色彩變化明顯:
/*白紙黑字*/ @media print { body { color: #000; background: #fff; } }
我們不是在建立整個網頁的截圖,只是為了展現一個設計良好,可讀性強的網站:
/*去除背景圖片, 節約筆黑 */ h1 { color: #fff; background: url(banner.jpg); } @media print { h1 { color: #000; background: none; } nav, aside { display: none; } }
為了使印表機更具效率,應只顯示主體內容,去除頁首頁尾導航欄
@media print { h1 { color: #000; background: none; } nav, aside { display: none; } body, article { width: 100%; margin: 0; padding: 0; } @page { margin: 2cm; } }
連結的處理
在印表機上鍊接是看不到的,應對超連結進行擴充套件
/*在超連結後面新增帶<http://XXX>的完整地址*/ @media print { article a { font-weight: bolder; text-decoration: none; } article a[href^=http]:after { content:" <" attr(href) "> "; } }
顯示效果可能是這樣的
控制列印設定選項
該@page規則允許您指定頁面的各個方面。例如,你將要指定頁面的尺寸。頁邊 距,頁首頁尾等都是非常重要的。[很多瀏覽器均己支援]
@PAGE規則紙張大小設定
通過下面這條CSS您可以設定紙張大小,5.5英寸寬,8.5英寸高.
@page { size: 5.5in 8.5in; }
你還可以通過別名控制紙張大小,如"A4"或“legal.”
@page { size: A4; }
你還可以控制列印方向, portrait: 縱向列印地, landscape: 橫向
@page { size: A4 landscape; }
PAGE模型 The Page Model
在分頁媒體格式模型中,文件被轉移到一個或多個頁面框。該頁框是對映到一個矩形平面。這大致類似於css盒子模型。
注* 支援瀏覽器較少
@page { width: 50em; }
PAGE邊距模型 Page-Margin Boxes
在進一步討論之前,我們應該瞭解的頁面的盒子模型,因為它的行為跟如何在螢幕上的工作有些不同。
頁面模型定義了頁面區域,然後劃分了16個周邊緣盒。可以控制頁區域的大小和頁區域的邊緣和頁面本身的端部之間的餘量的尺寸。
左右頁邊距
@page :left { margin-left: 30cm; } @page :right { margin-left: 4cm; }
下面的css將在底部左邊顯示標題,在右下角的網頁計數器,並在右上角顯示一章的標題。
@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; } }
顯示效果如下:
注* 此文整理自:Tips And Tricks For Print Style Sheets 和 Designing For Print With CSS 和 css3 page 規範
相關文章
- HTML API + CSS 控制頁面列印內容和樣式HTMLAPICSS
- CSS設定連線<a>的樣式CSS
- CSS 設定 <progress>樣式CSS
- CSS 設定列表樣式CSS
- CSS 設定文字樣式CSS
- @media print可以用來控制web列印樣式嗎?Web
- CSS設定半個文字的樣式CSS
- CSS 設定placeholder文字樣式CSS
- CSS 設定table表格樣式CSS
- CSS 設定連結樣式CSS
- CSS 設定svg元素樣式CSSSVG
- bootstrap學習心得總結:css樣式設計分享bootCSS
- CSS 設定<img>圖片樣式CSS
- css樣式CSS
- 何為CSS 樣式優先順序CSS
- css樣式的組成CSS
- 001---css樣式規則及css字型樣式CSS
- 常用CSS樣式2:其它樣式CSS
- 常用CSS樣式1:文字樣式CSS
- css樣式常用的樣式以及選擇器CSS
- css字型樣式CSS
- css背景樣式CSS
- CSS內聯樣式的使用,設定字型屬性CSS
- 匯入式CSS樣式CSS
- 1.5 常用CSS樣式1:文字樣式CSS
- 1.6 常用CSS樣式2:其它樣式CSS
- CSS設定第n個li元素樣式CSS
- web前端學習:CSS樣式設定技巧Web前端CSS
- CSS 設定第n個li元素樣式CSS
- CSS 設定前n個li元素樣式CSS
- CSS 設定指定範圍li元素樣式CSS
- css樣式設定技巧學習筆記CSS筆記
- 學習《HTML+CSS基礎課程》的筆記---第十五篇:CSS樣式設計小HTMLCSS筆記
- 【css】 如何修改select的樣式CSS
- weex的css樣式相關CSS
- EAS_WEB.設定控制元件樣式Web控制元件
- CSS中多個class樣式設定的不同寫法CSS
- css樣式簡寫CSS
- css修改title樣式CSS