|
分開屏幕顯示與打印的樣式
假設(shè)我們想為同一份文件提供兩份CSS:一個(gè)在顯示時(shí)使用,另一個(gè)在打印時(shí)使用.現(xiàn)在以我的個(gè)人網(wǎng)站作為示范.
我以<link>標(biāo)簽引用整個(gè)網(wǎng)站的主體樣式表(styles.css).styles.css的內(nèi)容只是個(gè)簡單的@import規(guī)則,用以引入另一個(gè)外部樣式表,這樣能夠?qū)吓f瀏覽器(像是Netscape 4.x)隱藏樣式設(shè)定.
在頁面的<head>里,鏈接到主體樣式表styles.css
<link rel="stylesheet" type="text/css" href="/css/style.css" />
同時(shí)也建立另一個(gè)特別針對打印設(shè)計(jì)的樣式表(print.css).在print.css里,我寫了只在頁面打印時(shí)適用的樣式.
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/print.css" />
然后,現(xiàn)在要如何確保這些CSS只會(huì)針對各自適合的媒體發(fā)揮作用呢?為<link>標(biāo)簽加上media屬性就可以了(與方法A一樣).
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
通過為styles.css指定screen,就能確保styles.css包含的樣式只會(huì)對電腦屏幕使用,同樣的,把media屬性設(shè)為print就能確保print.css包含的樣式只在使用者打印頁面時(shí)使用.
現(xiàn)在已經(jīng)把屏幕與打印樣式分開了,接著讓我們看看有哪些樣式適合放在打印樣式表里頭.
設(shè)計(jì)一份打印樣式表
這份style.css可能包含了排版布局,字體,定位,背景等規(guī)則,但是print.css卻是一張白紙,等著我們自定義打印時(shí)應(yīng)用的樣式.
設(shè)計(jì)打印樣式要注意的關(guān)鍵就是媒體類型,由于現(xiàn)在正在處理一張紙(而不是瀏覽器窗口),因此像素長度,大小并不是最佳選擇.
用點(diǎn)數(shù)指定大小
在打印樣式表里,用點(diǎn)數(shù)制定字體大小是件十分合理的事情.在這份打印樣式表中,首先就為<body>標(biāo)簽定義基礎(chǔ)字體大小 -- 使用"點(diǎn)"單位.
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}
實(shí)在太簡單了,比起用像素單位來說,這個(gè)應(yīng)該更能想象12點(diǎn)字體會(huì)印多大,同時(shí)我們也選用serif字體,這種字體打印出來比較細(xì)致,而且比較容易閱讀.
隱藏不必要的標(biāo)簽節(jié)省墨水
網(wǎng)站上或許有不少頁面元素在打印版本上完全沒有用,像是導(dǎo)航鏈接,側(cè)邊欄,表單以及廣告欄之類的元素在打印時(shí)經(jīng)常只會(huì)浪費(fèi)墨水,我們可以在打印樣式表內(nèi)使用display屬性將它們設(shè)為不顯示.使用者經(jīng)常只想打印頁面的內(nèi)容.
舉例來說,如果網(wǎng)站以#nav,#sidebar,#advertising與#search分別存放導(dǎo)航條,側(cè)邊欄,廣告項(xiàng)目與搜索表單的話,就能在打印樣式表里用以下這段聲明把這些內(nèi)容全部隱藏起來:
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}
#nav, #sidebar, #advertising, #search {
display: none;
}
通過在打印樣式表里設(shè)定display:none;我們就能使打印結(jié)果隱藏掉這些元素.
試著隱藏頁面上不必要的元素,很快就能以同一份標(biāo)記代碼輕松為你的網(wǎng)站作出"打印友好"的版本.不必在服務(wù)器上用另一份縮減過的模板輸出一份完全一樣的網(wǎng)站內(nèi)容 -- 只需要一份額外的CSS文件,指定print媒體類型,搞定!
現(xiàn)在再度證實(shí),以邏輯頁面"段落"組織標(biāo)記結(jié)構(gòu)讓未來設(shè)計(jì)樣式更方便.如果頁面中有個(gè)廣告橫幅,為它指定id很合理,因?yàn)檫@能把控制權(quán)交給CSS.在這個(gè)例子中,是在打印時(shí)將它隱藏起來.
去掉背景圖片和顏色也是節(jié)省墨水,讓打印結(jié)果更容易閱讀的技巧之一.
舉例來說,如果先前為<body>標(biāo)簽指定了背景圖片或是顏色,現(xiàn)在就像這樣就能把它去掉:
body {
background: none;
}
當(dāng)然也能用這個(gè)方法去掉其他標(biāo)簽在屏幕樣式里指定的背景圖片,顏色.
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 標(biāo)記語言——打印樣式 [2] 下一頁 標(biāo)記語言——打印樣式 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 標(biāo)記語言——打印樣式 [3]
