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

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

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

代碼如下:

<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樣式表要服務的對象，如果屬性值是media，則說明是為了在屏幕控制頁面的顯示，如果屬性值是print，則說明css代碼是用于控制需要打印的元素的樣式的。
隱藏不需要打印的頁面元素:
使用控制打印的css隱藏不需要打印的頁面元素即可，那么點擊打印，被打印的只有打印樣式表控制下沒有被隱藏的元素。
代碼如下:

代碼如下:

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

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

代碼如下:

<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ī)則用于指定的設備類型。它有如下值可用：
all-- 用于所有設備類型
aural-- 用于語音和音樂合成器
braille-- 用于觸覺反饋設備
embossed-- 用于凸點字符（盲文）印刷設備
handheld-- 用于小型或手提設備
print-- 用于打印機
projection-- 用于投影圖像，如幻燈片
screen-- 用于計算機顯示器
tty-- 用于使用固定間距字符格的設備。如電傳打字機和終端
tv-- 用于電視類設備
這么多的值，并不是每個都可用，因為瀏覽器廠商并沒有全部實現(xiàn)它們。
在IE里面，可用的值有all，print，screen三個。上面的代碼里，我們沒有使用“media”，實際上IE或其他瀏覽器是用了“all”這個值?！皊creen”，用于顯示器，也就是我們一般看到的效果?！皃rint”，用于打印的效果。
也就是說，我們沒有指定“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的設置，來讓網(wǎng)頁上的一些不需要打印的內(nèi)容隱藏起來，比如，打印按鈕。實際上，media還可以這樣使用：

代碼如下:

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

或者這樣使用：

代碼如下:

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

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

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

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

廣告

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