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

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

news 2026/5/23 15:55:33

目录

复合选择器,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

Genanki终极指南：如何用Python自动化你的Anki卡片制作

Genanki终极指南&#xff1a;如何用Python自动化你的Anki卡片制作 【免费下载链接】genanki A Python 3 library for generating Anki decks 项目地址: https://gitcode.com/gh_mirrors/ge/genanki 你是否曾经花费数小时手动创建Anki卡片&#xff0c;只为记忆那些重要的…...

编程新知 2026/5/23 15:50:47

AI Agent在体脂管理中的临床级精度突破：基于3276名受试者的双盲对照试验（FDA Class II类器械预审中）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;AI Agent在体脂管理中的临床级精度突破&#xff1a;基于3276名受试者的双盲对照试验&#xff08;FDA Class II类器械预审中&#xff09; 临床验证设计与核心指标达成 本研究采用多中心、随机、双盲、平行对照…...

编程新知 2026/5/23 15:27:04

Godot RE Tools深度解析：游戏逆向工程的全栈解决方案

Godot RE Tools深度解析&#xff1a;游戏逆向工程的全栈解决方案 【免费下载链接】gdsdecomp Godot reverse engineering tools 项目地址: https://gitcode.com/GitHub_Trending/gd/gdsdecomp 在游戏开发与逆向工程领域&#xff0c;Godot引擎的二进制资源格式一直是一个…...

编程新知 2026/5/23 15:01:19

在不同网络环境下测试Taotoken API端点的连接稳定性与路由表现

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在不同网络环境下测试Taotoken API端点的连接稳定性与路由表现 对于依赖大模型API进行开发的团队而言&#xff0c;服务的连接稳定性…...

编程新知 2026/5/23 13:29:07

极验三代w参数生成原理与逆向解析

1. 这不是“破解”&#xff0c;而是对前端验证机制的深度解构 你打开一个电商下单页&#xff0c;点击提交&#xff0c;页面卡住半秒&#xff0c;弹出一个滑块——背景是扭曲的汉字、旋转的数字、重叠的图标。你拖动滑块&#xff0c;系统“滴”一声放行。整个过程不到三秒&#…...

编程新知 2026/5/23 11:56:16

学术创作提质增效：借助 paperxie 智能撰写工具搞定各层级期刊论文

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/期刊论文https://www.paperxie.cn/ai/journalArticleshttps://www.paperxie.cn/ai/journalArticles 开篇概述 学术论文投稿发表&#xff0c;是学业深造、科研成果落地的关键环节。日常创作过程里&#xff…...

编程新知 2026/5/23 11:52:12

CANN调优工具链全景：从profiler到tensorboard的完整观测体系

CANN调优工具链全景&#xff1a;从profiler到tensorboard的完整观测体系 有个团队找我说&#xff0c;他们买了昇腾NPU集群&#xff0c;花了大半年才把调优工具链搭起来。每个人用不同的工具&#xff0c;各看各的数据&#xff0c;互相之间对不上。最后我帮他们梳理了一套统一的工…...

编程新知 2026/5/23 9:18:23

NotebookLM关键词提取结果不一致？权威测试报告揭示模型版本、文档编码、上下文窗口三重耦合陷阱

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;NotebookLM关键词提取 NotebookLM 是 Google 推出的基于用户文档构建的 AI 助手&#xff0c;其核心能力之一是自动从上传的文本中识别并提取关键语义单元——即关键词&#xff08;Keywords&#xff09;。这些关…...

编程新知 2026/5/23 6:46:49

全球首创 XR+AGV 融合技术，超元力 XR 黑暗乘骑无轨AGV开启星际探险新纪元

传统黑暗乘骑项目长期受困于"被动观影"模式&#xff1a;游客坐在固定轨道车上观看预设影片&#xff0c;缺乏互动性&#xff0c;复购率低。广东超元力文化科技有限公司推出的全球首创 XR 黑暗乘骑无轨 AGV 产品&#xff0c;以 XRAGV 融合技术为核心&#xff0c;将被动…...

编程新知 2026/5/23 6:44:48

COLMAP实战：如何用命令行搞定无人机航拍图像的三维重建？

COLMAP实战&#xff1a;如何用命令行搞定无人机航拍图像的三维重建&#xff1f; 无人机航拍技术正在彻底改变测绘、考古、农业和工程巡检等领域的工作方式。想象一下&#xff0c;你刚刚完成了一次大规模的无人机航拍任务&#xff0c;带回了数百甚至数千张高分辨率图像。这些图像…...

编程新知 2026/5/23 6:26:33