当前位置： 首页 > news >正文

复合选择器,CSS特性,背景属性,显示模式(HTML)

news 文章来源：https://blog.csdn.net/m0_75035023/article/details/143515389 2025/5/16 5:23:17

目录

复合选择器,CSS特性,背景属性,显示模式知识点:

练习一:

练习二:

复合选择器,CSS特性,背景属性,显示模式知识点:


复合选择器:后代选择器 :父选择器 子选择器(中间用空格隔开)  eg:对div中的span进行设置,会对后代中的所有span都进行设置  选中所有后代(后代选择器.html)
          子代选择器: 父选择器>子选择器   只有儿子的同类选择器会产生变化(子代选择器.html)
          并集选择器: (相同的样式)  用逗号,隔开 最后一个没有(并集选择器.html)
          交集选择器:标签选择器写在前面 中间没有空格(交集选择器.html)
伪类选择器:选中某个状态
            鼠标悬停状态:选择器:hover(鼠标悬停状态.html),任何标签都可以设置鼠标悬停
            访问前:   :link
            访问后    :visited
            点击时    :active
CSS属性:子级可以继承父级的文字控制属性    如果标签有自己的样式,不继承父级的样式
        层叠性:  相同的选择器:相同的属性会覆盖:后者覆盖前者,不同的属性会叠加
        优先级: 选中标签的范围越大,优先级越低  通配符<标签<类选择器<id选择器<<行内样式<!important(提高优先权)
                (行内样式<div style="color:purple"></div>)  *{color:red !important}
                优先级叠加计算原则:(行内样式,id选择器个数,类选择器个数,标签选择器个数)从左向右依次比较个数,同一级个数多的优先级高,如果相同,则向后比较
                继承权重最低
Emmet写法:
                /*w500+h200+bgc*/
                 <!--类选择器:  p.box  .box(div)-->
                 <!--id选择器: p#box-->
                 <!--同级别用+   div+p-->>
                 <!--父子级  div>p -->
                 <!--多个相同的标签- span*3-->
                 <!--有内容的标签  div{11}-->
背景属性:       背景色:background-color
                背景图:background-image
                背景平铺方式:background-repeat
                背景图位置:background-position
                背景图缩放:background-size
                背景图固定:background-attachment
                背景图复合属性:background
显示模式:        块级元素 div独占一行,宽度默认父级的100%,可以添加宽高
                行内元素:span  一行可以共存多个,尺寸由内容撑开,添加宽高不生效
                行内块元素:image:一行可以共存多个,尺寸由内容撑开,宽高生效
转换模式: display  块级:block 行内块:inline-block  行内:inline 

练习一:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>热词</title><style>a{width: 200px;height: 80px;  background-color: #3064bb;display: block;    color: #fff;text-decoration: none;text-align: center;line-height: 80px;font-size: 18px;}a:hover{background-color: #608dd9;}</style>
</head>
<body><a href="#">HTML</a><a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Vue</a><a href="#">React</a></body>
</html>

练习二:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>banner效果</title><style>.banner{height: 500px;background-image: url(./bk.png);background-repeat: no-repeat;background-color: #f3f3f4;/* background-size: contain; */background-position: lef bottom;/*文字控制属性*/text-align: right;color: #333;}.banner .ht{height: 100px;font-size: 36px;line-height: 100px;}.banner .txt{font-size: 20px;}.banner a{width: 125px;height: 40px;background-color: #f06b1f;display: inline-block;/*转块无法右对齐*/text-decoration: none;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}</style>
</head>
<body><div class="banner"><p class="ht">让创造产生价值</p><p class="txt">我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p><a href="#">我要报名</a><!--行内标签--></div></body>
</html>

相关文章：

复合选择器,CSS特性,背景属性,显示模式(HTML)

目录 复合选择器,CSS特性,背景属性,显示模式知识点: 练习一: 练习二: 复合选择器,CSS特性,背景属性,显示模式知识点: 复合选择器:后代选择器 :父选择器 子选择器(中间用空格隔开) eg:对div中的span进行设置,会对后代中的所有span都进行设置 选中所有后代(后代选择器.html)…...

编程日记 2024/11/6 14:06:53

加密货币行业与2024年美国大选

加密货币行业经历了近十年的飞速发展&#xff0c;尤其是在比特币、以太坊等主要加密资产的兴起之后&#xff0c;越来越多的美国人开始将其视为一种财富积累或交易的工具。然而&#xff0c;尽管这一新兴行业的市场规模在持续扩大&#xff0c;但加密货币仍面临着重重监管难题&…...

编程日记 2024/11/6 14:05:51

Hive SQL中判断内容包含情况的全面指南

Hive SQL中判断内容包含情况的实用指南 在 Hive SQL 的数据处理与分析世界里，判断字段是否包含特定内容是一项非常重要的操作。今天，我将为大家详细介绍 Hive SQL 中实现这一功能的多种方法，并附上相应的表创建和数据插入语句。 一、准备工作 - 表创建与数据插入 首先，我…...

编程日记 2024/11/6 14:03:48

匿名管道 Linux

目录 管道 pipe创建一个管道 让子进程写入&#xff0c;父进程读取 如何把消息发送/写入给父进程 父进程该怎么读取呢 管道本质 结论&#xff1a;管道的特征&#xff1a; 测试管道大小 写端退了&#xff0c;测试结果 测试子进程一直写&#xff0c;父进程读一会就退出 …...

编程日记 2024/11/6 14:02:47

苍穹外卖WebSocket无法建立连接 (修改前端代码)

我在部署nginx 反向代理服务器时&#xff0c;把80端口改成了90端口(不与80端口的Tomcat冲突)。 但黑马的资料里定义了前端连接nginx的端口号默认为80&#xff0c;造成连接不上的问题&#xff0c;此时只需要修改前端的端口号&#xff0c;使其知道如何连接到修改后的后端端口。 …...

编程日记 2024/11/6 13:59:43

音频内容理解

音频内容理解是音频处理和理解领域的一个重要方向&#xff0c;它涉及到从环境声音中提取语义信息&#xff0c;并能够对这些声音进行解释和描述。以下是音频内容理解的几个关键应用&#xff1a; 1. 音频问答&#xff08;Audio Question Answering, AQA&#xff09; 在这个任务…...

编程日记 2024/11/6 13:58:42

MQTT实用示例集：Air201版

今天贴出的是Air201版关于MQTT实用示例集&#xff0c;希望大家喜欢。 本示例教你通过使用脚本代码&#xff0c;对Air201模组进行MQTT链接操作。 操作例程包括&#xff1a; MQTT单链接 MQTT多链接 MQTT SSL不带证书链接 MQTT SSL带证书链接 大家可根据自身需求&#xff0c…...

编程日记 2024/11/6 13:51:35

Day23 opencv图像预处理

图像预处理 在计算机视觉和图像处理领域&#xff0c;图像预处理是一个重要的步骤&#xff0c;它能够提高后续处理&#xff08;如特征提取、目标检测等&#xff09;的准确性和效率。OpenCV 提供了许多图像预处理的函数和方法&#xff0c;常见的操作包括图像空间转换、图像大小调…...

编程日记 2024/11/6 13:50:34

优化模型训练过程中的显存使用率、GPU使用率

参考&#xff1a;https://blog.51cto.com/u_16099172/7398948 问题&#xff1a;用小数据集训练显存使用率、GPU使用率正常&#xff0c;但是用大数据集训练GPU使用率一直是0. 小数据&#xff1a; 大数据&#xff1a; 1、我理解GPU内存占用率显存使用率&#xff0c;由模型的大小…...

编程日记 2024/11/6 13:48:32

RocketMQ学习笔记

RocketMQ笔记 文章目录 一、引言⼆、RocketMQ介绍RocketMQ的由来 三、RocketMQ的基本概念1 技术架构2 部署架构 四、快速开始1.下载RocketMQ2.安装RocketMQ3.启动NameServer4.启动Broker5.使⽤发送和接收消息验证MQ6.关闭服务器 五、搭建RocketMQ集群1.RocketMQ集群模式2.搭建主…...

编程日记 2024/11/6 13:47:31

Linux第三讲：环境基础开发工具使用

Linux第三讲&#xff1a;环境基础开发工具使用 1.Linux软件包管理器yum1.1什么是软件包管理器1.2操作系统生态问题1.3什么是yum源 2.vim详解2.1什么是vim2.2vim的多模式讲解2.2.1命令模式的诸多指令2.2.1.1gg和nshiftg2.2.1.2shift$和shift^2.2.1.3上、下、左、右2.2.1.4w和b2.…...

编程日记 2024/11/6 13:46:30

日本TikTok直播的未来：专线网络助力创作者突破极限

近年来&#xff0c;随着短视频平台的崛起&#xff0c;尤其是TikTok&#xff08;国际版抖音&#xff09;成为全球范围内广受欢迎的社交娱乐平台&#xff0c;直播功能的加入无疑为内容创作者提供了更广阔的展示舞台。在日本&#xff0c;TikTok直播不仅使得年轻人能够实时与粉丝互…...

编程日记 2024/11/6 13:45:28

如何在家庭网络中设置静态IP地址：一份实用指南

在家庭网络环境中&#xff0c;IP地址扮演着至关重要的角色。大多数家庭用户依赖路由器的DHCP&#xff08;动态主机配置协议&#xff09;来自动分配IP地址&#xff0c;但在某些情况下&#xff0c;手动设置静态IP地址能为家庭网络带来更多的便利性与稳定性&#xff0c;尤其是在涉…...

编程日记 2024/11/6 13:43:26

qt QFile详解

1、概述 QFile类是Qt框架中用于读取和写入文本和二进制文件资源的I/O工具类。它继承自QFileDevice类&#xff0c;后者又继承自QIODevice类。QFile类提供了一个接口&#xff0c;允许开发者以二进制模式或文本模式对文件进行读写操作。默认情况下&#xff0c;QFile假定文件内容为…...

编程日记 2024/11/6 13:39:23

ESP8266 自定义固件烧录-Tcpsocket固件

一、固件介绍 固件为自定义开发的一个适配物联网项目的开源固件&#xff0c;支持网页配网、支持网页tcpsocket服务器配置、支持串口波特率设置。 方便、快捷、稳定&#xff01; 二、烧录说明 固件及工具打包下载地址&#xff1a; https://download.csdn.net/download/flyai…...

编程日记 2024/11/6 13:37:21

内网项目，maven本地仓库离线打包，解决Cannot access central in offline mode?

背景&#xff1a; 内网项目打包&#xff0c;解决Cannot access central in offline mode? 1、修改maven配置文件&#xff1a; localRepository改为本地仓库位置 <localRepository>D:\WorkSpace\WorkSoft\maven-repository\iwhalecloud-repository\business</loca…...

编程日记 2024/11/6 13:36:20

stack和queue ---＞容器适配器

不支持迭代器&#xff0c;迭代器无法满足他们的性质 边出边判断 实现 #define _CRT_SECURE_NO_WARNINGS 1 #include<iostream> #include<stack> #include<queue> using namespace std; int main() {stack<int> st;st.push(1);st.push(2);st.push(3);…...

编程日记 2024/11/6 13:34:18

ffmpeg视频解码

一、视频解码流程 使用ffmpeg解码视频帧主要可分为两大步骤&#xff1a;初始化解码器和解码视频帧&#xff0c;以下代码以mjpeg为例 1. 初始化解码器 初始化解码器主要有以下步骤&#xff1a; &#xff08;1&#xff09;查找解码器 // 查找MJPEG解码器pCodec avcodec_fin…...

编程日记 2024/11/6 13:33:17

前端入门一之CSS知识详解

前言 CSS是前端三件套之一&#xff0c;在MarkDown中也完美兼容这些语法&#xff1b;这篇文章是本人大一学习前端的笔记&#xff1b;欢迎点赞 收藏 关注&#xff0c;本人将会持续更新。 文章目录 Emmet语法&#xff1a;CSS基本语法&#xff1a;css语法结构只有3种&#xff1a…...

编程日记 2024/11/6 13:32:15

【JS学习】10. web API-BOM

文章目录 Web APIs - 第5天笔记js组成window对象定时器-延迟函数location对象navigator对象histroy对象本地存储&#xff08;今日重点&#xff09;localStorage&#xff08;重点&#xff09;sessionStorage&#xff08;了解&#xff09;localStorage 存储复杂数据类型 综合案例…...

编程日记 2024/11/6 13:31:14

C#实现递归获取所有父级的列表

条件&#xff1a; 父级的id是子级的父id形成递归条件 实现功能&#xff1a; 获取自己到最顶级父级的列表&#xff08;假如最顶级父级的父ID0&#xff09; 代码&#xff1a; 解释&#xff1a;CF_CODE是自己的ID&#xff0c;CF_PARENT_ID是父id /// <summary>/// 递归获…...

编程日记 2024/11/6 13:30:13

【深度学习】梯度累加和直接用大的batchsize有什么区别

梯度累加与使用较大的batchsize有类似的效果&#xff0c;但是也有区别 1.内存和计算资源要求 梯度累加&#xff1a; 通过在多个小的mini-batch上分别计算梯度并累积&#xff0c;梯度累积不需要一次加载所有数据&#xff0c;因此显著减少了内存需求。这对于显存有限的设别尤为重…...

编程日记 2024/11/6 13:26:08

【Linux】网络相关的命令

目录 ① ip addr show ② ip route show ③ iptables -nvL ④ ping -I enx00e04c6666c0 192.168.1.100 ⑤ ip route get 192.168.1.100 ⑥ sudo ip addr add dev enx00e04c6666c0 192.168.1.101/24 ⑦ ifconfig ⑧ netstat ⑨ traceroute ⑩ nslookup ① ip addr sho…...

编程日记 2024/11/6 13:23:04

leetcode哈希表（五）-四数相加II

题目 454.四数相加II 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1a; 输入&…...

编程日记 2024/11/6 13:20:01

Java学习路线：Maven（一）认识Maven

目录 认识Maven 新建Maven文件 导入依赖 认识Maven Maven是一个Java的项目管理工具&#xff0c;通过Maven&#xff0c;我们可以实现&#xff1a; 项目自动构建&#xff0c;包括代码的编译、测试、打包、安装等依赖管理&#xff0c;快速完成依赖的导入 在学习Maven之前&…...

编程日记 2024/11/6 13:19:00

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、1×1 卷积层、汇聚层、多通道汇聚层

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、11 卷积层、汇聚层、多通道汇聚层 多输入多输出通道多通道输入的卷积示例&#xff1a;多通道的二维互相关运算 多输出通道实现多通道输出的互相关运算 11 卷积层11 卷积的作用 使用全连接层实现 11 卷积小结 …...

编程日记 2024/11/6 13:17:59

java mapper 的 xml讲解

<?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace"com.bnc.s12.mapper.GoodaCateDT…...

编程日记 2024/11/6 13:15:58

全面解析：区块链技术及其应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 全面解析&#xff1a;区块链技术及其应用 文章目录 全面解析&#xff1a;区块链技术及其应用什么是区块链区块链的工作原理1. 分…...

编程日记 2024/11/6 13:13:56

python基础学习笔记

本文类比c语言讲解python 一.变量和类型 前缀小知识&#xff1a; 注意&#xff1a;1.python写每一行代码时&#xff0c;结尾不需要 ; 这点是和c语言有很大区别的 2.代码的缩进&#xff08;就是每行代码前面的空格&#xff09;是非常重要的后文会提到 1.定义变量 注意: 和C/C …...

编程日记 2024/11/6 13:12:55

【dvwa靶场：XSS系列】XSS (DOM) 低-中-高级别，通关啦

一、低级low 拼接的url样式&#xff1a;​​​​​​​ http://127.0.0.1/dvwa/vulnerabilities/xss_d/?default 拼接的新内容 <script>alert("假客套")</script> 二、中级middle 拼接的url样式&#xff1a;​​​​​​​ http://127.0.0.1/dvwa/vuln…...

编程日记 2024/11/6 13:08:51