2021.7.12CSS基础

一, HTML所有常用标签复习

    ①块级元素   独占一行 默认为父级元素的100%
    ②行内元素   宽度由内容决定,不能够设置宽度, 能够在同一行
    ③行内块儿   宽度可以设置,能够在同一行
     
二,CSS了解
  CSS是什么?(了解)
       ---------层叠样式表    Cascading Style Sheets 人话CSS

    1.作用(干嘛的)  美化页面
    2.HTML(身体,支撑页面) + CSS(衣服)(美化页面) + js(行为,能够交互)

三,CSS入门
    CSS书写位置
        1.外链式            link把HTML和css联系起来,引入了进来css 外部文件(能够单独管理,可以多次引用,工作中)
        2.内联式(内嵌式)     通过style标签  把CSS代码嵌入HTML(最方便,学习阶段)
        3.行内式            通过标签的style属性的属性值去书写CSS代码 (尽量少写)
    CSS的注释
          口诀   杠星 空格 星杠   /* 注释 */
    CSS版本
        1.   CSS2   旧版本
        2.   CSS3   新版本   (  新增的内容,  有兼容性问题 )

四,选择器
   作用: css,   找到需要美化标签(们)
   1.有很多种选择器 
   2.class  多个人可以有多个相同名字   并且同一个可以有多个名字
   3.id值是唯一的
   4.* 可以选中所有的标签,进行美化
   ①基础选择器
    统一语法: 
        选择器  {  样式名: 样式值;  }    /* { 属性名: 属性值  } */

       1. 名称 通用选择器   *  {  样式名: 样式值; }  
          特点:   所有的标签的都能选中   
          场景:  做一些简单的样式的初始化
       2.  名称:  类名选择器  .类名  { 样式名: 样式值;  }
           特点: 多个标签可以有多个相同类名  并且同一标签可以有多个类名
           场景: 相同的内容,需要相同样式, 手动添加相同类名,统一给出样式

       3. 名称  ID选择器  #ID名 { 样式名: 样式值; }
          特点: id值是唯一的, 同一个HTML文件,不要出现2个相同的ID名
          场景: 早期,涉及JS的部分,喜欢用id名.  现在把标签表示唯一的,ID

       4. 名称: 标签选择器    标签名 { 样式名: 样式值 }
          特点: 能够作用所有这个名字的标签
          场景: 不要随便用,尽量减少用,尤其是 _层级选择器中第一层___
       5. 并列选择器(并集选择器)
                S1,S2,S3  {  样式名: 样式值 }  
          特点:  以上所有选择器,选中的标签,都能够作用,   用"逗号连接"
          注意点  最后一个选择器,不要加 "逗号"
          场景:  如果这些标签之间,有部分样式相同,把这个样式可以抽取出来

    ② 层级选择器
        1.后代选择器  
               s1嵌套(一层,或多层)S2
            语法: S1  S2   
        2.子代选择器 
                s1 嵌套一层 S2
            语法S1 > S2
        区别 1. 后代,两个选择器  空格隔开   子代: 用 大于号 >
             2.  子代能选择到的标签,  后代也一定能选到;
                  后代能选择到的标签, 子代不一定能选到.

      终极答案:  1.能选择范围更小的话,就让他更小
                 2.除非,你就想作用更多
五,伪类选择器
    a标签状态伪类选择器
        a:link  未点击时，样式
        a:hover 鼠标悬浮时，样式
        a:active 鼠标点击激活状态， 样式
        a:visited 点击过后的，样式
    顺序后代伪类选择器：
        选择器:nth-child(n)

        查找方式： 
            1.看选择器能不能选到
            2.根据他顺序（n就是第n个）缩小范围