526互联

【5.0】前端基础之CSS进阶

发布时间 2023-07-04 17:49:11作者: Chimengmeng

【5.0】前端基础之CSS进阶

【一】分组与嵌套

【1】分组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      color: red;
    }
    
    p {
      color red;
    }
    
    span {
      color: red;
    }
  </style>
  
</head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>

上述方法，重复代码造成了代码的冗余

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* 逗号表示并列关系 */
    div,span,p {
      color: red;
    }
  </style>

</head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>

【2】嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* 嵌套 */
    #div, .c1,span {
      color: red;
    }
  </style>

</head>
<body>
<div class="c1">这是div标签</div>
<p class="c1">这是p标签</p>
<span class="c1">这是span标签</span>
</body>
</html>

【二】伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {
            color: red; /* 常态 */
        }

        a:hover {
            color: green; /* 鼠标悬浮态 */
        }

        a:active {
            color: blue; /* 鼠标点击不松开 激活态 */
        }

        a:visited {
            color: burlywood; /* 访问之后的状态 */
        }
        
        input:focus {
            background-color: red; /* input输入框获取焦点(input被选中) */
        }
        
    </style>
</head>
<body>
<a href="https://www.xiaohuar.com/"> 当前网址是否存在 </a>
<input type="text">
</body>
</html>

【三】伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter { /* 第一个文字加效果 */
            font-size: 48px;
            color: red;
        }
        
        p:before { /* 在文本开头添加内容并且带有装饰，无法被选中! */
            content: "这是一句话";
            color: burlywood;
        }
        
        p:after {/* 在文本结尾添加内容并且带有装饰，无法被选中! */
            content: "?";
            color: blue;
        }
        
        
    </style>
</head>
<body>
<p>
    这是一个p标签
</p>
</body>
</html>
  • befor 和 after 通常都是用来清除浮动带来的影响
    • 即父标签塌陷的问题

【四】选择器优先级

  • id选择器
  • 类选择器
  • 标签选择器
  • 行内选择器

1.选择器相同 书写顺序不同

​ 就近原则：谁离得近，就使用谁的样式

2.选择器不同 ...

​ 行内 > id选择器 > 类选择器 > 标签选择器

​ 精确度越高，优先级越高

【五】CSS属性相关

【1】长度和宽度

/* 块级标签无法设置长度和宽度，就算写了也不会生效 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p {
      background-color: red;
      height: 200px;
      width: 100px;
    }
    
    /* 块级标签无法设置长度和宽度，就算写了也不会生效 */
    span {
      background-color: blue;
      width: 100px;
      height: 200px;
    }
  </style>

</head>
<body>

<p>这是一个P标签</p>
<span>这是一个SPAN标签</span>
</body>
</html>

【2】字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-family: "JetBrains Mono ExtraLight"; /* 可以跟多个，第一个不生效会依次判断 */
            font-size: 24px; /* 字体大小 */
            font-weight: inherit; /* 子重 (inherit : 继承父元素的粗细值) */
            /*color: blue; !* 字体颜色，颜色英文 *!*/
            /*color: #dddddd; !* 字体颜色，颜色编号 *!*/
            /*color: rgb(122, 69, 36); !* 字体颜色，rgb(0~255) *!*/
            color: rgb(122, 69, 36, 0.8); /* 第四个参数是透明度(0~1) */
        
            /* 当你想用一些颜色的时候，可以使用相关的工具 
                1.pycharm自带取色器
                2.微信/QQ截图，取色器
            */
            
        }
    </style>
</head>
<body>
<p>这是一个P标签</p>
</body>
</html>

【3】文字属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p {
      /*text-align: center; !* 文字居中 *!*/
      /*text-align: left; !* 左居中 *!*/
      text-align: justify; /* 两端对齐 */
      
      /*text-decoration: underline; !* 下划线 *!*/
      text-decoration: line-through; /* 删除线 */
      /*text-decoration: overline; !* 删除线 *!*/
      /* 在html中，很多标签的样式效果是一样的 */
      
      font-size:16px; /* 先知道文字的具体长度 */
      text-indent: 32px; /* 缩进32px */
    }
    
    a {
      text-decoration: none; /* 取出a标签自带的下划线 */
    }
  </style>
</head>
<body>
<p>我是一个P标签</p>
<a href=""></a>
</body>
</html>

【4】背景属性

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

    <style>
        div {
            /*height: 400px;*/
            /*width: 400px;*/
            /*background-color: red;*/
            /* 设置背景图片 */
            /*background-image: url("url链接"); !* 默认全部铺满 *!*/
            /*background-repeat: no-repeat; !* 不铺满 *!*/
            /* 其实浏览器不是一个平幔，而是一个三维立体结构
             Z 轴指向用户 ， Z 越大，离用户越近
             */
            
            /*background-position:center center; !* 图片居中(第一个参数控制左边的距离，第二个参数是上距离) *!*/
            
            /* 简写 */
            /* 只需要填上想要加的参数即可，位置没有关系，参数对应就可以 */
            background: red url("url") no-repeat center center;
        
        
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

【5】边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            background-color: red;
            border-width: 20px;
            border-style: solid;
            border-color: green;


        }

        div {
            /*border-left-width: 5px;*/
            /*border-left-color: green;*/
            /*border-left-style: solid;*/

            /*border-top-width: 5px;*/
            /*border-top-color: green;*/
            /*border-top-style: solid;*/

            /*border-right-width: 5px;*/
            /*border-right-color: green;*/
            /*border-right-style: solid;*/

            /*border-buttom-width: 5px;*/
            /*border-buttom-color: green;*/
            /*border-buttom-style: solid;*/

            /* 支持简写 */
            border: 3px solid red; /* 默认四个边一样，不区分三者的位置 */

        }

        /* 如何画圆 */
        #d1 {
            height: 600px;
            width: 600px;
            border-radius: 50% /* 正方形只写50%即可是园，两边不一致是椭圆 */
        }

    </style>
</head>
<body>
<dic>安得猛士兮走四方
    <p>
        大风起兮云飞扬
    </p>
</dic>
<div id="d1"></div>
</body>
</html>

【6】display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            /*display: none; !* 隐藏标签，不展示到前端页面且原来的位置也不再占有了，但是存在于文档上 *!*/
            display: inline; /* 将标签设置成行内标签的特点 */

        }

        #d2 {
            display: inline;
        }

        #s1 {
            display: block; /* 将标签设置成块级标签的特点 */
        }

        #s2 {
            display: block;
        }

        #d3 {
        display: inline-block; /* 标签既在一行显示又是块级标签 */
        }
        #d4 {
        display: inline-block;
        }

    </style>
</head>
<body>
<div id="d1"> 001</div>
<div id="d2"> 002</div>

<span id="s1">003</span>
<span id="s2">004</span>

<div id="d3">005</div>
<div id="d4">004</div>

<div id="d5" style="display: none">这是display ， 隐藏且不占位置</div>
<div id="d6" style="visibility: hidden">这是visibility ， 隐藏但是占位置</div>"

</body>
</html>

【六】盒子模型

【1】什么是盒子模型

  • 盒子模型（Box Model）是指在网页设计中，用于描述和布局元素的一种模型。
    • 它将每个元素看作是一个具有四个边界的矩形盒子，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。

每个盒子模型都由这四个部分组成：

  • 内容区域（Content）：

    • 盒子的实际内容，如文本、图像等。

  • 内边距（Padding）：

    • 内容区域与边框之间的空间，用于控制内容与边框之间的距离。

  • 边框（Border）：

    • 围绕内容区域和内边距的线条，用于给元素添加外观和样式。

  • 外边距（Margin）：

    • 边框与其他元素之间的空间，用于控制元素与周围元素之间的距离。

【2】快递盒

  • 以快递盒为例

    • 快递盒与快递盒之间的距离(标签与标签的距离,margin外边距)
    • 盒子的厚度(标签的边框,border)
    • 盒子里面的物体到盒子的距离(内容到边框的距离,padding内边距)
    • 物体的大小(内容,content)

  • 如果想调整标签与标签之间的距离，可以调整margin外边距

  • 浏览器会自带 8px 的margin

    • 一般我们在学也写页面的时候会先将 body 的margin去掉
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*margin:0; !* 上下左右全是0 *!*/
            /*margin: 12px 10px; !* 第一个参数是上下，第二个参数是左右 *!*/
            /*margin: 10px 20px 30px; !* 上 左右 下 *!*/
            margin: 10px 20px 30px 60px; /* 上下左右 */
        }

        #p1 {
            border: 1px solid red;
            padding: 10px 20px 30px 40px; /* 设置内容距边框距离，规律和margin一样 */
        }
    </style>

</head>
<body>
<p>这是一个P标签</p>

<p id="p1">这是一个P标签1</p>
</body>
</html>

【七】浮动

  • 脱离页面，浮动在页面之上
    • 没有块级一说，本身多大，浮起来之后就只能占多大。
  • 只要涉及到页面的布局，一般都是用浮动提前规划好
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body {
      margin: 0;
    }

    #d1 {
      height: 200px;
      width: 200px;
      background-color: red;
      float: left; /* 向左浮动 */
    }

    #d2 {
      height: 200px;
      width: 200px;
      background-color: blue;
      float: right; /* 向右浮动 */
    }
  </style>
</head>
<body>
<div id="d1">

</div>
<div id="d2">

</div>
</body>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1 {
      width: 20%;
      height: 100px;
      background: green;
      float: left;
    }
    
    #d2 {
      height: 100px;
      width: 20%;
      background-color: yellow;
      float: right;
    }
  </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>