层叠样式表 — 也就是CSS — 是在html之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如CSS可以用来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
CSS的职责为定义页面元素的样式，包括：
-设置字体和颜色
-设置位置和大小
-添加动画效果
如何在页面中使用CSS：
1.外部样式表
书写方式：在html文件外新建一个.css文件，在css文件里通过选择器选中对应的html结构，然后在花括号里面书写css样式
最后，在head标签内写一个link标签将对应的css文件引入到html文件内
因为要保证CSS样式和html内容的分离，因此该编写方法最为推荐
e.g.
<html>
<head>
<link rel="stylesheet" href="./书写样式.css">
</head>
<body>
<p>HelloWorld!</p>
<p>Welcome</p>
<p>to my webpage</p>
</body>
</html>
p{
color:black;
font-size: 32px;
background-color: yellow;
}
效果
2.内部样式表
书写方式：head标签内部，写一个style标签，通过选择器选中对应的html结构，在花括号里面书写css样式
可以写多组样式，样式之间用；隔开,最后一个样式后可以不加分隔号，但一般都加上
缺点：复用率不高，当css比较多的时候，不推荐使用
e.g.
<html>
<head>
<style>
p{
color:black;
font-size: 32px;
background-color: yellow;
}
</style>
</head>
<body>
<p>HelloWorld!</p>
<p>Welcome</p>
<p>to my webpage</p>
</body>
</html>
效果
可看出效果与外部样式表相同，然而style与body都在同一个html当中
3.内联样式/行内样式：
书写方式： style标签，CSS样式写在style属性值里面
可以写多个样式，只要用分隔号；隔开即可
优点：有针对性
缺点：1、结构和表现耦合 2、修改起来不方便
e.g.
<html>
<head>
<style>
div{
color:black;
font-size: 32px;
background-color: yellow;
}
</style>
</head>
<body>
<div>HelloWorld</div>
<div style="color:yellow;font-size:32px;background-color:green">welcome</div>
<div style="color:yellow;font-size:32px;background-color:blue">to my webpage</div>
</body>
</html>
效果
选择器：用于找出页面中的元素，以便给他们设置样式，例如上述例子中<style>里面的p{和div{
使用多种方式选择元素
l 按照标签名、类名或id
l 按照属性
l 按照DOM树中的位置
通配选择器:用法为*{ }，可以给所有的属性设置样式
标签选择器:用标签设置样式
id选择器:以id的方式在页面中设置样式,id在页面中需要是唯一的，需要在style中设置#ID{}，然后在body中设置id="ID"
类选择器：对于同一类型的标签，可以批量使用类选择器，使用方法和id类似，在style中的设置为.CLASS{}，然后在body中设置class="CLASS"
属性选择器：根据元素的属性值选择元素，如目标标签为input类型时,可以在style中对其[enabled]及[disabled]状态的样式进行编辑
伪类
l 不基于标签和属性定位元素
l 伪类类型：
状态伪类：元素在不同的状态时的样式，e.g.button常驻状态，被触碰时，被按下时，被释放时
结构性伪类：在一个结构体中对不同位置的元素设置样式
组合类型：
article{}->article底下的标签都会被选中
article>p{}->article底下直接的，所有含p标签的元素被选中
h1+p{}->h1紧跟的p标签的元素会被选中
层叠：
CSS 语言有一些规则来控制在发生冲突的情况下哪个选择器更强大。这些规则被称为层叠（cascade）和优先级（specificity)。如在下面的代码块中，我们为 p 选择器定义了两条规则，但段落文本将是蓝色的。这是因为将段落文本设置为蓝色的声明在样式表的后面出现。后面的样式会替换样式表中较早出现的冲突样式。这就是层叠规则。
p {
color: red;
}
p {
color: blue;
}//覆盖上一条样式
简写属性
一些属性，如 font、background、padding、border 和 margin 等属性称为简写属性。它们允许在一行中设置多个属性值，从而节省时间并使代码更整洁。
下面将会列出两个实现盒子内边距效果的代码块
padding: 10px 15px 15px 5px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
可以看出在代码块a中只用了一行代码，而代码b中却使用了四行，但是它们的效果却是相等的，这有助于优化代码，使内容变得更加简洁。
