当前位置： 首页 > news >正文

CSS的4种引入方式

news 2026/3/27 21:58:28

CSS的4种引入方式

目录

  • CSS的4种引入方式
    • 一、内嵌式：CSS写在style标签中
    • 二、外联式：CSS写在一个单独的.css文件中
    • 三、行内式：CSS写在标签的style属性中
    • 四、导入外部样式
    • 五、css引用的优先级
    • 六、link和@import的区别

一、内嵌式：CSS写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

案例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* css注释 *//* 这里写的都是css *//* 选择器{css属性} *//* 选择器：查找标签 */p {/* 文字颜色变红色 */color: red;/* 字变大 px:像素 */font-size: 30px;background-color: green;/* width height */width: 400px;height: 400px;}</style></head><body><p>这是一个p标签</p></body>
</html>

二、外联式：CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

案例代码
my.css文件

/* 选择器{} */
p{color: red;
}

html中通过link标签的href属性引入
html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 关系：样式表 --><link rel="stylesheet" href="/my.css" /></head><body><!-- css到底能写在哪里 --><p>这是p标签</p><div style="color: green; font-size: 30px">这是div标签</div><div>这是一个div</div>
</body>
</html>

三、行内式：CSS写在标签的style属性中

提示：会配合js使用

案例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><p style="color: red">这是一个p标签</p></body>
</html>

四、导入外部样式

外部样式
hello.css文件

p{color: red;
}
div{background-color: green;
}

html文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>@import url(hello.css);</style></head><body><p>这是一个p标签</p><div>这是一个div标签</div></body>
</html>

五、css引用的优先级

记住就近原则
内部样式、@import都出现在HTML的里面，就近原则，距离修改元素近的优先级高

行内样式>内部样式>link>@import

建议开发中链入外部样式，无需改动HTML结构，有利于代码的维护，开发效率高

六、link和@import的区别

1、引入的内容不同

link引入样式文件、图片资源等，而@import只引入样式文件

2、加载的顺序不同

link在页面加载的同时加载，@import在页面加载以后加载

3、兼容性不同

link是XHTML标签，没有兼容性问题，@import在css2.1提出，低版本的浏览器不支持

4、对js的支持不同

link支持js控制dom去改变样式，@import则不能支持

相关文章：

CSS的4种引入方式

CSS的4种引入方式 目录CSS的4种引入方式一、内嵌式&#xff1a;CSS写在style标签中二、外联式&#xff1a;CSS写在一个单独的.css文件中三、行内式&#xff1a;CSS写在标签的style属性中四、导入外部样式五、css引用的优先级六、link和import的区别一、内嵌式&#xff1a;CSS写…...

编程日记 2023/4/28 14:26:11

Shell高级——Linux中的文件描述符（本质是数组的下标）

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 前言 Linux中一切接文件&#xff0c;比如 C 源文件、视频文件、Shell脚本、可执行文件等&#xff0c;就连键盘、显示器、鼠标等硬件设备也都是文件。 一个 Linux 进程可以打开成百上…...

编程日记 2023/5/8 8:50:21

Nvidia jetson nano硬件架构

资料来源 官方文档中心 https://developer.nvidia.com/embedded/downloads -> 选jetson -> Jetson Nano Product Design Guide //产品设计指导(入口) //-> 1.1 References 列出了相关的文档 -> Jetson Nano Developer Kit Carrier Board Specification //板子标注…...

编程日记 2023/5/5 6:40:22

ffmpeg多路同时推流

一、ffmpeg常见使用方法1.1利用FFMPEG命令进行文件分割1.2转换格式1.3推流配置方法一&#xff1a;ngnix&#xff08;不推荐&#xff0c;推流不好使&#xff09;方法二&#xff1a;srs&#xff08;强烈推荐&#xff09;1.4查看nginx启动是否成功二、ffmpeg推流——>ngnix单路…...

编程日记 2023/5/7 15:10:00

一次性搞定 `SHOW SLAVE STATUS` 的解读

一次性搞定 SHOW SLAVE STATUS 的解读 解析日志文件的位置 诚然, GTID(全局事务标识符)已经在 MySQL 5.6中得到支持, 此外,还可以通过 Tungsten replicator 软件来实现(2009年以后一直有谷歌在维护,不是吗?)。 但有一部分人还在使用MySQL 5.5的标准副本方式, 那么这些二进制日…...

编程日记 2023/5/3 19:42:20

【代码随想录训练营】【Day25】第七章｜回溯算法 ｜216.组合总和III｜17.电话号码的字母组合

组合总和III 题目详细&#xff1a;LeetCode.216 做过上一题组合后&#xff0c;再来写这道题就显得得心应手了&#xff0c;通过理解回溯算法的模版&#xff0c;也总结出了算法中的一些特点&#xff1a; 回溯算法与递归算法类似&#xff0c;同样需要参数、结束条件和主体逻辑回…...

编程日记 2023/3/31 21:50:56

docker使用

https://blog.csdn.net/u012563853/article/details/125295985http://www.ppmy.cn/news/11249.html启动 docker服务并设置开机自动启动dockersudo systemctl start docker sudo systemctl enable dockerdocker 常见启动失败问题:https://blog.csdn.net/zhulianseu/article/deta…...

编程日记 2023/5/7 13:58:36

手把手docker registry配置登录名/密码

我们的Docker私有仓库Registry服务只有加了认证机制之后我们的Registry服务才会更加的安全可靠。赶快跟随以下步骤来增加认证机制吧。 创建docker registry工作目录 mkdir -p /data/docker.registry 创建将保存凭据的文件夹 mkdir -p /data/docker.registry/etc/registry/auth…...

编程日记 2023/5/7 18:23:49

一步打通多渠道服务场景 中电金信源启移动开发平台MADP功能“上新”

日前&#xff0c;中电金信源启移动开发平台MADP功能迭代升级&#xff0c;“上新”源启小程序开发平台。定位“为金融业定制”的移动PaaS平台&#xff0c;源启小程序开发平台为银行、互联网金融、保险、证券客户提供一站式小程序的开发、运营、营销全生命周期管理技术支撑&#…...

编程日记 2023/4/30 20:48:01

Kubernetes06:Controller (Deployment无状态应用)

Kubernetes06:Controller 1、什么是controller 管理和运行容器的对象&#xff0c;是一个物理概念 在集群上管理和运行容器的对象 2、Pod和Controller之间的关系 Pod是通过controller来实现应用的运维 比如伸缩、滚动升级等等操作Pod和Controller之间通过 label 标签建立关系…...

编程日记 2023/4/27 0:52:09

低代码开发平台选型必看指南

低代码开发是近年来逐渐兴起的一种新型软件开发方式。它通过封装常见的软件开发流程和代码&#xff0c;使得非专业的开发者也能够轻松创建复杂的应用程序。这种开发方式已经受到了许多企业的青睐&#xff0c;成为提高生产效率、降低开发成本的一种有效途径。 低代码开发的核心…...

编程日记 2023/4/25 20:37:32

OVN:ovn20.03.1/ovs2.13.0编译rpm过程

操作系统openeuler22.0&#xff0c;x86架构分别下载ovn和ovs的源码https://github.com/openvswitch/ovs/tree/v2.13.0https://github.com/ovn-org/ovn/tree/v20.03.1安装必要工具&#xff1a;yum install -y unzip tar make autoconf automake libtool rpm-build gcc libuuid-d…...

编程日记 2023/5/7 21:41:39

Shell管道

一、管道是什么 英文是pipe。 把一个命令的标准输出作为下一个命令的标准输入&#xff0c;以这种方式连接的两个或者多个命令就形成了管道 使用竖线|连接多个命令&#xff0c;称为管道符。 语法格式如下&#xff1a; command1 | command2 [ | commandN... ] command1的标准…...

编程日记 2023/5/4 22:09:17

Zynq UltraScale系列使用MIPI CSI-2 RX Subsystem 解码MIPI视频PD输出 提供2套工程源码和技术支持

目录1、前言2、设计思路和架构3、vivado工程详解4、上板调试验证5、福利&#xff1a;工程代码的获取1、前言 本设计采用OV5640摄像头MIPI模式作为输入&#xff0c;分辨率为1280x72060Hz&#xff0c;MIPI解码方案采用Xilinx官方提供的MIPI CSI-2 RX Subsystem IP解码MIPI视频&a…...

编程日记 2023/4/26 22:52:38

C++：详解C++11 线程休眠函数

休眠函数简介1: 让线程休眠一段时间1.1&#xff1a;std::chrono 的时钟 clock简介 C11 之前并未提供专门的休眠函数&#xff0c;C语言的 sleep、usleep函数其实是系统提供的函数&#xff0c;不同的系统函数的功能还要些差异。 在Windows系统中&#xff0c;sleep的参数是毫秒 …...

编程日记 2023/5/3 6:49:49

TryHackMe-The Great Escape（Docker）

The Great Escape 我们的开发人员创建了一个很棒的新网站。你能冲出沙盒吗&#xff1f; 端口扫描 循例 nmap Web信息收集 robots.txt: /exif-util是文件上传点&#xff0c;但是绕过之后貌似没啥用 在robots.txt当中披露了可能存在.bak.txt&#xff0c;现在我们已知的文件就是…...

编程日记 2023/4/24 11:28:11

这么强才给我28k，我头都不回，转身拿下40k~

时间真的过得很快&#xff0c;眨眼就从校园刚出来的帅气小伙变成了油腻大叔&#xff0c;给各位刚入道的测试朋友一点小建议&#xff0c;希望你们直通罗马吧&#xff01; 如何选择自己合适的方向 关于选择测试管理&#xff1a; 第一&#xff0c;你一定不会是一个喜欢技术&…...

编程日记 2023/5/6 13:51:10

【Python学习笔记】第二十一节 Python Lambda 函数

Python 提供了非常多的库和内置函数。有不同的方法可以执行相同的任务&#xff0c;而在 Python 中&#xff0c;有个万能之王函数&#xff1a;lambda 函数&#xff0c;它以不同的方式在任何地方使用。一、Lambda 函数简介在 Python 中&#xff0c;函数可以接受一个或多个位置参数…...

编程日记 2023/5/7 18:24:58

Nginx学习整理

Nginx学习第一章 Nginx概述1.1、Nginx概述1.2、Nginx官网1.3、Nginx用处第二章 Nginx单实例安装2.1、环境说明2.2、安装依赖2.3、Nginx下载2.4、Nginx解压2.5、Nginx安装2.6、Nginx命令2.7、开放防火墙2.8、启动后效果第三章 Nginx正向代理、反向代理3.1、概述3.2、反向代理配置…...

编程日记 2023/5/7 3:28:07

阿里面试之Hr面，这个套路把我坑惨了......

作为技术类的测试工程师面试&#xff0c;往往要经过多次面试才能拿到心仪的offer&#xff0c;这里面有技术一面、二面…&#xff0c;甚至总监面等&#xff0c;还有一个必不可少的就是HR面&#xff0c;一般HR会出现在你面试的最前面和最后面&#xff0c;前面是了解你的基本情况&…...

编程日记 2023/5/3 6:38:40

微信支付回调通知收不到的5个隐藏坑（附.NET Core实战解决方案）

微信支付回调通知失效的深度排查与.NET Core实战指南 当支付流程顺利完成但回调通知却神秘消失时&#xff0c;这种"薛定谔式的支付成功"往往让开发者陷入调试泥潭。本文将揭示五个容易被忽视的技术暗礁&#xff0c;并提供可直接集成到生产环境的.NET Core解决方案。 …...

编程新知 2026/3/27 21:54:01

Miniconda环境迁移实战：如何将CentOS装好的Python环境打包到其他服务器？

Miniconda环境迁移实战&#xff1a;跨服务器Python环境无缝转移指南 当你在CentOS服务器上精心配置了一个完美的Python数据分析环境&#xff0c;却需要在另一台服务器上复现时&#xff0c;难道要重新经历一遍繁琐的安装过程&#xff1f;本文将揭示两种高效可靠的Miniconda环境迁…...

编程新知 2026/3/27 21:21:48

python基于微信小程序的家政服务与互助平台

目录技术栈选择功能模块设计数据库设计接口开发小程序前端部署与测试安全与合规项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术栈选择 后端采用Python的Django或Flask框架&#xff0c;提供RESTful API接口。数据库使用MyS…...

编程新知 2026/3/27 21:13:47

别再让AI失忆了！手把手教你用Mem0为ChatGPT添加长期记忆（附Next.js实战代码）

为Next.js聊天应用注入长期记忆&#xff1a;Mem0集成实战指南 当你的AI助手开始记住用户的咖啡偏好和生日祝福时&#xff0c;整个交互体验会发生质的变化。本文将带你从零开始&#xff0c;在Next.js应用中实现这种"记忆魔法"。 1. 环境准备与Mem0初始化 首先创建一个…...

编程新知 2026/3/27 19:59:04

企业高效知识体系：8大核心特征+可落地搭建框架，告别知识散乱

对于企业而言&#xff0c;知识从来不是“文件堆”&#xff0c;而是能支撑业务、培养新人、规避风险的核心资产。很多企业陷入“文档满天飞、新人没人带、老员工离职带跑经验”的困境&#xff0c;本质是没有搭建起高效、完整的知识体系。今天就一次性讲透&#xff1a;一个能真正…...

编程新知 2026/3/27 16:45:32

用CODrone数据集训练YOLOv8-OBB：手把手教你搞定无人机旋转目标检测模型

从CODrone到YOLOv8-OBB&#xff1a;实战无人机旋转目标检测全流程指南 无人机航拍视角下的目标检测一直是计算机视觉领域的难点——倾斜视角带来的目标旋转、飞行高度变化导致的尺度差异、复杂背景干扰等问题&#xff0c;让传统水平框检测方法捉襟见肘。本文将带您完整实现从CO…...

编程新知 2026/3/27 15:35:02

K230目标检测实战：手把手教你用Labelme标注数据并一键转成VOC格式（附避坑指南）

K230目标检测实战&#xff1a;高效数据标注与VOC格式转换全攻略 当你第一次接触K230开发板进行目标检测项目时&#xff0c;数据准备往往是最大的拦路虎。特别是从原始图片到符合AI_Cube要求的VOC格式数据集&#xff0c;这个过程充满了各种"坑"。本文将分享一套经过实…...

编程新知 2026/3/27 15:08:51

Qwen3-ASR-1.7B新手必看：常见问题解决，音频格式、长音频处理技巧

Qwen3-ASR-1.7B新手必看&#xff1a;常见问题解决&#xff0c;音频格式、长音频处理技巧 1. 引言&#xff1a;语音识别模型的基础认知 语音识别技术正在改变我们处理音频数据的方式。Qwen3-ASR-1.7B作为一款多语言语音识别模型&#xff0c;为开发者提供了强大的离线转写能力。…...

编程新知 2026/3/27 15:02:50

刚刚，英伟达革了自己的命：智能体自主进化7天，干掉所有算子工程师、GPU专家

这应该是今天刚刚出炉的、最炸裂的文章。在很多算子开发的微信群组&#xff0c;已经掀起了轩然大波。「这或许是超人类智能在软件领域的真正首次展露。」英伟达许冰刚刚在 X 上发出了如此断言。他所评论的&#xff0c;正是他与 Terry Chen 和 Zhifan Ye 为共同一作的一项英伟达…...

编程新知 2026/3/27 14:34:31

OpenRocket：从设计到飞行的全链路火箭仿真实战指南

OpenRocket&#xff1a;从设计到飞行的全链路火箭仿真实战指南 【免费下载链接】openrocket Model-rocketry aerodynamics and trajectory simulation software 项目地址: https://gitcode.com/GitHub_Trending/op/openrocket 火箭爱好者与工程师的终极工具&#xff1a;…...

编程新知 2026/3/27 13:59:16