HTML与CSS基础(四)—— CSS基础(选择器进阶、Emmet语法、背景属性、元素显示模式、三大特性)

news2024/12/23 19:08:08

一、选择器进阶

目标:能够理解 复合选择器 的规则,并使用 复合选择器 在 HTML 中选择元素

1. 复合选择器

1.1 后代选择器:空格

作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素
选择器语法: 选择器1 选择器2 { css }
结果:
• 在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式
注意点:
1. 后代包括:儿子、孙子、重孙子……
2. 后代选择器中,选择器与选择器之前通过 空格 隔开

1.2 子代选择器:>

作用:根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素
选择器语法: 选择器1 > 选择器2 { css }
结果:
• 在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
注意点:
1. 子代只包括:儿子
2. 子代选择器中,选择器与选择器之前通过 > 隔开

2. 并集选择器

作用:同时选择多组标签,设置相同的样式
选择器语法: 选择器1 , 选择器2 { css }
结果:
• 找到 选择器1 和 选择器2 选中的标签,设置样式
注意点:
1. 并集选择器中的每组选择器之间通过 , 分隔
2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3. 并集选择器中的每组选择器通常一行写一个,提高代码的可读性

3. 交集选择器

作用:选中页面中 同时满足 多个选择器的标签
选择器语法: 选择器1选择器2 { css }
结果:
• (既又原则)找到页面中 既 能被选择器1选中,又 能被选择器2选中的标签,设置样式
注意点:
1. 交集选择器中的选择器之间是 紧挨着的,没有东西分隔
2. 交集选择器中如果有标签选择器, 标签选择器必须写在最前面

4. hover伪类选择器

作用:选中鼠标悬停在元素上的状态,设置样式
选择器语法: 选择器:hover { css }
注意点:
1. 伪类选择器选中的元素的 某种状态

5. Emmet语法

作用:通过简写语法,快速生成代码
语法:
• 类似于刚刚学习的选择器的写法

复合选择器总结

二、背景相关属性

1. 背景颜色

属性名:background-color(bgc)
属性值:
• 颜色取值:关键字、rgb表示法、rgba表示法、十六进制……
注意点:
• 背景颜色默认值是 透明rgba(0,0,0,0) 、transparent
• 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置, 一般在布局中会习惯先给盒子设置背景颜色

2. 背景图片

属性名:background-image(bgi)
属性值: background-image : url('图片路径');
注意点:
• 背景图片中url中可以省略引号
• 背景图片 默认是在水平和垂直方向平铺
• 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是 不能撑开盒子

3. 背景平铺

属性名:background-repeat(bgr)
属性值:

4. 背景位置

属性名:background-position(bgp)
注意点:
• 方位名词取值和坐标取值可以混使用, 第一个取值表示水平第二个取值表示垂直
属性值:

5. 背景相关属性连写

属性名:background(bg)
属性值:
• 单个属性值的合写,取值之间以空格隔开
书写顺序:
• 推荐:background: color image repeat position
省略问题:
• 可以按照需求省略
• 特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写 background:url()
注意点
• 如果需要设置单独的样式和连写
• ① 要么把单独的样式写在连写的 下面
• ② 要么把单独的样式写在连写的 里面

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

需求:需要在网页中展示一张图片的效果?
方法一:直接写上img标签即可
• img标签是一个标签, 不设置宽高默认会以原尺寸显示
方法二:div标签 + 背景图片
• 需要 设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签

三、元素显示模式

目标:能够认识三种常见的 元素显示模式,并通过代码实现不同 元素显示模式 的转换

1. 块级元素

显示特点:
1. 独占一行(一行只能显示一个)
2. 宽度 默认是父元素的宽度高度默认由内容撑开
3. 可以设置宽高
代表标签:
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2. 行内元素

显示特点:
1. 一行可以显示多个
2. 宽度和高度 默认由内容撑开
3. 不可以设置宽高
代表标签:
a、span 、b、u、i、s、strong、ins、em、del……

3. 行内块元素

显示特点:
1. 一行可以显示多个
2. 可以设置宽高
代表标签:
input、textarea、button、select……
• 特殊情况: img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline

4. 元素显示模式转换

目的:改变元素默认的显示特点,让元素符合布局要求
语法:

5. 拓展1:HTML嵌套规范注意点

1. 块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等……
➢ 但是: p标签中不要嵌套div、p、h等块级元素
2. a标签内部可以嵌套任意元素
➢ 但是: a标签不能嵌套a标签

6. 拓展2:居中方法总结

四、CSS 特性

1. 继承性

特性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性( 文字控制属性都可以继承):
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ……
注意点:
• 可以通过调试工具判断样式是否可以继承
好处:可以在一定程度上 减少代码
常见应用场景:
1. 可以直接给 ul设置 list-style:none 属性,从而去除列表默认的小圆点样式
2. 直接给 body标签设置统一的font-size,从而统一不同浏览器默认文字大小

继承失效的特殊情况:
如果元素有浏览器默认样式,此时继承性依然存在,但是 优先显示浏览器的默认样式
1. a标签的color会继承失效
• 其实color属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
2. h系列标签的font-size会继承失效
• 其实font-size属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了

2. 层叠性

特性:
1. 给同一个标签设置 不同的样式 → 此时样式会 层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置 相同的样式 → 此时样式会 层叠覆盖 → 最终写在最后的样式会生效
注意点:
1. 当样式冲突时,只有当选择器 优先级相同时,才能通过层叠性判断结果

3. 优先级

特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点:
1. !important写在属性值的后面,分号的前面!
2. !important不能提升继承的优先级,只要是继承优先级最低!
3. 实际开发中不建议使用 !important 。

权重叠加计算

场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
权重叠加计算公式:(每一级之间不存在进位)
比较规则:
1. 先比较第一级数字,如果比较出来了,之后的统统不看
2. 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
3. ……
4. 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
注意点:!important如果不是继承,则权重最高!

拓展:权重叠加计算案例

权重计算题解题步骤:
1. 先判断选择器 是否能直接选中标签,如果不能直接选中 → 是继承,优先级最低 → 直接pass
2. 通过权重计算公式,判断谁权重最高
注意点:
• 实际开发中选择标签需要精准,尽量避免多个选择器同时选中一个标签的情况,不要自己难为自己

拓展:查错流程 (遇到样式出不来,要学会通过调试工具找错)

五、综合案例

1. 综合案例1-普通导航

2. 综合案例2-五彩导航

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/147383.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第二章JavaWeb基础学习路线

文章目录什么是Java WebJava Web基础的技术栈关于我们的客户端与服务端&#xff08;BS&#xff09;我们客户端的形式**PC端网页****移动端**服务端应用程序关于请求&#xff08;request&#xff09;和响应(response)类比生活中的请求和响应服务器中的请求和响应项目的逻辑构成架…

CSS权威指南(六)文字属性

1.缩进和行内对齐 &#xff08;1&#xff09;缩进文本&#xff08;text-indent&#xff09; text-indent属性把元素的第一行文本缩进指定的长度&#xff0c;缩进的长度可以可以是负值。这个属性通常用于缩进段落的第一行。text-indent作用于块级元素之上&#xff0c;缩进将沿着…

config:配置中心

Spring Cloud Config 为分布式系统中的外部配置提供服务器端和客户端支持。使用 Config Server&#xff0c;您可以集中管理所有环境中应用程序的外部配置。 Spring Cloud Config就是一个配置中心&#xff0c;所有的服务都可以从配置中心取出配置&#xff0c;而配置中心又可以从…

mmap(内存映射)、sendfile() 与零拷贝技术

内存映射&#xff08;Memory-mapped I/O&#xff09;是将磁盘文件的数据映射到内存&#xff0c;用户通过修改内存就能修改磁盘文件。 RocketMQ为什么快&#xff1f;kafka为什么快&#xff1f;什么是mmap&#xff1f;这些问题都逃不过一个点&#xff0c;就是零拷贝。 虽然还有其…

电脑不能开机的几个常见原因

现在手机已经将电脑取代了&#xff0c;用电脑的越来越少&#xff0c;因为一些原因上网课的多了起来&#xff0c;大家都将放置几年的电脑搬了出来&#xff0c;开不开机的大有人在&#xff0c;由于机器闲置很久大多都出现了各种各样的故障和问题&#xff0c;在这里总结了电脑台式…

C语言:浮点型存储方式

浮点型存储方式 任意一个二进制浮点数V可以表示成下面的形式 (-1)^S *M *2^E 1&#xff08;S符号位&#xff09; 8&#xff08;E阶码&#xff09; 23&#xff08;M尾码&#xff09;省略首位1 S&#xff1a;表示正负 只有0/1两个值 M&#xff1a;由浮点数转化成二进制数表示 在…

4.7、IPv4 数据报的首部格式

固定部分&#xff1a;每个 IP 数据报首部都必须包含的内容 某些 IP 数据报的首部除了包含 202020 字节的固定部分外&#xff0c;还包含一些可选的字段来增加 IP 数据报的功能 IP 数据报的首部常以 323232 个比特为单位进行描述 图中的每一行都由 323232 个比特&#xff08;也…

小波分析——4.使用小波对信号成分进行分析

文章目录首先创建一个包含多频率成分的信号然后我们用数学实现一个墨西哥草帽小波然后我们开始对原始信号进行处理吧接下来可以把信号成分进行绘制在前面的章节里已经介绍过小波的理论、公式等知识点&#xff0c;现在我们来看看如何用小波来实现对复杂信号的成分分析。 在我们…

性能优化系列之『HTML5 离线化:主流的技术实现方案有哪些?』

文章の目录一、离线包类型二、离线包架构三、离线包下载四、离线包运行模式五、大厂离线包方案写在最后一、离线包类型 全局离线包&#xff1a;包含公共的资源&#xff0c;可供多个应用共同使用私有离线包&#xff1a;只可以被某个应用单独使用 二、离线包架构 三、离线包下载…

Fairness in Recommendation: A Survey 阅读笔记

论文链接 搁置了许久的毕设&#xff0c;又要开始重新启航。 2022年的最后一段时间过得真是很崎岖&#xff0c;2023希望大家平安喜乐。 课设还未结束&#xff0c;但是毕设不能再拖&#xff0c;开工啦&#xff01;这又是一篇综述&#xff0c;有关推荐系统中的公平性&#xff0c;…

5.Isaac教程--创建Isaac应用

创建Isaac应用 本教程将指导您完成使用 Isaac SDK 创建机器人应用程序的过程&#xff0c;以视频输入的 OpenCV 边缘检测处理为例。 文章目录创建Isaac应用预安装显示相机源创建应用程序文件启用节点间通信配置组件创建 Bazel 构建文件运行应用程序查看相机源处理相机源添加边缘…

1.6日报

以redis为基础完成 addCacheData getCacheDataByUniqueId delCacheDataByUniqueId 并且测试通过。 升级getQRcodeAndScene接口&#xff0c;添加版本参数&#xff0c;实现“不同环境取不同小程序版本“功能 并添加扫码跳转页面功能。 遇到的问题及解决 加深对RequestBody…

性能优化系列之『HTTP-2 :升级HTTP-2的好处有哪些?如何升级?』

文章の目录一、HTTP/2 概念二、HTTP/2 优点三、HTTP/2 站点的优势四、在 Nginx 上启用 HTTP/21、升级 OpenSSL2、重新编译3、验证 HTTP/24、浏览器请求截图写在最后一、HTTP/2 概念 HTTP/2&#xff08;超文本传输协议第2版&#xff0c;最初命名为 HTTP 2.0&#xff09;&#x…

【Spring AOP】@Aspect结合案例详解(一): @Pointcut使用@annotation + 五种通知Advice注解

文章目录前言AOP与Spring AOPAspect简单案例快速入门一、Pointcutannotation二、五种通知Advice1. Before前置通知2. After后置通知3. AfterRunning返回通知4. AfterThrowing异常通知5. Around环绕通知总结前言 在微服务流行的当下&#xff0c;在使用SpringCloud/Springboot框…

分布式基础篇3——前端开发基础知识

前端技术对比一、ES61、简介2、什么是 JavaScript3、ES6新特性3.1 let3.2 const3.3 解构表达式3.4 字符串扩展3.5 函数优化3.6 对象优化3.7 map 和 reduce3.8 Promise3.9 模块化二、Vue1、MVVM 思想2、Vue 简介3、Vue 入门案例4、Vue 指令插值表达式v-text、v-htmlv-bindv-mode…

景区地图最短路径快速实现

1 前言以前粗略学习了一下在地图中实现最短路径&#xff0c;并在切图工具中实现了自动处理生成导航相关数据。https://blog.csdn.net/bq_cui/article/details/86795213最近发现工具实现的结果&#xff0c;错误一大堆。这次再详细捋一捋整个步骤&#xff0c;感兴趣的同学可以试一…

ctemplate 的安装和使用

ctemplate 用于linux下的web开发&#xff0c;可以动态生成一个html网页&#xff0c;这里的 “ 动态 ” 指的是网页的数据不是固定的&#xff0c;可以使用变量来填充网页内容。 目录 1、下载ctemplate 2、安装 ctemplate 3、使用ctemplate库 1、下载ctemplate 可以在gite…

前端对接微信公众号网页开发流程,授权对接

前面讲到 前端对接微信公众号网页开发流程&#xff0c;前期配置&#xff0c;本篇文章主要详细介绍关于公众号的授权对接。 一、引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx.qq.com/open/js/jweixin-1.6.0.js如需进一步提升服务稳定性&#xff0…

如何在windows上使用VMware安装macOS虚拟机

如何在windows上使用VMware安装macOS虚拟机一、准备工作1.1 安装 VMware1.2 下载macOS的安装包1.3 下载VMware虚拟机解锁安装苹果系统工具二、解锁VMware支持macOS安装2.1 关闭已经打开的VMware软件2.2 安装VMware Workstation Unlocker三、VMware创建虚拟机3.1 解压缩macOS的安…

【蓝桥杯】X 进制减法

难点一&#xff1a;base base * s[i] % mod;//***当前位乘以x&#xff0c;x要*s[i],一直要乘到个位的进制难点二&#xff1a;当当前该位的的进制位&#xff0c;为max(max(a[i]1, b[i]1), 2)的时候&#xff0c;结果最小ACcode:#include<iostream>using namespace std;con…