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

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

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

代碼如下:

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

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

代碼如下:

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

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

代碼如下:

<input type="button" value="點擊打印" onclick="window.print()"/>

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

代碼如下:

<link rel="stylesheet" type="text/css" href="mycss.css">

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

代碼如下:

<link rel="stylesheet" type="text/css" media="screen" href="mycss.css">
<link rel="stylesheet" type="text/css" media="print" href="myprintcss.css">

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

代碼如下:

<style media=print>
//這里定義你要打印時用到的css類
</style>

或者這樣使用：

代碼如下:

<style>
@media print {
//這里定義你要打印時用到的css類
}
</style>

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

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

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

廣告

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