HTML+CSS基础用法介绍五

小亦苦学编程

于 2024-10-04 19:51:04 发布

阅读量825

点赞数 29

文章标签： html css 前端

本文链接：https://blog.csdn.net/xiao_yi666/article/details/142702754

版权

什么是结构伪类选择器：‌结构伪类选择器是CSS中的一种选择器，用于基于文档结构选择元素。‌ 这些选择器通常用于模仿或替代JavaScript中的事件处理器，使得可以通过CSS样式对文档中的某些结构位置或状态进行样式设计。结构伪类选择器能够选择元素在其生命周期中的特定时刻的状态，比如当用户悬停在链接上时，或者当元素是其父元素的第一个子元素时‌

结构伪类选择器的作用主要体现在以下几个方面：

减少对HTML属性的依赖‌
动态样式设计
文档结构选择‌

一些常见的结构伪类选择器包括：

hover‌：选择鼠标悬停在上面的元素。
focus‌：选择拥有焦点的元素。
active‌：选择被激活的元素（例如，被点击的链接）。
visited‌ 和 ‌link‌：分别选择已访问和未访问的链接。
first-child‌ 和 ‌last-child‌：选择某个元素的第一个或最后一个子元素。
nth-child()‌：选择某个元素的特定索引的子元素‌。

接下来主要介绍 first-child ,last-child, nth-child()

通过以下表格介绍着三个的用法和作用

结构伪类选择器	作用
选择器:first-child	查找第一个元素对其赋予属性值
选择器:last-child	查找最后一个元素对其赋予属性值
选择器:nth-child(N)	查找第N个元素(第一个元素N值为1)

选择器:first-child的使用

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:first-child{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第一个</li>
        <li>我是第二个</li>
        <li>我是第三个</li>
        <li>我是第四个</li>
        <li>我是第五个</li>
        <li>我是第六个</li>
        <li>我是第七个</li>
        <li>我是第八个</li>
        <li>我是第九个</li>
    </ul>
</body>
</html>

可能有朋友好奇这么写结构伪类选择器是啥意思？

 <style>
        li:first-child{
            background-color: red;
        }
 </style>

其实就是在选中<li>标签中进行查找，first-child 单词意思就是说第一个孩子，其实也就是找到所有<li>标签中的第一个<li>标签然后让其伪类结构选择器的属性，这里的属性就是让其背景变为红色

看看效果
在这里插入图片描述

选择器:last-child的使用

使用代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            li:last-child{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
            <li>我是第四个</li>
            <li>我是第五个</li>
            <li>我是第六个</li>
            <li>我是第七个</li>
            <li>我是第八个</li>
            <li>我是第九个</li>
        </ul>
    </body>
</html>

对以下代码进行解释

 <style>
      li:last-child{
          background-color: blue;
      }
</style>

last-child 单词的意思是最后一个孩子，也就是说在所有<li>标签中选择最后一个<li>标签对其背景色赋值为蓝色

效果图如下
在这里插入图片描述

选择器:nth-child(N)的使用

这里的N从1开始取正整数。


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            li:nth-child(1){
                background-color: red;
            }
            li:nth-child(2){
                background-color: blue;
            }
            li:nth-child(3){
                background-color: green;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
            <li>我是第四个</li>
            <li>我是第五个</li>
            <li>我是第六个</li>
            <li>我是第七个</li>
            <li>我是第八个</li>
            <li>我是第九个</li>
        </ul>
    </body>
</html>

结构伪类选择器代码如下

 <style>
       li:nth-child(1){
           background-color: red;
       }
       li:nth-child(2){
           background-color: blue;
       }
       li:nth-child(3){
           background-color: green;
       }
 </style>

当N取几时就选中所有<li> 标签中的第几个标签，上述代码分别是选中了第1，2，3个<li>分别背景色会变为红绿蓝。

效果图
在这里插入图片描述
选择器：nth-child（公式）

公式	作用
2n	选中偶数
2n+1；2n-1	选中奇数标签
5n	选中5的倍数的标签
n+5	选中(5,6,7…)一系列标签
-n+5	选中(5,4,3,2,1…)一系列标签

这里的n从0开始取正整数

公式(2n)和(2n+1；2n-1)的用法

代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        		/*选中偶数标签*/
            li:nth-child(2n){
                background-color: red;
            }
              /*选中奇数标签*/
            li:nth-child(2n+1){
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
            <li>我是第四个</li>
            <li>我是第五个</li>
            <li>我是第六个</li>
            <li>我是第七个</li>
            <li>我是第八个</li>
            <li>我是第九个</li>
        </ul>
    </body>
</html>

效果图如下偶数标签背景色为红色，奇数标签背景色为蓝色
在这里插入图片描述
其他公式用法和上面用法相同，依葫芦画瓢即可。

盒子模型-边框线

这是同时设置四个方向的边框线

属性名：border
属性值：边框线粗细线条样式颜色 (不区分顺序)

常用线条样式

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

代码用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .solid{
            width: 200px;
            height: 200px;
            background-color: green;
            border: 4px solid blue;
        }
        .dashed{
            width: 200px;
            height: 200px;
            background-color: green;
            border: 6px dashed red;
        }
        .dotted{
            width: 200px;
            height: 200px;
            background-color: green;
            border: 8px dotted #000;
        }
    </style>
</head>

<body>
   这是实线： <div class="solid"></div>
   这是虚线：<div class="dashed"></div>
   这是点线：<div class="dotted"></div>
</body>
</html>

效果图
在这里插入图片描述

设置指定方向的边框线

属性名：border-方位(left,right,top,bottom)
属性值：边框线粗细线条样式线条颜色(不区分顺序)

用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
     <style>
            div{
                width: 200px;
                height: 200px;
                background-color:pink;
                /* 这是设置上边框线  */
                border-top: 2px solid red;
                 /* 这是设置下边框线  */
                 border-bottom: 3px dashed green;
                  /* 这是设置左边框线  */
                 border-left: 4px dotted blue; 
                 /* 这是设置右边框线 */
                 border-right: 5px solid orange;
            }
     </style>
</head>
<body>
    指定方向设置边框线测试如下：<div></div>
</body>
</html>

效果展示
在这里插入图片描述

盒子模型-内边距

设置某个方向的内边距

作用：设置内容与盒子边缘之间的距离
属性名：padding-方向(top, bottom,left,right)

代码用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 设置指定方向内边距 */
            padding-top: 10px;
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图如下

在这里插入图片描述

同时设置多个方向的内边距

padding多值写法

取值个数	实例	含义
一个值	padding：10px;	四个方向内边距均为10px
两个值	padding：10px 80px;	上下：10px，左右：80px
三个值	padding：10px 40px 90px;	上：10px，左右：40px，下：90px
四个值	padding：10px 20px 30px 40px;	上：10 px，下：30px，左：40px，右：20px

测试padding一个值的情况

代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: orange;
                /* 设置指定方向内边距 */
                padding: 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果图如下
在这里插入图片描述
当为padding设置一个像素值时则四个方向内边距都是这个像素值

测试padding两个值的情况

代码如下

<!-- 1. 测试padding两个值的情况 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: red;
                /* 设置指定方向内边距 */
                padding: 40px 80px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果图
在这里插入图片描述
当为padding设置两个值时，第一个值为上内边距设置40px,第二个值对应的就是右内边距的像素值80px,因为左，下内边距没有被设置，则浏览器会把下内边距设置为和上内边距一样的像素值40px，同理，左内边距也被设置为和右内边距相同的值80px

盒子模型-解决盒子被撑大

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            
        }
    </style>

可以看见在代码中我设置div尺寸为200px200px，但是实际变成了239.99239.99,我们就当初240*240来看这是为什么呢？
在这里插入图片描述

那是因为我们加了padding:20px;这个属性，导致<div> 尺寸被撑大了，那为什么宽高各加40px呢？因为上下左右内边距是20px。

最终<div>标签的宽高计算如下
宽=左内边距+右内边距+里面框的宽度=20px+20px+200px=240px；
高=上内边距+下内边距+里面框的高度= 20px+20px+200px=240px;

盒子不被撑大解决方法如下
加上：box-sizing:border-box;

接下来在试试，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            box-sizing: border-box;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果展示
在这里插入图片描述
此时就解决了被撑大问题。

盒子模型-外边距与版心居中

作用：拉开两盒子之间的距离
属性名：margin
用法与padding用法相同，都可以设置某个单独方向，以及同时设置全部方向，只是这两个属性作用不同

指定某个方向设置外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 600px;
            height: 200px;
            background-color: orange;
            /* 设置指定方向外边距 */
            margin-top: 100px;
            margin-bottom: 60px;
            margin-left: 30px;
            margin-right: 40px;
        
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果展示
在这里插入图片描述
版心居中小知识
只需要在margin属性的第二值用上auto即可版心居中

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 600px;
            height: 200px;
            background-color: orange;
            /* 设置版心居中 */
            margin: 60px auto;
        
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

居中效果图
在这里插入图片描述

清除默认样式

在没有清除之前会有默认样式如下图所示

在这里插入图片描述

清除默认样式代码如下

    <style>
        *{
            margin: 0; /*清除外边距*/
            padding: 0; /*清除内边距*/
            list-style: none;/*清除无序序列前面的小点点*/
            box-sizing: border-box; /*将来设置内边距时，防止盒子被内容撑大*/
        }
    </style>

清除后效果图
在这里插入图片描述

内容溢出控制显示方式

属性名：overflow

属性值

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动(无论是否溢出，都显示滚动条位置)
auto	溢出滚动(溢出才显示滚动条位置)

接下来对这三种属性值的使用情况如下
代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hldden{
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: hidden; 
        }
        .scroll{
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: scroll;
        }
        .auto{
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>
<body>
   1. 测试hidden属性值，此时已经溢出，但溢出部分被隐藏
    <div class="hldden">
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>

    </div>
    <br><br>
    2.测试scroll属性值,此时未溢出情况，但也显示滚动条
    <div class="scroll">       
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
    </div>
    <br>
    2.1 测试scroll属性值,此时有溢出情况，显示滚动条
    <div class="scroll">
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
    </div>
    <br>
   3.测试auto属性值,此时未溢出情况，没显示滚动条
    <div class="auto">       
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
    </div>
    <br>
    3.1 测试auto属性值,此时有溢出情况，显示滚动条
    <div class="auto">
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
        <p>测试中</p>
    </div>
</body>
</html>

效果图
在这里插入图片描述

盒子模型-圆角

作用：为元素外边框设置为圆角

属性名： border-radius

属性值：数字+px/百分比

注意：属性值是圆角半径

<!--用法如下-->
border-radius:10px(左上角)  20px(右上角)  30px(左下角)  40px(右下角);

当只给属性border-radius赋值一个值时的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color:cadetblue;
            border-radius: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
在这里插入图片描述
可以看见所有角都是一样的，都是30px。

当只给属性border-radius赋值两个值时的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color:cadetblue;
            border-radius: 10px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
在这里插入图片描述

可以看见左上角的弧度和右下角的弧度一致，右上角的和左下角的一致。因为我只给border-radius属性赋了两个值，按照赋值规则，第一个值是给左上角的，第二个则是给右上角的，如果没有被主动赋值的角，会和对角的弧度效果一致。

正圆形状：给正方形的盒子设置圆角属性值为宽或高的一半即可或者写50%
胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半即可。

圆形状(制作头像)

<!-- 头像制作 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         img{
              border-radius:50%;
      }
        div{
            padding-top: 30px;
            box-sizing: border-box;
            height: 300px;
            font-size: 30px;
            line-height: 0px;
            background-color:darkgray;
        }

    </style>
    
</head>
<body>
    <div>
        <img src="1.png" width="200">
        <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;头像</p>
    </div>
    
</body>
</html>

效果图
在这里插入图片描述

胶囊形状

代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 200px;
                height: 100px;
                background-color:burlywood;
                border-radius:50px;
            }
    
        </style>   
    </head>

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