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

css引入的三种方式

css引入的三种方式

  • 一、内联样式
  • 二、外部样式表
  • 三、 内部样式表
  • 总结
  • trouble

一、内联样式

内联样式也被称为行内样式。它是将 CSS 样式直接应用于 HTML 元素的 style 属性中的一种方式

<p style="color: blue; font-size: 16px;">这是一个带有内联样式的段落。</p>

内联样式(Inline Styles):
定义:将 CSS 样式直接写在 HTML 元素的 style 属性中。
作用范围:仅适用于特定的元素。
优点:简单直接,能够针对具体的元素提供个性化的样式。
缺点:难以维护,当需要应用样式到多个元素时,代码变得冗长且重复。

二、外部样式表

<link rel="stylesheet" href="./style.css">

定义:将 CSS 样式规则写入一个独立的 .css 文件中,并通过链接()标签引入到 HTML 文档中。
作用范围:可在整个网站或文档中使用。
优点:易于维护,可以在多个页面共享样式,减少重复代码。
缺点:相对于内联样式,引入外部样式表需要额外的网络请求。

三、 内部样式表

<style>tr {mso-height-source: auto;mso-ruby-visibility: none;}
</style>

定义:在 HTML 文档内使用 的 HTML 文档内。
优点:与外部样式表类似,能够在整个文档内使用,并可以与 HTML 结构紧密关联。
缺点:样式表与内容混合,当样式较多或需要在多个页面共享时,难以维护。

总结

总结起来,内联样式适用于少量特定元素的个性化样式,外部样式表适用于整个网站或文档的样式定义和共享,而 内部样式表则适用于样式与特定 HTML 文档紧密关联的情况。选择适当的方法取决于项目需求、代码维护性和性能要求。

具体想用哪个,自己看情况哈

trouble

一个表格,在我的电脑上显示样式没问题,在我同事的电脑上显示是有问题的,用的是style引入的样式,同事的电脑上没有正确引入,同样的代码,我这边是可以的,可能是浏览器的兼容问题吧,具体情况也不是很清楚,最后改成行内样式是解决了

在这里插入图片描述
结束啦~~~~~~~~~
在这里插入图片描述

相关文章:

css引入的三种方式

css引入的三种方式 一、内联样式二、外部样式表三、 内部样式表总结trouble 一、内联样式 内联样式也被称为行内样式。它是将 CSS 样式直接应用于 HTML 元素的 style 属性中的一种方式 <p style"color: blue; font-size: 16px;">这是一个带有内联样式的段落。&…...

含羞草研究所研究含羞草的代码

点击进入 一个简单的Python代码示例&#xff0c;用于模拟含羞草的行为&#xff1a; class Mimosa: def __init__(self): self.leaves_open True def touch_leaf(self): if self.leaves_open: print("Leaf closes due to touch.") self.leaves_open False else: p…...

常见立体几何图形的体积

文章目录 abstract祖暅原理推论 棱锥和圆锥的体积用积分的方法推导棱台和圆台的体积圆台体积公式 球体的体积球体的表面积 abstract 锥体和球体的体积公式主要通过积分的方法推导 这类公式的推导中学一般不要求,只要会应用公式在高等数学中由合适和方便的工具来推导这些公式而…...

vue3 + vue-router + keep-alive缓存页面

1.vue-router中增加mate.keepAlive和deepth属性 {path: /,name: home,component: HomeView,meta: {// 当前页面要不要缓存keepAlive: false,// 当前页面层级deepth: 1,}},{path: /list,name: list,component: ListView,meta: {// 当前页面要不要缓存keepAlive: true,// 当前页…...

unigui同页面内重定向跳转,企业微信内部应用开发获取用户code例子

procedure TMainForm.UniFormCreate(Sender: TObject); varurl: string;code: string; begin //如果没有code值&#xff0c;将进行重定向if UniApplication.Parameters.Values[code] thenbeginurl :https://open.weixin.qq.com/connect/oauth2/authorize?appid你们的企业ID&…...

垃圾数据啊

const arr [] //定义空数组 for (const key in this.fgkSyData) { //循环 this。sgksudata 数据arr.push( //push添加到 arr { [key]:this.fgkSyData[key] } //{} 在对象中 重新 定义key value 转换成对象) } console.log(arr, arr) …...

GB/T 29498-2013 木门窗检测

木门窗是指以木材、木质复合材料为主要材料制作框和扇的门窗。 GB/T 29498-2013 木门窗检测项目 测试项目 测试标准 外观质量 GB/T 29498 尺寸 GB/T 29498 装配质量 GB/T 29498 含水率 GB/T 17657 附着力 GB/T 4893.4 外门窗耐冷热循环 GB/T 4893.7 耐划痕 GB/…...

rocketMQ5.0顺序消息golang接入

本人理解&#xff0c;顺序消息如果不分消息组&#xff0c;那么会影响并行处理速度&#xff0c;所以尽量消息组分的散一些 首先上要求&#xff0c;官方文档如下&#xff1a; 总结&#xff1a; 1.必须同一个消息组&#xff0c;消息组和消费组不是一个概念&#xff0c;不要混 2.必…...

HuggingFace-利用BERT预训练模型实现中文情感分类(下游任务)

准备数据集 使用编码工具 首先需要加载编码工具&#xff0c;编码工具可以将抽象的文字转成数字&#xff0c;便于神经网络后续的处理&#xff0c;其代码如下&#xff1a; # 定义数据集 from transformers import BertTokenizer, BertModel, AdamW # 加载tokenizer token Ber…...

PSP - 从头搭建 抗原类别 (GPCR) 的 蛋白质结构预测 项目流程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/134595717 GPCRs&#xff08;G Protein-Coupled Receptors&#xff0c;G蛋白偶联受体&#xff09;&#xff0c;又称为7次跨膜受体&#xff0c;是细…...

城市NOA加速落地,景联文科技高质量数据标注助力感知系统升级

当前&#xff0c;自动驾驶技术的演进正在经历着从基础L2到L3过渡的重要阶段&#xff0c;其中NOA&#xff08;自动辅助导航驾驶&#xff09;扮演着至关重要的角色。城市NOA&#xff08;L2.9&#xff09;作为城市场景下的NOA&#xff0c;被看作是车企向更高阶自动驾驶迈进的必经之…...

控制反转(IoC)是什么?

文章目录 控制反转&#xff08;Inversion of Control&#xff0c;IoC&#xff09;传统的程序设计中&#xff1a;应用程序控制程序流程控制反转设计中&#xff1a;由框架或容器控制程序流程IoC 的作用 举例生活例子软件工程例子 控制反转&#xff08;Inversion of Control&#…...

Redisson分布式锁源码解析、集群环境存在的问题

一、使用Redisson步骤 Redisson各个锁基本所用Redisson各个锁基本所用Redisson各个锁基本所用 二、源码解析 lock锁 1&#xff09; 基本思想&#xff1a; lock有两种方法 一种是空参 另一种是带参 * 空参方法&#xff1a;会默认调用看门狗的过期时间30*1000&…...

2016年10月4日 Go生态洞察:HTTP追踪介绍

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

分布式篇---第四篇

系列文章目录 文章目录 系列文章目录前言一、分布式ID生成有几种方案?二、幂等解决方法有哪些?三、常见负载均衡算法有哪些?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给…...

从零开始的C++(十九)

红黑树&#xff1a; 一种接近平衡的二叉树&#xff0c;平衡程度低于搜索二叉树。 特点&#xff1a; 1.根节点为黑 2.黑色结点的子结点可以是红色结点或黑色结点。 3.红色结点的子结点只能是黑色结点。 4.每个结点到其所有叶子结点的路径的黑色结点个数相同。 5.指向空的…...

opencv-使用 Haar 分类器进行面部检测

Haar 分类器是一种用于对象检测的方法&#xff0c;最常见的应用之一是面部检测。Haar 分类器基于Haar-like 特征&#xff0c;这些特征可以通过计算图像中的积分图来高效地计算。 在OpenCV中&#xff0c;Haar 分类器被广泛用于面部检测。以下是一个简单的使用OpenCV进行面部检测…...

C++纯虚函数和抽象类 制作饮品案例(涉及知识点:继承,多态,实例化继承抽象类的子类,多文件实现项目)

一.纯虚函数的由来 在多态中&#xff0c;通常父类中虚函数的实现是毫无意义的&#xff0c;主要都是调用子类重写的内容。例如&#xff1a; #include<iostream>using namespace std;class AbstractCalculator { public:int m_Num1;int m_Num2;virtual int getResult(){r…...

什么是网关和链路追踪,以及怎么使用?

在云计算中&#xff0c;网关和链路追踪也是非常重要的。云服务提供商通常会提供网关和链路追踪等相关服务来帮助用户管理和优化云计算网络。 云计算中的网关通常包括以下几种&#xff1a; 虚拟网络网关&#xff1a;用于将云中不同虚拟网络之间相互连接&#xff0c;实现云内不同…...

git 文件被莫名其妙的或略且无论如何都查不到哪个.gitignore文件忽略的

先说解决办法&#xff1a;git check-ignore -v [文件路径] 这个命令会返回一个忽略规则&#xff0c;以及该规则在哪个文件中定义的&#xff0c;该规则使得指定的文件被忽略。 1.遇到的问题 同项目组&#xff0c;其他同学都可以正常的提交.meta文件&#xff0c;我的提交就出现以…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析 光看题目要求和例图&#xff0c;感觉这题好麻烦&#xff0c;直线不能相交啊&#xff0c;每个数字只属于一条连线啊等等&#xff0c;但我们结合题目所给的信息和例图的内容&#xff0c;这不就是最长公共子序列吗&#xff1f;&#xff0c;我们把最长公共子序列连线起…...

虚幻基础:角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...

C#中用于控制自定义特性(Attribute)

我们来详细解释一下 [AttributeUsage(AttributeTargets.Class, AllowMultiple false, Inherited false)] 这个 C# 属性。 在 C# 中&#xff0c;Attribute&#xff08;特性&#xff09;是一种用于向程序元素&#xff08;如类、方法、属性等&#xff09;添加元数据的机制。Attr…...