-
05 CSS02
目标
1、选择器进阶
2、背景相关属性
3、元素显示模式
4、CSS三大特性
5、综合案例一、选择器进阶
1、复合选择器 2、并集选择器 3、交集选择器 4、Emmet语法 5、hover伪类选择器- 1
- 2
- 3
- 4
- 5
1、复合选择器
1.1 后代选择器：空格
· 作用：根据HTML的嵌套关系，选择父元素后代中满足条件的元素
· 选择器语法：选择器1 选择器2 {CSS}
· 结果：在选择器1所找到标签的后代{儿子、孙子、重孙子…}中，找到满足选择器2的标签，设置样式1.2 子代选择器：>
· 作用：根据HTML的嵌套关系，选择父元素子代中满足条件的元素
· 选择器语法：选择器1>选择器2 {CSS}
· 结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式2、并集选择器：，
· 作用：同时选择多组标签，设置相同的样式
· 选择器语法：选择器1，选择器2 {CSS}
· 结果：在选择器1和选择器2的标签，设置样式并集选择器中的每组选择器可以是基础选择器或者复合选择器 并集选择器中的每组选择器通常一行写一个，提高代码的可读性- 1
- 2
3、交集选择器：紧挨着
· 作用：选中页面中同时满足多个选择器的标签
· 选择器语法：选择器1选择器2 {CSS}
· 结果：（既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式交集选择器中的如果有标签选择器，标签选择器必须写在最前面- 1
4、Emmet语法
作用：通过简写语法，快速生成代码
语法：
5、hover伪类选择器
· 作用：选中鼠标悬停在元素上的状态，设置样式
· 选择器语法：选择器：hover {CSS}伪类选择器选中的元素的某种状态- 1
二、背景相关属性
1、背景颜色 2、背景图片 3、背景平铺 4、背景位置 5、背景相关属性连写- 1
- 2
- 3
- 4
- 5
1、背景颜色
· 属性名：background（bgc）
· 属性值：
颜色取值：关键字、rgb表示法、rgba表示法（a为透明度0-1）、十六进制、…·背景颜色默认值是透明：rgba（0,0,0,0）、transparent ·背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会先给盒子设置背景颜色- 1
- 2
2、背景图片
· 属性名：background-image（bgi）
· 属性值：background-image：url（‘图片的路径’）·背景图片中url可以省略引号 ·背景图片默认是在水平方向平铺的 ·背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的- 1
- 2
- 3
3、背景平铺
· 属性名：background-repeat（bgr）
· 属性值：
4、背景位置
· 属性名：background-position
· 属性值：background-position：水平方向位置 垂直方向位置；
方位名取值和坐标取值可以混用，第一个取值表示水平，第二个取值表示垂直- 1
5、背景相关属性的连写形式
· 属性名：background（bg）
· 属性值：
单个属性值的合写，取值之间以空格隔开
· 书写顺序：（推荐，不强求）background：color image repeat position- 1
· 省略问题：
可以按照需求省略
特殊情况：在pc 端，如果盒子大小和背景图片一样，此时可以直接写background：url（）如果需要设置单独的样式和连写 要么把单独的样式写在连写下面 要么把单独的样式写在连写里面- 1
- 2
- 3
三、元素显示模式
1、块级元素 2、行内元素 3、行内块元素 4、元素显示模式转换- 1
- 2
- 3
- 4
1、块级元素
· 属性：display：block
· 显示特点：
①独占一行
②宽度默认是父元素的宽度，高度默认由内容撑开
③可以设置宽高
· 代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer
· 可从chrome调试的computed中输入display查找其属性，如图
2、行内元素
· 属性：display：inline
· 显示特点：
①一行可以显示多个
②宽度和高度默认由内容撑开
③不可以设置宽高
· 代表标签：
a、span、b、u、i、s、strong、ins、em、del、…3、行内块元素
· 属性：display：inline-block
· 显示特点：
①一行可以显示多个
②可以设置宽高
· 代表标签：
input、textarea、button、select、…特殊情况：img标签有行内块元素特点，但是chrome调试工具中显示结果是inline- 1
4、元素显示i模式转换
· 目的：改变元素默认的显示特点，让元素复合布局要求
· 语法：
拓展1：HTML嵌套规范注意点
1、块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等，但是：p标签中不要嵌套div、p、h等块级元素。
2、a标签内部可以嵌套任意元素，a标签不能嵌套a标签。拓展2：居中方法总结
四、CSS三大特性
1、继承性
2、层叠性
3、优先级1、继承性
· 特性：子元素有默认继承父元素样式的特点（子承父业）
· 可以继承的常见属性：
（1）color
（2）font-style、font-weight、font-size、font-family
（3）text-indent、text-align
（4）line-height
（5）…可通过调试工具判断样式是否可以继承- 1
拓展1 继承的应用
· 好处：可以在一定程度上减少代码
· 常见应用场景：
（1）可以直接给ul设置list-style：none，从而取出列表默认的小圆点样式
（2）直接给body标签设置统一的font-size，从而统一不同浏览器默认文字的大小拓展2 继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
· a标签的color会继承失效
· h系列标签的font-size会继承失效
· div的高度不能继承，但是宽度有类似于继承的效果2、层叠性
（1）特性
· 给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上
· 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效
（2）注意点
当样式冲突时，只有当选择器优先级相同时，才能通过叠层性判断结果3、优先级
3.1 单个符号的优先级
（1）特性
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
（2）优先级公式
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
（3）注意点
· !important写在属性值的后面，分号的前面！
· !important不能提升继承的优先级，只要是继承优先级最低！
· 实际开发中不建议使用!importantDOCTYPE 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>Documenttitle> <style> /* 7、！important 最强外挂 */ p { color: purple !important; } /* 5、id选择器 */ #one { color: aqua; } /* 4、类选择器 */ .son { color: yellow; } /* 3、标签选择器 */ p { color: blue; } /* 2、通配符选择器 */ * { color: green; } /* 1、继承 */ .father { color: red; } style> head> <body> <div class="father"> <p class="son" id="one" style="color: pink">我是一个标签p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
3.2 权重叠加计算
（1）场景
如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
（2）权重计算公式
（3）比较规则
· 先比较第一级数字，如果比较出来了，之后的统统不看
· 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
· …
· 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）注意点：！important如果不是继承，则权重最高- 1
拓展1 权重叠加计算案例
（1）权重计算题解题步骤
· 先判断选择器是否能直接选中标签，如果不能直接选中->是继承，优先级最低->直接pass
· 通过权重计算公式，判断谁权重最高
（2）注意点
实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况拓展2 差错流程
五、综合案例
1、综合案例-普通导航
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>Documenttitle> <style> a { width: 80px; height: 50px; background-color: red; /* 文字颜色 */ color: white; /* 需要可以设置宽高，还需要一行显示多个 */ display: inline-block; /* 去除a标签的下划线 */ text-decoration: none; /* 让内部文字水平居中 */ text-align: center; /* 让内部的文字垂直居中 */ line-height: 50px; } a:hover{ background-color: #ffa500; } style> head> <body> <a href="#">导航1a> <a href="#">导航2a> <a href="#">导航3a> <a href="#">导航4a> <a href="#">导航5a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
-
相关阅读:
Go语言GC机制超详细
Android组件通信——ActivityGroup（二十五）
Fragment使用总结
javaWeb项目-邮票鉴赏系统功能介绍
Redis学习
【flask扩展】Flask-Migrate的使用
MYSQL常用sql
【算法篇-数论】快速幂
观测云与 TDengine 达成深度合作，优化企业上云体验
自定义Docker镜像--Jupyterlab
- 原文地址：https://blog.csdn.net/NYX_UNI/article/details/127452116
