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

前端-CSS-zxst

news 2025/11/10 19:05:33

CSS

层叠样式表，为了定义HTML标签的样式

  • 内联样式

    在标签内部通过 style 属性设置样式值样式名:样式值;样式名:样式值;

  • 内部样式

    在 head 标签内通过 style 标签选择器设置样式，供这个网页上的元素使用

  • 外部样式

    在 head 标签内通过 link 标签引入外部的 CSS 文件

内联样式

<div style="height:200px; width:200px; background-color: red;"></div>

内部样式

<head><!-- type="text/css"代表标签内部是css代码 --><style type="text/css">div {width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body><!--从结果上可以看出，内联的优先级要比内部样式的优先级高--><div style="height:200px; width:200px; background-color: red;"></div><div></div><div></div>
</body>

外部样式

内部样式和外部样式根据在head标签的先后顺序执行，有可能先执行完的样式会被后面的样式覆盖掉

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6UNbcyK-1677158598500)(C:\Users\99498\AppData\Roaming\Typora\typora-user-images\image-20230214204308547.png)]

需要在 html 文件中通过 link 标签导入这个 CSS 文件。

<head><style type="text/css">div {width: 200px;height: 200px;background-color: blue;}</style><!--注意不要忘记写rel属性--><link href="css/c1.css" rel="stylesheet"/>
</head>
<body><!--从结果上可以看出，内联的优先级要比内部样式的优先级高--><div style="height:200px; width:200px; background-color: red;"></div><div></div><div></div>
</body>

选择器

  • id 选择器

    #div1 {width: 200px;height: 200px;background-color: blue;
}
<div id="div1"></div>

  • class 选择器。一个标签可以有多个class值，中间用空格隔开

    .d1 {width: 200px;height: 200px;background-color: blue;
}<div class="d1"></div>
<div class="d2"></div>
<div class="d1 d2"></div>

  • 标签选择器，直接通过标签名找到元素

  • 上下文选择器

    • 后代选择器

      父选择器 子选择器，找到这个父元素的所有子元素。子选择的元素是父元素的后代，不管是不是父子还是爷孙辈

    • 子元素选择器

      父选择>子选择，只找自己的亲儿子

    • 兄弟选择器

      选择器1 + 选择器2，通过选择器 1找选择器2的兄弟关系的元素通过哥哥找（相邻的）弟弟

      <style type="text/css">.d1 div{width: 300px;height: 300px;}<!--在定位到class="d1"之后，选择它的子标签中的div标签, 也能定位到孙子，重孙子...元素-->.d1 div{width: 300px;height: 300px;}<!--在定位到class="d1"之后，选择它的子标签中的div标签，只能定位到儿子元素-->.d1>div{width: 300px;height: 300px;}<!--在定位到class="c2"之后，选择它的兄弟标签，只能定位到当前元素的相邻的下一个元素-->.c2+span {font-size:40px;}<!--标签属性选择器-->input[type=number] {font-size: 30px;}<!--伪类选择器,鼠标放到该元素上，d3这个类才会使用这个样式-->.d3:hover {}
</style><div class="d1"><div>11</div><div class = "c2">22</div><span>33</span>
</div>
<input type="number"></input>

  • 属性选择器

    通过标签的属性找到元素，input[type=number]

  • 伪类选择器

选择器优先级

优先级从大到小：

  • important
  • 内联样軾
  • id 选择器
  • class 选择器
  • 标签
.d3 {width: 150px;height: 150px;<!--!important 会提高该选择器的优先级-->background-color: red!important;
}

相关文章：

前端-CSS-zxst

CSS 层叠样式表&#xff0c;为了定义HTML标签的样式 内联样式 在标签内部通过 style 属性设置样式值样式名:样式值;样式名:样式值; 内部样式 在 head 标签内通过 style 标签选择器设置样式&#xff0c;供这个网页上的元素使用 外部样式 在 head 标签内通过 link 标签引入外部…...

编程日记 2023/2/24 4:20:39

合宙Air105|fonts库|mcu.ticks()|LuatOS-SOC接口|官方demo|学习（19）：fonts库

基础资料 基于Air105开发板&#xff1a;Air105 - LuatOS 文档 上手&#xff1a;开发上手 - LuatOS 文档 探讨重点 官方fonts库函数介绍以及利用mcu.ticks()计算程序运行周期相关内容的学习及探讨。 软件版本 AIR105&#xff1a;LuatOSAIR105 base 22.12 bsp V0014 32bit …...

编程日记 2023/2/24 4:19:30

成都欢蓬电商：抖音直播卖药灰度测试通告

据报道&#xff0c;近日有MCN机构透露&#xff0c;目前抖音直播卖药为“测试项目&#xff0c;谨慎试跑中”; “仍处于灰度测试&#xff0c;至于测试多久&#xff0c;抖音官方确实没有答复&#xff0c;需要看第一阶段数据&#xff0c;然后定夺&#xff0c;预计4月份会纳入更多机…...

编程日记 2023/2/24 4:18:20

1.1计算机和编成语言

一、C 语言简介历史C 语言最初是作为 Unix 系统的开发工具而发明的。1969年&#xff0c;美国贝尔实验室的肯汤普森&#xff08;Ken Thompson&#xff09;与丹尼斯里奇&#xff08;Dennis Ritchie&#xff09;一起开发了Unix 操作系统。Unix 是用汇编语言写的&#xff0c;无法移…...

编程日记 2023/2/24 4:17:09

解析 xml 文件 - xml.etree ElementTree

目录1、导入模块 →\rightarrow→ 读取文件 →\rightarrow→ 获取根节点 →\rightarrow→ 获取根节点的标签与属性2、遍历一级子节点、获取子节点的标签 与 属性3、通过索引 获取数据4、Element.findall()、Element.find() - 按照 tag 值查找 子节点5、Element.iter() - 循环迭…...

编程日记 2023/2/24 4:15:56

LeetCode Cookbook 哈希表（collections.Counter()和collections.defaultdict()）

好久不更了&#xff0c;这次一鼓作气&#xff0c;学完它&#xff01; 文章目录LeetCode Cookbook 哈希表30. 串联所有单词的子串36. 有效的数独&#xff08;很不错的循环题目&#xff09;49. 字母异位词分组290. 单词规律447. 回旋镖的数量575. 分糖果594. 最长和谐子序列599. …...

编程日记 2023/2/24 4:14:45

spring boot项目中i18n和META-INF.spring下的文件的作用

目录标题一、resource下的文件二、i18n下messages_zh_CN.properties三、spring.factories文件四、org.springframework.boot.autoconfigure.AutoConfiguration.imports一、resource下的文件 org.springframework.boot.autoconfigure.AutoConfiguration.imports &#xff1b; - …...

编程日记 2023/2/24 4:13:35

3年自动化测试经验，面试连20K都拿不到，现在都这么卷了吗····

我的情况 大概介绍一下个人情况&#xff0c;女&#xff0c;本科&#xff0c;三年多测试工作经验&#xff0c;懂python&#xff0c;会写脚本&#xff0c;会selenium&#xff0c;会性能&#xff0c;会自动化&#xff0c;然而到今天都没有收到一份offer&#xff01;从2022年11月1…...

编程日记 2023/2/24 4:12:25

Python数据结构与算法篇（四）-- 链表的实现

实现线性表的另一种常用方式就是基于链接结构&#xff0c;用链接关系显式表示元素之间的顺序关联。基于链接技术实现的线性表称为链接表或者链表。 采用链接方式实现线性表的基本想法如下: 把表中的元素分别存储在一批独立的存储块&#xff08;称为表的结点&#xff09;里。保…...

编程日记 2023/2/24 4:11:16

【java基础】循环语句、中断控制语句

文章目录循环while循环for循环for each循环中断控制语句breakcontinue带标签的break(相当于goto)循环 在java中有3种循环&#xff0c;分别是while循环&#xff0c;for循环&#xff0c;for each循环 while循环 while循环的形式是 while(condition) statement int i 5;while …...

编程日记 2023/2/24 4:10:05

万字长文带你实战 Elasticsearch 搜索

ES 高级实战 前言 上篇我们讲到了 Elasticsearch 全文检索的原理《别只会搜日志了，求你懂点原理吧》，通过在本地搭建一套 ES 服务，以多个案例来分析了 ES 的原理以及基础使用。这次我们来讲下 Spring Boot 中如何整合 ES，以及如何在 Spring Cloud 微服务项目中使用 ES 来…...

编程日记 2023/2/24 4:07:54

Web网页测试全流程解析论Web自动化测试

1、功能测试 web网页测试中的功能测试&#xff0c;主要测试网页中的所有链接、数据库连接、用于在网页中提交或获取用户信息的表单、Cookie 测试等。 &#xff08;1&#xff09;查看所有链接&#xff1a; 测试从所有页面到被测特定域的传出链接。 测试所有内部链接。 测试链…...

编程日记 2023/2/24 4:06:44

初识Python——“Python”

各位CSDN的uu们你们好呀&#xff0c;今天进入到了我们的新专栏噢&#xff0c;Python是小雅兰的专业课&#xff0c;那么现在&#xff0c;就让我们进入Python的世界吧 计算机基础概念 什么是计算机&#xff1f; 什么是编程&#xff1f; 编程语言有哪些&#xff1f; Python背景知…...

编程日记 2023/2/24 4:05:35

LocalDateTime使用

开发中常常需要用到时间&#xff0c;随着jdk的发展&#xff0c;对于时间的操作已经摒弃了之前的Date等方法&#xff0c;而是采用了LocalDateTime方法&#xff0c;因为LocalDateTime是线程安全的。 下面我们来介绍一下LocalDateTime的使用。 时间转换 将字符串转换为时间格式…...

编程日记 2023/2/24 4:04:25

设计模式学习笔记 - 外观模式

设计模式学习笔记 - 外观模式一、影院管理问题二、传统方式解决影院管理问题三、外观模式介绍1、基本介绍2、原理类图四、外观模式解决影院管理问题五、外观模式在MyBatis框架应用的源码分析六、外观模式的注意事项和细节一、影院管理问题 组建一个家庭影院&#xff1a;DVD 播放…...

编程日记 2023/2/24 4:03:16

如何写出一份优秀的简历和求职信？

写一份优秀的简历和求职信是成功求职的重要一步。 01、简历 突出重点信息&#xff1a;把最重要的信息放在简历的前面&#xff0c;例如您的工作经验和教育背景等。 使用简明扼要的语言&#xff1a;在简历中使用简短的句子和简明扼要的语言&#xff0c;让招聘者能够快速了解您的…...

编程日记 2023/2/24 4:02:06

OpenGL超级宝典学习笔记：原子计数器

前言 本篇在讲什么 本篇为蓝宝书学习笔记 原子计数器 本篇适合什么 适合初学Open的小白 本篇需要什么 对C语法有简单认知 对OpenGL有简单认知 最好是有OpenGL超级宝典蓝宝书 依赖Visual Studio编辑器 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#…...

编程日记 2023/2/24 4:00:51

深圳/东莞/惠州师资比较强的CPDA数据分析认证

深圳/东莞/惠州师资比较强的CPDA数据分析认证培训机构 CPDA数据分析师认证是中国大数据领域有一定权威度的中高端人才认证&#xff0c;它不仅是中国较早大数据专业技术人才认证、更是中国大数据时代先行者&#xff0c;具有广泛的社会认知度和权威性。 无论是地方政府引进人才、…...

编程日记 2023/2/24 3:59:39

LeetCodeHOT100热题02

写在前面 主要是题目太多&#xff0c;所以和前面的分开来记录。有很多思路的图都来源于力扣的题解&#xff0c;如侵权会及时删除。不过代码都是个人实现的&#xff0c;所以有一些值得记录的理解。之前的算法系列参看&#xff1a; 剑指offer算法题01剑指offer算法题02 七、动…...

编程日记 2023/2/24 3:58:25

虹科Dimetix激光测距仪在锯切系统中的应用

HK-Dimetix激光测距仪——锯切系统应用 许多生产设施&#xff0c;例如金属服务中心&#xff0c;使用切割锯将每个客户的订单切割成一定长度。定长切割过程通常涉及卷尺和慢跑锯的传送带。但更简单的替代方法是使用虹科Dimetix非接触式激光距离传感器。 为了切断大长度的棒材&…...

编程日记 2023/2/24 3:57:18

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/11/8 17:05:14

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/11/8 1:41:27

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/11/8 3:32:24

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/11/8 8:30:44

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/11/7 21:05:30

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/11/8 5:25:23

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2025/11/10 0:50:30