前端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，一经查实，立即删除！

相关文章

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…
阅读更多...
安装维修制氮设备的注意指南

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

制氮设备在许多工业领域都发挥着重要作用&#xff0c;无论是确保生产过程中的氮气供应&#xff0c;还是维持设备的稳定运行&#xff0c;正确的安装和维修都是关键。以下是一些重要的注意事项&#xff0c;帮助您顺利完成制氮设备的安装与维修工作。 一、安装注意事项 (一)选址与…
阅读更多...
VUE自定义新增、复制、删除dom元素

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

功能需求&#xff0c;能灵活新增或删除一个dom元素&#xff0c;在此dom元素中还存在能灵活新增、删除的dom元素。实现后功能图如下&#xff1a; 点击新增策略&#xff0c;能新增整个策略dom 实现思路&#xff1a;定义一个数量和一个数组&#xff0c;然后使用循环遍历展示内容&a…
阅读更多...
将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…
阅读更多...
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…
阅读更多...
「媒体邀约」天津媒体资源？媒体邀约宣传报道

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

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体宣传加速季&#xff0c;100万补贴享不停&#xff0c;一手媒体资源&#xff0c;全国100城线下落地执行。详情请联系胡老师。 天津拥有丰富的媒体资源&#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…
阅读更多...
C++ 语法

C++ 语法

一、头文件与源文件 头文件用于声明函数，类似于java中service层的接口； 源文件用于实现头文件函数，相当于java中serviceImpl层的实现类； 定义接口 实现接口 使用接口 二、指针概述 定义与使用 定义一个指针p用于存a变量的内存地址，即指针就是地址； 解引用可以获取或修改…
阅读更多...
40岁以上的中年人很难找到工作

40岁以上的中年人很难找到工作

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 你们有没有发现&#xff0c;90%的40岁以上的中年人&#xff0c;为了多挣钱&#xff0c;几乎除了吃饭和睡觉之外&#xff0c;都在拼命加班劳作&#xff0c;只要一停下来&#xff0c;心里就有一种内疚感&#xff0c;…
阅读更多...
【Elasticsearch】Elasticsearch动态映射与静态映射详解

【Elasticsearch】Elasticsearch动态映射与静态映射详解

文章目录 &#x1f4d1;前言一、Elasticsearch 映射概述1.1 什么是映射&#xff1f;1.2 映射的分类 二、动态映射2.1 动态映射的定义2.2 动态映射的优点2.3 动态映射的缺点2.4 动态映射的应用场景2.5 动态映射的配置示例 三、静态映射3.1 静态映射的定义3.2 静态映射的优点3.3 …
阅读更多...
机器学习简介--NLP(二)

机器学习简介--NLP(二)

机器学习简介 机器学习简介机器学习例子机器学习分类有监督学习有监督学习的应用 无监督学习 机器学习常见概念数据集k折交叉验证过拟合欠拟合评价指标 机器学习简介 机器学习例子 问题&#xff1a; 2&#xff0c;4&#xff0c;6&#xff0c;8&#xff0c;&#xff1f;&#…
阅读更多...
【CV炼丹师勇闯力扣训练营 Day22：§7 回溯1】

【CV炼丹师勇闯力扣训练营 Day22：§7 回溯1】

CV炼丹师勇闯力扣训练营 代码随想录算法训练营第22天 回溯法其实就是暴力查找,回溯的本质是穷举&#xff0c;穷举所有可能&#xff0c;然后选出我们想要的答案&#xff0c;一般可以解决如下几种问题&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合切割…
阅读更多...
Ubuntu18.04新安装--无网络连接、重启黑屏解决教程

Ubuntu18.04新安装--无网络连接、重启黑屏解决教程

一、安装Ubuntu Ubuntu安装需要U盘作为启动盘&#xff0c;在目前教新的电脑中选中GPT作为分区&#xff0c;制作启动盘&#xff0c;其中在安装双系统Ubuntu时&#xff0c;以自定义格式作为存储空间。详细安装过程以以及如何分区请参考下列链接&#xff1a;内含详细安装过程&…
阅读更多...
VS Code 常用快捷键大全

VS Code 常用快捷键大全

Visual Studio Code 是目前最好用的代码编辑器之一。它提供了许多开箱即用的功能以及丰富的第三方扩展&#xff0c;本文将分享常用的 VS Code 快捷键&#xff0c;助你提高开发效率&#xff01; 代码导航 跳转指定行&#xff1a;快速跳转到文件中的指定行&#xff0c;只需按下快…
阅读更多...
Unity 数据持久化【PlayerPrefs】

Unity 数据持久化【PlayerPrefs】

1、数据持久化 文章目录 1、数据持久化PlayerPrefs基本方法1、PlayerPrefs概念2、存储相关3、读取相关4、删除数据思考 信息的存储和读取 PlayerPrefs存储位置1、PlayerPrefs存储的数据在哪个位置2、PlayerPrefs 数据唯一性思考 排行榜功能 2、Playerprefs实践1、必备知识点-反…
阅读更多...
解决 Layout Inspector无法查看Component Tree 布局层级信息 | Android Studio Koala

解决 Layout Inspector无法查看Component Tree 布局层级信息 | Android Studio Koala

问题描述 Tool -> Layout Inspector 显示下图&#xff0c;无法生成.li文件查看Component Tree&#xff0c;变成实时的Preview并功能点击操作&#xff0c;跟模拟器一样。 原因&#xff1a;默认勾选了"Enable embedded Layout Inspector"&#xff0c;启用了嵌入式…
阅读更多...
SpringCloud进阶篇

SpringCloud进阶篇

文章目录 网关快速入门创建模块引入依赖修改启动类配置路由路由过滤(一般不用) 自定义GlobalFilter登录校验登录校验过滤器 微服务获取用户信息保存用户信息到请求头拦截器获取用户信息 OpenFeign传递用户信息配置共享添加共享配置拉取共享配置 配置热更新添加配置到Nacos配置热…
阅读更多...
数据结构初阶 堆的问题详解(三)

数据结构初阶 堆的问题详解(三)

题目一 4.一棵完全二叉树的节点数位为531个&#xff0c;那么这棵树的高度为&#xff08; &#xff09; A 11 B 10 C 8 D 12 我们有最大的节点如下 假设最大高度为10 那么它的最多节点应该是有1023 假设最大高度为9 那么它的最多节点应该是 511 所以说这一题选B 题目二 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023