css引入的三种方式

css引入的三种方式

一、内联样式

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

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

内联样式(Inline Styles):

定义:将 CSS 样式直接写在 HTML 元素的 style 属性中。

作用范围:仅适用于特定的元素。

优点:简单直接,能够针对具体的元素提供个性化的样式。

缺点:难以维护,当需要应用样式到多个元素时,代码变得冗长且重复。

二、外部样式表

javascript 复制代码
<link rel="stylesheet" href="./style.css">

定义:将 CSS 样式规则写入一个独立的 .css 文件中,并通过链接()标签引入到 HTML 文档中。

作用范围:可在整个网站或文档中使用。

优点:易于维护,可以在多个页面共享样式,减少重复代码。

缺点:相对于内联样式,引入外部样式表需要额外的网络请求。

三、 内部样式表

javascript 复制代码
<style>
        tr {
            mso-height-source: auto;
            mso-ruby-visibility: none;
        }
</style>

定义:在 HTML 文档内使用 的 HTML 文档内。

优点:与外部样式表类似,能够在整个文档内使用,并可以与 HTML 结构紧密关联。

缺点:样式表与内容混合,当样式较多或需要在多个页面共享时,难以维护。

总结

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

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

trouble

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

结束啦~~~~~~~~~

相关推荐
沐 修8 分钟前
前端调试 - 获取下拉框元素 F12 延时断点操作记录 - 秒杀其他所谓的F8和手速快操作
前端
恋猫de小郭12 分钟前
AI 时代开源协议将消亡,malus 讽刺性展示了这一点
前端·人工智能·ai编程
Mike_jia18 分钟前
MeterSphere:开源持续测试平台,让测试管理变得如此简单
前端
Csvn20 分钟前
Vue 3 响应式原理深度解析
前端
恋猫de小郭22 分钟前
Flutter 3.44 发布前夕,官方宣布 SwiftPM 将完全取代 CocoaPods
android·前端·flutter
Json____23 分钟前
vue3-商城管理系统-前端静态网站
前端·vue3·ts·商城纯静态
古怪今人24 分钟前
后台服务开发、前端/手机端开发、服务器部署的版本及框架的终极推荐【2026年】
前端
lightqjx27 分钟前
【前端】前端学习三之初识JavaScript
前端·javascript·学习
IT_陈寒30 分钟前
JavaScript的this又背刺我,这次真长记性了
前端·人工智能·后端
adminwolf31 分钟前
美团点评客服自动回复神器|告别手动回复,轻松达标平台考核
大数据·前端·人工智能