CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
一、CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
1 | /*这是个注释*/ |
二、css三大特性
1、层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
2、继承性
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
子元素可以继承父元素的样式：
（text-，font-，line-这些元素开头的可以继承，以及color属性）
继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞
行高的继承性：
1 | body { |
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高为 1.5
- 此时子元素的行高是：当前子元素的文字大小 * 1.5
- body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
3、优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器优先级计算表格：
优先级注意点:
-
权重是有4组数字组成,但是不会有进位。
-
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
-
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
-
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
-
继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。
a链接浏览器默认制定了一个样式：蓝色下划线 a {color:blue;}因此需要手动指定样式
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
权重虽然可以叠加，但是不存在进位
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
案例1：继承权重为0
案例2：权重叠加
三、CSS 三种样式表
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
如何插入样式表？
插入样式表的方法有三种:
-
外部样式表(External style sheet)
-
内部样式表(Internal style sheet)
-
内联样式(Inline style)
-
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
1
2
3
4<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
/*href后面跟css文件路径*/
</head> -
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<style>标签在文档头部定义内部样式表，就像这样:1
2
3
4
5
6
7<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head> -
内联样式（行内样式）
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
1
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
