CSS导入方式&三种基本选择器&层次选择器

1
2
3
4
5
6
css的优势：
1.内容和表现分离
2.网页结构表现统一，可以实现复用。
3.样式十分丰富。
4.建议使用独立于html的css文件。
5.利用SEO,容易被搜索引擎收录。

以下是对CSS(CSS导入方式(三种),三种基本选择器,层次选择器)的学习

CSS导入方式(三种)

  1. 行内样式
    1
    2
    <!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
       <h1 style="color: red;">我是标题</h1>
  2. 内部样式
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 内部样式 -->
    </head>
        <style>
            h1{
                color:green;
            }
        </style>
    <body>
  3. 外部样式–1.链接式
    1
    2
    <!-- 外部样式 -->
    <link rel="stylesheet" href="/css/style.css">
  4. 外部样式–2.导入式(不常用，以前网页先加载框架Html，后渲染出页面)
    1
    2
    3
    4
    5
    @import是CSS2.1特有的
    <!-- 导入式 -->
    <style>
    @import url(css/style.css);
    </style>

    对比

    优先级:就近原则
    优先级:行内样式>内部样式>外部样式

三种基本选择器

  1. 标签选择器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        /* 标签选择器，会选择到页面所有的这个标签的元素 */
        h1 {
            background: blue;
            border-radius: 24px;
            color: hotpink;
        }
        p{
            font-size: 80px;
        }
    </style>
  2. 类选择器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        /*  类选择器的格式，.class的名称{}
        好处，可以多个标签归类，是同一个class,可以复用
          */
        .aa.cc{
            color:hotpink;
        }
        .bb{
            color: indianred;
        }
    </style>
  3. id选择器(全局唯一)
    1
    2
    3
    4
    5
    6
    <style>
    /*   id选择器  ：id必须保证全局唯一
      #id名称{}*/
    #aa{
       color: lawngreen; 
    }

    对比

    优先级:不遵循就近原则，固定的
    id选择器>class选择器>标签选择器

层次选择器

  1. 后代选择器：在某个元素的后面(都会作用)
    1
    2
    3
    4
        /* body  p{
            background: red;
        } */
    例：body后的所有p标签背景都会变为红色
  2. 子选择器：(就作用一代)
    1
    2
    3
    4
       /* body>p{
           background:blue;
       } */
    例：body后面的第一代p标签才有效果，其他嵌套的没有
  3. 相邻兄弟选择器：只有一个，相邻(向下)
    1
    2
    3
    4
        /* .active+p{
            background:blue;
        } */
    例：类active标签的向下的一个P标签才会作用
  4. 通用兄弟选择器
    1
    2
    3
    4
    5
    当前选中元素的向下的所有兄弟元素 */
        .active ~ p {
          background: tomato;
        }
    例：类active后面向下的所有P标签都会作用

基于B站视频学习 特别感谢up主 遇见狂神说