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

二、CSS

news 2025/7/9 16:44:57

一、CSS+HTML的结合方式

1、第一种：在标签的style属性上设置"key:value value;"，修改标签样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--需求：分别定义两个div, span标签，分别修改每个div标签的样式为：边框1个像素，实线，，红色--><div style="border:1px solid red;">div标签1</div><div style="border:1px solid red;">div标签2</div><span style="border:1px solid red;">span标签1</span><span style="border:1px solid red;">span标签2</span>
</body>
</html>

 *缺点：

（1）如果标签多了，样式多了，代码量将非常庞大

（2）可读性差

（3）ccs代码没有什么复用性可言

2、第二种：在head标签中，使用style标签来定义各种自己需要的css样式

xxx{

        key:value value;

}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--style标签专门用来定义css样式代码--><style type="text/css">div{border:1px solid red;}span{border:1px solid red;}</style>
</head>
<body><!--需求：分别定义两个div, span标签，分别修改每个div标签的样式为：边框1个像素，实线，，红色--><div >div标签1</div><div >div标签2</div><span >span标签1</span><span >span标签2</span>
</body>
</html>

*缺点：

（1）只能在同一页面内复用代码，不能在多个页面复用css代码 

（2）维护起来不方便，如果有成千上万个页面，那工作量太大

3、第三种：把css样式写成一个单独的css文件，再通过link标签引入即可复用

<link rel="stylesheet" type="text/css" href="./styles.css"/>

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="css_.css"/>
</head>
<body><div >div标签1</div><div >div标签2</div><span >span标签1</span><span >span标签2</span>
</body>
</html>

快捷键：

1、选中——》ctrl+r ——》输入新内容——》回车，即完成替换

二、选择器

1、标签名选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS选择器</title><style type="text/css">div{border:1px solid yellow;color:blue;font-size:30px;}span{border:5px dashed blue;color:yellow;font-size:20px;}</style>
</head>
<body><!--需求：在所有div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线并且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线--><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span>
</body>
</html>

 效果如下：

2、id选择器 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS选择器</title><style type="text/css">#id001{color:blue;font-size:30px;border:1px yellow solid;}#id002{color:red;font-size:20px;border:5px blue dotted;}</style>
</head>
<body><!--需求：第一个div标签定义id为id001，然后根据id属性定义css样式修改字体颜色为蓝色字体大小30个像素，边框为1像素黄色实战第二个div标签定义id为id002，然后根据id属性定义css样式，修改的字体颜色为红色，字体大小20个像素，边框为5像素蓝色点线--><div id="id001">div标签1</div><div id="id002">div标签2</div>
</body>
</html>

效果如下： 

 3、class选择器（类选择器）

.class 属性值{

        属性：值：

}

特点：可以通过class属性有效地、选择性地去使用这个样式 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>class类型选择器</title><style type="text/css">.class01{color:blue;font-size:30px;border:1px solid yellow;}.class02{color:grey;font-size:26px;border:1px solid red;}</style>
</head>
<body><!--需求：1、修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30个像素，边框为1个像素黄色实线2、修改class属性值为class02的div标签，字体颜色为灰色，字体大小26个像素，边框为1个像素红色实线--><div class="class01">div标签</div><div class="class02">div标签</div><span class="class01">span标签</span><span class="class02">span标签2</span></body>
</html>

 效果如下：

4、组合选择器

选择器1，选择器2……选择器n{

        属性：值：

} 

特点：组合选择器可以让多个选择器共用同一个css样式代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>class类型选择器</title><style type="text/css">.class01,#id01{color:blue;font-size:20px;border:1px yellow solid;}</style>
</head>
<body><!--需求：修改class="class01"的div标签和id="id01"所有的span标签字体颜色为蓝色，字体大小20个像素，边框为1像素黄色实线--><div class="class01">div标签</div><br/><span id="id01">span标签</span><br/><div>div标签</div><br/>
</body>
</html>

 效果如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css常用样式</title><style type="text/css">div{color:red;border:1px yellow solid;width:300px;height:300px;background-color:grey;font-size:30px;margin-left:auto;margin-rigth:auto;text-align:center;}a{text-decoration:none;}table{border:1px red solid;<!--表格加边框线-->border-collapse:collapse;}td{border:1px yellow solid;<!--单元格加边框线-->}u1{list-style:none;<!--无序列表去修饰符-->}</style>
</head>
<body><ul><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li><li>11111111111</li></ul><table><tr><td>1.1</td><td>1.2</td></tr></table><a href="http://www.baidu.com">百度</a><div>我是div标签</div>
</body>
</html>

效果如下：

相关文章：

二、CSS

一、CSSHTML的结合方式 1、第一种&#xff1a;在标签的style属性上设置"key:value value;"&#xff0c;修改标签样式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title>…...

编程日记 2023/3/2 10:20:40

变分推断 (Variational Inference) 解析

前言 如果你对这篇文章可感兴趣&#xff0c;可以点击「【访客必读 - 指引页】一文囊括主页内所有高质量博客」&#xff0c;查看完整博客分类与对应链接。 变分推断 在贝叶斯方法中&#xff0c;针对含有隐变量的学习和推理&#xff0c;通常有两类方式&#xff0c;其一是马尔可…...

编程日记 2023/3/2 10:19:26

27. 移除元素

题目链接&#xff1a;https://leetcode.cn/problems/remove-element/给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输…...

编程日记 2023/3/2 10:18:21

hive临时目录清理

hive运行失败会导致临时目录无法自动清理&#xff0c;因此需要自己写脚本去进行清理 实际发现hive临时目录有两个&#xff1a; /tmp/hive/{user}/* /warehouse/tablespace//hive/**/.hive-staging_hive 分别由配置hive.exec.scratchdir和hive.exec.stagingdir决定: 要注意的…...

编程日记 2023/3/2 10:17:12

如何创建发布新品上市新闻稿

推出新产品对任何企业来说都是一个激动人心的时刻&#xff0c;但向潜在客户宣传并围绕您的新产品引起轰动也可能是一个挑战。最有效的方法之一就是通过发布新品上市新闻稿。精心制作的新闻稿可以帮助我们通过媒体报道、吸引并在目标受众中引起关注。下面&#xff0c;我们将讲述…...

编程日记 2023/3/2 10:16:00

关于.bashrc和setup.bash的理解

在创建了ROS的workspace后&#xff0c;需要将workspace中的setup.bash文件写入~/.bashrc 文件中&#xff0c;让其启动&#xff1a; source /opt/ros/melodic/setup.bash这句话的目的就是在开新的terminal的时候&#xff0c;运行这个setup.bash&#xff0c;而这个setup.bash的作…...

编程日记 2023/3/2 10:14:49

03 Android基础--fragment

03 Android基础--fragment什么是fragment&#xff1f;fragment生命周期&#xff1f;动态的fragment与静态的fragmentfragment常用的两个类与APIFragment与Activity通信什么是fragment&#xff1f; 碎片&#xff0c;一个activity中可以使用多个fragment&#xff0c;可以把activi…...

编程日记 2023/3/2 10:13:41

Redis使用，AOF、RDB

前言 如果有人问你&#xff1a;"你会把 Redis 用在什么业务场景下&#xff1f;" 我想你大概率会说&#xff1a;"我会把它当作缓存使用&#xff0c;因为它把后端数据库中的数据存储在内存中&#xff0c;然后直接从内存中读取数据&#xff0c;响应速度会非常快。…...

编程日记 2023/3/2 10:12:35

SOLIDWORKS Premium 2023 SP1.0 三维设计绘图软件

SOLIDWORKS 中文完美正式版提供广泛工具来处理最复杂的问题，并提供深层技术完成关键细节工作。新功能可助您改善产品开发流程，以更快地将创新产品投入生产。Solidworks 是达索公司最新推出的三维CAD系统，它可让设计师大大缩短产品的设计时间，让产品得以快速、高效地投向市场…...

编程日记 2023/3/2 10:11:26

PyQGIS开发--自动化地图布局案例

前言创建地图布局是 GIS 作业结束时的一项常见任务。 它用于呈现最终结果的输出&#xff0c;作为与用户交流的一种方式&#xff0c;以便从地图中获取信息、知识或见解。 在包括 QGIS 在内的任何 GIS 软件中制作地图布局都非常容易。 但另一方面&#xff0c;当我们必须生成如此大…...

编程日记 2023/3/2 10:10:17

严格模式和非严格模式下的this指向问题

一、全局环境 1.函数调用 非严格模式&#xff1a;this指向是Window // 普通函数 function fn () { console.log(this, this); } fn() // 自执行函数 (function fn () { console.log(this, this); })() 严格模式&#xff1a;this指向是undefined //…...

编程日记 2023/3/2 10:09:11

vue2、vue3组件传值，引用类型，对象数组如何处理

vue2、vue3组件传值&#xff0c;引用类型&#xff0c;对象数组如何处理 Excerpt 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定&#xff1a;父级 prop 的更新会向下流动到子组件中&#xff0c;但是反过来则不行。这样会防止从子组件意外变更父… 下述组件传值指引…...

编程日记 2023/3/2 10:08:03

165. 小猫爬山

Powered by:NEFU AB-IN Link 文章目录165. 小猫爬山题意思路代码165. 小猫爬山 题意 翰翰和达达饲养了 N只小猫&#xff0c;这天&#xff0c;小猫们要去爬山。 经历了千辛万苦&#xff0c;小猫们终于爬上了山顶&#xff0c;但是疲倦的它们再也不想徒步走下山了&#xff08;呜咕…...

编程日记 2023/3/2 10:06:55

ECharts教程(详细)

ECharts教程(详细) 非常全面的ECharts教程&#xff0c;非常全面的ECharts教程&#xff0c;目前线条/节点颜色、线条粗细、线条样式、线条阴影、线条平滑、线条节点大小、线条节点阴影、线条节点边框、线条节点边框阴影、工具提醒、工具提醒样式、工具自定义提醒、工具提醒背景…...

编程日记 2023/3/2 10:05:46

pinia

目录一、介绍二、快速上手1.安装2.基本使用与state3.actions的使用4.getters的使用5.storeToRefs的使用6.pinia模块化三、数据持久化1.安装2.使用插件3.模块开启持久化4.按需缓存模块的数据一、介绍 pinia从使用角度和之前Vuex几乎是一样的&#xff0c;比Vuex更简单了。 在Vu…...

编程日记 2023/3/2 10:04:42

mysql中insert语句的五种用法

文章目录前言一、values参数后单行插入二、values参数后多行插入三、搭配select插入数据四、复制旧表的信息到新表五、搭配set插入数据总结前言 insert语句是标准sql中的语法&#xff0c;是插入数据的意思。在实际应用中&#xff0c;它也演变了很多种用法来实现特殊的功能&…...

编程日记 2023/3/2 10:03:39

YOLOV7模型调试记录

先前的YOLOv7模型是pytorch重构的&#xff0c;并非官方提供的源码&#xff0c;而在博主使用自己的数据集进行实验时发现效果并不理想&#xff0c;因此生怕是由于源码重构导致该问题&#xff0c;此外还需进行对比实验&#xff0c;因此便从官网上下载了源码&#xff0c;进行调试运…...

编程日记 2023/3/2 10:02:34

模拟光伏不确定性——拉丁超立方抽样生成及缩减场景（Matlab全代码）

光伏出力的不确定性主要源于预测误差，而研究表明预测误差（e）服从正态分布且大概为预测出力的10%。本代码采用拉丁超立方抽样实现场景生成[1,2]、基于概率距离的快速前代消除法实现场景缩减[3]，以此模拟了光伏出力的不确定性。与风电不确定性模拟不同之处在于——光伏存在0出…...

编程日记 2023/3/2 10:01:22

Elasticsearch聚合查询速览

Es 数据分析工具 - Elasticsearch Aggregations &#xff08;聚合查询&#xff09; 官方文档 Aggregations | Elasticsearch Guide [7.15] | Elastic 1. Bucket aggregations 桶聚合 that group documents into buckets, also called bins, based on field values, ranges, o…...

编程日记 2023/3/2 10:00:15

CEC2017:鱼鹰优化算法（Osprey optimization algorithm，OOA）求解cec2017（提供MATLAB代码）

一、鱼鹰优化算法简介 鱼鹰优化算法&#xff08;Osprey optimization algorithm&#xff0c;OOA&#xff09;由Mohammad Dehghani 和 Pavel Trojovsk于2023年提出&#xff0c;其模拟鱼鹰的捕食行为。 鱼鹰是鹰形目、鹗科、鹗属的仅有的一种中型猛禽。雌雄相似。体长51-64厘米…...

编程日记 2023/3/2 9:59:08

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/7/9 5:23:25

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/7/8 12:02:42

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/7/9 12:59:42

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/7/8 5:04:59

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/6/27 14:22:50

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/6/26 3:44:44

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/7/6 6:06:41

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/7/7 16:05:18

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2025/7/6 16:08:30

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/7/9 7:45:41