css引入的三种方式

news2024/10/6 12:30:08

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.coloradmin.cn/o/1246638.html

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

相关文章

前后端性能优化实践(含Java代码部分、数据库部分、React前端部分)

最近的一个大屏报表统计的接口查询速度很慢&#xff0c;耗时近一分钟左右&#xff0c;数据量级只是700万左右&#xff0c;但很慢&#xff0c;最后优化到4秒左右&#xff0c;客户还能接受&#xff0c;但其实还可以在优化&#xff0c;先这样吧&#xff0c;简单记录下。这次主要优…

接口测试学习路线

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

进制转换 蓝桥oj Alice和Bob的爱恨情仇

题目 翻译 主要思路 举个例子方便理解 以奇数为底去分解一个奇数&#xff0c;分解次数一定是奇数&#xff1b;以奇数为底去分解一个偶数&#xff0c;分解次数一定是偶数 如果一个堆的分解次数是奇数&#xff0c;就在总分解次数上加1&#xff1b;如果一个堆的分解次数是偶数&…

【高级网络程序设计】Week2-1 Sockets

一、The Basics 1. Sockets 定义An abstraction of a network interface应用 use the Socket API to create connections to remote computers send data(bytes) receive data(bytes) 2. Java network programming the java network libraryimport java.net.*;similar to…

VR Interaction Framework2.0使用

1 按键 &#xff0c;比如按压下手柄的B键 if (InputBridge.Instance.BButtonDown){print("kkkkkkbbbbb456");} 2抓取某个物体&#xff0c;那么就在要抓取的那个物体上加一些组件&#xff0c;特别是Grabble Unity Events

都2023年了,为什么大家还都在吹捧 Python?

2023 年&#xff0c;Python 还可学吗&#xff1f; 答案当然是可。 近些年间&#xff0c;Python 的火热有目共睹&#xff0c;作为一种功能强大的高级编程语言&#xff0c;在 2018 年的时候它的流行程度就得到了大幅提高。 图源&#xff1a;Stack Overflow 网站编程语言浏览量统…

累计定点160+车型,商汤绝影凭什么领跑规模化量产?

2023广州车展火热进行&#xff0c;智能化技术加速“内卷”。 商汤绝影多款合作量产车型亮相2023广州车展&#xff0c;包括昊铂 GT、传祺ES9、E8系列和本田雅阁、捷途旅行者、极氪X等&#xff0c;全方位呈现在智能驾驶和智能座舱领域的最新成果&#xff0c;以AI“新科技”&…

「树形」样式,数据关联超便捷丨三叠云

树形样式 路径 表单设计 >> 字段属性 功能简介 「表单关联」的数据列表样式支持「树形」样式功能&#xff0c;关联数据选择时通过「树形」的列表方式进行数据选择&#xff0c;提高生产效率。 使用场景&#xff1a; 可以通过树形列表样式展示部门、子部门、成员的树形…

Android开发从0开始(服务)

Android后台运行的解决方案&#xff0c;不需要交互&#xff0c;长期运行。 服务基础框架&#xff1a; public class MyService extends Service { public MyService() { } Override public IBinder onBind(Intent intent) { //activity与service交互&#xff08;需要继…

美国汽车零部件巨头 AutoZone 遭遇网络攻击

Security Affairs 网站披露&#xff0c;美国汽车配件零售商巨头 AutoZone 称其成为了 Clop MOVEit 文件传输网络攻击的受害者&#xff0c;导致大量数据泄露。 AutoZone 是美国最大的汽车零配件售后市场经销商之一&#xff0c;在美国、墨西哥、波多黎各、巴西和美属维尔京群岛经…

Django项目window环境部署

最近刚好有时间&#xff0c;把前端时间使用django框架开发的音乐网站部署到本地电脑上&#xff0c;在这里记录一下部署过程。 环境配置 Python 3.7.5 Django 3.2.20 Apache 2.4.39 电脑64位 生产环境配置 设置生产环境静态配置 示例如下&#xff1a; # 生产环境静态资源…

windows环境下使用arthas不启动服务替换文件

场景&#xff1a; windows环境&#xff0c;如果现场环境客户正在使用项目&#xff0c;如果要替换项目中的一个class文件&#xff0c;但是又不能重启服务改怎么处理&#xff0c;今天介绍使用arthas中的retransform命令动态替换及使用注意的事项。 环境&#xff1a; windows,arth…

opencv-ORB检测

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

【Python】生死簿管理系统,估值5毛

生死簿管理系统 代码 """ 生死簿管理系统 """ import os import timefile_name data.txtdef main():while True:main_menu()choice (int)(input("请选择: "))if choice in [0, 1, 2, 3, 4, 5, 6, 7]:if choice 0:answer input(&…

2022年MathorCup高校数学建模挑战赛—大数据竞赛A题58到家家政服务订单分配问题求解全过程文档及程序

2022年MathorCup高校数学建模挑战赛—大数据竞赛 A题 58到家家政服务订单分配问题 原题再现&#xff1a; “58 到家”是“58 同城”旗下高品质、高效率的上门家政服务平台&#xff0c;平台向用户提供家政保洁、保姆、月嫂、搬家、维修等众多生活领域的服务。在家政保洁场景中…

WPF面试题中级篇

WPF中级篇[17] 15. 描述下WPF对象完整的层次结构? Object&#xff1a;Object 是 .NET Framework 中所有类的根类。它提供了一些基本的方法和属性&#xff0c;如 Equals、GetHashCode 和 ToString。所有其他类都直接或间接地继承自 Object。Dispatcher&#xff1a;Dispatcher…

蒸蛋器上平台销售UL1026检测报告标准

蒸蛋器是一种采用发热盘通电后&#xff0c;使盘内产生高温蒸汽来快速把禽蛋蒸熟的一种生活小家电。蒸蛋器最大的特点就是快速、简单&#xff0c;并充满乐趣。 深圳ISO 17025实验室办理蒸蛋器亚马逊美国站UL报告办理UL1026测试标准。 UL1026标准是关于蒸蛋器的安全性要求&…

CMS指纹识别方式

一、手工识别 1.robots.txt文件 robots.txt文件我们写过爬虫的就知道,这个文件是告诉我们哪些目录是禁止爬取的。但是大部分的时候我们都能通过robots.txt文件来判断出cms的类型 如: 从wp路径可以看出这个是WordPress的cms 这个就比较明显了直接告诉我们是PageAdmin cms 也…

java堆文件排查

技术主题 在之前的开发的一个项目中&#xff0c;因为程序的一个bug&#xff0c;导致一些引用的对象一直没有回收&#xff0c;从而导致堆内存一直在增大&#xff0c;老年代一直在增大&#xff0c;老年代进行堆积&#xff0c;后来的排查思路是通过dump堆的文件&#xff0c;然后对…

易点易动固定资产管理系统:实现固定资产与财务系统的高效对接

在企业的日常运营中&#xff0c;固定资产的管理和财务账目的记录是两项不可或缺的任务。然而&#xff0c;由于传统的管理方式存在数据孤岛和信息不一致等问题&#xff0c;往往导致工作效率低下和管理混乱。为了解决这一问题&#xff0c;易点易动固定资产管理系统应运而生。该系…