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.hqwc.cn/news/214240.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【DDS】OpenDDS配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍OpenDDS配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更…

在Windows系统上安装git-Git的过程记录

01-上git的官网下载git的windows安装版本 下载页面链接&#xff1a; https://git-scm.com/downloads 选择Standalone Installer的版本进行下载&#xff1a; 这里给大家一全git-2.43.0的百度网盘下载链接&#xff1a; https://pan.baidu.com/s/11HwNTCZmtSWj0VG2x60HIA?pwdut…

『接口测试干货』| Newman+Postman接口自动化测试完整过程

『接口测试干货』| NewmanPostman接口自动化测试完整过程 1 Newman简介2 如何安装Newman&#xff1f;2.1 安装NodeJs2.2 安装Newman2.2 解决Newman不是内部命令 3 Newman使用3.1 Newman如何运行集合&#xff1f;3.2 如何查看帮助文档&#xff1f;3.3 环境变量设置3.4 关于全局变…

麒麟linux离线安装dotnet core

1. 下载 dotnet core,以3.1为例 下载地址: 下载 .NET Core 3.1 (Linux、macOS 和 Windows) 查看linux cpu类型,然后根据类型下载 uname -m #结果是: aarch64 2. 放到指定目录,比如:/usr/dotnet 3. 解压dotnet-sdk-3.1.426-linux-arm64.tar.gz cd /usr/dotnet tar –zxvf a…

电脑如何禁止截屏

禁止电脑截屏是一项重要的安全措施&#xff0c;可以保护用户隐私和防止恶意软件的使用。以下是几种禁止电脑截屏的方法&#xff1a; 形式一&#xff1a; 一刀切&#xff0c;全部禁止截屏 可以在域之盾软件后&#xff0c;点击桌面管理&#xff0c;然后选择禁止截屏。就能禁止所…

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

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

【开源】基于JAVA的衣物搭配系统

项目编号&#xff1a; S 016 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S016&#xff0c;文末获取源码。} 项目编号&#xff1a;S016&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 衣物档案模块2.2 衣物搭配模块2.3 衣…

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

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

Comsol Multiphysics 6.2 for Mac建模仿真软件

COMSOL Multiphysics是一款多物理场仿真软件&#xff0c;旨在帮助工程师、科学家和研究人员解决各种复杂的工程和科学问题。该软件使用有限元分析方法&#xff0c;可以模拟和分析多个物理场的相互作用&#xff0c;包括结构力学、热传导、电磁场、流体力学和化学反应等。 COMSOL…

基于动量的梯度下降

丹尼尔林肯 (Daniel Lincoln)在Unsplash上拍摄的照片 一、说明 基于动量的梯度下降是一种梯度下降优化算法变体&#xff0c;它在更新规则中添加了动量项。动量项计算为过去梯度的移动平均值&#xff0c;过去梯度的权重由称为 Beta 的超参数控制。 这有助于解决与普通梯度下降相…

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

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

氮化镓的晶体学湿式化学蚀刻法

引言 目前&#xff0c;大多数III族氮化物的加工都是通过干法等离子体蚀刻完成的。干法蚀刻有几个缺点&#xff0c;包括产生离子诱导损伤和难以获得激光器所需的光滑蚀刻侧壁。干法蚀刻产生的侧壁典型均方根(rms)粗糙度约为50纳米&#xff0c;虽然已经发现KOH基溶液可以蚀刻AlN…