CSS---复合选择器、元素显示模式和背景(三)

一、CSS的复合选择器

1.1 什么是复合选择器

  • 在CSS中,可以根据选择器的类型把选择器分为基础选择器复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

  • 复合选择器是由两个或多个基础选择器连写组成,它们共同作用于一个元素,没有空格分隔。这样可以更精确地指定你想要样式化的HTML元素。

  • 常用的复合选择器包括:后代选择器子选择器并集选择器伪类选择器等。


1.2 后代选择器(重要)

  • 后代选择器是CSS中一种用来选择元素的子元素(直接或间接)的方法。它通过空格分隔的方式来选择特定元素的所有后代。后代选择器允许你定位到某个特定父元素下的所有特定类型的子元素,而不论这些子元素在层级中的深度如何。

语法:

上级元素 下级元素{样式声明
}

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器</title><style>.container  p  {color: red;}</style>
</head>
<body><div class="container"><p>我会变红色。</p><div><p>我也会变红色。</p></div>
</div></body>
</html>

1.3 子选择器(重要)

  • 子选择器(也称为直接子选择器)是CSS中的一种选择器,用于选择所有直接子元素,也就是只选择那些直接与父元素相邻的元素,而不包括那些更深层次的后代元素。这种选择器允许开发者更精确地指定应用样式的HTML元素层级。

语法:

parent > child {样式声明
}

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子选择器</title><style>.container > p  {color: red;}</style>
</head>
<body><div class="container"><p>只有我会变红色。</p><div><p>我不变。</p></div>
</div></body>
</html>

1.4 并集选择器(重要)

  • 并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。

语法:

selector1, selector2, selector3 {样式声明
}

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>并集选择器</title><style>h1, h2, h3 {color: red;}</style>
</head>
<body><h1>我是h1</h1><h2>我是h2</h2><h3>我是h3</h3><h4>我是h4</h4>
</body>
</html>

1.5 伪类选择器

  • 伪类选择器是CSS中的一种特殊类型的选择器,用于选择HTML元素的特定状态而不是基于元素的固有属性。伪类能够描述一个元素的特定状态,比如当鼠标悬停在元素上时,或者当元素被选中或聚焦时。它们通常用来添加一些特殊效果或响应用户的交互,而无需添加额外的类或ID。
  • 伪类选择器有很多,比如有链接伪类、结构伪类等。

1.5.1 链接伪类选择器

a:link      /* 选择所有未被访问的链接 */
a:visited   /* 选择所有已被访问的链接 */
a:hover     /* 选择鼠标指针位于其上的链接 */
a:active    /* 选择活动链接(鼠标按下未弹起的链接) */
  • 为了确保生效,请按照顺序声明,:link :visited :hover :active,否则不会生效

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* a:link 把没有访问过的链接选出来 */a:link{color: red;}</style>
</head>
<body><a href="#">百度</a>
</html>

1.5.2 focus 伪类选择器

  • :focus伪类选择器用于选取获得焦点的表单元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 把获得焦点的input表单元素选取出来*/input:focus{background-color: red;}</style>
</head>
<body><input type="text"><input type="text"><input type="text">
</body>
</html>

1.6 复合选择器总结

在这里插入图片描述




二、CSS的元素显示模式

2.1 什么是元素显示模式

  • 元素的显示模式(display mode)指的是元素如何在页面布局中被展示和排列的方式。
  • HTML元素一般分为块元素行内元素两种类型

2.2 块元素

  • 常见的块元素有 <h1>~<h6><p><div><ul><ol><li>等,其中<div`>标签是最典型的块元素。
    在这里插入图片描述

注意:

  • 文字类的元素内不能使用块级元素
  • <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
  • 同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

2.3 行内元素

  • 常见的行内元素有<a><strong><b><em><i><del><s><ins><u><span>等,其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

在这里插入图片描述

注意:

  • 链接里面不能再放链接
  • 特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

2.4 行内块元素

  • 在行内元素中有几个特殊的标签—— img /<input /><td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点:

  1. 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)。
  2. 默认宽度就是它本身内容的宽度(行内元素特点)。
  3. 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

2.5 元素显示模式总结

在这里插入图片描述


2.6 元素显示模式转换

  • 特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另一个模式的特性。

  • 例如,一个元素默认可能是块级元素,但在某些情况下,你可能希望它表现为行内元素或行内块级元素。你可以通过CSS轻松实现这种转换

  • 转换为块级元素:display: block;

  • 转换为行内元素:display: inline;

  • 转换为行内块:display: inline-block;

示例:
假设想要增加链接<a>的触发范围,<a>因为是行内元素,不可以设置宽度和高度,这时可以通过display: block;<a>标签转换为块级元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>a {width: 150px;height: 50px;background-color: red;/* 把行内元素a,转换为 块级元素 */display: block;}</style>
</head>
<body><a href="#">百度</a>
</body>
</html>

2.7 一个小技巧 单行文字垂直居中的代码

CSS 没有给我们提供文字垂直居中的代码,这里我们可以使用一个小机器来实现。

  • 解决方案:让文字的行高等于盒子的高度,就可以让文字在盒子内垂直居中

2.8 单行文字垂直居中的原理

在这里插入图片描述

2.9 简洁版小米侧边栏案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>a {display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;line-height: 40px;}a:hover {background-color: #ff6700;}</style>
</head>
<body><a href="">手机 电话卡</a><a href="">电视 盒子</a><a href="">笔记本 平板</a><a href="">出行 穿戴</a><a href="">智能 路由器</a><a href="">健康 儿童</a><a href="">耳机 音响</a></body>
</html>



三、CSS的背景

  • 通过CSS背景属性,可以给页面元素添加背景样式
  • 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

3.1 背景颜色

  • background-color 属性定义了元素的背景颜色
  • 一般情况下元素背景颜色默认值时 transparent(透明)

语法:background-color:颜色值;


3.2 背景图片

  • background-image属性描述了元素的背景图像。实际开发常见于log或者一些装饰性的小图片或者是超大的背景图片,有点是非常便于控制位置。

语法:background-image: none | url(地址)

在这里插入图片描述


3.3 背景平铺

  • 如果需要在HTML页面上对背景图像进行平铺,可以使用background-repeat属性。

语法:background-repeat: repeat | no-repeat | repeat-x | repeat-y

  • repeat:背景图像在纵向和横向上平铺
  • no-repeat:背景图像不平铺
  • repeat-x :背景图像在横向上平铺
  • repeat-y:背景图像在纵向平铺

3.4 背景图片位置

  • 在CSS中,背景图片的位置由 background-position 属性控制,这个属性设置背景图像的起始位置。通过精确控制背景图像在元素内的位置,可以实现更细致的设计效果。

background-position 属性的使用:

background-position 的值可以使用关键词、百分比或具体的长度单位(如像素或em)。关键词包括 top、bottom、left、right、center 等,用于描述图像相对于容器的位置。

常用的值及含义:

  • 关键词:例如 top left、bottom right、center center 等。第一个词表示垂直位置,第二个词表示水平位置。
  • 百分比:background-position: 50% 75%。第一个百分比控制水平位置,第二个百分比控制垂直位置,0% 0% 是容器的左上角,100% 100% 是右下角。
  • 长度单位:如 background-position: 10px 20px。第一个值是水平位置,第二个值是垂直位置,正值表示从左上角向右和向下的偏移。

3.5 背景图片固定(背景附着)

background-attachment 属性设置背景图像是否固定或随着页面滚动。

语法:background-attachment: scroll | fixed

在这里插入图片描述


3.6 背景复合写法

为了简介背景属性的代码,我们可以将这些属性合并简写在同一个属性background中。从而节约代码量。

当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;


3.7 背景色半透明

CSS3为我们提供了背景颜色半透明效果

background: rgba(0, 0, 0, 0.3)

  • 最后一个参数是alpha透明度,取值范围在0~1之间
  • 我们习惯把0.3的0省略掉,写为background: rgba(0, 0, 0, .3)
  • 注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响。

3.8 背景总结

在这里插入图片描述

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

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

相关文章

SpringBoot3和SpringBoot2分别整合knife4j(openApi)

文章目录 一、SpringBoot2进行整合knife4j1.1 导入依赖1.2 配置knife4j 配置文件1.3 可以在接口上配置 注解进行信息的配置 二、SpringBoot3 整合kinfe4j(openApi)2.1 导入依赖2.2 yaml配置文件2.3 swagger初始化配置2.4 创建接口 一、SpringBoot2进行整合knife4j 1.1 导入依赖…

【云原生】kubernetes核心组件

引言&#xff1a; Kubernetes 是为运行分布式集群而建立的&#xff0c;分布式系统的本质使得网络成为 Kubernetes 的核心和必要组成部分&#xff0c;了解 Kubernetes 网络模型可以使你能够正确运行、监控和排查应用程序故障。 一、Kubernetes的核心组件 1.1、Master组件 1.1.…

基于Springboot+Vue的Java项目-农产品直卖平台系统开发实战(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

Kubernetes之Headless Services

Kubernetes中的Headless Services&#xff08;无头服务&#xff09;是一种特殊类型的服务&#xff08;Service&#xff09;定义&#xff0c;它不提供传统意义上的负载均衡和集群IP地址分配。在无头服务中&#xff0c;spec.clusterIP 字段被显式设置为None &#xff0c;Kubernet…

可道云teamOS企业网盘实用插件介绍:实时在线流程图编辑与分享,用在线流程图打造数字化工作流程

在使用企业网盘用于日常办公的情况下&#xff0c;有一些实用的在线小工具能为团队效率和协作带来一定的提升。 今天要给大家介绍的可道云teamOS的在线画流程图&#xff0c;是很值得介绍的一个在线工具。 在线流程图&#xff1a;直观展示&#xff0c;高效便捷 以往我们想要梳理…

FANUC机器人单轴零点标定时提示无法执行零点标定,由于重力补偿已启用,所有机器人轴的脉冲计数必须有效

FANUC机器人单轴零点标定时提示无法执行零点标定,由于重力补偿已启用,所有机器人轴的脉冲计数必须有效 首先,机器人由于长时间断电未使用,6个轴的编码器数据全部丢失,上电后报警SRVO-062, 有关SRVO-062故障报警的相关内容可参考以下链接: FANUC机器人SRVO-062报警原因分…

LeetCode 2391. 收集垃圾的最少总时间

Problem: 2391. 收集垃圾的最少总时间 问题分解 我们将这个问题分解为以下几个小问题&#xff1a; 计算每种垃圾&#xff08;金属、纸、玻璃&#xff09;在每个房子中的数量。确定每种垃圾车最后到达的房子。计算每种垃圾车行驶的总时间。计算每种垃圾车收拾垃圾的总时间。返…

SQLite 语法大全

SQLite EXPLAIN 语句&#xff1a; EXPLAIN INSERT statement...; or EXPLAIN QUERY PLAN SELECT statement...; SQLite GLOB 子句&#xff1a; SELECT column1, column2....columnN FROM table_name WHERE column_name GLOB { PATTERN }; SQLite GROUP BY 子句&#xff1…

journalctl参数详解

journalctl 是 Systemd 日志管理工具&#xff0c;用于查看、查询和管理 Systemd 系统日志。 #-x: 详细模式&#xff08;Verbose&#xff09;。这个选项会使 journalctl 输出完整的日志消息&#xff0c;包括其原始结构&#xff0c;如嵌套的JSON消息、未展开的环境变量等。这对于…

Scratch四级:第08讲 排序算法

第08讲 排序算法 教练&#xff1a;老马的程序人生 微信&#xff1a;ProgrammingAssistant 博客&#xff1a;https://lsgogroup.blog.csdn.net/ 讲课目录 常考的排序算法项目制作&#xff1a;“三个数排序”项目制作&#xff1a;“成绩查询”项目制作&#xff1a;“排序”项目制…

单片机智能灯控制系统源程序仿真原理图与论文全套资料

目录 1、设计描述 2、仿真图 3、程序 4、资料内容 资料下载地址&#xff1a;单片机智能灯控制系统源程序仿真原理图与论文全套资料下载 1、设计描述 设计了一款智能控制系统。 AT89C51LCD1602DS1302按键LED组成了这样一个完整的设计。 P2.0-P2.3 4个LED等代表庭院内的4…

计算机视觉——Opencv blobFromImage与torchvision实现数据标准化

1.blobFromImage blobFromImage 是 OpenCV 的深度神经网络&#xff08;DNN&#xff09;模块中的一个函数&#xff0c;它用于将图像转换为深度学习模型所需的输入格式&#xff0c;主要是对传入的图像进行的转换包括图像尺寸调整、均值减法、缩放等预处理步骤&#xff0c;以便图…

架构设计之学新而知故

缘由 因为一些特殊的机缘&#xff0c;接触到洋葱架构等一些新架构设计概念。 尝试理解了一段时间&#xff0c;就想简单梳理下对它们的理解&#xff0c;以达到学新而知故 &#x1f603; 信息增益 以前计算机专业并不设置通信领域的信息论的专业课程&#xff0c;但是&#xf…

输出指定日期区间内的所有天、周、月

hutool获取指定时间周几 Slf4j public class DateWeekUtil {public static List<String> getDateWeek(String startDateString, String endDateString, List<Integer> codeList) {List<String> dateInfoList new ArrayList<>();List<Integer> v…

工作随机:linux 挂载LVM管理模式的磁盘

文章目录 前言一、创建一个分区二、创建PV三、创建VG四、创建LV五、格式化并挂载目录 前言 在数据库管理中&#xff0c;常有比较头疼的问题&#xff0c;就是一段时间发展后我的磁盘空间不够了&#xff0c;想要扩容原有的目录很是头疼&#xff0c;那么LVM管理的优势就体现出来了…

JAVA学习-练习试用Java实现改写字符串

问题&#xff1a; 键盘录入一个字符串&#xff0c;将字符串中的大写改成小写&#xff0c;小写改成大写&#xff0c;数字改成。例如heLLO123,输出后为HEllo** 解答思路&#xff1a; import java.util.Scanner;public class StringConversion {public static void main(String…

单元测试之JUnit5知识点总结及代码示例

单元测试是软件开发过程中的一种验证手段&#xff0c;它针对最小的可测试部分&#xff08;通常是函数或方法&#xff09;进行检查和验证。其实单元测试还是挺重要的&#xff0c;不过国内很多公司的项目其实并没有做好单元测试&#xff0c;或者根本就没做单元测试&#xff0c;原…

英语复习之英语形近词总结(四)

英语形近词总结复习第四部分&#xff1a; 单词 释义例句 genuine 英 /ˈdʒenjuɪn/ 美 /ˈdʒenjuɪn/ adj.真实的&#xff0c;真正的&#xff1b;诚恳的 1.Only genuine refugees can apply for asylum. 只有真正的难民才能申请政治避难。 《牛津词典》 2.This isnt a genui…

C++笔试强训day19

目录 1.小易的升级之路 2.礼物的最大价值 3.对称之美 1.小易的升级之路 链接 模拟就行&#xff0c;唯一可能是难点得就是gcd&#xff08;最大公约数&#xff09; #include <iostream> using namespace std; #define int long long const int N 1e5 10; int arr[N];…

儿童悬吊训练系统如何进行制动肌的动力训练

儿童悬吊训练系统进行制动肌的动力训练&#xff0c;可以按照以下步骤进行&#xff1a; 评估&#xff1a;首先&#xff0c;治疗师需要对儿童的制动肌进行评估&#xff0c;确定其稳定性和力量水平&#xff0c;从而制定合适的训练计划。 选择训练方式&#xff1a;根据评估结果&am…