在實(shí)際中媒體類型有近十種之多,實(shí)際之中常用的也就那么幾種,不過(guò)媒體類型的引用方法也有多種,常見(jiàn)的有:link標(biāo)簽、@import和CSS3新增的@media幾種:
link方法
link方法引入媒體類型其實(shí)就是在<link>標(biāo)簽引用樣式的時(shí)候,通過(guò)link標(biāo)簽中的media屬性來(lái)指定不同的媒體類型。如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
@import方法
@import可以引用樣式文件,同樣也可以用來(lái)引用媒體類型。@import引入媒體類型主要有兩種方式,一種是在樣式中通過(guò)@import調(diào)用另一個(gè)樣式文件;另一種方法是在<head></head>標(biāo)簽中的<style></style>中引入,但這種使用方法在IE6~7都不被支持,如樣式文件中調(diào)用另一個(gè)樣式文件時(shí),就可以指定對(duì)應(yīng)的媒體類型。
@importurl(reset.css) screen; @importurl(print.css) print;
在<head>中的<style>標(biāo)簽中引入媒體類型方法。
<head> <style type="text/css"> @importurl(style.css) all; </style> </head>
@media方法
@media是CSS3中新引進(jìn)的一個(gè)特性,被稱為媒體查詢。在頁(yè)面中也可以通過(guò)這個(gè)屬性來(lái)引入媒體類型。@media引入媒體類型和@import有點(diǎn)類似也具有兩方式。
(1)在樣式文件中引用媒體類型:
@media screen { 選擇器{/*你的樣式代碼寫在這里…*/} }
(2)使用@media引入媒體類型的方式是在<head>標(biāo)簽中的<style>中引用。
<head> <style type="text/css"> @media screen{ 選擇器{/*你的樣式代碼寫在這里…*/} } </style> </head>
本部分無(wú)練習(xí)任務(wù)
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)