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