级联样式表概述
使用级联样式表 (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">