CSS

1.层叠样式表(Cascading Style Sheets)
2.css可以用来为网页创建样式表，通过样式表可以对网页进行装饰
3.层叠，层次高的将会覆盖层次低的

基本语法

由一个一个的样式构出，一个样式又由选择器和声明块构出
语法：选择器{样式名:样式值; 样式名:样式值;}
p{color:red;font-size:20px;}

三个样式

1、行内样式: 图片.png

可以直接将样式写到标签内部的属性中，这种样式不用填写选择器，直接编写声明。
这种方式编写简单，定位准确。但是由于直接将css代码写到了html标签的内部，导致结构与表现耦合，同时导致样式不能够复用，不建议使用

2、内部样式:

<style>
          p{color:red;font-size:20px;}
</style>

可以直接将样式写到<style>标签中。

这样使css独立于html代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一中方式。

但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用。

3、外部样式表：(自结束标签)

<link rel="stylesheet" type="text/css"
href="style.css"

可以将所有的样式保存到一个外部的css文件中，然后通过<link>标签将样式表引入到文件中。

这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载文件时可以使用缓存，这是我们开发中使用的最多的方式。

选择器：

会告诉浏览器网页上的哪些元素需要设置什么样的样式。

1、元素选择器
作用：可以根据标签的名字来从页面中选取指定的元素
语法：标签名{}
比如：p则会选中页面中的所有p标签

2、类选择器
作用：可以根据元素的class属性值选择元素
语法：.className{}
比如：.hello会选中页面所有class属性为hello的元素

3、ID选择器
作用：可以根据元素的id属性选取元素
语法：#id{}
比如：#box会选中页面中id属性值为box的元素，和class属性不同，id属性是不能重复的。

4、复合选择器(交集选择器)
作用：可以同时使用多个选择器，同时满足多个选择器的元素
语法：选择器1选择器2{}
比如：div.box1会选中页面中具有box1这个class
的div元素。

5、群组选择器(并集选择器)
作用：可以使用多个选择器，多个选择器将被同时应用指定的样式
语法：选择器1，选择器2，选择器3{}
比如：p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

6、通用选择器
作用：可以同时选中页面中的所有元素
语法：*{}

QQ图片20181116164144.png

7、后代选择器
作用：可以根据标签的关系，为处在元素内部的代元素设置样式
语法：祖先元素 后代元素 后代元素{}
比如：p strong 会选中页面中所有的p元素内的strong元素。