揭露鏈接
還有個(gè)巧妙的技巧(可惜只能在完整支持CSS2規(guī)范的瀏覽器中產(chǎn)生作用),那就是揭露鏈接URLs,讓他們?cè)诖蛴〗Y(jié)果中出現(xiàn)在超鏈接文字后面.
我們能用:after 這個(gè)偽類來編寫CSS,讓支持的瀏覽器在超連接文字后面打印出它所連接的URL,目前Mozilla,Safari與Netscape 7.0都支持這個(gè)功能,同時(shí),對(duì)不支持:after 的瀏覽器使用者來說也不吃虧,他們只會(huì)看到超鏈接文字本身(Eric Meyer, "CSS Design: Going to Print" , http://www.alistapart.com/articles/goingtoprint/).
讓我們?yōu)榇蛴邮奖砑由弦粭l新規(guī)則,凸顯內(nèi)容部分里面的超鏈接URL:
body { font-family: "Times New Roman", serif; font-size: 12pt; } #nav, #sidebar, #search { display: none; } #content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; }
這條規(guī)則會(huì)使打印出來的頁面在超鏈接文字后面加上URL.URL會(huì)被放在一組括號(hào)里面,前后各留一個(gè)空格,這只會(huì)在頁面的#content區(qū)域發(fā)生作用.雖然可以編寫一條通用規(guī)則揭露所有超鏈接,但在這里我們選擇只揭露內(nèi)容部分里的超鏈接 -- 排除頁首,頁尾與其他區(qū)域的鏈接.
再次提醒,雖然這個(gè)功能目前只有少數(shù)幾個(gè)瀏覽器支持,但是對(duì)不支持:after 偽類的瀏覽器完全無害,他們只會(huì)直接忽略這項(xiàng)規(guī)則.
鏈接文字
剛剛我們對(duì)連接URL動(dòng)了些巧妙的手腳,但是也別忘了以獨(dú)特的方式強(qiáng)調(diào)鏈接文字,讓讀者能在閱讀一般內(nèi)容時(shí),輕易辨別夾雜在內(nèi)的超鏈接.
body { font-family: "Times New Roman", serif; font-size: 12pt; } #nav, #sidebar, #search { display: none; } a:link, a:visited { color: blue; text-decoration: underline; } #content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; }
當(dāng)然,也可以在此任意選擇顏色,現(xiàn)在我是用預(yù)設(shè)的藍(lán)色并加上下劃線,因?yàn)橐话闳艘谎劬湍軐⑺闯沙溄?對(duì)黑白打印來說,能夠試驗(yàn)出某種灰色,讓鏈接與一般文字產(chǎn)生足夠的對(duì)比.
預(yù)覽打印節(jié)省墨水
另一個(gè)節(jié)省墨水的技巧,是以瀏覽器的預(yù)覽打印功能試著顯示頁面的打印效果,而不是真的把整份頁面印到紙上.
在大多數(shù)瀏覽器里,文件 - 打印 對(duì)話框?qū)τ袀(gè)預(yù)覽選項(xiàng),讓你查看頁面的打印效果,你能在這里好好觀察一下打印樣式表的效果.
出處:藍(lán)色理想
責(zé)任編輯:moby
上一頁 標(biāo)記語言——打印樣式 [3] 下一頁 標(biāo)記語言——打印樣式 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|