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

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

news 2025/7/7 15:55:43

目录

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

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/7/5 22:29:13

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/7/7 0:51:01

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/6/24 6:21:26

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/7/6 4:09:59

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2025/7/6 17:38:59

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

编程新知 2025/7/7 15:04:35

JS的传统写法 vs 简写形式

一、条件判断与逻辑操作 三元运算符简化条件判断 // 传统写法 let result; if (someCondition) {result yes; } else {result no; }// 简写方式 const result someCondition ? yes : no;短路求值 // 传统写法 if (condition) {doSomething(); }// 简写方式 condition &…...

编程新知 2025/6/15 23:58:06

Java多线程从入门到精通

一、基础概念 1.1 进程与线程 进程是指运行中的程序。 比如我们使用浏览器&#xff0c;需要启动这个程序&#xff0c;操作系统会给这个程序分配一定的资源&#xff08;占用内存资源&#xff09;。 线程是CPU调度的基本单位&#xff0c;每个线程执行的都是某一个进程的代码的某…...

编程新知 2025/7/6 20:31:32

LeetCode第244题_最短单词距离II

LeetCode第244题&#xff1a;最短单词距离II 问题描述 设计一个类&#xff0c;接收一个单词数组 wordsDict&#xff0c;并实现一个方法&#xff0c;该方法能够计算两个不同单词在该数组中出现位置的最短距离。 你需要实现一个 WordDistance 类: WordDistance(String[] word…...

编程新知 2025/7/6 21:55:49

在Android13上添加系统服务的好用例子

在Android13上添加一个自动的system service例子 留好&#xff0c;备用。 --- .../prebuilts/api/30.0/plat_pub_versioned.cil | 76 - .../prebuilts/api/31.0/plat_pub_versioned.cil | 94 - .../prebuilts/api/32.0/plat_pub_versioned.cil | 94 - frameworks/base/co…...

编程新知 2025/7/6 21:29:10