day4 CSS基础2

杰瘦瘦

已于 2022-09-25 19:35:13 修改

阅读量126

点赞数

分类专栏：前端基础笔记文章标签：前端 css html javascript

于 2022-06-05 21:30:46 首次发布

本文链接：https://blog.csdn.net/m0_70619994/article/details/124936048

版权

前端基础笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、选择器进阶

1、复合选择器

（1）后代选择器

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

语法：选择器1 选择器2 {css}

示例：找到div的儿子p并设置文字颜色为蓝色

展示效果：

（2）子代选择器

作用：根据HTML标签的嵌套关系，选择

语法：选择器1>选择器2{css}

后代选择器和子代选择器最大的区别是，当使用后代选择器的时候，父标签包含的所有子标签都会应用其CSS样式（不管是儿子还是孙子还是重孙子）

示例：

展示效果：

而当我们只需要儿子标签应用css样式而不需要孙子标签应用的时候就可以选择器子代选择器

示例：

展示效果：

2、并集选择器

作用：同时选择多组标签，设置相同的样式

语法：选择器1 ，选择器2{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>
        div,
        p,
        span{
            color: red;
        }
    </style>
</head>
<body>
    <div>div标签</div>
    <p>p标签</p>
    <span>span标签</span>
</body>
</html>

展示效果：

注意点：并集选择器每组选择器通常一行写一个，从而提高代码的可读性

3、交集选择器

作用：选中页面中同时满足多个选择器的标签

语法：选择器1 选择器2{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>
        p.one{
            color: red;
        }
    </style>
</head>
<body>
    <p class="one">交集选择器</p>
    <p>p标签</p>
    <div class="one">div标签</div>
</body>
</html>

展示效果：

注意点：

交集选择器中的选择器之间是紧挨着的，没有东西分隔
交集选择器中如果有标签选择器，标签选择器必须写在最前面

4、hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

语法：选择器:hover{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>
        a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">百度一下，你就知道！</a>
</body>
</html>

二、背景相关属性

1、背景色

属性名：background-color（bgc）

属性值：

颜色取值：关键字、rgb表示法、rgba表示法、十六进制...

代码示例：

<!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: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>背景色</div>
</body>
</html>

展示效果：

2、背景图片

属性名：background-image（bgi）

属性值：url('图片的路径')

代码示例：

<!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: 400px;
            height: 400px;
            background-image: url(./蜡笔小新.jpg);
        }
    </style>
</head>
<body>
    <div>背景图片</div>
</body>
</html>

展示效果：

注意点：

背景图片url可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3、背景平铺

属性名：background-repeat（bgr）

属性值：

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向平铺
repeat-y	沿着垂直方向平铺

代码示例：

<!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: 400px;
            height: 400px;
            background-color: skyblue;
            background-repeat: no-repeat;
            background-image: url(./蜡笔小新.jpg);
        }
    </style>
</head>
<body>
    <div>背景平铺</div>
</body>
</html>

展示效果：

4、背景位置

属性名：background-position：水平方向位置垂直方向位置；

代码示例：

<!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: 400px;
            height: 400px;
            background-color: skyblue;
            background-repeat: no-repeat;
            background-position: center center;
            background-image: url(./蜡笔小新.jpg);
        }
    </style>
</head>
<body>
    <div>背景位置</div>
</body>
</html>

展示效果：

5、背景相关属性连写

属性名：background（bg）

单个属性值得合写，取值之间以空格隔开

书写顺序：

推荐：background：color image repeat postion

省略问题：

可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url()

注意点：

如果需要设置单独的而样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面

6、img标签和背景图片的区别

img标签是一个标签，不设置宽高默认会以原尺寸显示，而背景图片需要设置对应标签的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签。

一般常规使用的图片都用img，不怎么重要的用背景图片

三、元素显示模式

1、块级元素

显示特点：

独占一行
宽度偶人是父元素的宽度，高度默认内容撑开
可以设置宽高

代表标签：

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...

2、行内元素

显示特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

代表：

a、span、b、u、i、s、strong、ins、em、del...

3、行内块元素

显示特点：

一行可以显示多个
可以设置宽高

代表标签：

input、textarea、button、select...
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4、元素显示模式转换

目的：改变元素默认的显示特点，让元素复合布局要求

语法：

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:inline	转换成行内元素	极少

5、HTML嵌套规范注意点

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素...但是：p标签中不要嵌套div、p、h系列等块级元素
a标签内部可以嵌套任意元素，但是a标签不能嵌套a标签

四、CSS特性

1、继承性

特性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
......

注意点：

可以通过调试工具判断样式是否可以继承
文字控制属性都可以继承，不是控制文字的都不能继承
a标签的color会继承失效（因为a标签自带了蓝色的文字属性）
h系列标签的font-size会继承失效（因为h系列标签自带了文字字号属性）

代码示例：

<!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{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        div
        <span>span</span>
    </div>
</body>
</html>

展示效果：可以看到span标签继承了div标签的文字属性一样变成红色颜色的文字了

2、层叠性

特性：

给同一个标签设置不同属性：样式会层叠叠加，共同作用在标签上
给同一个标签设置相同属性：样式会层叠覆盖，写在下面的会覆盖上面的样式

注意点：

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

杰瘦瘦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day4 CSS基础2

一、选择器进阶1、复合选择器（1）后代选择器作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素语法：选择器1 选择器2 {css}示例：找到div的儿子p并设置文字颜色为蓝色展示效果：......
复制链接

扫一扫

专栏目录