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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安卓手机SD卡不小心删除了怎么办?几步轻松恢复数据!

随着科技的不断发展&#xff0c;安卓手机已经成为了我们生活中不可或缺的一部分。然而&#xff0c;在使用安卓手机的过程中&#xff0c;我们有时会不小心将重要的文件或者照片删除掉&#xff0c;这无疑会给我们的生活带来不便。那么&#xff0c;当安卓手机的SD卡不小心被删除了…

数字化转型没钱?没人?没IT?低代码平台轻松帮你搞定

随着数字技术的不断渗透&#xff0c;数字化已经不仅仅是一个趋势&#xff0c;而是深入人心的日常生活部分。在这样的时代背景下&#xff0c;企业面临的挑战也愈发严峻&#xff1a;如何不断创新&#xff0c;满足用户日益增长的业务需求&#xff1f; 传统的开发方式&#xff0c;随…

基于51单片机超声波测距汽车避障系统

**单片机设计介绍&#xff0c; 基于51单片机超声波测距汽车避障系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于51单片机的超声波测距汽车避障系统是一种用于帮助汽车避免碰撞和发生事故的设备&#xff0c;以下是一个基本…

操作系统的基本特性--并发、共享、虚拟、异步

批处理系统具有高资源利用率和系统吞吐量&#xff1b;分时系统能够获得及时响应&#xff1b;实时系统具有实时特征。而这三种系统都具有并发、共享、虚拟和异步四个基本特征 一、并发 OS通过并发提高系统中的资源利用率&#xff0c;增加系统的吞吐量 1.并行和并发 并行&…

11.7统一功能处理

一.登录拦截器 1.实现一个普通的类,实现HeadlerInterceptor接口,重写preHeadler方法. 2.将拦截器添加到配置中,并设定拦截规则. 二.访问前缀添加 方法1: 方法2:properties 三.统一异常处理 以上返回的是空指针异常,如果是别的异常就不会识别,建议加上最终异常 . 四.统一数据格…

Dockerfile-CentOS7.9+Python3.11.2

本文为CentOS7.9下安装Python3.11.2环境的Dockerfile # CentOS with Python3.11.2 # Author xxmail.com# build a new image with basic centos FROM centos:centos7.9.2009 # who is the author MAINTAINER xxmail.comRUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/…

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

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

App Inventor 2 文本转数字

App Inventor 2 是弱语言类型&#xff0c;文本和数字之间不用刻意去转换&#xff0c;之间赋值就可以了。文本赋值给数字变量如下&#xff1a; 运行结果&#xff1a;124 注意&#xff1a;数字变量初始化的时候要给一个数字的初始值&#xff0c;表明它是数字。 如果文本中含有非…

项目需求,我们加入了这个样式 float: left; 那么就会看到全部div处于同一行。但是实际应用中我们又有特殊div 需要单独 放置在一行

项目场景&#xff1a; 背景&#xff1a; 项目需求&#xff0c;我们加入了这个样式 float: left&#xff1b; 那么就会看到全部div处于同一行。但是实际应用中我们又有特殊div 需要单独 放置在一行 问题描述 提问题&#xff1a; 项目需求&#xff0c;我们加入了这个样式。 …

欲更新浏览器的Mac用户请注意,AMOS又出一招新“骗术”

近日&#xff0c;Malwarebytes发现有一种专门针对Mac操作系统&#xff08;OS&#xff09;的数据窃取程序正通过伪造的网页浏览器更新程序进行分发。Malwarebytes称这与其通常的技术、战术和程序大不相同&#xff0c;该恶意软件可以模仿 Safari 和谷歌 Chrome 浏览器。 网络安全…

【Hello Go】Go语言并发编程

并发编程 概述基本概念go语言的并发优势 goroutinegoroutine是什么创建goroutine如果主goroutine退出runtime包GoschedGoexitGOMAXPROCS channel无缓冲的channel有缓冲的channelrange和close单向channel 定时器TimerTicker Select超时 概述 基本概念 并行和并发概念 并行 &…

NX二次开发UF_CSYS_create_matrix 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CSYS_create_matrix Defined in: uf_csys.h int UF_CSYS_create_matrix(const double matrix_values [ 9 ] , tag_t * matrix_id ) overview 概述 Creates a 3 x 3 matrix. 创建…

please upgrade numpy version to >=1.20

升级 upgrade numpy_升级numpy-CSDN博客 pip install numpy --upgrade 没有pip conda install numpy --upgrade 会报错 conda list numpy来查看numpy版本 似乎这个numpy要看numpy-base这个 似乎没有pip

2023年ESG投资研究报告

第一章 ESG投资概况 1.1 定义 ESG投资&#xff0c;亦称负责任投资&#xff0c;是一种融合环境&#xff08;Environment&#xff09;、社会&#xff08;Social&#xff09;和治理&#xff08;Governance&#xff09;考量的投资方法&#xff0c;旨在通过综合这些因素来优化投资…

<蓝桥杯软件赛>零基础备赛20周--第7周--栈和二叉树

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…

全志D1芯片 MIPI屏幕TFT08006支持

屏幕简介 TFT08006官方支持的一款MIPI屏幕&#xff0c;8寸&#xff0c;分辨率800*1280。官方套装支持触控。 下载 MIPI屏幕 TFT08006 patch&#xff1a; https://www.aw-ol.com/downloads/resources/27 MIPI屏幕 TFT08006 相关资料见&#xff1a;https://www.aw-ol.com/down…

【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(&…

连接docker swarm和凌鲨

docker swarm相比k8s而言&#xff0c;部署和使用都要简单很多&#xff0c;比较适合中小研发团队。 通过连接docker swarm和凌鲨&#xff0c;可以让研发过程中的常用操作更加方便。 更新容器镜像调整部署规模查看日志运行命令 使用步骤 部署swarm proxy 你可以通过linksaas…

无人机电力巡检系统运行流程全解读

随着电力行业体系不断完善&#xff0c;保障电网运营的安全成为至关重要的任务。传统的人工巡检方式在面对电力设备广泛分布和复杂工况时显得效率低下&#xff0c;为了解决这一难题&#xff0c;无人机电力巡检系统应运而生&#xff0c;以智能化的运行流程&#xff0c;为电网安全…

ubuntu22.04 arrch64版在线安装maven

脚本 if type -p mvn; thenecho "maven has been installed."elsecd /home/zenglgwget https://dlcdn.apache.org/maven/maven-3/3.9.5/binaries/apache-maven-3.9.5-bin.tar.gz --no-check-certificatetar vxf apache-maven-3.9.5-bin.tar.gz rm -rf /usr/local/mav…