CSS 参考知识点
概述
CSS（Cascading Style Sheets，层叠样式表）指的是一系列的 CSS 样式。样式定义了 HTML 元素的显示规则（如 字体、颜色、尺寸等）。
CSS 的最新标准为 CSS 2.1，CSS3 标准还在制定和发展中。
内容与表现
早期的 HTML 中，仅有 <h*> <p> 等基本的元素，它们不仅描述了页面的内容，还决定了内容的外观表现。开发人员开始不断地向 HTML 中添加新的标签（如 <b> <center> 等），用来实现更丰富的外观表现。这些新的标签带来了更丰富的样式，却使网页变得杂乱和臃肿，难以修改和维护。
为了解决 HTML 内容和表现关联较强的问题（耦合），开发人员将 HTML 内容的表现部分独立出来，以样式表的形式来定义 HTML 内容的表现。
使用样式
在网页中使用样式，有三种方法：
1.内联样式
为元素定义 style 属性，即可使用内联样式：
<p>段落的文本显示为红色</p>
内联样式只对当前的元素有效。
2.内部样式
在 <head> 元素内定义 <style> 标签，并在其中添加样式规则：
<style>
p{
color:red;
} // 当前页面中的所有段落中的文本均显示为红色
</style>
在内部样式中，可以为当前页面中的任意元素定义样式规则。
3.外部样式
外部样式的规则记录在一个 .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>some text</p>
这段代码中的 <p> 元素同时受到三组颜色属性的控制，它的文本会是什么颜色呢？
在多组样式同时作用于一个元素时，会依据 优先权 来选择应用哪一个样式的规则。
网页中同时存在的样式可能有三类，共 5 组：
- 浏览器默认样式
- 网页定义的样式（包括 内联样式、内部样式和外部样式）
- 用户自定义样式（通过 custom.css 或通过浏览器插件设置的样式）
参考：user stylesheet
优先权从高到低依次为：
- 用户自定义样式
- 内联样式
- 内部样式
- 外部样式
- 浏览器默认样式
附加规则：
- 同一个
style属性中，同一个内部或外部样式中的相同或不同样式组中，后定义的样式规则优先权高 - 如果页面通过
<link>元素引用了多个外部样式文件，最后引用的样式文件优先权高 - 内部样式和外部样式的位置？
- @import 引入的样式？
继承 是来自面向对象的概念，CSS 中的继承有如下特点：
- 外部元素（父元素，祖先元素）中定义的样式规则会同时应用于内部元素（子元素，后代元素）
- 子元素中定义的样式规则会取代父元素中定义的同一规则
语法规则
CSS 规则 的语法如下：
selector{
declaration1;
declaration2;
...
declarationN;
}
上面的代码称为一条 CSS 规则。每个规则分为两个部分：
- 选择器
选择器通过一系列的规则，指定了应用当前样式规则的目标元素。 - 声明列表
列表中包含了一系列的样式声明。样式声明列表需要包含在{}中。
样式声明 由属性和值两部分组成：
property:value;
属性名和属性值通常为小写字母，每条样式声明都必须以 ; 结尾。
CSS 注释 的语法如下：
/* CSS 单行注释 */
注释可以是单行的，也可以是多行的。
/*
* CSS
* 多行注释
*/
颜色和单位
参考：css_color css_units
选择器
参考：css_selectors
样式属性
参考：css_properties
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论