CSS入门必备知识1.0

一、CSS
   1、css是层叠样式表，是用来修饰文档的语言

   2、让文档以更优雅的形式呈现给用户。
   3、为了内容和样式进行分离，提高工作效率（外部样式）。
 

二、CSS工作原理
    HTML文件-解析HTML文件 - 转成DOM       -     展示给用户
                 ⬇️        ⬆️ 将样式加到文档里
              加载CSS   -  解析CSS文件

三、CSS声明
    1、CSS核心功能：给特定的属性设置特定的值
    2、CSS的属性和值 大小写敏感（和html标签区分）
    3、属性名和属性值 通过':'分割
               如： background-color: black
四、CSS声明块
    1、将多个CSS声明写在一起
    2、声明和声明之间 通过';'分割
    3、使用'{}'将多个声明括起来，形成一个声明块
            如：{
      background-color: black;
      border:1px solid black;
    }

五、CSS的应用
    HTML文档如何使用CSS
    1. 外部样式表
      新建  .css 后缀的文件，然后在html内head通过link引入
      <link rel="stylesheet" href="./style.css">
      或者在style 标签内通过@import "xxx.css" 引入
        <style>
          @import "style.css";
        </style>
    2. 内部样式表
        将CSS写到HTML的style标签中，可以在不修改CSS文件的前提下修改样式，比较方便，但是不建议这样使用，一般都是分离使用。
        <style>
          p {
            color: tomato;
          }
        </style>
    3. 行内样式表
        将CSS写到元素的style属性中 只能作用于一个元素 但是不建议这样使用
      <p style="color: chartreuse;">hello,world</p>

    注：优先级 行内样式表>内部样式表>外部样式表

 六 、CSS选择器
    CSS声明块前面添加选择器，用来指定将这个声明块用在哪些元素上

 1、标签选择器
      标签选择器又叫元素选择器，使用元素名可以直接选中相同的元素
  2、  类名选择器
      类选择器以.开头，后面紧跟类名 不允许有空格 与元素的class属性值保持一致 一个元素可以有多个class值 每个值之间通过空格分开
  3、  ID选择器
      id选择器以#开头，后面紧跟id名 不允许有空格 与元素的id属性值保持一致
      在一个文档中 id值不能重复 所以这个一般选择唯一元素
    
  4、  普遍选择器
      使用*来表示普遍选择器 表示选择所有元素 通常用在组合选择器中

5、层次选择器
     ①、 后代选择器
        #app p 包括子元素，也包括孙子元素，子子孙孙无穷～
      ②、子代选择器
        ">"    表示的是直接子元素
        #app>p
      ③、相邻同胞选择器 下一个兄弟元素
        "+"
        .myP+* 选的是class为myP的元素的下一个兄弟元素
     ④、 一般同胞选择器
        "~"
        .myP~*   选的是class为myP的元素的后面的所有兄弟元素
   ⑤、 多选择器
      多个选择器组合使用，用","分割
      ⑥、组合选择器
        div,p,li,.myDiv,#app {

        }
     ⑦、 嵌套选择器
        div.myDiv
    
    ⑧、属性选择器
 

      /* 属性选择器 */
      [title] {
        color: khaki;
      }
      // 属性包含title，属性值为val
      [title=val] {
      color: khaki;
      }
      // 属性包含title，属性值以val开头
      [title^=val] {
      color: khaki;
      }
      // 属性包含title，属性值以val结尾
      [title$=val] {
      color: khaki;
      }
      // 属性包含title，属性值包含val(模糊匹配 只要有这个字符串就行)
      [title*=val] {
      color: greenyellow;
      }
      // 属性包含title，属性值中有val(必须是目标字符串)
      [title~=val] {
      color: greenyellow;
      }
    *****^^^***div # .    
      [class=mydiv] {}
      <div class="mydiv di" id="one">1</div>

七、  伪类选择器
    1、  子代元素相关
        以:开头，用于其它选择器之后，指明元素在某种状态下才能被选中
        :only-child 独生子元素
        :first-child 第一个孩子元素
        :last-child 最后一个孩子元素 */
        :nth-child(n) 第n个孩子元素 n从1开始
        :nth-last-child(n) 倒数第n个孩子元素 n从1开始
        :first-of-type 选中app类子代的每种类型的第1个孩子元素
        :last-of-type 选中app类子代的每种类型的最后1个孩子元素
        :nth-of-type(n) 选中app类子代的每种类型的第n个孩子元素 n从1开始
        :nth-last-of-type(n) 选中app类子代的每种类型的倒数第n个孩子元素

     2、 元素状态相关的
        :link     a标签未被访问过的状态
        :visited  a标签已被访问过的状态
        :active   活动时的状态
        :focus    聚焦时的状态
        :checked  按钮被选中时的状态
        :default  默认选中时的状态
        :enabled  表单项可用时的状态
        :disabled 表单项禁用时的状态
        :invalid  通过表单验证和不通过
        :optional 必填项和选填项
        :out-of-range 在范围内、不在范围内