CSS打印時(shí)如何更改屏幕設(shè)計(jì)和樣式

這篇文章給大家分享的是有關(guān)CSS打印時(shí)如何更改屏幕設(shè)計(jì)和樣式的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比襄垣網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式襄垣網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋襄垣地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

本篇文章我們將介紹在打印過(guò)程中使用CSS更改屏幕設(shè)計(jì)和樣式的代碼，要在印刷時(shí)改變樣式，可以在文件中進(jìn)行樣式表的鏈接的link標(biāo)簽指定media屬性，或者在CSS文件中使用媒體查詢。

使用鏈接標(biāo)記指定媒體屬性時(shí)

代碼

這是使用鏈接標(biāo)記指定media屬性的代碼。

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="print.css" type="text/css" media="print" /> 
  </head>
  <body>
   <div class="MenuFrame">
    菜單1<br />
    菜單2<br />
    菜單3<br />
    菜單4<br />
    菜單5<br />
    菜單6<br />
  </div>
  <div class="ContentsFrame">
    <h3>題記</h3>
    <p>內(nèi)容</p>
    <p>
     竹外桃花，紛紛飄落。卿舞霓裳，君彈曲。高山流水，繞指尖幽幽蕩漾。執(zhí)一葉扁舟，在歲月的河流上，演繹一場(chǎng)不離散的笙歌，可好……——題記
     猶記曾經(jīng)，君襲一屢白衣，從陌上花開(kāi)的小徑款款而來(lái)，桃花灼灼，驚起了我的一簾幽夢(mèng)。從此，詩(shī)詞歌賦，煙雨桃花，都失去了色彩，只有君的身影，絲絲抨擊著心海。
     </p>
    <h3>第一段</h3>
    <p>內(nèi)容</p>
    <p>
    不再嘆天若有情，不再盼三寸天堂。只因這素潔的紅塵有了你的陪伴，相思惹起了無(wú)邊的牽盼。情到深處無(wú)怨尤，不想，與君共享人世繁華，只愿，流年今夕，共看云卷云舒，花開(kāi)花落。
　　初相見(jiàn)，驚素心。你來(lái)時(shí)，陌上花開(kāi)，紛繁的花瓣，燦爛了我的眼眸?？v使，東風(fēng)惡，人情薄，煙花不堪剪。</p>
    <h3>第二段</h3>
    <p>內(nèi)容</p>
    <p>
      仍愿為你，嘗盡這無(wú)邊的相思之苦。也許，我就是你千百年前放走的白狐，今生，只為你醉，只為你舞。君可知，那天空飄落的雪花呀，就是我對(duì)你深深的思念。那日，你說(shuō)。凡塵寂寥，不能遺忘遠(yuǎn)方的夢(mèng)想。山一程，水一程，你離開(kāi)了這個(gè)令我百轉(zhuǎn)千回的相思地。
　　一年一度秋風(fēng)近，風(fēng)兒翩翩吹起來(lái)。此時(shí)，橋邊的芍藥，正生的紅艷，梨花艷艷地開(kāi)著。熟悉的地方，陌生的氛圍，卻沒(méi)有了你的蹤影。日日思君不見(jiàn)君，即使花艷又如何。</p>
    </div>
  <div class="ClearLeft"></div>
  </body>
  </html>

screen.css

.MenuFrame{
  width:200px;  
  float:left;  
  background-color:#fff8aa;  
  color:#ff6a00;}
.ContentsFrame {
  float:left;  
  width:600px;  
  background-color:#ededed;  
  color:#535353;
  }
.ClearLeft{ 
 clear:left;
 }

print.css

.MenuFrame{
  display:none;
}
.ContentsFrame {
  width:100%;
}
.ClearLeft{
  clear:left;
}

說(shuō)明：

在Web瀏覽器中正常顯示的情況下，應(yīng)用style.css的樣式表。打印時(shí)，應(yīng)用帶有media =“print”的print.css。在print.css中，左側(cè)的MenuFrame被隱藏，它變?yōu)?級(jí)顯示。此外，ContentsFrame的寬度假定為100％，并且將根據(jù)紙張的寬度進(jìn)行布局。此外，通過(guò)使角色的顏色不明確，我們將其設(shè)置為黑色字母的白色背景。

執(zhí)行結(jié)果：

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

CSS打印時(shí)如何更改屏幕設(shè)計(jì)和樣式

從Web瀏覽器顯示打印預(yù)覽。在打印預(yù)覽中，您可以看到左側(cè)的菜單未顯示，顏色也變?yōu)楹诎住?/p>

CSS打印時(shí)如何更改屏幕設(shè)計(jì)和樣式

下面我們來(lái)看單一樣式的處理情況

代碼如下：

index2.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="style2.css" type="text/css" />
</head>
<body>
  <div class="MenuFrame">
    菜單1<br />
    菜單2<br />
    菜單3<br />
    菜單4<br />
    菜單5<br />
    菜單6<br />
  </div>
  <div class="ContentsFrame">
    <h3>題記</h3>
    <p>內(nèi)容</p>
    <p>
     竹外桃花，紛紛飄落。卿舞霓裳，君彈曲。高山流水，繞指尖幽幽蕩漾。執(zhí)一葉扁舟，在歲月的河流上，演繹一場(chǎng)不離散的笙歌，可好……——題記
     猶記曾經(jīng)，君襲一屢白衣，從陌上花開(kāi)的小徑款款而來(lái)，桃花灼灼，驚起了我的一簾幽夢(mèng)。從此，詩(shī)詞歌賦，煙雨桃花，都失去了色彩，只有君的身影，絲絲抨擊著心海。
     </p>
    <h3>第一段</h3>
    <p>內(nèi)容</p>
    <p>
    不再嘆天若有情，不再盼三寸天堂。只因這素潔的紅塵有了你的陪伴，相思惹起了無(wú)邊的牽盼。情到深處無(wú)怨尤，不想，與君共享人世繁華，只愿，流年今夕，共看云卷云舒，花開(kāi)花落。
　　初相見(jiàn)，驚素心。你來(lái)時(shí)，陌上花開(kāi)，紛繁的花瓣，燦爛了我的眼眸?？v使，東風(fēng)惡，人情薄，煙花不堪剪。</p>
    <h3>第二段</h3>
    <p>內(nèi)容</p>
    <p>
      仍愿為你，嘗盡這無(wú)邊的相思之苦。也許，我就是你千百年前放走的白狐，今生，只為你醉，只為你舞。君可知，那天空飄落的雪花呀，就是我對(duì)你深深的思念。那日，你說(shuō)。凡塵寂寥，不能遺忘遠(yuǎn)方的夢(mèng)想。山一程，水一程，你離開(kāi)了這個(gè)令我百轉(zhuǎn)千回的相思地。
　　一年一度秋風(fēng)近，風(fēng)兒翩翩吹起來(lái)。此時(shí)，橋邊的芍藥，正生的紅艷，梨花艷艷地開(kāi)著。熟悉的地方，陌生的氛圍，卻沒(méi)有了你的蹤影。日日思君不見(jiàn)君，即使花艷又如何。</p>
    </div>
  <div class="ClearLeft"></div>
</body>
</html>

style2.css

.MenuFrame{
  width:200px;  
  float:left;  
  background-color:#fff8aa;  
  color:#ff6a00;
}
.ContentsFrame {
  float:left;  
  width:600px;  
  background-color:#ededed;  
  color:#535353;
}
@media print {
  .MenuFrame{
      display:none;
  }  
  .ContentsFrame {
      width:100%;    
      background-color:#FFFFFF;    
      color:#000000;
  }
}
.ClearLeft{
  clear:left;
}

說(shuō)明：

在Web瀏覽器中正常顯示的情況下，應(yīng)用樣式表的內(nèi)容。打印時(shí)，@ media print {}塊中的樣式也適用。在@media print {}塊中，左側(cè)的MenuFrame被隱藏，它變成一個(gè)塊內(nèi)顯示。此外，ContentsFrame的寬度假定為100％，并且將根據(jù)紙張的寬度進(jìn)行布局。此外，文本顏色也指定黑色（＃000000），它設(shè)置背景色也是白色（#FFFFFF）。

執(zhí)行的效果和上述一樣。

感謝各位的閱讀！關(guān)于CSS打印時(shí)如何更改屏幕設(shè)計(jì)和樣式就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前文章：CSS打印時(shí)如何更改屏幕設(shè)計(jì)和樣式
本文路徑：http://jinyejixie.com/article4/pspeie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、品牌網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、云服務(wù)器、網(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)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

CSS打印時(shí)如何更改屏幕設(shè)計(jì)和樣式