免費(fèi)AI編程助手
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 href="http://www.o2fo.com">Visit www.o2fo.com</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 href="http://www.o2fo.com">Visit www.o2fo.com</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 href="http://www.o2fo.com">Visit www.o2fo.com</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è)備的類(lèi)型。網(wǎng)格設(shè)備使用固定網(wǎng)格顯示內(nèi)容;例如，基于字符的終端和單行尋呼機(jī)顯示器。
支持的值為0和1，其中1是網(wǎng)格設(shè)備。此功能沒(méi)有修飾符。
例如:grid:0
更多建議：