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

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

http://www.lryc.cn/news/241445.html

相关文章:

  • 含羞草研究所研究含羞草的代码
  • 常见立体几何图形的体积
  • vue3 + vue-router + keep-alive缓存页面
  • unigui同页面内重定向跳转,企业微信内部应用开发获取用户code例子
  • 垃圾数据啊
  • GB/T 29498-2013 木门窗检测
  • rocketMQ5.0顺序消息golang接入
  • HuggingFace-利用BERT预训练模型实现中文情感分类(下游任务)
  • PSP - 从头搭建 抗原类别 (GPCR) 的 蛋白质结构预测 项目流程
  • 城市NOA加速落地,景联文科技高质量数据标注助力感知系统升级
  • 控制反转(IoC)是什么?
  • Redisson分布式锁源码解析、集群环境存在的问题
  • 2016年10月4日 Go生态洞察:HTTP追踪介绍
  • 分布式篇---第四篇
  • 从零开始的C++(十九)
  • opencv-使用 Haar 分类器进行面部检测
  • C++纯虚函数和抽象类 制作饮品案例(涉及知识点:继承,多态,实例化继承抽象类的子类,多文件实现项目)
  • 什么是网关和链路追踪,以及怎么使用?
  • git 文件被莫名其妙的或略且无论如何都查不到哪个.gitignore文件忽略的
  • nova组件简介
  • 【Vue】响应式与数据劫持
  • Modbus RTU转Profinet网关连接PLC与变频器通讯在机床上应用案例
  • Autoware 整体架构
  • 【maven】手动指定jar推送
  • 算法---定长子串中元音的最大数目
  • 美国汽车零部件巨头 AutoZone 遭遇网络攻击
  • WPF面试题入门篇
  • opencv-ORB检测
  • please upgrade numpy version to >=1.20
  • 关于进制的转化