閱讀(24k) 書簽贊(24) 我要糾錯

HTML 樣式

2018-06-16 16:01 更新

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.yjpub.cn">Visit  www.yjpub.cn</a>
</body>
</html>

上面的代碼為 a 元素創(chuàng)建了一個新樣式。它顯示具有灰色背景，白色文本和一些填充的鏈接。

您可以在整個HTML文檔中使用 style 元素，并且單個文檔可以包含多個樣式元素。

type

style 元素中的 type 屬性可以告訴瀏覽器你要定義什么樣的樣式；但是，瀏覽器支持的唯一的樣式機制是CSS，所以值的此屬性將始終為text/css。

style Media

style 元素中的 media 屬性允許您指定應將樣式應用于文檔的時間。

以下代碼提供了如何使用此屬性的示例。

<!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.yjpub.cn">Visit  www.yjpub.cn</a>
</body>
</html>

上面的代碼定義了兩個具有不同媒體值的 style 元素。

當HTML在屏幕上顯示時，瀏覽器將應用第一個樣式，和打印頁面時的第二種樣式。

條件

您可以為樣式創(chuàng)建非常具體的條件。

首先，您可以指定設備?？赡艿闹盗性谙卤碇?。

設備	描述
all	將此樣式應用于任何設備(這是默認設置)。
aural	將此樣式應用于語音合成器。
braille	將此樣式應用于盲文設備。
handheld	將此樣式應用于手持設備。
projection	將此樣式應用于投影機。
print	在打印預覽和打印頁面時應用此樣式。
screen	當內(nèi)容顯示在計算機屏幕上時應用此樣式。
tty	將此樣式應用于固定寬度的設備，例如電傳。
tv	將此樣式應用于電視。

特征

使用媒體功能可以使您更具體。

以下代碼為 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.yjpub.cn">Visit  www.yjpub.cn</a>
</body>
</html>

上面的代碼使用 width 功能來區(qū)分兩種樣式。第一個將在瀏覽器窗口小于500像素時使用，和第二個窗口寬度大于500像素。

您可以使用 AND 將設備與功能組合。

除了 AND 之外，還可以使用 NOT 或逗號(,)表示OR。這允許您創(chuàng)建復雜和相當具體的條件，以應用樣式。

可用功能及其修飾符列在下表中。

除非另有說明，否則可以使用 min- 或 max- 修改這些功能，以創(chuàng)建閾值而不是具體值。

width指定瀏覽器窗口的寬度。
單位表示為像素的px。
例如:width:200px
height指定瀏覽器窗口的高度。
單位表示為像素的px。
例如:height:200px
device-width 指定整個設備的寬度，而不僅僅是瀏覽器窗口。
單位表示為像素的px。
例如:min-device-width:200px
device-height指定整個設備的高度，而不僅僅是瀏覽器窗口。
單位表示為像素的px。
例如:min-device-height:200px
resolution指定設備的像素密度。
單位是dpi（每英寸點數(shù)）或dpcm（每厘米點數(shù)）。
例如:max-resolution:600dpi
orientation 指定設備的方向。
支持的值為縱向和橫向。
此功能沒有修飾符。
例如:orientation:portrait
aspect-ratio指定瀏覽器窗口設備的像素比率。
值表示為高度像素數(shù)上的寬度像素數(shù)。
例如:aspect-ratio:16/9
device-aspect-ratio 指定瀏覽器窗口或整個設備的像素比率。
值表示為高度像素數(shù)上的寬度像素數(shù)。
例如:min-aspect-ratio:16/9
color monochrome指定彩色或單色設備每像素的位數(shù)。
例如:min-monochrome:2
color-index指定顯示可以顯示的顏色數(shù)。
max-color-index:256
scan指定電視的掃描模式。支持的值是漸進和交錯。
此功能沒有修飾符。
例如:scan:interlace
grid指定設備的類型。網(wǎng)格設備使用固定網(wǎng)格顯示內(nèi)容;例如，基于字符的終端和單行尋呼機顯示器。
支持的值為0和1，其中1是網(wǎng)格設備。此功能沒有修飾符。
例如:grid:0