CSS的4种引入方式
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种引入方式一、内嵌式：CSS写在style标签中二、外联式：CSS写在一个单独的.css文件中三、行内式：CSS写在标签的style属性中四、导入外部样式五、css引用的优先级六、link和import的区别一、内嵌式：CSS写…...
Shell高级——Linux中的文件描述符（本质是数组的下标）
以下内容源于C语言中文网的学习与整理，非原创，如有侵权请告知删除。 前言 Linux中一切接文件，比如 C 源文件、视频文件、Shell脚本、可执行文件等，就连键盘、显示器、鼠标等硬件设备也都是文件。 一个 Linux 进程可以打开成百上…...
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 //板子标注…...
ffmpeg多路同时推流
一、ffmpeg常见使用方法1.1利用FFMPEG命令进行文件分割1.2转换格式1.3推流配置方法一：ngnix（不推荐，推流不好使）方法二：srs（强烈推荐）1.4查看nginx启动是否成功二、ffmpeg推流——>ngnix单路…...
一次性搞定 `SHOW SLAVE STATUS` 的解读
一次性搞定 SHOW SLAVE STATUS 的解读 解析日志文件的位置 诚然, GTID(全局事务标识符)已经在 MySQL 5.6中得到支持, 此外,还可以通过 Tungsten replicator 软件来实现(2009年以后一直有谷歌在维护,不是吗?)。 但有一部分人还在使用MySQL 5.5的标准副本方式, 那么这些二进制日…...
【代码随想录训练营】【Day25】第七章｜回溯算法 ｜216.组合总和III｜17.电话号码的字母组合
组合总和III 题目详细：LeetCode.216 做过上一题组合后，再来写这道题就显得得心应手了，通过理解回溯算法的模版，也总结出了算法中的一些特点： 回溯算法与递归算法类似，同样需要参数、结束条件和主体逻辑回…...
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…...
手把手docker registry配置登录名/密码
我们的Docker私有仓库Registry服务只有加了认证机制之后我们的Registry服务才会更加的安全可靠。赶快跟随以下步骤来增加认证机制吧。 创建docker registry工作目录 mkdir -p /data/docker.registry 创建将保存凭据的文件夹 mkdir -p /data/docker.registry/etc/registry/auth…...
一步打通多渠道服务场景 中电金信源启移动开发平台MADP功能“上新”
日前，中电金信源启移动开发平台MADP功能迭代升级，“上新”源启小程序开发平台。定位“为金融业定制”的移动PaaS平台，源启小程序开发平台为银行、互联网金融、保险、证券客户提供一站式小程序的开发、运营、营销全生命周期管理技术支撑&#…...
Kubernetes06:Controller (Deployment无状态应用)
Kubernetes06:Controller 1、什么是controller 管理和运行容器的对象，是一个物理概念 在集群上管理和运行容器的对象 2、Pod和Controller之间的关系 Pod是通过controller来实现应用的运维 比如伸缩、滚动升级等等操作Pod和Controller之间通过 label 标签建立关系…...
低代码开发平台选型必看指南
低代码开发是近年来逐渐兴起的一种新型软件开发方式。它通过封装常见的软件开发流程和代码，使得非专业的开发者也能够轻松创建复杂的应用程序。这种开发方式已经受到了许多企业的青睐，成为提高生产效率、降低开发成本的一种有效途径。 低代码开发的核心…...
OVN:ovn20.03.1/ovs2.13.0编译rpm过程
操作系统openeuler22.0，x86架构分别下载ovn和ovs的源码https://github.com/openvswitch/ovs/tree/v2.13.0https://github.com/ovn-org/ovn/tree/v20.03.1安装必要工具：yum install -y unzip tar make autoconf automake libtool rpm-build gcc libuuid-d…...
Shell管道
一、管道是什么 英文是pipe。 把一个命令的标准输出作为下一个命令的标准输入，以这种方式连接的两个或者多个命令就形成了管道 使用竖线|连接多个命令，称为管道符。 语法格式如下： command1 | command2 [ | commandN... ] command1的标准…...
Zynq UltraScale系列使用MIPI CSI-2 RX Subsystem 解码MIPI视频PD输出 提供2套工程源码和技术支持
目录1、前言2、设计思路和架构3、vivado工程详解4、上板调试验证5、福利：工程代码的获取1、前言 本设计采用OV5640摄像头MIPI模式作为输入，分辨率为1280x72060Hz，MIPI解码方案采用Xilinx官方提供的MIPI CSI-2 RX Subsystem IP解码MIPI视频&a…...
C++：详解C++11 线程休眠函数
休眠函数简介1: 让线程休眠一段时间1.1：std::chrono 的时钟 clock简介 C11 之前并未提供专门的休眠函数，C语言的 sleep、usleep函数其实是系统提供的函数，不同的系统函数的功能还要些差异。 在Windows系统中，sleep的参数是毫秒 …...
TryHackMe-The Great Escape（Docker）
The Great Escape 我们的开发人员创建了一个很棒的新网站。你能冲出沙盒吗？ 端口扫描 循例 nmap Web信息收集 robots.txt: /exif-util是文件上传点，但是绕过之后貌似没啥用 在robots.txt当中披露了可能存在.bak.txt，现在我们已知的文件就是…...
这么强才给我28k，我头都不回，转身拿下40k~
时间真的过得很快，眨眼就从校园刚出来的帅气小伙变成了油腻大叔，给各位刚入道的测试朋友一点小建议，希望你们直通罗马吧！ 如何选择自己合适的方向 关于选择测试管理： 第一，你一定不会是一个喜欢技术&…...
【Python学习笔记】第二十一节 Python Lambda 函数
Python 提供了非常多的库和内置函数。有不同的方法可以执行相同的任务，而在 Python 中，有个万能之王函数：lambda 函数，它以不同的方式在任何地方使用。一、Lambda 函数简介在 Python 中，函数可以接受一个或多个位置参数…...
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、反向代理配置…...
阿里面试之Hr面，这个套路把我坑惨了......
作为技术类的测试工程师面试，往往要经过多次面试才能拿到心仪的offer，这里面有技术一面、二面…，甚至总监面等，还有一个必不可少的就是HR面，一般HR会出现在你面试的最前面和最后面，前面是了解你的基本情况&…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
API网关Kong的鉴权与限流：高并发场景下的核心实践
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中，API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关，Kong凭借其插件化架构…...
Vue 3 + WebSocket 实战：公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战：公司通知实时推送功能详解 📌 收藏 点赞 关注，项目中要用到推送功能时就不怕找不到了！ 实时通知是企业系统中常见的功能，比如：管理员发布通知后，所有用户…...