CSS的知识点总结（一）

一、CSS是什么？

        1.全称：层叠样式表
        2.作用：（1）用来修饰文档的语言，可以将文档以最优雅的形式呈现给用户。
                      （2）为了把内容和样式进行分离，提高工作效率。
        3.发展：1996年12月第一份正式标准完成 CSS；1998年5月 CSS规范第二版 出版了；1999年开始修订，2001年完成了CSS工作草案。

        4.CSS工作原理：
                拿到HTML文件-解析HTML文件【加载CSS-解析CSS文件】 -转成DOM【将样式加到文档里】-展示给用户
        5.CSS的声明：
            （1） CSS核心功能：给特定的属性设置特定发值
            （2）CSS的属性的值：大小写敏感
                            属性名和属性值 通过':'(英文)分割
                            属性和属性之间 通过';'(英文)分割
                                background-color: black;
            （3）CSS的声明块:
                   【将多个CSS声明写在一起；声明和声明之间 通过‘;’分割】
                    使用'{}'将多个声明括起来，形成一个声明块。
                    {
                           background-color: black;
                           border:1px solid black;（如果下一行没有代码，可以不要;）
                     }    

二、CSS选择器：

        CSS声明块前面添加选择器，用来指定将这个声明块用在哪些元素上。
            div {
                    background-color: black;
                    border:1px solid black;（如果下一行没有代码，可以不要;但是最好写上）
             }

      1.标签选择器：又叫元素选择器。使用元素名可以直接选中相同的元素。
      2.类选择器： 以.开头，后面紧跟类名，不允许有空格，与元素的class属性值保持一致。一个元素可以有多个class值，每个值之间通过空格分开。
      3.ID选择器：以#开头,后面紧跟ID名，不允许有空格，与元素的ID属性值保持一致。在一个文档中ID值不能重复。所以一般选择唯一元素。
      4.普遍选择器：使用*来表示普遍选择器，表示选择所有元素。通常和其他选择器组合起来用。
      5.层次选择器：
                后代选择器：" "(空格)  eg:#app p包括子元素，也包括孙子元素，子子孙孙元素。
                子代选择器：">"  表示的是直接子元素。  eg:#app>p
                相邻同胞选择器：下一个兄弟元素  "+"  eg:.myP+*  选的是class为myP的元素的下一个兄弟元素。
                一般同胞选择器："~"(英文)  eg:.myP~*  选的是class为myP的元素的后面的所有兄弟元素。
      6.多选择器：多个选择器组合使用。用","分割  eg:div,p,ul,.myP,#app{   }
      7.嵌套选择器：用"."连接  eg:di.myDiv
      8.属性选择器：在"[]"里写  [title]{color:khak1;}
                            [title=div2]{ }
                            [title^=di]{ }【属性包含title，属性值以di开头】
                            [title$=Div]{ }【属性包含title，属性值以Div结尾的】
                            [title*=i]{ }【属性包含title，属性值有i的】【模糊逼迫】
                            [title~=div]{ }【属性包含title，属性值必须是这个值】
   

9.伪类选择器：
    （1）子代元素相关：
            #app>*:only-child:表示app下面的独生子
            以":"开头,用于其他选择器之后。指明元素在某种状态下才能选中。
            only-child：只能选中长子，也就是第一个元素。
            last-child:选中子元素的最后一个孩子。
            nth-child(1/2/3):表示选中第1/2/3....孩子。
            nth-last-child(1/2/3)：表示选中倒数第1/2/3....个孩子。
            first-of-type:如果子元素有多种类型的话，会选中子元素中的每种类型的第一个元素。
            last-of-type:如果子元素有多种类型的话，会选中子元素中的每种类型的最后个元素。
            nth-of-type(n):如果子元素有多种类型的话，会选中子元素中的每种类型的规定的第n个元素。
            nth-last-of-type(n):如果子元素有多种类型的话，会选中子元素中的每种类型的规定的倒数第n个元素。

        括号里也可以写(偶数：even)(基数：odd)

    <style>
        ul>li:first-child {
            background-color: cyan;
        }
        ul>li:last-child {
            background-color: darkblue;
        }
        ul>li:nth-child(2) {
            background-color: goldenrod;
        }
        ul>li:nth-last-child(2) {
            background-color: hotpink;
        }
        ul>li:nth-child(even){
            color:springgreen;
        }
        ul>li:nth-child(odd){
            color: tomato;
        }
        ul>li:nth-child(3n){
            text-align: center;
        }
    </style>

结果是：

           
    （2）元素状态相关的
             :hover    光标悬浮后改变样式       a:hover{ color: ;（鼠标悬停在字体上面会变色）cors}
             :link     a标签未被访问过的的状态  a:link{ color: ;（字的颜色）text-decoration:none;(下划线不显示)}
             :visited  a标签已被访问过的状态    a:visited{color: ;}（点击连接的字之后变色）
             :active   活动时的状态            a:action{color: ;font-size: px;(字体大小)}（当鼠标安在上面时会改变样式）
             :focus    聚焦时的状态
             :checked  按钮被选中时的状态
             :default  默认选中的状态
             :enabled  表单项可用时的状态
             :disabled 表单项禁用时的状态
             :valid    通过表单验证
             :invalid  不通过表单验证
             :required 必填项
             :optional 选填项
             :in-range     在范围内
             :out-of-range 不在范围内

 

10.伪元素选择器
       以"::"开头，用于选择指定的元素，用在其他选择器之后
       ::after       选中之后不存在的结点，然后结合content 添加内容  

                    h2::before{content: ;(在h2后添加) }
       ::before     选中之前不存在的结点，然后结合content 添加内容  

                    h2::before{content: ;(在h2前添加) }
       ::first-letter  改变p文本中的第一个字符 p::first-letter{ }
       ::first-line    改变p文本中的第一行字符
       ::selection   选中的文本会改变样式

三、CSS可读性  
        /* CSS注释*/  
       可以加换行，让代码更美观，可读性更高。
            【ctrl+f搜索注释】
        速记写法
           border
           padding:内边距（上下左右统一）
              padding-top
              padding-right
              padding-bottom
              padding-left
             可以直接写：
                   padding: 10px 20px 8px 10px;(顺序：上右下左)
            margin:外边距  
                    margin:10px 20px 8px 10px;(顺序：上右下左)

四、CSS的应用

     1.HTML文档如何使用CSS
      （1）外部样式表：最常用的
        新建.css后缀的文件-然后在html 内通过link引入
        <link rel="stylesheet" href="样式.css">
        或者在style标签内通过@import "xxx.css";
         <style>
            @import "样式.css";
        </style>
       （2）内部样式表
         将CSS写到HTML的style标签中，可以在不修改CSS文件的前提下修改样式，比较方便，但是不建议使用。
        <style>
            p{
                color: chocolate;
            }
        </style>
        （3）行类样式表
          写到CSS写到元素的style属性中 只能作用于一个元素中，但是不建议这样使用。【该用还得用】
          style="color:颜色"   

   2.CSS优先级  
        采取就近原则
        行类样式表>内部样式表>外部样式表
        特性值（只是相对概念）
            style 行内样式表                 1000
            ID选择器                         100
            类选择器、属性选择器、伪类选择器   10
            元素选择器和伪元素选择器           1
            important:最重要的   eg:color:   !important;
  3.样式继承
        有些规则会被子元素默认继承，有些不会。
        会被继承的：font 文本 列表 cursor（鼠标类型）color等
            如果不想被继承，则写代码有：color:initial;
        不会被继承的：margin padding border等
            如果想被继承，则写代码有：border:inherit;
        跟随默认情况：
            color:unset;

五、CSS中的一些单位值
    1.颜色：关键字
      （1）rgb()：三个参数，红绿蓝，每个值是0-255
      （2） rgba()：四个参数，红绿蓝和透明度，透明度为0-1
                十六进制#666：
                #0-F(六个十六进制数，每俩个代表一个通道，红绿蓝)
                #aaa=#aaaaaa（不能调透明度）
       （3） HSL：
                 第一个参数；取值0-360  0：红色  120：绿色  240：蓝色
                 第二个参数：饱和度 0-100%   0：灰色  100%：全彩
                 第三个参数：亮度   0-100%  0：黑色（暗）  100%：白色（亮）
        （4）HSLA：
                 第一个参数；取值0-360  0：红色  120：绿色  240：蓝色
                 第二个参数：饱和度 0-100%   0：灰色  100%：全彩
                 第三个参数：亮度   0-100%  0：黑色（暗）  100%：白色（亮）
                 第四个参数：透明度 0-100%
    2. 长度宽度大小：（按F12打开盒子模型）
      （1）百分比
               占父元素的百分比
               width:50%   
      （2）绝对值  
               px:叫像素 mm cm in(英寸)
      （3）相对值单位：
               em:1em和当前字体大小相同（一个M的宽度）  默认字体大小16px  1em=16px
                   字体不要用em    font-size=20px 那1em=20px
              rem:总是等于默认大小 16px
                   如果默认是16px 那1em=16px

六、CSS的文本样式
        color:字体颜色
        font-size:字体大小
        font-family：字体样式：宋体等  serif   sans-serif  monospace  cursive(楷书  英文比较草)   fantasy（英文比较明显  梦幻装饰）  （微软雅黑）
              字体站：一次多写几个字体形式，用'',隔开。

        font-style:开关斜体  italic（斜体） oblique（模拟斜体）  normal(默认)
        font-weight：加粗字体  取值：100-900  默认：400  
                bold=700（默认加粗700）  
                lighter(比父元素更细)   
                bolder(比父元素更粗)
        text-align：文字排列方式 left center right
        text-decoration:文本修饰（给文字加下划线）
               text-decoration-line(先写需要的文字修饰)

               text-decoration-style（其次在line的基础上写文字修饰的样式，就可以看见文字修饰了）
                text-decoration-color（对文字修饰进一步添加颜色）
        text-transform：文本变形  none   
                uppercase(将文本转换为大写)  
                lowercase(将文本转换为小写)   
                capitalize(将所有单词的首字母变为大写)   
                full-width(转换为类似于等意的字体)
        text-shadow：文本阴影
                font:font-style font-weight font-size/line-height font-family
                line-height:行高 实现文字的垂直方向的居中
                text-align:实现文字的水平方向的居中。
        vertical-align:元素内容、单元格元素的垂直方向 图片
        text-indent:2em  实现块元素首行文本内容缩进两个字符

七、列表样式：
    有序列表 ol li
    无序列表 ul li
    定义列表 dl dt dd
    列表的操作：导航栏 菜单栏 文字列表 卡片式布局
    以上有默认的属性type与margin padding
    (1)list-style-type:
    (2)list-style-position:
                outside
                inside
    (3)list-style-image:url()【下载好的图片】
    (4)visibility:hidden;（占据屏幕位置空间）
                hidden:隐藏   
                visible:显示
        相当于 opacity:0;（占据屏幕位置空间）【相当于透明度】
    (5)display:none;(隐藏)（不占据屏幕位置空间）
    (6)overflow:hidden;(对子元素要求：超出父元素范围，将会隐藏)（会出现溢出现象）
    (7)overflow的默认值是visible
                scroll:会被裁剪，但浏览器会以滚动条的方式查看器全部内容。
                auto:由浏览器决定  正常范围：正常展示
                          超出范围：以scroll形式展示。
    (8)display:显示行
        取值：默认：段落  margin-top margin-bottom
            span:无意义的行内元素  共享在一行中 默认没有任何效果
            inline：行内元素
            block：块级元素
            inline-block：行内块级元素  在同一行，但高度可以不同。