HTML 樣式
HTML樣式
style
元素允許您在HTML文檔中內(nèi)聯(lián)定義CSS樣式。
style
元素具有局部屬性:type,media,scoped
。
HTML5中添加了scoped
屬性。
例子
以下代碼給出了所使用的樣式元素的示例。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {background-color: grey;color: white;padding: 0.5em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<a >Visit www.w3cschool.cn</a>
</body>
</html>
上面的代碼為a
元素創(chuàng)建了一個(gè)新樣式。它顯示具有灰色背景,白色文本和一些填充的鏈接。
您可以在整個(gè)HTML文檔中使用style
元素,并且單個(gè)文檔可以包含多個(gè)樣式元素。
type
style
元素中的type
屬性可以告訴瀏覽器你要定義什么樣的樣式;但是,瀏覽器支持的唯一的樣式機(jī)制是CSS,所以值的此屬性將始終為text/css。
style Media
style
元素中的media
屬性允許您指定應(yīng)將樣式應(yīng)用于文檔的時(shí)間。
以下代碼提供了如何使用此屬性的示例。
<!DOCTYPE HTML>
<html>
<head>
<style media="screen" type="text/css">
a {background-color: grey;color: white;padding: 0.5em;
}
</style>
<style media="print">
a{color:Red;font-weight:bold;font-style:italic
}
</style>
</head>
<body>
<p>This is a test.</p>
<a >Visit www.w3cschool.cn</a>
</body>
</html>
上面的代碼定義了兩個(gè)具有不同媒體值的style
元素。
當(dāng)HTML在屏幕上顯示時(shí),瀏覽器將應(yīng)用第一個(gè)樣式,和打印頁(yè)面時(shí)的第二種樣式。
條件
您可以為樣式創(chuàng)建非常具體的條件。
首先,您可以指定設(shè)備??赡艿闹盗性谙卤碇?。
設(shè)備 | 描述 |
---|---|
all | 將此樣式應(yīng)用于任何設(shè)備(這是默認(rèn)設(shè)置)。 |
aural | 將此樣式應(yīng)用于語(yǔ)音合成器。 |
braille | 將此樣式應(yīng)用于盲文設(shè)備。 |
handheld | 將此樣式應(yīng)用于手持設(shè)備。 |
projection | 將此樣式應(yīng)用于投影機(jī)。 |
在打印預(yù)覽和打印頁(yè)面時(shí)應(yīng)用此樣式。 | |
screen | 當(dāng)內(nèi)容顯示在計(jì)算機(jī)屏幕上時(shí)應(yīng)用此樣式。 |
tty | 將此樣式應(yīng)用于固定寬度的設(shè)備,例如電傳。 |
tv | 將此樣式應(yīng)用于電視。 |
特征
使用媒體功能可以使您更具體。
以下代碼為style
元素添加了特殊性。
<!DOCTYPE HTML>
<html>
<head>
<style media="screen AND (max-width:500px)" type="text/css">
a {background-color: grey;color: white;padding: 0.5em;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {color:Red;font-style:italic;
}
</style>
</head>
<body>
<p>This is a test.</p>
<a >Visit www.w3cschool.cn</a>
</body>
</html>
上面的代碼使用width
功能來(lái)區(qū)分兩種樣式。第一個(gè)將在瀏覽器窗口小于500像素時(shí)使用,和第二個(gè)窗口寬度大于500像素。
您可以使用AND
將設(shè)備與功能組合。
除了AND
之外,還可以使用NOT
或逗號(hào)(,)表示OR。這允許您創(chuàng)建復(fù)雜和相當(dāng)具體的條件,以應(yīng)用樣式。
可用功能及其修飾符列在下表中。
除非另有說(shuō)明,否則可以使用min-
或max-
修改這些功能,以創(chuàng)建閾值而不是具體值。
width
指定瀏覽器窗口的寬度。
單位表示為像素的px。
例如:width:200pxheight
指定瀏覽器窗口的高度。
單位表示為像素的px。
例如:height:200pxdevice-width
指定整個(gè)設(shè)備的寬度,而不僅僅是瀏覽器窗口。
單位表示為像素的px。
例如:min-device-width:200pxdevice-height
指定整個(gè)設(shè)備的高度,而不僅僅是瀏覽器窗口。
單位表示為像素的px。
例如:min-device-height:200pxresolution
指定設(shè)備的像素密度。
單位是dpi(每英寸點(diǎn)數(shù))或dpcm(每厘米點(diǎn)數(shù))。
例如:max-resolution:600dpiorientation
指定設(shè)備的方向。
支持的值為縱向和橫向。
此功能沒(méi)有修飾符。
例如:orientation:portraitaspect-ratio
指定瀏覽器窗口設(shè)備的像素比率。
值表示為高度像素?cái)?shù)上的寬度像素?cái)?shù)。
例如:aspect-ratio:16/9device-aspect-ratio
指定瀏覽器窗口或整個(gè)設(shè)備的像素比率。
值表示為高度像素?cái)?shù)上的寬度像素?cái)?shù)。
例如:min-aspect-ratio:16/9color monochrome
指定彩色或單色設(shè)備每像素的位數(shù)。
例如:min-monochrome:2color-index
指定顯示可以顯示的顏色數(shù)。
max-color-index:256scan
指定電視的掃描模式。支持的值是漸進(jìn)和交錯(cuò)。
此功能沒(méi)有修飾符。
例如:scan:interlacegrid
指定設(shè)備的類型。網(wǎng)格設(shè)備使用固定網(wǎng)格顯示內(nèi)容;例如,基于字符的終端和單行尋呼機(jī)顯示器。
支持的值為0和1,其中1是網(wǎng)格設(shè)備。此功能沒(méi)有修飾符。
例如:grid:0