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引入的样式,同事的电脑上没有正确引入,同样的代码,我这边是可以的,可能是浏览器的兼容问题吧,具体情况也不是很清楚,最后改成行内样式是解决了

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/166633.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Modbus RTU转Profinet网关连接PLC与变频器通讯在机床上应用案例

背景&#xff1a;以前在机床加工车间里&#xff0c;工人们忙碌地操作着各种机床设备。为了使整个生产过程更加高效、流畅&#xff0c;进行智能化改造。 方案&#xff1a;在机床上&#xff0c;PLC通过Modbus RTU转Profinet网关连接变频器进行通讯&#xff1a;PLC作为整个生产线…

【封装UI组件库系列】封装Icon图标组件

封装UI组件库系列第三篇封装Icon图标组件 &#x1f31f;前言 &#x1f31f;封装Icon 1.创建Icon组件 2.引用svg图标库 第一步 第二步 第三步 3.二次封装 4.封装自定义属性 &#x1f31f;总结 &#x1f31f;前言 在前端开发中&#xff0c;大家可能已经用过各种各样的UI组…

VUE项目部署过程中遇到的错误:POST http://124.60.11.183:9090/test/login 405 (Not Allowed)

我当初报了这个405错误&#xff0c;再网上查了半天&#xff0c;他们都说什么是nginx部署不支持post访问静态资源。 但后面我发现我是因为另一个原因才导致的无法访问。 我再vue中有使用devServer:{ proxy:{} }进行路由转发。 但是&#xff01;&#xff01; 在这个配置只…

接口测试学习路线

接口测试分为两种&#xff1a; 测试外部接口&#xff1a;系统和外部系统之间的接口 如&#xff1a;电商网站&#xff1a;支付宝支付 测试内部接口&#xff1a;系统内部的模块之间的联调&#xff0c;或者子系统之间的数据交互 测试重点&#xff1a;测试接口参数传递的正确性&…

node与 pnpm、node-sass 等工具的版本兼容关系

1. node & pnpm 2. node & node-sass 3. node-sass & sass-loader sass-loader依赖于node-sass&#xff0c;以下是部分版本号对应

Zookeeper 集群中是怎样选举leader的

zookeeper集群中服务器被划分为以下四种状态&#xff1a; LOOKING&#xff1a;寻找Leader状态。处于该状态的服务器会认为集群中没有Leader&#xff0c;需要进行Leader选举&#xff1b;FOLLOWING&#xff1a;跟随着状态&#xff0c;说明当前服务器角色为Follower&#xff1b;LE…

Jmeter基础和概念

JMeter 介绍&#xff1a; 一个非常优秀的开源的性能测试工具。 优点&#xff1a;你用着用着就会发现它的重多优点&#xff0c;当然不足点也会呈现出来。 从性能工具的原理划分&#xff1a; Jmeter工具和其他性能工具在原理上完全一致&#xff0c;工具包含4个部分&#xff1a; …

绿色能源守护者:光伏运维无人机

随着我国太阳能光伏产业被纳入战略性新兴产业&#xff0c;光伏发电成为实现“双碳”目标的关键之一。在政策支持下&#xff0c;光伏产业维持高速发展&#xff0c;为迎接“碳达峰、碳中和”大势注入了强大动力。在这一背景下&#xff0c;复亚智能与安徽一家光伏企业合作&#xf…

JavaScript之DOM操作

第一章 API介绍 ​API是一种事先定义好的函数&#xff0c;用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程&#xff0c;而又无需访问源码&#xff0c;或理解内部工作机制的细节。 ​Web API接口&#xff1a;浏览器提供的一系列操作浏览器功能和页面元素的API(BO…

【Linux】Linux的常用基本指令

Linux常用基本指令 Linux指令的历史背景前言说明一、 ls 列出文件中的所有内容常用选项 二、pwd 显示当前所在目录进程三、cd 将当前工作目录改变到指定的目录下常用样例 四、touch 1. 更改文档或目录的日期时间 2. 新建一个不存在的文件常用选项 四、mkdir 1. 更改文档或目录的…

TensorFlow实战教程(二十五)-基于BiLSTM-CRF的医学命名实体识别研究(下)模型构建

这篇文章写得很冗余,但是我相信你如果真的看完,并且按照我的代码和逻辑进行分析,对您以后的数据预处理和命名实体识别都有帮助,只有真正对这些复杂的文本进行NLP处理后,您才能适应更多的真实环境,坚持!毕竟我写的时候也看了20多小时的视频,又写了20多个小时,别抱怨,加…

组合不重复的3位数

编程要求 给出四个不同的数字&#xff0c;能够组成多少个不重复的3位数&#xff0c;按照从小到大的顺序输出&#xff0c;每行一个。 测试用例 测试输入 1 2 3 4 测试输出 123 124 132 134 142 143 213 214 231 234 241 243 312 314 321 324 341 342 412 413 421 423 431 …

算法:给出指定整数区间、期望值,得到最终结果

1&#xff0c;问题&#xff1a; 在游戏中&#xff0c;我们经常会遇到以下情况&#xff1a;打开宝箱&#xff0c;获得x个卡牌碎片。 但通常策划只会给一个既定的数值空间&#xff0c;和一个期望得到的值&#xff0c;然后让我们去随机。比如&#xff1a; 问题A&#xff1a;在1~…

问卷调查平台选择指南:哪个好用与如何选择的实用指南

问卷调查由于其成本低、数据可量化的特点&#xff0c;常被用于工作和学习中。网络的发展使得问卷调查的形式也越累越多样化&#xff0c;不少人在做问卷调查的时候可能都会提出这样一个问题——问卷调查平台哪个好用&#xff1f;怎么选择&#xff1f; 选择问卷调查平台&#xf…

ubuntu22.04 arrch64版在线安装redis

脚本 apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 40976EAF437D05B5 apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3B4FE6ACC0B21F32 echo "deb http://archive.ubuntu.com/ubuntu/ trusty main universe restricted multiverse" >…

可以ping通IP但是无法远程连接-‘telnet‘ 不是内部或外部命令,也不是可运行的程序或批处理文件

起因 一开始远程连接IP&#xff0c;报错&#xff0c;怀疑是自己网络原因&#xff0c;但是同事依旧无法连接 怀疑是自己防火墙的原因&#xff0c;查看关闭依旧无法连接 问题 两个地址可以ping通排除防火墙缘故 怀疑端口&#xff0c;测试端口 然 解决方案 winR 输入control…

App Inventor 2 数字转文本

App Inventor 2 是弱语言类型&#xff0c;文本和数字之间不用刻意去转换&#xff0c;之间赋值就可以了。 案例&#xff1a;数字转文本 App Inventor 2 是弱语言类型&#xff0c;同理数字也能直接赋值给文本变量&#xff1a; 更多请参考&#xff1a;App Inventor 2 文本代码块…

opencv-背景减除

背景减除&#xff08;Background Subtraction&#xff09;是一种用于从视频序列中提取前景对象的计算机视觉技术。该技术的主要思想是通过建模和维护场景的背景&#xff0c;从而检测出在不同时间点出现的前景对象。 OpenCV 提供了一些用于背景减除的函数&#xff0c;其中最常用…

完善农业农村基础数据资源体系,加速乡村振兴

完善农业农村基础数据资源体系&#xff0c;加速乡村振兴 随着乡村振兴战略的实施&#xff0c;农业农村基础设施建设也得到了越来越多的关注。然而&#xff0c;在实施这一战略的过程中&#xff0c;我们也必须认识到&#xff0c;完善农业农村基础数据资源体系同样是十分重要的。 …

opencv-ORB检测

ORB&#xff08;Oriented FAST and Rotated BRIEF&#xff09;是一种图像特征检测和描述算法&#xff0c;结合了 FAST 关键点检测器和 BRIEF 描述子的优点。ORB 算法具有良好的性能&#xff0c;特别适用于实时应用&#xff0c;如目标追踪、相机定位等。 以下是 ORB 算法的一般…