CSS設(shè)置打印頁(yè)面的方法以及media的用法介紹

這篇文章主要介紹“CSS設(shè)置打印頁(yè)面的方法以及media的用法介紹”，在日常操作中，相信很多人在CSS設(shè)置打印頁(yè)面的方法以及media的用法介紹問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS設(shè)置打印頁(yè)面的方法以及media的用法介紹”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),薩嘎網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:薩嘎等地區(qū)。薩嘎做網(wǎng)站價(jià)格咨詢:18980820575

在很多是時(shí)候往往要打印網(wǎng)頁(yè)中的某一部分，而不是全部網(wǎng)頁(yè)，所以告訴打印機(jī)要打印的部分，使用css進(jìn)行一下設(shè)置是一個(gè)比較好的方式，先看一段代碼:

代碼如下:

以上兩行代碼是引入外部css樣式表，需要特別主義的是media屬性值分別是screen和print，用來(lái)規(guī)定css樣式表要服務(wù)的對(duì)象，如果屬性值是media，則說(shuō)明是為了在屏幕控制頁(yè)面的顯示，如果屬性值是print，則說(shuō)明css代碼是用于控制需要打印的元素的樣式的。
隱藏不需要打印的頁(yè)面元素:
使用控制打印的css隱藏不需要打印的頁(yè)面元素即可，那么點(diǎn)擊打印，被打印的只有打印樣式表控制下沒(méi)有被隱藏的元素。
代碼如下:

代碼如下:

/* 隱藏不打印項(xiàng) start */
h2 span{
display:none;
}
#sidebar{
display:none;
}
/* 隱藏不打印項(xiàng) end */

以上代碼只是一個(gè)簡(jiǎn)單的演示，頁(yè)面中的相關(guān)元素將不會(huì)被打印。
點(diǎn)擊進(jìn)行打印:

代碼如下:

點(diǎn)擊以上按鈕就可以實(shí)現(xiàn)打印效果。
css里media的使用
我們?cè)诰W(wǎng)頁(yè)里引用外部的css文件時(shí)，通常是用如下的代碼：

代碼如下:

實(shí)際上，上面的link對(duì)象里，我們是省略了一個(gè)叫“media”的屬性，這個(gè)屬性指定樣式表規(guī)則用于指定的設(shè)備類型。它有如下值可用：
all-- 用于所有設(shè)備類型
aural-- 用于語(yǔ)音和音樂(lè)合成器
braille-- 用于觸覺(jué)反饋設(shè)備
embossed-- 用于凸點(diǎn)字符（盲文）印刷設(shè)備
handheld-- 用于小型或手提設(shè)備
print-- 用于打印機(jī)
projection-- 用于投影圖像，如幻燈片
screen-- 用于計(jì)算機(jī)顯示器
tty-- 用于使用固定間距字符格的設(shè)備。如電傳打字機(jī)和終端
tv-- 用于電視類設(shè)備
這么多的值，并不是每個(gè)都可用，因?yàn)闉g覽器廠商并沒(méi)有全部實(shí)現(xiàn)它們。
在IE里面，可用的值有all，print，screen三個(gè)。上面的代碼里，我們沒(méi)有使用“media”，實(shí)際上IE或其他瀏覽器是用了“all”這個(gè)值。“screen”，用于顯示器，也就是我們一般看到的效果?！皃rint”，用于打印的效果。
也就是說(shuō)，我們沒(méi)有指定“media”，那么我們看到的效果和打印的效果，它們用的都是同樣的css文件。如果我們指定了一個(gè)“screen”，又指定了一個(gè)“print”，那么在打印時(shí)就會(huì)用“print”指定的css來(lái)渲染網(wǎng)頁(yè)并打印。例如一個(gè)網(wǎng)頁(yè)里有如下代碼：

代碼如下:

那就表示，我們通過(guò)IE看到的網(wǎng)頁(yè)，用到的css文件是mycss.css，而通過(guò)IE打印時(shí)用到的css文件則是myprintcss.css。想到什么了嗎？對(duì)，我們可以通過(guò)print的設(shè)置，來(lái)讓網(wǎng)頁(yè)上的一些不需要打印的內(nèi)容隱藏起來(lái)，比如，打印按鈕。實(shí)際上，media還可以這樣使用：

代碼如下:

或者這樣使用：

代碼如下:

到此，關(guān)于“CSS設(shè)置打印頁(yè)面的方法以及media的用法介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

分享名稱：CSS設(shè)置打印頁(yè)面的方法以及media的用法介紹
網(wǎng)站網(wǎng)址：http://muchs.cn/article28/iheicp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、虛擬主機(jī)、動(dòng)態(tài)網(wǎng)站、軟件開(kāi)發(fā)、做網(wǎng)站、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容