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

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

相关文章:

css引入的三种方式

css引入的三种方式 一、内联样式二、外部样式表三、 内部样式表总结trouble 一、内联样式 内联样式也被称为行内样式。它是将 CSS 样式直接应用于 HTML 元素的 style 属性中的一种方式 <p style"color: blue; font-size: 16px;">这是一个带有内联样式的段落。&…...

含羞草研究所研究含羞草的代码

点击进入 一个简单的Python代码示例&#xff0c;用于模拟含羞草的行为&#xff1a; class Mimosa: def __init__(self): self.leaves_open True def touch_leaf(self): if self.leaves_open: print("Leaf closes due to touch.") self.leaves_open False else: p…...

常见立体几何图形的体积

文章目录 abstract祖暅原理推论 棱锥和圆锥的体积用积分的方法推导棱台和圆台的体积圆台体积公式 球体的体积球体的表面积 abstract 锥体和球体的体积公式主要通过积分的方法推导 这类公式的推导中学一般不要求,只要会应用公式在高等数学中由合适和方便的工具来推导这些公式而…...

vue3 + vue-router + keep-alive缓存页面

1.vue-router中增加mate.keepAlive和deepth属性 {path: /,name: home,component: HomeView,meta: {// 当前页面要不要缓存keepAlive: false,// 当前页面层级deepth: 1,}},{path: /list,name: list,component: ListView,meta: {// 当前页面要不要缓存keepAlive: true,// 当前页…...

unigui同页面内重定向跳转,企业微信内部应用开发获取用户code例子

procedure TMainForm.UniFormCreate(Sender: TObject); varurl: string;code: string; begin //如果没有code值&#xff0c;将进行重定向if UniApplication.Parameters.Values[code] thenbeginurl :https://open.weixin.qq.com/connect/oauth2/authorize?appid你们的企业ID&…...

垃圾数据啊

const arr [] //定义空数组 for (const key in this.fgkSyData) { //循环 this。sgksudata 数据arr.push( //push添加到 arr { [key]:this.fgkSyData[key] } //{} 在对象中 重新 定义key value 转换成对象) } console.log(arr, arr) …...

GB/T 29498-2013 木门窗检测

木门窗是指以木材、木质复合材料为主要材料制作框和扇的门窗。 GB/T 29498-2013 木门窗检测项目 测试项目 测试标准 外观质量 GB/T 29498 尺寸 GB/T 29498 装配质量 GB/T 29498 含水率 GB/T 17657 附着力 GB/T 4893.4 外门窗耐冷热循环 GB/T 4893.7 耐划痕 GB/…...

rocketMQ5.0顺序消息golang接入

本人理解&#xff0c;顺序消息如果不分消息组&#xff0c;那么会影响并行处理速度&#xff0c;所以尽量消息组分的散一些 首先上要求&#xff0c;官方文档如下&#xff1a; 总结&#xff1a; 1.必须同一个消息组&#xff0c;消息组和消费组不是一个概念&#xff0c;不要混 2.必…...

HuggingFace-利用BERT预训练模型实现中文情感分类(下游任务)

准备数据集 使用编码工具 首先需要加载编码工具&#xff0c;编码工具可以将抽象的文字转成数字&#xff0c;便于神经网络后续的处理&#xff0c;其代码如下&#xff1a; # 定义数据集 from transformers import BertTokenizer, BertModel, AdamW # 加载tokenizer token Ber…...

PSP - 从头搭建 抗原类别 (GPCR) 的 蛋白质结构预测 项目流程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/134595717 GPCRs&#xff08;G Protein-Coupled Receptors&#xff0c;G蛋白偶联受体&#xff09;&#xff0c;又称为7次跨膜受体&#xff0c;是细…...

城市NOA加速落地,景联文科技高质量数据标注助力感知系统升级

当前&#xff0c;自动驾驶技术的演进正在经历着从基础L2到L3过渡的重要阶段&#xff0c;其中NOA&#xff08;自动辅助导航驾驶&#xff09;扮演着至关重要的角色。城市NOA&#xff08;L2.9&#xff09;作为城市场景下的NOA&#xff0c;被看作是车企向更高阶自动驾驶迈进的必经之…...

控制反转(IoC)是什么?

文章目录 控制反转&#xff08;Inversion of Control&#xff0c;IoC&#xff09;传统的程序设计中&#xff1a;应用程序控制程序流程控制反转设计中&#xff1a;由框架或容器控制程序流程IoC 的作用 举例生活例子软件工程例子 控制反转&#xff08;Inversion of Control&#…...

Redisson分布式锁源码解析、集群环境存在的问题

一、使用Redisson步骤 Redisson各个锁基本所用Redisson各个锁基本所用Redisson各个锁基本所用 二、源码解析 lock锁 1&#xff09; 基本思想&#xff1a; lock有两种方法 一种是空参 另一种是带参 * 空参方法&#xff1a;会默认调用看门狗的过期时间30*1000&…...

2016年10月4日 Go生态洞察:HTTP追踪介绍

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

分布式篇---第四篇

系列文章目录 文章目录 系列文章目录前言一、分布式ID生成有几种方案?二、幂等解决方法有哪些?三、常见负载均衡算法有哪些?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给…...

从零开始的C++(十九)

红黑树&#xff1a; 一种接近平衡的二叉树&#xff0c;平衡程度低于搜索二叉树。 特点&#xff1a; 1.根节点为黑 2.黑色结点的子结点可以是红色结点或黑色结点。 3.红色结点的子结点只能是黑色结点。 4.每个结点到其所有叶子结点的路径的黑色结点个数相同。 5.指向空的…...

opencv-使用 Haar 分类器进行面部检测

Haar 分类器是一种用于对象检测的方法&#xff0c;最常见的应用之一是面部检测。Haar 分类器基于Haar-like 特征&#xff0c;这些特征可以通过计算图像中的积分图来高效地计算。 在OpenCV中&#xff0c;Haar 分类器被广泛用于面部检测。以下是一个简单的使用OpenCV进行面部检测…...

C++纯虚函数和抽象类 制作饮品案例(涉及知识点:继承,多态,实例化继承抽象类的子类,多文件实现项目)

一.纯虚函数的由来 在多态中&#xff0c;通常父类中虚函数的实现是毫无意义的&#xff0c;主要都是调用子类重写的内容。例如&#xff1a; #include<iostream>using namespace std;class AbstractCalculator { public:int m_Num1;int m_Num2;virtual int getResult(){r…...

什么是网关和链路追踪,以及怎么使用?

在云计算中&#xff0c;网关和链路追踪也是非常重要的。云服务提供商通常会提供网关和链路追踪等相关服务来帮助用户管理和优化云计算网络。 云计算中的网关通常包括以下几种&#xff1a; 虚拟网络网关&#xff1a;用于将云中不同虚拟网络之间相互连接&#xff0c;实现云内不同…...

git 文件被莫名其妙的或略且无论如何都查不到哪个.gitignore文件忽略的

先说解决办法&#xff1a;git check-ignore -v [文件路径] 这个命令会返回一个忽略规则&#xff0c;以及该规则在哪个文件中定义的&#xff0c;该规则使得指定的文件被忽略。 1.遇到的问题 同项目组&#xff0c;其他同学都可以正常的提交.meta文件&#xff0c;我的提交就出现以…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...