一、选择器

层级选择器

书写规则：用空格隔开每一层选择器。

优势：只要选择器嵌套关系与html结构的嵌套关系正确，无论有多少层嵌套，都可以被选中。

尽可能的补全祖先选择器，来时范围精确。

交集选择器

书写规则：每选择器之间连续书写，没有任何空格。

同时标签名只可以出现一次，且必须出现在最前面

并集选择器

书写规则：每个选择器之间通过逗号隔开，且每组选择器在一行。

只要看到逗号，一定是并集选择器。

二.css代码规范

<!-- 1.四个空格为一个缩进 -->

<!-- 2.选择器与大括号之间有一个空格 -->

<!-- 3.属性名与冒号之间没有空格,冒号与之后的属性值有空格 -->

<!-- 4.一个属性独占一行，每个属性写完后面都要有分号 -->

<!-- 5.并集选择器，每组选择器独占一行 -->

<!-- 6.> + ~ 前后都有一个空格 -->

<!-- 7.属性值或者文本内容使用的引号选择双引号 -->

<!-- 8.属性值之中有逗号，逗号后面要有空格 -->

三.继承性

如果给父元素设置了一些样式，他的后代元素可以继承这些样式

只有文字属性可以被继承，盒子属性不能被继承

文字属性：color、font-系列、line-系列、text-系列。

盒子属性：background-系列、width、height、border-系列、浮动、定位等。

四.层叠性

         多组选择器的样式可以作用在同一个元素上。

         通过同样的选择器设置相同的样式，根据我们设置样式的距离，决定渲染的最终结果，后面的覆盖前面的。

         层叠性：针对同一个元素标签，当设置了不同的选择器时，权重高的层叠掉权重低的样式。 

五.权重

                注意：比较权重的时候，一定要让选择器作用到元素上。

       <!-- 比较权重 -->

1.都作用到了目标元素，权重不同，选择权重较大的

2.都作用到了目标元素，权重相同,根据有就近原则 

3.一个作用到了目标元素，一个没有作用到目标元素，用作用到目标元素的 

4.都没有作用到目标元素，但是作用了相同的父元素，比较权重，用权重大的

5.都没有作用到目标元素，但是作用了相同的父元素，权重相同，根据就近原则

6.都没有作用到目标元素，且作用不同父元素，考虑继承，根据就近原则 

7.并集选择器，拆开来看，一组一组的确认权重。

        <!-- 权重排序 -->

 !important>行内式>id>类|伪类|属性>标签|伪元素>通配符，继承等

 

        !important

    <!-- !important 提高优先级 -->

    <!-- 一次只可以影响一条样式 -->

    <!-- 只有样式可以用，选择器不能使用 -->

        颜色表示法

                英文法，rgb法 color：rgb(255，255，255);，十六进制法color：#ffffff；

六.文字和文本样式

        

<!-- 文字 -->

    <!-- 设置颜色 -->
    <!-- color -->

    <!-- font系列 -->

    <!-- 设置文字字号 -->
    <!-- font-size -->
    <!-- 可以直接使用英语单词但是单词一般很少使用  如 ：large，small，larger，medium，smaller
        一般直接使用数字设置字体的大小 单位（px em rem） -->
    <!-- em单位 -->
    <!-- em作为单位时在设置的文字字号时，em是相对于父元素的字号大小而言 -->
    <!--            在设置非文字的样式作为单位是，相对的自身的字号大小 -->
    <!-- rem单位 -->
    <!-- rem在作为单位是是相对于根元素 html的字号大小而言的 -->

    <!-- 设置文字的字体 -->
    <!-- font-farmily -->
    <!-- 一般会设置多个字体，为了防止有的电脑没有某种字体，导致无法显示 -->
    <!-- 多个字体设置时，使用逗号隔开，同时对英文字体的设置放在最前面 -->

    <!-- 设置文字的风格 -->
    <!-- font-style -->
    <!-- 属性值可以为 italic 倾斜  normal 正常 -->

    <!-- 设置字体的粗细 -->
    <!-- font-weight -->
    <!-- 属性值可以设置为100-900之间的整数，也可以设置为英文单词例如： -->
    <!-- bold 粗 bolder 更粗 normal 正常 lighter 细 -->

    <!-- 设置英文字符大小写 -->
    <!-- font-variant -->
    <!-- 属性值 small-caps  设置后英文字符就会变大写-->

    <!-- font设置可以直接完成 -->
    <!-- font是一个复合的属性,可以统一设置font属性  -->
    <!-- 顺序为:font-style   font-variant  font-weight font-size/line-height font-family -->
    <!--         字体样式    字母大小写(可选)     字体粗细     字体大小   行高        字体 -->
    <!-- 例 font: italic  normal 10px/30px 楷体,宋体-->
    <!-- 注意:字体大小与行高之间有一个斜杠来分开 -->

<!-- 设置文本 -->
    <!-- text系列 -->
    <!-- text-decoration  文本修饰-->
    <!-- text-decoration：none; 清除文本样式 -->
    <!-- text-decoration：underline; 设置下划线 -->
    <!-- text-decoration：overline; 设置上划线 -->

    <!-- text-indent 缩进 -->
    <!-- 一般使用em作为单位 -->
    <!-- em作文不修饰文字的单位是,会对于本本身字号来确定大小,因此不管字体怎么变,只要设置2em
        文本始终会缩进2字符 -->
    <!-- 也可以使用px作为单位 -->

    <!-- 设置文本对齐方式 -->
    <!-- text-align 设置文本对齐方式 -->
    <!-- text-align：left;  左对齐-->
    <!-- text-align：right; 右对齐-->
    <!-- text-align: center; 居中对齐-->
    <!-- text-align: justify; 左右对齐(分散对齐)-->

    <!-- 其他文本修饰 -->

    <!-- 设置垂直对齐方式 -->
    <!-- vertical-align -->
    <!-- 设置的是同一行内的元素的垂直对齐方式 -->
    <!-- 属性值 -->
    <!-- vertical-align: bottom; 在底部对齐 -->
    <!-- vertical-align: top; 在顶部对齐-->
    <!-- vertical-align: middle; 在中间对齐 -->
    <!-- 字间距 -->
    <!-- letter-sapcing：2px; -->
    <!-- 设置字间距,是对英文和汉字都有效果 -->

    <!-- 词间距 -->
    <!-- word-spacing：2px; -->
    <!-- 设置词间距，对于英文诱效果，但是当文字之间存在空格时，同样也会对文字起效果 -->

    <!-- 空白处理 -->
    <!-- white-space  指定行内的空白元素怎么处理-->
    <!-- white-space：normal； 默认值，会进行空白折叠，进行自动换行--> 
    <!-- white-space：nowrap； 空白折叠，不会自动换行-->
    <!-- white-space：pre；保留原格式，不会自动换行 -->
    <!-- white-space：pre-line； 空白折叠，自动换行-->
    <!-- white-space：pre-wrap； 空白不折叠，自动换行-->