css-2

最新推荐文章于 2024-06-25 12:11:29 发布

三观156

最新推荐文章于 2024-06-25 12:11:29 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/m0_53714112/article/details/113475754

版权

本文详细介绍了CSS中的选择器类型，包括后代选择器、子选择器、并集选择器、连接伪类选择器和focus伪类选择器，并提供了实例。同时，文章阐述了CSS中元素的显示模式，如块级元素、行内元素和行内块元素，以及如何通过display属性转换元素显示模式。最后，讲解了CSS背景属性，包括背景颜色、背景附件、背景图像、背景位置和背景重复，展示了如何设置固定背景和调整背景位置。

摘要由CSDN通过智能技术生成

css的复合选择器

1.后代选择器（包含选择器）

写法就是将外层标签写在前面，内层标签写在后面，中间用空格分隔

例如：ul li { 样式声明 } （就是选择了 ul 里面所有的 li 标签元素）

2.子选择器

只能选择作为某元素的最近一级元素

例：div>p { 样式声明 } （选择div里面所有最近一级p标签元素）

中间用大于号隔开

3.并集选择器

可以选择多组标签，同时为他们定义相同的样式用逗号（，）隔开

例：ul，div { 样式声明 } （选择ul和div标签元素）

4.连接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的标签
a:hover 选择鼠标指针位于其上的标签
a:active 选择活动标签（鼠标按下未弹起的链接）

必须按照link visited hover active的顺序声明

中间是冒号（:）

5.focus伪类选择器

用于选取获得聚光的表单元素，一般情况<input>类标签才能获取，因此主要针对于表单元素

input:focus {
    background-color: yellow;
}

<!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>
        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: rgb(0, 47, 255);
            text-decoration: underline;
        }

        input:focus {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <a href="#">点它</a><br>
    <input type="text">
</body>

</html>

在这里插入图片描述

css的元素显示模式

1.块级元素

一行只能放一个块级元素，可以设置宽度高度，容器及可以包含任何标签，例：div

2.行内元素（内联元素）

常见的有：<a> <strong> <b> <ins> <span> 等

一行可以显示多个
不能直接设置高，宽
默认宽度就是它本身内容的宽度
行内元素只能收纳文本或其他行内元素

注意：链接里面不能再放链接，特殊情况链接<a>里面可以放块级元素

3.行内块元素

常见的有：<img> <input> <td> 等，他们同时具有块级元素和行内元素的特点

一行可以显示多个
默认宽度就是他本身内容的宽度
高度，行度，外边距以及内边距都可以控制

4.元素显示模式转换

转换为块元素：display:block；

转化为行内元素：display:inline；

转化为行内块：display:inline-block;

<!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>
        a {
            width: 300px;
            height: 150px;
            background-color: skyblue;
            display: block;
        }
    </style>
</head>

<body>
    <a href="#">点它</a>
</body>

</html>

在这里插入图片描述

css 的背景

在这里插入图片描述
background-color

transparent 默认属性，为透明色

background-attachment

scroll 默认值，背景图像会随着页面其余部分的滚动而滚动
fixed 当页面其余部分滚动时，图像不会随着滚动

background-image
格式：background-image：url（图片地址）

background-position
在这里插入图片描述
background-repeat

<!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>
        body {
            background-image: url(2.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
        }

        p {
            text-align: center;
            color: black;
        }
    </style>
</head>

<body>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
    <p>王安宇</p>
</body>

</html>