CSS 媒體類型
媒體類型允許你指定文件將如何在不同媒體呈現(xiàn)。該文件可以以不同的方式顯示在屏幕上,在紙張上,或聽(tīng)覺(jué)瀏覽器等等。
媒體類型
某些 CSS 屬性僅僅被設(shè)計(jì)為針對(duì)某些媒介。比方說(shuō) "voice-family" 屬性被設(shè)計(jì)為針對(duì)聽(tīng)覺(jué)用戶終端。其他一些屬性可用于不同的媒體類型。例如,"font-size"屬性可用于屏幕和印刷媒體,但有不同的值。屏幕和紙上的文件不同,通常需要一個(gè)更大的字體,sans - serif字體比較適合在屏幕上閱讀,而serif字體更容易在紙上閱讀。
@media 規(guī)則
@media 規(guī)則允許在相同樣式表為不同媒體設(shè)置不同的樣式。
在下面的例子告訴我們?yōu)g覽器屏幕上顯示一個(gè)14像素的Verdana字體樣式。但是如果頁(yè)面打印,將是10個(gè)像素的Times字體。請(qǐng)注意,font-weight在屏幕上和紙上設(shè)置為粗體:
<html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } </style> </head> <body> .... </body> </html>
你可以自己嘗試看看 ! 如果您使用的是Mozilla / Firefox或IE5+打印此頁(yè),你會(huì)看到,"Media Types"將使用另一種比其他文本字體大小小點(diǎn)的字體顯示。
提示:有關(guān) @media 規(guī)則的更多信息,請(qǐng)參考CSS參考手冊(cè)的CSS @media 查詢部分。
其他媒體類型
注意:媒體類型名稱不區(qū)分大小寫(xiě)。
媒體類型 描述
all 用于所有的媒體設(shè)備。
aural 用于語(yǔ)音和音頻合成器。
braille 用于盲人用點(diǎn)字法觸覺(jué)回饋設(shè)備。
embossed 用于分頁(yè)的盲人用點(diǎn)字法打印機(jī)。
handheld 用于小的手持的設(shè)備。
print 用于打印機(jī)。
projection 用于方案展示,比如幻燈片。
screen 用于電腦顯示器。
tty 用于使用固定密度字母柵格的媒體,比如電傳打字機(jī)和終端。
tv 用于電視機(jī)類型的設(shè)備。
擴(kuò)展閱讀
CSS3教程:CSS3 多媒體查詢
作者:大學(xué)生新聞網(wǎng) 來(lái)源:大學(xué)生新聞網(wǎng)
發(fā)布時(shí)間:2025-03-30 閱讀:
- CSS 屬性選擇器
- 顧名思義,CSS 屬性選擇器就是指可以根據(jù)元素的屬性以及屬性值來(lái)選擇元素。
- 03-30 關(guān)注:0
- CSS 媒體類型
- 媒體類型允許你指定文件將如何在不同媒體呈現(xiàn)。該文件可以以不同的方式顯示在屏幕上,在紙張上,或聽(tīng)覺(jué)瀏覽器等等。
- 03-30 關(guān)注:0
- CSS 圖像拼合技術(shù)
- 有許多圖像的網(wǎng)頁(yè)可能需要很長(zhǎng)的時(shí)間來(lái)加載和生成多個(gè)服務(wù)器的請(qǐng)求。
- 03-30 關(guān)注:0
- CSS 圖像透明/不透明
- 注意:CSS Opacity屬性是W3C的CSS3建議的一部分。
- 03-29 關(guān)注:6
- CSS 下拉菜單
- 使用 CSS 創(chuàng)建一個(gè)鼠標(biāo)移動(dòng)上去后顯示下拉菜單的效果。
- 03-29 關(guān)注:6
- CSS 導(dǎo)航欄
- 熟練使用導(dǎo)航欄,對(duì)于任何網(wǎng)站都非常重要。
- 03-29 關(guān)注:5
- CSS 偽元素
- CSS偽元素是用來(lái)添加一些選擇器的特殊效果。
- 03-29 關(guān)注:5