CSS（一）

一、CSS

 1、CSS介绍

     CSS ：Cascading Style Sheet 层叠样式表
     作用：实现网页布局，美化页面元素

 2、CSS使用

 在HTML文档中使用CSS，主要有三种方式
     1、行内样式/内联样式
          特点：在具体的HTML标签中引入CSS代码
          语法：所有的HTML标签都具有一个style属性，属性值就可以使用CSS样式规则
           <标签 style="CSS样式规则"></标签>
        CSS样式规则：
            由CSS属性与值组成，属性名与值之间使用 : 隔开，每一条CSS语句以分号结束
            <h1 style="color:red;">大标题</h1>
            <h2 style="color:green;background-color:pink;"></h2>
       常见的CSS属性：
          1. 设置字体大小
              1. 属性 font-size
              2. 取值 以像素为单位的数值，浏览器默认的字体大小是 16px
               et : <div style="font-size:20px;">CSS 介绍</div>
          2. 设置字体颜色
               1. 属性 color
               2. 取值 颜色的英文单词
                et : <div style="color:red;">使用</div>
          3. 设置背景颜色
               1. background-color
               2. 取值颜色的英文单词
      2、文档内嵌/ 内部样式表
        将CSS代码从标签中抽离出来，单独写在一起
        1、在HTML文档中使用<style></style>标签引入样式表，<style>标签可以在文档的任意地方使用
        2、样式表语法：
           <style>
               CSS选择器{
               属性:值
               属性:值
               ...
               }
           </style>
          选择器：用来匹配文档中元素，并且为其设置样式{}中是要给元素添加的样式声明
            et :
           标签选择器/元素选择器：根据给定的标签名，匹配文档中所有的该标签，并应用样式
             p{
                 color:red;
             }
             span{
                 color:green;
             }
     3、外部样式表/外链方式
         创建外部的CSS文件，在HTML文档中只需引入外部样式表即可
         优点：
            1、真正实现样式与结构的分离，便于维护
            2、可以实现样式的复用
         使用：
            1、创建外部的CSS文件 .css
            2、在HTML文档中使用
                <link rel="stylesheet" href="url">引入样式表文件
            3、在样式表中添加样式：通过选择器书写样式       

3、样式表特点

   1、层叠性
       多个CSS样式共同作用于元素
        e.g.：
       p{
          color:red;
          background-color:blue;
              font-size:20px;
        }
     2、继承性
         父元素中设置的样式，子元素或者后代元素可以继承下来。
         大部分文本相关的属性，都可以被继承，块级元素的宽度与父元素保持一致
     3、样式表的优先级
         只有发生样式冲突时，才考虑优先级
         优先级从低到高：
           1、继承样式
           2、浏览器的缺省设置（默认样式）
           3、文档内嵌方式 / 外链方式  设置的样式
              相同的优先级，发生样式冲突时，由代码的书写顺序决定最终样式，后来者居上
           4、行内样式优先级最高

三、CSS选择器

1、选择器介绍：

     作用：根据指定的选择模式匹配文档中元素，并为其设置样式。
     选择模式：选择符，指匹配元素的依据

2、分类：

 1、标签选择器 / 元素选择器
         根据标签名，匹配文档中所有的该元素，为其设置样式
       语法：
          标签名{
                属性:值;
           }
       练习：
           1、新建文件
           2、创建超链接
           3、设置超链接
                 1. 文本色为红色
                 2. 字体大小为20px
                 3. 取消下划线 text-decoration:none;
       使用：
           常用于清除页面默认样式，以及设置基础样式
 2、类选择器
      特点 ：根据元素的class属性值进行匹配
      语法 ：
           .c1{
                color:red;
                样式
            }
            <p class="c1"></p>
      注意：1、写选择器时，不要随便出现任何符号（以英文.开头，跟上class属性值，中间没有空格）
                 2、类名自定义，禁止以数字开头，可以出现 连接符- 数字 字母，尽量见名知意。
                 3、组合使用
                      选择器1.选择器2{}
                       匹配同时满足选择器1和选择器2的元素，并设置样式
                       et：
                          p.c1{}标签名与类名组合使用，标签在前，类名在后
                          错误写法：.c1p{}匹配类名为“c1p”对应的元素
                      .c1.c2{} 不常用，可以直接给c1或者c2添加样式
                 4、每个元素都具备class属性，也可以使用多个类名。
                     <p class="类名1 类名2">
                     et：
                       <p class="c1 c2 c3"></p>
 3、ID 选择器
       根据元素的ID属性值进行匹配元素
       每个元素都具备id属性，并且id属性具有唯一性
       语法：
          以#开头，跟上id属性值
          #id属性值{样式}
       使用：
               通常网页中具有唯一性的元素，都可以使用id进行标识，并使用id选择器添加样式
           页面中具有唯一性的元素：外围的结构化标签，搜索框
       注意：
         1、id属性具有唯一性，不能重复使用相同id值，在使用JS获取页面元素时，ID是元素唯一的标识，如果出现重复，后面的元素都获取不到
         2、id选择器与class选择器的区别 ：
              1、id具有唯一性，id选择器定义的样式不能被复用；
              2、class可以重复使用，类选择器定义的样式可以复用
         3、具有唯一性的元素都可以使用ID选择器设置样式，
           et:
              外部的结构标签使用id标识，内部的标签使用class标识。
 4、群组选择器
       为一组元素统一设置样式
       语法：
          选择器1,选择器2,选择器3{样式}
 5、后代选择器
       依托于元素的层级关系匹配后代元素（后代元素既包含直接子元素，也包含间接子元素）
       语法：
          选择器1 选择器2{
             样式规则
          }
         选择器1与选择器2之间是父元素与后代元素的关系
       作用：在选择器1匹配到的元素中,查找满足选择器2的后代元素
          et :
             nav span{}  匹配nav下的所有span元素
 6、子代选择器
       1. 作用 ：依托元素的子代关系进行匹配，只匹配直接子元素
       2. 语法
           选择器1>选择器2 {}
         表示在选择器1对应的元素中，匹配满足选择器2的直接子元素
          et :
             nav>ul>li{}
 7、伪类选择器
        1、作用 ：针对元素的不同状态设置样式
        2、分类 ：
            1. 超链接伪类选择器
                  主要针对超链接的不同状态设置样式
                 :link 超链接访问前的状态
                 :visited 超链接访问后的状态
            2. 动态伪类选择器
                  1、:hover 表示鼠标悬停时的状态
                  2、:active 表示鼠标点按时的状态（鼠标按住不松手）
                  3、:focus 表示获取焦点时的状态，常见于输入框
                     接收用户输入时，就表示获取到焦点
        3、使用：
           1、伪类选择器必须与其他选择器结合使用，伪类选择器是给元素不同的状态设置样式
               et:  a:link{
                       color :black;
                       text-decoration :none;
                     }  
           2、设置超链接四种状态下的样式
                a:link{}
                a:visited{}
                a:hover{}
                a:active{}
                书写顺序：“ LoVe / HAte 爱恨原则 ” 
           3、表单元素获取焦点时的状态（针对输入框）
                input:focus{}
                对文本框和密码框而言，当用户点击输入时，都视为获取焦点状态

四、选择器的优先级

    选择器的优先级主要考虑选择器的权重
    可以将各种选择器的权重以数值来表示，（权值）数值越大，优先级越高
    选择器         权值
    --------------------
    标签selector   1
    类选择器       10
    ID选择器       100
    行内样式       1000

 复杂选择器优先级的计算：

   1、群组选择器不参与计算
          div,span{
              color:red;
          }
          .c1{
              color:green;
          }
          <div class="c1"></div>
   2、后代和子代选择器，各种选择器权值相加得到最终的优先级
   3、伪类选择器的优先级权值