溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關CSS打印時如何更改屏幕設計和樣式的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
本篇文章我們將介紹在打印過程中使用CSS更改屏幕設計和樣式的代碼，要在印刷時改變樣式，可以在文件中進行樣式表的鏈接的link標簽指定media屬性，或者在CSS文件中使用媒體查詢。
使用鏈接標記指定媒體屬性時
代碼
這是使用鏈接標記指定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>內容</p>
<p>
竹外桃花，紛紛飄落。卿舞霓裳，君彈曲。高山流水，繞指尖幽幽蕩漾。執(zhí)一葉扁舟，在歲月的河流上，演繹一場不離散的笙歌，可好……——題記
猶記曾經(jīng)，君襲一屢白衣，從陌上花開的小徑款款而來，桃花灼灼，驚起了我的一簾幽夢。從此，詩詞歌賦，煙雨桃花，都失去了色彩，只有君的身影，絲絲抨擊著心海。
</p>
<h3>第一段</h3>
<p>內容</p>
<p>
不再嘆天若有情，不再盼三寸天堂。只因這素潔的紅塵有了你的陪伴，相思惹起了無邊的牽盼。情到深處無怨尤，不想，與君共享人世繁華，只愿，流年今夕，共看云卷云舒，花開花落。
初相見，驚素心。你來時，陌上花開，紛繁的花瓣，燦爛了我的眼眸。縱使，東風惡，人情薄，煙花不堪剪。</p>
<h3>第二段</h3>
<p>內容</p>
<p>
仍愿為你，嘗盡這無邊的相思之苦。也許，我就是你千百年前放走的白狐，今生，只為你醉，只為你舞。君可知，那天空飄落的雪花呀，就是我對你深深的思念。那日，你說。凡塵寂寥，不能遺忘遠方的夢想。山一程，水一程，你離開了這個令我百轉千回的相思地。
一年一度秋風近，風兒翩翩吹起來。此時，橋邊的芍藥，正生的紅艷，梨花艷艷地開著。熟悉的地方，陌生的氛圍，卻沒有了你的蹤影。日日思君不見君，即使花艷又如何。</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;
}說明：
在Web瀏覽器中正常顯示的情況下，應用style.css的樣式表。打印時，應用帶有media =“print”的print.css。在print.css中，左側的MenuFrame被隱藏，它變?yōu)?級顯示。此外，ContentsFrame的寬度假定為100％，并且將根據(jù)紙張的寬度進行布局。此外，通過使角色的顏色不明確，我們將其設置為黑色字母的白色背景。
執(zhí)行結果：
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
從Web瀏覽器顯示打印預覽。在打印預覽中，您可以看到左側的菜單未顯示，顏色也變?yōu)楹诎住?/p>
下面我們來看單一樣式的處理情況
代碼如下：
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>內容</p>
<p>
竹外桃花，紛紛飄落。卿舞霓裳，君彈曲。高山流水，繞指尖幽幽蕩漾。執(zhí)一葉扁舟，在歲月的河流上，演繹一場不離散的笙歌，可好……——題記
猶記曾經(jīng)，君襲一屢白衣，從陌上花開的小徑款款而來，桃花灼灼，驚起了我的一簾幽夢。從此，詩詞歌賦，煙雨桃花，都失去了色彩，只有君的身影，絲絲抨擊著心海。
</p>
<h3>第一段</h3>
<p>內容</p>
<p>
不再嘆天若有情，不再盼三寸天堂。只因這素潔的紅塵有了你的陪伴，相思惹起了無邊的牽盼。情到深處無怨尤，不想，與君共享人世繁華，只愿，流年今夕，共看云卷云舒，花開花落。
初相見，驚素心。你來時，陌上花開，紛繁的花瓣，燦爛了我的眼眸?？v使，東風惡，人情薄，煙花不堪剪。</p>
<h3>第二段</h3>
<p>內容</p>
<p>
仍愿為你，嘗盡這無邊的相思之苦。也許，我就是你千百年前放走的白狐，今生，只為你醉，只為你舞。君可知，那天空飄落的雪花呀，就是我對你深深的思念。那日，你說。凡塵寂寥，不能遺忘遠方的夢想。山一程，水一程，你離開了這個令我百轉千回的相思地。
一年一度秋風近，風兒翩翩吹起來。此時，橋邊的芍藥，正生的紅艷，梨花艷艷地開著。熟悉的地方，陌生的氛圍，卻沒有了你的蹤影。日日思君不見君，即使花艷又如何。</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;
}說明：
在Web瀏覽器中正常顯示的情況下，應用樣式表的內容。打印時，@ media print {}塊中的樣式也適用。在@media print {}塊中，左側的MenuFrame被隱藏，它變成一個塊內顯示。此外，ContentsFrame的寬度假定為100％，并且將根據(jù)紙張的寬度進行布局。此外，文本顏色也指定黑色（＃000000），它設置背景色也是白色（#FFFFFF）。
執(zhí)行的效果和上述一樣。
感謝各位的閱讀！關于CSS打印時如何更改屏幕設計和樣式就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
