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

二、CSS

news 文章来源：https://blog.csdn.net/weixin_72052233/article/details/129239446 2024/11/17 4:23:09

一、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

Vue3 企业级项目实战：通关 Vue3 企业级项目开发，升职加薪快人一步

Vue3 企业级项目实战 - 程序员十三 - 掘金小册Vue3 Element Plus Spring Boot 企业级项目开发&#xff0c;升职加薪&#xff0c;快人一步。。「Vue3 企业级项目实战」由程序员十三撰写&#xff0c;2744人购买https://s.juejin.cn/ds/S2RkR9F/ 课程介绍 很高兴为大家介绍这个…...

编程日记 2023/3/2 9:58:02

vue样式绑定（v-if）

文章目录一.第一次用vue框架二.要求:1.定义两种样式&#xff0c;一种描述正确的状态&#xff0c;一种描述错误的状态。2.在结构代码中定义一个块&#xff0c;实现绑定正确的样式状态。3.定义一个按钮&#xff0c;实现正确和错误两种状态的class切换。三.源代码四.效果一.第一次…...

编程日记 2023/3/2 9:56:53

无需公网IP，安全稳定实现U8C异地访问

用友是全球领先的企业云服务与软件提供商&#xff0c;在财务、人力、供应链、采购、制造、营销、研发、项目、资产、协同等领域为客户提供数字化、智能化、社会化的企业云服务产品与解决方案。 U8C是用友针对成长型、创新型企业&#xff0c;提供企业级ERP整体解决方案。在系统…...

编程日记 2023/3/2 9:55:46

Graph Neural Network(GNN)图神经网络

Graph Neural Network(GNN)图神经网络&#xff0c;是一种旨在对图结构数据就行操作的深度学习算法。它可以很自然地表示现实世界中的很多问题&#xff0c;包括社交网络&#xff0c;分子结构和交通网络等。GNN旨在处理此类图结构数据&#xff0c;并对图中的节点和边进行预测或执…...

编程日记 2023/3/2 9:54:34

JSTL核心库的简单使用

JSTL核心库的简单使用 7.1考试重点 7.1.1c:out输出数据 考试重点就是c的相关的 jar包下载地址:Apache Tomcat - Apache Taglibs Downloads 看会典型应用就可以<% page contentType"text/html;charsetUTF-8" language"java" %> <% taglib uri"…...

编程日记 2023/3/2 9:53:29

ffmpeg.dll丢失怎么办，有什么修复ffmpeg.dll的方法

如果你在运行某些音视频软件或游戏时遇到了“ffmpeg.dll丢失”的错误消息&#xff0c;这意味着你的Windows系统中缺少了ffmpeg.dll文件&#xff0c;这是一个必要的动态链接库&#xff08;DLL&#xff09;文件&#xff0c;用于支持许多音视频软件和游戏的运行。在这篇文章中&…...

编程日记 2023/3/2 9:52:20

【学习笔记】NOIP爆零赛9

这场考炸了&#xff0c;不过也还好&#xff0c;正好给自己警醒的作用 t1t1t1应该是想到正解了&#xff0c;就是最后边界那个地方还是没有想清楚&#xff0c;哎这种交互题卡询问次数还是挺难受的&#xff0c;并且似乎我对于这种细节并不能很好把握。然后就少了50pts50pts50pts是…...

编程日记 2023/3/2 9:51:14

SpringMVC的常用组件和工作流程及部分注解解析

一丶SpringMVC常用的组件 1.前端控制器DispatcherServlet 作用&#xff1a;统一处理请求和响应。除此之外还是整个流程控制的中心&#xff0c;由 DispatcherServlet 来调用其他组件&#xff0c;处理用户的请求 接收请求&#xff0c;响应结果&#xff0c;相当于转发器&#xff…...

编程日记 2023/3/2 9:48:58

创建Firebase项目并接入Firebase推送： Firebase Cloud Messaging (FCM)

1.FCM简介&#xff1a;Firebase Cloud Messaging (FCM) 是一种跨平台消息传递解决方案&#xff0c;可供您可靠地传递消息&#xff0c;而且还是免费的服务。支持 Android&#xff0c;IOS,Web,Flutter,Unity.消息类型可以使用 FCM 向客户端发送两种类型的消息&#xff1a;通知消息…...

编程日记 2023/3/2 9:47:49

MyBatis的简单使用

MyBatis是一个优秀的持久型框架用于简化JDBC开发&#xff0c;JDBC的原生写法普遍都很麻烦&#xff0c;还要写原汁原味的sql语句&#xff0c;mybatis将很多东西都放到了配置文件里面然后用少量代码简化了免除了几乎所有的JDBC代码以及设定参数和获取结果集的工作。MyBatis 可以通…...

编程日记 2023/3/2 9:46:44

做网批有专门的网站吗?/百度快照投诉中心官网

下载 官方下载地址,要注意的是要下载的是 MySQL Community Server。根据系统选择相应压缩包&#xff0c;这个是 win 下安装。选择 Zip Archive 安装 将下载好的压缩包解压到想要安装的文件夹即可&#xff0c;我的是 C:/mysql 配置 配置环境变量 增加系统环境变量&#xff1a; M…...

编程日记 2024/11/17 0:47:24

图片二维码生成器在线制作/上海快速排名优化

原文在此https://docs.chef.io/nodes.html节点分好几种又加了一台机器[rootchefnode ~]# cat /etc/hosts先确保hosts里面都有解析[rootchefserver chef]# scp chefdk-2.4.17-1.el7.x86_64.rpm rootchefnode:/root/chef先安装DKrpm –ivh chefdk-2.4.17-1.el7.x86_64.rpm 安装之…...

编程日记 2024/11/17 0:17:57

北京高端网站建设系统/陕西网络营销优化公司

2-范数 欧几里得范数&#xff0c;常用计算向量长度&#xff09;&#xff0c;即向量元素绝对值的平方和再开方 参考资料 1.知乎&#xff1a;0 范数、1 范数、2 范数有什么区别&#xff1f; 2. Wikipedia&#xff1a;范数...

编程日记 2024/11/16 17:36:12

资料网站怎么做/代推广app下载

2019独角兽企业重金招聘Python工程师标准>>> 伟大的作家XXX曾经说过&#xff1a;1000个人便有1000个HDFS。 转载于:https://my.oschina.net/qiangzigege/blog/360239...

编程日记 2024/11/16 13:51:47

效果好的徐州网站建设/营销推广方法有哪些

定位的四种模式:static,relative,absolute,fixed定位的四个位置:left,right,top,bottom定位属性:position,有四种状态值1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效3.ab…...

编程日记 2024/11/16 13:35:00

济南快速排名/seo黑帽技术

1&#xff0c;操作文件类&#xff08;File&#xff09; 1.1&#xff0c;File类的基本介绍 在整个io包中&#xff0c;唯一与文件本身相关的类就是File类。使用File类可以进行创建或删除文件等常用操作&#xff0c;如果要使用一个File类&#xff0c;则必须向File类的构造方法中传…...

编程日记 2024/11/16 9:11:22