CSS(Cascading Style Sheets,层叠样式表)指的是一系列的 CSS 样式。样式定义了 HTML 元素的显示规则(如 字体、颜色、尺寸等)。
CSS 的最新标准为 CSS 2.1,CSS3 标准还在制定和发展中。
早期的 HTML 中,仅有 <h*>
<p>
等基本的元素,它们不仅描述了页面的内容,还决定了内容的外观表现。开发人员开始不断地向 HTML 中添加新的标签(如 <b>
<center>
等),用来实现更丰富的外观表现。这些新的标签带来了更丰富的样式,却使网页变得杂乱和臃肿,难以修改和维护。
为了解决 HTML 内容和表现关联较强的问题(耦合),开发人员将 HTML 内容的表现部分独立出来,以样式表的形式来定义 HTML 内容的表现。
在网页中使用样式,有三种方法:
为元素定义 style
属性,即可使用内联样式:
<p style="color:red;">段落的文本显示为红色</p>
内联样式只对当前的元素有效。
在 <head>
元素内定义 <style>
标签,并在其中添加样式规则:
<style>
p{
color:red;
} // 当前页面中的所有段落中的文本均显示为红色
</style>
在内部样式中,可以为当前页面中的任意元素定义样式规则。
外部样式的规则记录在一个 .css
文件中,并通过 <head>
元素中的 <link>
元素引入到网页中:
<link rel="stylesheet" href="main.css" />
在外部样式中,可以为所有引用该样式文件的页面中的任意元素定义样式规则。
注意:
建议所有的样式规则都写在外部样式表中,这种方式有许多益处:
- 所有样式都在独立的文件中,方便修改和查找
- 外部样式表可以被多个 HTML 文档引用,其中的样式可以在多个页面共享
- 在 HTML 中可以简单地切换外部样式文件(网站改版或换肤功能)
HTML 元素同时被多组 CSS 指定了样式,称为 层叠 。
// style.css
p {
color: red;
}
// index.html
...
<link rel="stylesheet" href="style.css" />
<style>
p {
color: yellow;
}
</style>
...
<p style="color: blue;">some text</p>
这段代码中的 <p>
元素同时受到三组颜色属性的控制,它的文本会是什么颜色呢?
在多组样式同时作用于一个元素时,会依据 优先权 来选择应用哪一个样式的规则。
网页中同时存在的样式可能有三类,共 5 组:
- 浏览器默认样式
- 网页定义的样式(包括 内联样式、内部样式和外部样式)
- 用户自定义样式(通过 custom.css 或通过浏览器插件设置的样式)
参考:user stylesheet
优先权从高到低依次为:
- 用户自定义样式
- 内联样式
- 内部样式
- 外部样式
- 浏览器默认样式
附加规则:
- 同一个
style
属性中,同一个内部或外部样式中的相同或不同样式组中,后定义的样式规则优先权高 - 如果页面通过
<link>
元素引用了多个外部样式文件,最后引用的样式文件优先权高 - 内部样式和外部样式的位置?
- @import 引入的样式?
继承 是来自面向对象的概念,CSS 中的继承有如下特点:
- 外部元素(父元素,祖先元素)中定义的样式规则会同时应用于内部元素(子元素,后代元素)
- 子元素中定义的样式规则会取代父元素中定义的同一规则
CSS 规则 的语法如下:
selector {
declaration1;
declaration2;
...
declarationN;
}
上面的代码称为一条 CSS 规则。每个规则分为两个部分:
- 选择器
选择器通过一系列的规则,指定了应用当前样式规则的目标元素。 - 声明列表
列表中包含了一系列的样式声明。样式声明列表需要包含在{}
中。
样式声明 由属性和值两部分组成:
property: value;
- 属性名和属性值通常为小写字母;
- 属性名通常由小写字母组成,也可以包含
-
; - 属性值可以为数字、小写字母、字符串或其他形式;
- 每条样式声明都必须以
;
结尾。
CSS 注释 的语法如下:
/* CSS 单行注释 */
注释可以是单行的,也可以是多行的。
/*
* CSS
* 多行注释
*/
参考:selectors
参考:properties
参考:declaration