CSS梳理

CSS
    什么是CSS
        css就是给HTML标签及内容设置样式的。

    CSS 语法：
        1，属性名：属性；属性名：属性；
        2，选择器{
            属性名：属性；
            属性名：属性；
        }

    CSS 特点：
        1，继承性：祖先元素的样式后代是可以继承的。
        2，层叠性：对一个元素有多中设置样式的方法。
        3，优先级：设置方法有优先级之分。

    CSS 引入方式
        1，行内样式
            ·直接在便签属性栏添加style属性，然后添加CSS样式。
        2，内部样式
            ·在head标签中添加style标签，然后通过选择器的方式添加CSS样式更改标签属性。
        3，外部样式
            ·将CSS样式写在外部的后缀为.css文件中，然后在head标签中使用link标签进行引入。

    三种引入方式的优先级：
        行内样式优先级最高。
        内部和外部样式谁在后面谁优先级高。

    link标签：
       1，引入css样式 link rel="stylesheet" href="css文件路径"
       2,引入图标     link rel="icon" href="图片路径"

    基础选择器：
        选择器的作用：通过选择器选中我们想要设置样式的标签，从而进行标签样式的修改。

        1，元素选择器（标签选择器）
        元素{
            属性名：属性值；
            属性名：属性值；
        }
            直接使用标签名作为选择器。
        2，类选择器
        .类名{
                    属性名：属性值；
                    属性名：属性值；
                }
            通过给标签设置class属性值，通过class属性值内容作为选择器选中元素。
            class属性值特点：
                ·可以重复使用。
                ·一个标签可以有多个class属性值，用空格分开。
                ·区分大小写。
                ·每个标签都可以设置class值。

        3，id选择器
        #id值{
                    属性名：属性值；
                    属性名：属性值；
                }
            通过 id 值取选中一个元素。元素的 id 值是不能重复的。
            id属性特点：
                ·唯一，不能重复使用。

        4，并集选择器：
        选择器1,选择器2,...,选择器n {
           属性:属性值;
           ...
        }
            一次性可以选中多个选择器选中的元素。

        选择器的优先级：
        * id 选择器 > 类选择器 > 元素选择器 *

    关系选择器：
        1，子元素选择器    父元素>子元素{}
        2，后代元素选择器   父元素 后代元素{}
        3，相邻兄弟选择器   父元素+相邻兄弟元素{}

    float浮动：
        可以使用float完成页面布局，通过float可以把块级元素显示在一行。可取值:
        - left: 左浮动
        - right: 右浮动
        - none: 不浮动

    盒子模型：
        组成：元素（标签），边框，内边距，外边距。

        边框：
            1，边框宽度：
            border-width:数值；表示4个边框的宽度都是这个值。
            2，边框样式：
            border-style:数值；表示4个边框的宽度都是这个值。
            样式属性值有：
                * solid 实线
                * dashed 虚线
                * dotted 点线
                * double 双实线
                * none：没有
            3，边框颜色：
            border-color:数值；表示4个边框的颜色都是这个值。
            4，边框圆角弧度：
            border-radius：数值; 左上右上右下左下

        边框的缩写：
            4个方向的边框如果都一样的话可以将边框简写为：border: width style color;
            三个属性不分先后顺序。

        内边距：
            padding-***
            top:上；right：右； bottom：下； left：左
            * padding：value; 4个方向的内边距都一样
            * padding：value1 value2; 上下 左右
            * padding：value1 value2 value3; 上 左右 下
            * padding：value1 value2 value3 value4; 上 右 下 左

        外边距：
            margin
            方法同内边距。

            * margin: 0 auto;   可以实现水平居中。

        CSS中display属性作用：

            1. 显示和隐藏元素。 noto
            2. 将内联元素变为块级元素。 block
               - 内联元素为特殊的行级元素，不可以设置高和宽的元素称为内联元素。
            3. 将块级元素变为内联元素。 inline
            4. 将块级元素或内联元素变为内联块元素，可以同行显示并可设置宽高。  inline-block
               - 内联元素不可以设置上外边距，内联元素变为内联块元素可以设置上外边距。

        字体属性：
            1，color:设置字体颜色。
            2，font-size:设置字体大小
            3，font-weight:字体加粗
            4，font-style:设置字体样式。
                normal 默认值。浏览器显示一个标准的字体样式。
                italic 浏览器会显示一个斜体的字体样式。

        文本属性：
            text-align:设置文本水平方式。
                 - eft：左对齐
                 * center：居中对齐
                 * right：右对齐
            text-decoration:文本修饰，装饰。
                none:默认值，普通文本。
                underline:给文本加下划线。
                overline:给文本加上划线。
                line-through:给文本加删除线。
            重要用法：
                /* 去掉超链接下划线 */
                a{
                    text-decoration:none;
                }

        伪类：
            CSS伪类是当某种情况下改变样式，不在是伪类状态后，恢复样式。

                1，鼠标悬停
                    鼠标悬停后，改变元素样式。
                    选择器:hover{
                        属性名：属性；
                        ...
                    }

                2，获得焦点：
                    选择器:focus{
                        样式
                    }

                outline: none;
                /* 轮廓存在时会导致边框样式不显示，设置为none表示去掉轮廓 */

            - 为父标签添加伪类可以设置子标签的样式。
            例如：
            div:hover>a{
                样式
            }
            - 没有任何父子关系的标签不可以控制样式。

        定位：
            position:static;静态定位（默认值）

            position:absolute;绝对定位

                进行绝对定位的元素会让出原来的位置。

                1，如果祖先元素是没有定位(默认定位)，会以body为参照进行定位。
                2，如果祖先元素有定位（可以是相对定位， 绝对定位， 固定定位），会以最近的祖先元素为参照进行定位。
                3，具有定位的元素重叠后可以控制显示顺序
                  可以通过z-index:无单位整数;
                  来设置元素的层叠顺序。
                  数字越大显示时越在上面。
                  只要数字大就显示在上面，大多少都无所谓。

            position:relative;相对定位

                进行相对定位的元素不会让出位置。
                以元素（标签）原来位置为参照进行位移。

        背景属性：
            * background-color：背景颜色

            * background-image：背景图片
                url:图片地址


            * background-repeat：背景图片平铺
                * repeat   背景图像将向垂直和水平方向重复。默认值。
                * repeat-x 只有水平位置会重复背景图像。
                * repeat-y 只有垂直位置会重复背景图像。
                * no-repeat    背景图像不会重复。

            * background-size：背景图片大小
                width:宽度
                hight:高度

            * background-attachment：背景图片是否随着滚动条而滚动
                * scroll   背景图片随着页面的滚动而滚动，这是默认的。
                * fixed    背景图片不会随着页面的滚动而滚动。