526互联

【4.0】前端基础之CSS

发布时间 2023-07-04 08:24:14作者: Chimengmeng

【4.0】前端基础之CSS

【一】什么是CSS

  • 层级样式表：
    • 就是给HTML标签添加样式的，让它变得好看

【二】注释语法

/* 这是注释 */

【三】CSS的语法结构

选择器 {
    属性1:值1;
    属性2:值2;
    属性3:值3;
    属性4:值4;
    属性5:值5;
}

【四】CSS的三种引入方式

【1】style标签内部直接书写

  <style>
    <!--
    方式一-- >
    h1 {
      color: blue;
    }
  </style>

【2】引入外部CSS文件(最正规的方式，解耦合)

  • link标签引入外部文件
  • 01.css
h1 {
      color: blue;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="01.css">
</head>
<body>
  <h1>
    这是一级标题
  </h1>
</body>
</html>

【3】行内式(一般不用)

【五】基本选择器

  • id选择器
  • 类选择器
  • 元素/标签选择器
  • 通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* （1）id 选择器 */
        /* 找到id为d1的标签，将其内部的颜色变为greenyellow */
        #d1 {
            color: greenyellow;
        }

        /* （2）类选择器 */
        /* 找到c1类的标签，将其颜色变为blue */
        .c1 {
            color: blue;
        }

        /*（3）元素/标签选择器 */
        /* 找到所有的span标签，变成红色 */
        span {
            color: red;
        }

        /*  通用选择器 */
        /* 将页面上的全部内容变为blue */
        * {
            color: blue;
        }

    </style>


</head>
<body>

<div id="d1" class="c1 c2">
    <p>div里面的p标签</p>
    <span>div里面的span标签</span>
</div>

<p id="d2" class="c1 c2">这是一个p标签</p>
<span id="d3" class="c3">这是span标签1------11111</span>
<span id="d4" class="c4">这是span标签2------22222</span>


</body>
</html>

【六】组合选择器

  • 后代选择器

  • 儿子选择器

  • 毗邻选择器

  • 弟弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 后代选择器 */
        /* div下的span标签变成红色 */
        div span {
            color: red;
        }

        /* 儿子选择器 */
        /*  */
        div > span {
            color: greenyellow;
        }

        /* 毗邻选择器 */
        /* 同级别紧挨着的下面的第一个 */
        div + span {
            color: green;
        }
        
        /* 弟弟选择器 */
        /* 同级别下面的所有span标签 */
        div~span{
            color: burlywood;
        }


    </style>

</head>
<body>

<span>这是span标签 1 </span>
<span>这是span标签 2 </span>
<div>这是 div 标签
    <p>
        这是div里面的 第一个 p 标签
    </p>

    <p>这是div里面的第二个 p 标签
        <span>
            这是div标签里面的第二个 p 标签下的 span 标签
        </span>
    </p>

    <span> 这是div里面的第一个 div 标签 </span>
    <span> 这是div里面的第二个 div 标签 </span>

</div>
<span>这是div底部的 第一个 span 标签 </span>
<span>这是div底部的 第二个 span 标签 </span>

</body>
</html>

【七】属性选择器

  • 含有某个属性

  • 含有某个属性并且有某个值

  • 含有某个属性并且有某个值的某个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 将所有含有属性名是username的标签背景色改为红色 */
        [username] {
            background-color: green;
        }

        /* 找到所有属性名是username并且属性值是dream的标签 */
        [username="dream"] {
            background-color: blue;
        }


        /* 找到所有属性名是username并且属性值是dream的input标签 */
        input[username="dream"] {
            background-color: green;
        }

    </style>

</head>
<body>
<input type="text" username>
<input type="text" username="dream">
<input type="text" username="mengmeng">
<p username="dream">this is dream</p>
<div username="mengmeng"> this is mengmeng</div>
</body>
</html>