关于CSS的知识(一)

Serein-666

已于 2024-06-17 15:56:16 修改

阅读量888

点赞数 13

文章标签： css 前端 javascript

于 2024-06-15 20:55:10 首次发布

本文链接：https://blog.csdn.net/2201_75683676/article/details/139707344

版权

一、复合选择器

1.并集选择器

并集选择器(css选择器分组)是各个选择器通过逗号连接而成的，任何形式的选择器(包括标签选择器、class类选择器，id选择器等)，都可以作为并集选择器的一部分，如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的css样式。

/* 并集选择器，相同的放在一起，用逗号隔开 */

/* 并集选择器和的意思，只要逗号隔开的，所有选择器都会执行后面样式。 */

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con1 {
            color: green;
        }
        .con2 {
            color: pink;
        }
        /* 两个名字字体都加粗，字体大小都是32px */  
        .con1,
        .con2 {
            font-weight: 700px;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <div class="con1">哈哈哈</div>
    <span class="con2">急急急</span>
</body>

</html>

结果为：

2.后代选择器

/* 后代选择器->用来选择元素或元素组的子孙后代->精准选择，中间用空格隔开 */

后代选择器又称为包含选择器,
用来选择元素或元素组的子孙后代。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写爷爷父亲，在写儿子孙子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li span {
            /* 邓超变成粉色 */
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <span>邓超</span>
        </li>
        <span>陈赫</span>
    </ul>
</body>

</html>

结果为：

3.子代选择器

/* 某元素**子元素(亲儿子)**的元素,使用>来表示子元素选择器,用大于号隔开 */

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li>span {
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div>
                <span>1111</span>
            </div>
        </li>
        <li>
            <!-- 变成粉色 -->
            <span>22222</span>
        </li>
    </ul>
</body>

</html>

结果为：

3.复合选择器总结

二、标签的显示模式

1.

2.

3.

三、显示模式的转换

块级 block 转换成行内 display: inline;

块级 block 转换成行内块 display:inline-block

注意！错误写法：

<p>段落一

<p>段落二</p>

</p>

四、背景样式

/* 默认颜色transparent 透明色 */ background-color: transparent;

/* 背景重复 no-repeat 不重复，repeat 重复*/

/* 背景定位水平方向垂直方向*/ background-position: 20px 30px;

/* 右下 */ background-position: right bottom;

/* 居中 */ background-position: center center;

/* 背景图片 */ background-image: url(../img/yujinxiang.jpg); 红色字为图片路径

五、精灵图

简便方法：/* 选择画图工具直接框大小 */

width: 119px;截取的图片的宽度

height: 105px; 图片的长

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 119px;
            height: 105px;
            /* 背景图片 */
            background-image: url(../img/熊梓淇.jpg);
            /* 图片定位 */
            background-position: -770px -470px;
        }
    </style>
</head>

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

</html>

原图片：

结果为：

Serein-666

关注

13
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
关于CSS的知识(一)

1. -- 块级元素 p div h1-h6 li ul ol hr -->2. -- 行内元素span a b strong i em u ins s del -->3.-- 行内块元素 img input button -->
复制链接

扫一扫