HTML如果说是前端网页中的骨架

那么CSS就是用来对骨架进行排版美化的、

CSS全称为 Cascading Style Sheets 层叠样式表

预备知识：

html中的所有元素都有两个通用的属性：id和class

id：唯一标识符，一个html组成元素中，id是不能重复的，通过id可以找到一个唯一的元素，id开头不可以为数字。

class：类别，一个元素可以属于多个类别

例子：

........

........

........

........

CSS基本规则

准备一些规则——选中一些元素

让选中的元素去应用刚刚准备好的规则

选择器（selector）：选中某些元素

属性值（attribute）：例子：color： red；其中color是属性：颜色，red是该属性的值：红色

例子：

p{

        color:red;

}

如上就是一个选择器，选中的为文档中所有的p标签，选中后应用的规则为将其颜色属性改为红色。

那么HTML中如何引入CSS规则：三种样式

1.外部样式：通过单标签引入    url可以进行必要的省略

2.内部样式：通过引入

1和2都一般放在下

3.内联样式：通过在要修改样式的标签上，指定sytle="属性"，不需要写选择器

展示一个例子：

html代码为

引入的css代码为

效果为

若三种引入发方式的规则冲突，以内联优先级最高，内部、外部样式后出现的覆盖先出现的

并且游览器只会执行一次命令，若冲突会自动过滤优先级低的。

css大部分规则都是写给该结点为根的所有根的子树上的（有特例）

例如

那么div以下所有的子树都遵守规则。

选择器（selector）规则

三种最基本的选择器：

1.直接写标签名跟大括号  类似p{.....}    选中所有p标签

2.id选择器，选中id为....的元素（存在的话）类似 #id号xxx{....}  选中id号xxx的元素

例子：

3.类选择器，选中该类的所有元素， 类似 . 类名xxx{....} 选中类名为xxx的所有元素

例子：

选中的为

选择器的优先级规则：选择越精确的，优先级越高 

即  内联样式 > id选择器 > 类选择 > 元素选择器  同样优先级情况下，谁出现在上面，谁被覆盖。

进一步的选择器规则：

1.多个选择器的并集

选择器1，选择器2，选择器3选择的元素若产生并集，那么其仍然适用上面的优先级规则。

若规则按s1s2s3顺序进行，则a2部分为s2规则，a2部分为S3规则。

2.子孙的选择

先通过选择器1找到一部分元素，在这部分元素的子孙中应用选择器2的规则。

左边分别为：找到h1后在h1中选择img标签、找到id为hello的元素再在其中找到所有img标签、找到属于java类中所有的元素，再在其所有的元素中找到img标签。

selector1 > selector2 意思为先根据选择器1找到一批元素，再根据其找到的元素中找到符合选择器2的。