前端Web开发HTML5+CSS3+移动web视频教程 Day4 CSS 第2天

P44 - P

四个知识点：

  • 复合选择器

  • CSS特性

  • 背景属性

  • 显示模式

复合选择器

复合选择器仍然是选择器，只要是选择器，作用就是找标签。复合选择器就是把基础选择器进行组合使用。组合了之后就可以在大量的标签里面更快更精准地找标签了。找到了标签，也就能设置样式了。

在这里插入图片描述

后代选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01-后代选择器</title><style>div span {color: red;}</style>
</head>
<body><span>span 标签</span><div><span>这是 div 的儿子 span</span><p><span>这里是 div 的孙子 span</span></p></div>
</body>
</html>

效果：

在这里插入图片描述

子代选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02-子代选择器</title><style>div>span {color: red;}</style>
</head><body><span>span 标签</span><div><span>这是 div 的儿子 span</span><p><span>这里是 div 的孙子 span</span></p></div>
</body></html>

效果：

在这里插入图片描述

并集选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03-并集选择器</title><style>div,p,span {color: red;}</style>
</head><body><div>div 标签</div><p>p 标签</p><span>span 标签</span>
</body></html>

效果：

在这里插入图片描述

交集选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04-交集选择器</title><style>p.box {color: red;}</style>
</head><body><p class="box">p 标签，使用了类选择器 box</p><p>p 标签</p><div class="box">div 标签，使用了类选择器 box</div>
</body></html>

效果：

在这里插入图片描述

伪类选择器

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05-伪类选择器</title><style>/* 任何标签都可以设置鼠标悬停状态 */a:hover {color: orange;}.box:hover:hover {color: red;}</style>
</head>
<body><a href="#">a 标签，超链接</a><div class="box">div 标签</div>
</body>
</html>

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06-拓展-超链接伪类</title><style>/* a:link {color: skyblue;}
/* 浏览器有缓存，一旦点击后就保持为visited的颜色，除非清空缓存，否则将看不见link的颜色 */a:visited {color: orange;}a:hover {color: red;}/* 鼠标左键点击下去，不要松开，就能看见active的颜色 */a:active {color: black;}*//* 工作中，一般都是用一个 a 标签统一设置样式，唯独把 hover 状态单独设置 */a {color: red;}a:hover {color: blue;}</style>
</head><body><a href="#">a 标签，测试伪类。</a>
</body></html>

CSS特性

CSS 特性就是 CSS 属性和选择器的特点。了解了这些特点之后，可以有助于减少代码量，还能根据对应的特点去解决代码当中的问题。

CSS 特性有三大类：

  • 继承性

  • 层叠性

  • 优先级

在这里插入图片描述

继承性

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07-CSS特性-继承性</title><style>body {font-size: 30px;color: red;font-weight: 700;}</style>
</head>
<body><div>div 标签</div><p>p 标签</p><span>span 标签</span><!-- 嵌套的标签也能继承 --><p><span>嵌套的标签</span></p><!-- 有默认属性时，则不继承，保留自己的属性 --><!-- 自己没有的属性，就继承，比如这里继承了加粗和字号两个属性 --><a href="#">a 标签</a><!-- 标题有自己的字号，就没有继承字号 --><h1>h1 标签</h1>
</body>
</html>

效果：

在这里插入图片描述

层叠性

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>08-CSS特性-层叠性</title><style>div {color: red;/* 不生效 */font-size: 30px;/* 生效 */}div {color: green;/* 生效，相同属性进行覆盖 */font-family: 楷体;/* 生效 */}</style>
</head><body><div>div 标签</div>
</body></html>

效果：

在这里插入图片描述

优先级

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09-CSS特性-优先级</title><style>/* 给一个标签加了多个选择器 *//* 标签选择器 */div {color: red;}/* 类选择器 */.box {color: green;}</style>
</head><body><div class="box">div 标签</div>
</body></html>

在这里插入图片描述

!important 是提权功能，可以把优先级提高到最高。它是加到 CSS 属性身上。希望哪个属性生效，就把 !important 加到哪个 CSS 属性身上。

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09-CSS特性-优先级2</title><style>div {color: green;}* {color: red !important;}.box {color: blue;}#test {color: orange;}</style>
</head>
<body><div class="box" id="test" style="color: purple;">div 标签</div>
</body>
</html>

Emmet 写法

在这里插入图片描述

背景属性

比如背景颜色、背景图片。

在这里插入图片描述

背景图

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>12-背景图</title><style>div {width: 400px;height: 400px;background-image: url(./images/1.png);}</style>
</head>
<body><div>div 标签</div>
</body>
</html>

效果：

在这里插入图片描述

背景图平铺方式

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>13-背景图平铺方式</title><style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>

效果：

在这里插入图片描述

背景图位置

在这里插入图片描述

背景图缩放

在这里插入图片描述

背景复合属性

在这里插入图片描述

显示模式

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

显示模式

显示模式就是标签的显示方式。比如有的标签可以独占一行，有的标签可以和别的标签共占一行，这就是显示模式的特点之一。

了解了标签的显示模式，就可以帮助我们在选择标签时选择得更加合适了。

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

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

相关文章

redis实现简单分布式锁

redis实现简单分布式锁

1.redisTemplate实现简单分布式锁 AutowiredRedisTemplate redisTemplate;/*** redis分布式锁演示案例&#xff0c;此处使用redisTemplate* param stockId 此处以扣减库存为例子&#xff0c;stockId代表要扣减库存的商品id,库存数据是提前存在redis的&#xff0c;并和数据库进…
阅读更多...
Qt中线程的使用

Qt中线程的使用

目录 1 .QThread重要信号和函数 1.1 常用共用成员函数 1.2信号和槽函数 1.3静态函数 1.4 任务处理函数 2.关于QThread的依附问题&#xff1a; 3.关于connect连接 4.QThread的使用 5.线程池QThreadPool 5.1. 线程池的原理 5.2&#xff0e;QRunable类 5.3. QThreadPoo…
阅读更多...
Java8新特性常见用法

Java8新特性常见用法

Java8新特性 示例类Stream API 使用示例forEach：遍历Stream：创建流map：转换元素filter：过滤元素collect（收集元素） 和 Collectors（分组、连接）sorted 和 comparing（搭配排序）toMap：转换Map元素collectingAndThen：过滤掉相同数据toUpperCase：转大写distinct：去重c…
阅读更多...
安装维修制氮设备的注意指南

安装维修制氮设备的注意指南

制氮设备在许多工业领域都发挥着重要作用&#xff0c;无论是确保生产过程中的氮气供应&#xff0c;还是维持设备的稳定运行&#xff0c;正确的安装和维修都是关键。以下是一些重要的注意事项&#xff0c;帮助您顺利完成制氮设备的安装与维修工作。 一、安装注意事项 (一)选址与…
阅读更多...
独孤思维：你自己都不相信的副业，怎么能赚钱

独孤思维：你自己都不相信的副业，怎么能赚钱

要明白&#xff0c;你做副业的目的是什么&#xff1f; 如果你打心眼里&#xff0c;看不上这个项目&#xff0c;或者心不甘情不愿的被动推进项目的实操。 那么我建议你直接放弃。 不要不情愿地去做。 不要当成任务去完成。 如果抱着这份心态去做副业。 你的副业&#xff0…
阅读更多...
VUE自定义新增、复制、删除dom元素

VUE自定义新增、复制、删除dom元素

功能需求&#xff0c;能灵活新增或删除一个dom元素&#xff0c;在此dom元素中还存在能灵活新增、删除的dom元素。实现后功能图如下&#xff1a; 点击新增策略&#xff0c;能新增整个策略dom 实现思路&#xff1a;定义一个数量和一个数组&#xff0c;然后使用循环遍历展示内容&a…
阅读更多...
一种特殊的二叉树 哈夫曼树（Huffman Tree）

一种特殊的二叉树 哈夫曼树（Huffman Tree）

哈夫曼树（Huffman Tree）是一种特殊的二叉树，它在信息编码领域有着广泛的应用，特别是在数据压缩技术中。下面我将通过图文结合的方式，详细介绍哈夫曼树的概念、构建方法以及应用场景。 哈夫曼树的概念 哈夫曼树是一种特殊的二叉树，由David Huffman于1952年提出。它主要用…
阅读更多...
将iStoreOS部署到VMware ESXi变成路由器

将iStoreOS部署到VMware ESXi变成路由器

正文共&#xff1a;888 字 19 图&#xff0c;预估阅读时间&#xff1a;1 分钟 前面把iStoreOS部署到了VMware workstation上&#xff08;将iStoreOS部署到VMware Workstation&#xff09;。如果想把iStoreOS直接部署到ESXi上&#xff0c;你会发现转换镜像不能直接生成OVF或者OV…
阅读更多...
React Navigation 和 Expo Router

React Navigation 和 Expo Router

React Navigation 是 React Native 社区最常用的导航库&#xff0c;其具有高度可定制性且性能良好的特性。它提供了一系列导航器&#xff08;如堆栈导航器、标签导航器、抽屉导航器等&#xff09;&#xff0c;可以满足绝大多数的页面导航需求。 Expo Router 是 Expo 官方最新发…
阅读更多...
css+js实现导航栏色块跟随滑动+点击后增加样式

css+js实现导航栏色块跟随滑动+点击后增加样式

这篇文章&#xff0c;我给大家分享一个导航菜单的效果。用cssJS实现&#xff0c;效果如图&#xff1a; 本例实现效果&#xff1a;当鼠标移动到其他菜单项时&#xff0c;会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后&#xff0c;被点击的菜单名称文字字体会加粗。 现在&…
阅读更多...
《数字图像处理与机器视觉》案例四 基于分水岭算法的粘连物体的分割与计数

《数字图像处理与机器视觉》案例四 基于分水岭算法的粘连物体的分割与计数

一、引言 分水岭算法&#xff08;Watershed Algorithm&#xff09;&#xff0c;是一种基于拓扑理论的数学形态学的分割方法&#xff0c;其基本思想是把图像看作是测地学上的拓扑地貌&#xff0c;图像中每一点像素的灰度值表示该点的海拔高度&#xff0c;每一个局部极小值及其影…
阅读更多...
SpringBoot 集成Swagger在线接口文档 接口注解

SpringBoot 集成Swagger在线接口文档 接口注解

介绍 Swagger接口文档是一种自动生成、描述、调用和可视化的RESTful风格Web服务接口文档的工具。它通过一系列的规范和自动化工具&#xff0c;极大地简化了后端开发人员与前端开发人员之间的协作。 依赖 <!--swagger--> <dependency><groupId>io.springfo…
阅读更多...
怎么办理固体废物处理处置工程乙级资质

怎么办理固体废物处理处置工程乙级资质

1. 准备工作 企业法人资格&#xff1a;确保企业具有独立法人资格。 注册资本&#xff1a;注册资本不少于100万元人民币。 社会信誉&#xff1a;企业需具有良好社会信誉。 人员配置&#xff1a; 至少配备14名专业技术人员&#xff0c;其中注册人员10名&#xff0c;非注册人…
阅读更多...
「媒体邀约」天津媒体资源？媒体邀约宣传报道

「媒体邀约」天津媒体资源？媒体邀约宣传报道

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体宣传加速季&#xff0c;100万补贴享不停&#xff0c;一手媒体资源&#xff0c;全国100城线下落地执行。详情请联系胡老师。 天津拥有丰富的媒体资源&#xff0c;利用这些资源进行有效…
阅读更多...
保护你的JavaScript项目：使用Yarn进行依赖审计

保护你的JavaScript项目：使用Yarn进行依赖审计

保护你的JavaScript项目&#xff1a;使用Yarn进行依赖审计 在当今快速发展的软件开发领域&#xff0c;依赖管理是项目成功的关键。Yarn&#xff0c;作为一个高效且可靠的JavaScript依赖管理工具&#xff0c;提供了强大的依赖审计功能来帮助开发者识别和修复安全漏洞。本文将详…
阅读更多...
ICMP协议详解及尝试用ping和tracert捕抓ICMP报文

ICMP协议详解及尝试用ping和tracert捕抓ICMP报文

一、ICMP协议 1.1、定义 ICMP&#xff08;Internet Control Message Protocol&#xff0c;互联网控制消息协议&#xff09;是一个支持IP层数据完整性的协议&#xff0c;主要用于在IP主机、路由器之间传递控制消息。这些控制消息用于报告IP数据报在传输过程中的错误&#xff0c…
阅读更多...
大气热力学（1）——理想气体

大气热力学（1）——理想气体

本篇文章源自我在 2021 年暑假自学大气物理相关知识时手写的笔记&#xff0c;现转化为电子版本以作存档。相较于手写笔记&#xff0c;电子版的部分内容有补充和修改。笔记内容大部分为公式的推导过程。 文章目录 1.0 本文所用符号一览1.1 理想气体的状态方程1.2 理想气体的压强…
阅读更多...
学会拥抱Python六剑客，提高编程效率

学会拥抱Python六剑客，提高编程效率

在Python语言中&#xff0c;有六个强大的工具&#xff0c;它们被称为"Python六剑客"。而Python六剑客指的是Python中常用的六种功能强大且灵活的工具&#xff0c;它们分别是“切片&#xff08;Slicing&#xff09;&#xff0c;推导列表&#xff08;List Comprehensio…
阅读更多...
C++ 语法

C++ 语法

一、头文件与源文件 头文件用于声明函数，类似于java中service层的接口； 源文件用于实现头文件函数，相当于java中serviceImpl层的实现类； 定义接口 实现接口 使用接口 二、指针概述 定义与使用 定义一个指针p用于存a变量的内存地址，即指针就是地址； 解引用可以获取或修改…
阅读更多...
Android SurfaceFlinger——创建EGLContext（二十五）

Android SurfaceFlinger——创建EGLContext（二十五）

前面文章我们获取了 EGL 的最优配置，创建了 EGLSurface 并与 Surface 进行了关联，然后还需要获取 OpenGL ES 的上下文 Context，这也是 EGL 控制接口的三要素（Displays、Contexts 和 Surfaces）之一。 1）getInternalDisplayToken：获取显示屏的 SurfaceControl 令牌（Token…
阅读更多...
最新文章

Copyright @ 2022~2023