级联样式表概述

使用级联样式表 (CSS) 可控制网页的外观。使用 CSS,可以精确定位网页上的元素,并且可以设置这些元素的外观。

CSS 相对于网页可以是外部、内部或嵌入式的,而一个网页也可以同时使用这些类型的 CSS 中的一种或多种。通常,这三种 CSS 中定义的样式所具有的优先级如下:嵌入式 CSS 中定义的样式优先级最高,内部 CSS 中定义的样式优先级次之,外部 CSS 中定义的样式优先级最低。

外部 CSS

当需要对网站中的部分或所有网页统一应用相同的样式时,可使用外部样式表。通过在一个或多个外部样式表中定义样式并将它们附加到网页中,可以确保整个网站具有统一的外观。如果您决定更改某个样式,只需要在外部 CSS 中进行一次更改,所做的更改会自动反映到引用该样式和 CSS 的所有网页中。

外部 CSS 包含在 .css 文件中,例如 global.css。外部 CSS 的语法与内部 CSS(请参阅本主题下一部分中的示例)相同,唯一的差别是不需要在外部 CSS 中定义的样式前后加上 <style> 标记。

内部 CSS

当只需要为当前网页定义样式或者需要替代附加到当前网页的外部 CSS 中定义的样式时,可使用内部 CSS(有时称为“内嵌 CSS”)。

内部 CSS 包含在网页的 <head> 标记中。

内部样式表示例

<style type="text/css">
.alert {
    font-weight: bold;
    color: #FF0000;
}
h1 {
    font-size: 16pt;
    font-family: Arial, Helvetica, sans-serif;
}
#headlines {
    border-color: #000000;
    border-width: thin;
    border-style: solid;
}
</style> 

级联 CSS

当需要向网页上的各个元素应用级联样式表属性,且不需要重复使用该样式时,可使用级联样式。级联样式在网页中的 HTML 元素的开始标记内定义。

级联样式示例

<p style="font-weight: bold; font-style: italic; color: #FF0000">

另请参见

概念

样式概述

创建级联样式表