CSS的媒體類型怎麼使用
- 不言原創
- 2018-12-07 17:07:063407瀏覽
今天的這篇文章將介紹關於CSS媒體類型的用法，媒體類型允許你指定的文件將以怎樣的形式在不同媒體呈現，下面我們就來看看具體的內容。
根據Web網站的不同，網頁的錯誤會以非預期的形式出現，例如列印時的佈局折疊，但在媒體類型中，可以設定它以避免它，這意味著您可以建立用於列印的頁面，輸出到投影機的頁面等。
如何使用CSS媒體類型？
媒體類型可以用兩種方式寫。
第一種方式
<link rel="stylesheet" href="sample.css" type="text/css" media="screen">
第二種方式
@media screen{
/*screen的内容*/
}第一個使用根據媒體類型更改應用的CSS。
第二種是在CSS中為每種媒體類型編寫的設定
由於有時大量的CSS程式碼時，有一些變化時很難更改，所以建議使用第一種方式，但這次我們以第二種方式為例介紹CSS媒體類型。
我們先來簡單看一下CSS中常用的幾種媒體類型
#screen（螢幕）
print（列印）
tv（電視）
projection（投影機）
all（全部）
當使用兩個媒體類型時可以用逗號分隔開，下面我們來看具體的範例
程式碼如下
HTML程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的媒體類型怎麼使用</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<h1>Sample</h1>
<p>根据媒体的不同，背景颜色会改变</p>
<p>screen : 平常显示 : #d9534f（红色）</p>
<p>print : 打印时显示: #5bc0de（蓝色）</p>
</body>
</html>CSS程式碼
@media all{
p{
color:#000000;
}
}
@media print{
body{
color: #5bc0de;
}
}
@media screen{
body{
color: #d9534f;
}
}執行上述程式碼在瀏覽器頁面上顯示如下效果
#
以上是CSS的媒體類型怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS中hack是什麼意思下一篇：CSS中hack是什麼意思