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选择器
    标签选择器
      标签选择器又叫元素选择器，使用元素名可以直接选中相同的元素
    类名选择器
      类选择器以.开头，后面紧跟类名 不允许有空格 与元素的class属性值保持一致 一个元素可以有多个class值 每个值之间通过空格分开
    ID选择器
      id选择器以#开头，后面紧跟id名 不允许有空格 与元素的id属性值保持一致
      在一个文档中 id值不能重复 所以这个一般选择唯一元素
    
    普遍选择器
      使用*来表示普遍选择器 表示选择所有元素 通常用在组合选择器中
      * {
          background-color: honeydew;
        }
      #app>*{
          background-color: honeydew;
        }
    
    层次选择器
      后代选择器
        " "
        #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>

    伪类选择器
      子代元素相关
        以:开头，用于其它选择器之后，指明元素在某种状态下才能被选中
        :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个孩子元素

      元素状态相关的
        :hover
        :link     a标签未被访问过的状态
        :visited  a标签已被访问过的状态
        :active   活动时的状态
        :focus    聚焦时的状态
        :checked  按钮被选中时的状态
        :default  默认选中时的状态
        :enabled  表单项可用时的状态
        :disabled 表单项禁用时的状态
        :valid
        :invalid  通过表单验证和不通过
        :required
        :optional 必填项和选填项
        :in-range
        :out-of-range 在范围内、不在范围内
    伪元素选择器
      "::" 开头 用在其它选择器之后
      ::after           选中之后的不存在的节点，然后结合content添加内容
      ::before          选中之前的不存在的节点，然后结合content添加内容
      ::first-letter    选中第一个文本字符
      ::first-line
      ::selection

    CSS优先级
      采取就近原则
      外部样式低于内部样式低于行内样式
      
    特性值（只是相对概念）

      style 行内样式表                    1000
      id选择器                            100
      类选择器、属性选择器、伪类选择器         10
      元素选择器和为伪元素选择器               1

      color: tomato !important;

    样式继承
      有些规则会被子元素默认继承，有些不会
      会被继承的：font 文本 列表 cursor等
      不会被继承：margin padding border等
      三个特殊的值来改变继承关系
        /* 将可继承的属性改为不继承 */
        color: initial;
        /* 将不继承的属性改为继承 */
        border: inherit;
        /* 跟随默认情况 */
        /* color: unset; */
    
    CSS中的一些单位值
      px #333 red blue hotpink
      颜色：
        关键字：
        https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value
        rgb()
          三个参数rgb(0-255，0-255，0-255)  红 绿 蓝
          rgb（204, 247, 202）
        rgba()
          三个参数rgb(0-255，0-255，0-255，0-1)  红 绿 蓝 代表透明度 0完全透明 1完全不透明
        十六进制
          #六个十六进制的数 两个代表一个通道  红 绿 蓝   0-F
          #aaa = #aaaaaa
          #602653
        HSL
          第一个参数 色调 0-360 0 红色 120 绿色 240 蓝色
          第二个参数 饱和度 0-100% 0 灰色   100% 全彩
          第三个参数 亮度 0-100% 0 黑色（暗）   100%白色
        background-color: hsl(120, 100%, 50%);
        HSLA
        透明度 0完全透明 1完全不透明
        background-color: hsla(120, 100%, 50%, 0.5);

      长度宽度大小
        百分比
          占父元素的百分比
          width:50%;
        绝对值
          px 像素 mm cm in(英寸)
        相对值单位
          em
            1em和当前字体大小相同(一个M的宽度)
            默认字体大小 如果默认是16px 那1em = 16px
            font-size=20px;那1em = 20px
          rem
            总是等于默认字体大小 如果默认是16px 那1rem = 16px
    文本样式
      color           字体颜色
      font-size       
      font-family     字体（宋体、楷体、微软雅黑、、、）
        WebFont 商用（花钱） 兼容性不太高
        在线字体和在线图标引入方式参考8-字体.html
      font-style      i  normal italic  oblique
      font-weight     b  100-900 
                      normal 默认400 
                      bold=700 
                      lighter 比父元素字体更细
                      bolder  比父元素字体更粗
      text-align      left center right
      text-transform  文本变形 none 
                      uppercase
                      lowercase
                      capitalize
                      full-width 转换为类似于等宽的字体
      text-decoration 
      text-decoration-style
      text-decoration-color
      text-decoration-line

      text-shadow