css复杂选择器、权重计算问题、css基础属性

初学入门，可能有些地方会理解有误，恳请批评指正~

1. css的注释：/*   */。（只有一种注释方式）

2. 父子选择器/派生选择器（针对组件的嵌套）：形式为"父 子{css代码}"，其中css代码修饰的是子。"父"和"子"可以用任何选择器的表示方式，且"父"和"子"可以不是直接父子关系。

3. 直接子元素选择器：形式为"父 > 子{css代码}"，此时的父子为直接父子关系。

4. 浏览器底层遍历父子选择器时是按照“自右向左”的顺序。因为这样遍历步数少，速度快。

5. 并列选择器：有多个限制条件。两个限制条件连着写，没有空格。eg: div.demo{css代码}，表示选择标签为div，并且class属性为demo的组件。

6. 在css文件中，只要写在同一行的选择器，就把所有的权重值相加。若两行的权重相同，则显示后面一行的样式，因为后面的会把前面的覆盖。（在计算机中，Infinity+1>Infinity）

7. 分组选择器：在css中，分组选择器中的组件共用一个代码块儿。形式为"组件1，组件2，……，组件n{css代码}"。

8. css代码由属性构成，形式为"属性名：属性值；"。

    （1）font-size：字体大小，默认的浏览器字体大小为16px。（设置的是字体的高）

    （2）font-weight：加粗，默认为bold。（lighter;normal;bold;bolder或者100,200,300，……，900）

    （3）font-style：italic（斜体）

    （4）font-family：字体，一般设置成arial（互联网通用字体）

    （5）color：设置字体颜色，方式有以下三种：

            <1>纯英文单词

            <2>颜色代码（开发的时候用）：每两位代表一个颜色，例如"#ff0000"，十六进制。如果颜色代码每两位都相同，可以简写成3位，不能是四位。

                        r            g            b

                    00-ff        00-ff        00-ff

            <3>颜色函数：rgb（0-255,0-255,0-255），十进制。

    （6）boder：给容器加外边框，复合属性：

            <1>第一个值：boder的粗细，boder-width

            <2>第二个值：boder的展示形式（实线，虚线，条状虚线等），boder-style

            <3>第三个值：颜色，boder-color。（Transparent透明色）

            <4>boder-left：表示boder左边的线，同样可以设置复合属性

    （7）text-align：对其方式。（left,center,right）

    （8）line-height：文本行高，单位：em。（行间距）

            <1>单行文本垂直居中：令文本高度等于容器高度。line-height=height

            <2>例如：line-height:1.2em

    （9）text-indent：文本缩进，单位：em，1em表示缩进一格。

    （10）单位：绝对单位和相对单位。

            <1>绝对单位：确定不变的，例如cm,m。

            <2>相对单位：例如像素px。1em=1*font-size

    （11）text-decoration：文本装饰。

            <1>line-through属性值表示中划线；

            <2>none属性值可以去掉<del></del>组件中的中划线；

            <3>underline属性值表示下划线；

            <4>overline属性值表示上划线。

    （12）cursor：光标。有很多属性值。

            <1>pointer属性值：鼠标放到该区域时变成“小手”样式；

            <2>help属性值：鼠标放到该区域时变成“问号”样式；

9. 伪类选择器：在选择器后面+":hover"，hover只是其中一种。表示当鼠标位于选择的组件时，显示css样式。比如：a:hover{}。

2018-10-19（渡一教育“web前端开发HTML+CSS精英班”笔记）

内容开始增多，需要记得东西也变多，要坚持啊&-&