CSS（一）-- 三种样式表
目录
1. 行内样式表
2. 内部样式表
3. 外部样式表（即引入 .css文件）（重点掌握）
1. 行内样式表
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。
<div style="color: red; font-size: 12px;">还君明珠双泪垂，恨不相逢未嫁时。</div>
- style 其实就是标签的属性，可以控制当前的标签设置样式。
- 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
- 使用行内样式表设定 CSS，通常也被称为行内式引入。
2. 内部样式表
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。
<style> div { color: red; font-size: 12px; } </style>
- <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。
- 通过此种方式，可以方便控制当前整个页面中的元素样式设置 代码结构清晰，但是并没有实现结构与样式完全分离 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。
3. 外部样式表（即引入 .css文件）（重点掌握）
实际开发都是外部样式表. 适合于样式比较多的情况.
核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
引入外部样式表分为两步：
- 新建一个后缀名为 .css 的样式文件，把所有 css 代码都放入此文件中。
- 在 HTML 页面中，使用<link> 标签引入这个文件。
<link rel="stylesheet" href="css文件路径"><link>的常用属性：
属性 说明 rel 指定链接的类型，比如样式表（stylesheet）、图标（icon）、指示浏览器预解析 DNS，加速域名解析（dns-prefetch）、指示浏览器预连接到相关资源，减少请求延迟（preconnect）、指示浏览器预请求资源，提高用户体验（prefetch）、指示某个链接为下一篇/上一篇文章，用于增强网站的导航性能（next/prev）等。 href 指定链接资源的路径和文件名（可以是相对路径，也可以是绝对路径）。 type 指定链接资源的 MIME 类型，比如 text/css、image/png 等，对于 CSS 文件可以省略该属性。 integrity 指定链接资源的完整性校验码，用于验证资源是否被篡改。 crossorigin 指定链接资源的跨域属性，可选值为 anonymous、use-credentials。 media 指定样式表的媒体类型，比如 screen、print、all 等。
实例演示：
下面是一个使用 link 标签链接样式表的例子：
<!DOCTYPE html>
<html>
<head><title>My Website</title><link rel="stylesheet" type="text/css" href="MyStyle.css">
</head>
<body><h1>《蜀相》</h1><p>唐⋅ 杜甫</p><p>三顾频烦天下计，两朝开济老臣心。</p>
</body>
</html>在这个例子中，我们使用 link 标签链接了一个名为 MyStyle.css 的样式表文件。rel 属性指定了链接的类型，type 属性指定了链接资源的 MIME 类型，href 属性指定了链接资源的路径和文件名。在这个例子中，type 属性可以省略，因为浏览器可以自动识别 CSS 文件。
link 标签还可以用于链接网站图标（通常是一个 .ico 文件）,如下：
<!DOCTYPE html>
<html>
<head><title>My Website</title><link rel="icon" type="image/png" href="Myicon.png">
</head>
<body><h1>怎样都好，只要能让他们发笑就好。</h1><p>-人间失格</p>
</body>
</html>在这个例子中，我们使用 link 标签链接了一个名为 Myicon.png 的图标文件。rel 属性指定了链接类型为 icon，type 属性指定了图标文件的 MIME 类型，href 属性指定了链接资源的路径和文件名。在这个例子中，我们使用了 type 属性，因为不同浏览器对于网站图标的 MIME 类型的支持有所不同。
除了样式表和图标，link 标签还可以用于链接其他资源，比如字体、脚本等。需要注意的是，使用 link 标签链接外部资源需要保证链接路径的正确性和服务器端的资源访问权限。
继续学习之路：
CSS（一）-- 三种样式表
CSS（二）-- 选择器的运用（针对基本选择器和复合选择器的详细解析）
CSS（三）-- 伪类选择器与伪元素选择器
CSS（四）-- 针对字体、文本的常用基本属性
如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！
相关文章：
CSS（一）-- 三种样式表
目录 1. 行内样式表 2. 内部样式表 3. 外部样式表（即引入 .css文件）（重点掌握） 1. 行内样式表 行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。 <di…...
嵌入式之Samba服务器搭建
在嵌入式系统开发应用平台中，tftp、nfs和samba服务器是最常用的文件传输工具 tftp和nfs是在嵌入式Linux开发环境中经常使用的传输工具 samba则是Linux和Windows之间的文件传输工具。 下面演示在linux上搭建Samba服务器 sudo apt-get install samba chmod -R 77…...
vue3+go——看到了就去学习吧
vue3go——看到了就去学习吧 Vue3.2 Vite Element-Plus 实现最基础的 CRUD1.效果展示【02:36】2.创建项目【03:16】3.添加github管理【04:10】4.引入element-plus【04:21】5.内容布局【08:59】6.布局优化【05:31】7.添加弹窗【09:34】8.ref改$ref【02:47】9.新增数据【09:22】…...
Perf工具统计CPU性能
Perf 性能检测工具 Perf 是一个内置于Linux内核中的工具，用于性能分析和调优。它可以对系统的CPU使用情况、内存使用情况、磁盘I/O、网络I/O等进行监控和分析，并提供了丰富的分析和可视化工具，以帮助用户定位和解决性能问题。perf可以进行函…...
考验大家指针功底的时候到了：请问如何理解 (int*)1 + 1 ？
来，猜猜看，这里的执行结果是什么？ 这是今天课上的一道理解题，给大家一点点思考时间。 （心里有答案了再往下滑哦） 5 4 3 2 1 . 答案是，报warning！因为%d不是用来输出指针的哈…...
英语基础-介词
介词 方位介词 in:在…里面 Its in the box. 在盒子里 in my backpack 在背包里 in the tree 长在树上on:在…上面（指与物体表面接触） Its on the box. 在盒子上(和盒子接触) on the floor.在地板上 on the tree.在树上under:在…下面 Its unde…...
Linux进程通信：进程组 会话
1. 进程组 （1）概念：一个或多个进程的集合，也称为“作业”。 （2）父进程创建子进程时，默认属于同一个进程组。进程组ID为组长进程ID。 （3）进程组中只要有一个进程存在&a…...
【前端面经】JS-深浅拷贝
理解深浅拷贝 深浅拷贝问题的出现是由于JavaScript对不同类型的存储方式而引发的。 对于原始数据类型，它们的值是直接存储在栈内存中； 而复杂数据类型，则在栈内存中记录它的指针，而指针指向堆内存中真正的值。 所以对于原始数据类…...
【自然语言处理】实验2布置：Word2Vec TransE案例
NLP_class 学堂在线《自然语言处理》实验课代码报告，授课老师为刘知远老师。课程链接：https://www.xuetangx.com/training/NLP080910033761/1017121?channeli.area.manual_search。 持续更新中。 所有代码为作者所写，并非最后的“标准答案…...
Redis集合底层实现原理
目录 本章重点简单动态字符串SDS集合底层实现原理zipListlistPackskipListquickListKey 与Value中元素的数量 本章重点 掌握Redis简单动态字符串了解Redis集合底层实现原理 简单动态字符串SDS SDS简介 我们Redis中无论是key还是value其数据类型都是字符串.我们Redis中的字符…...
OVS常用命令与使用总结
OVS常用命令与使用总结 说明 在平时使用ovs中，经常用到的ovs命令，参数，与举例总结，持续更新中… 进程启动 1.先准备ovs的工作目录，数据库存储路径等 mkdir -p /etc/openvswitch mkdir -p /var/run/openvswitch …...
一以贯之：从城市网络到“城市一张网”
《论语里仁》中子曰：“参乎，吾道一以贯之”。 孔子所说的“一以贯之”，逐渐成为了中国文化与哲学的重要组成部分，指明事物发展往往需要以标准化、集约化、融合化作为目标。这种智慧在数字化发展中格外重要。从云计算、大数据技术模…...
【Java校招面试】基础知识（四）——JVM
目录 前言一、基础概念二、反射三、类加载器ClassLoader四、JVM内存模型后记 前言 本篇主要介绍Java虚拟机——JVM的相关内容。 “基础知识”是本专栏的第一个部分，本篇博文是第四篇博文，如有需要，可： 点击这里，返回…...
项目管理-计算专题（三点估算、PERT估算）
基本概念 通过考虑估算中的不确定性和风险，可以提高活动持续时间估算的准确性。这个概念源自计划评审技术(PERT)。PERT使用三种估算值来界定活动持续时间的近似区间: 最可能时间(tM)：基于最可能获得的资源、最可能取得的资源生产率、对资源可用时间的现…...
【华为OD机试 2023最新 】模拟商场优惠打折（C语言题解 100%）
文章目录 题目描述输入描述输出描述用例题目解析代码思路C语言题目描述 模拟商场优惠打折，有三种优惠券可以用，满减券、打折券和无门槛券。 满减券：满100减10，满200减20，满300减30，满400减40，以此类推不限制使用； 打折券：固定折扣92折，且打折之后向下取整，每次购…...
使用TrieTree（字典树）来实现敏感词过滤
使用TrieTree（字典树）来实现敏感词过滤 1. 字典树定义 字典树（TrieTree），是一种树形结构，典型应用是用于统计，排序和保存大量的字符串（但不仅限于字符串,如01字典树）。…...
USB转串口芯片CH9101U
CH9101是一个USB总线的转接芯片，实现USB转异步串口。提供了常用的MODEM联络信号，用于为计算机扩展异步串口，或者将普通的串口设备或者MCU直接升级到USB总线。 特点 全速USB设备接口，兼容USB V2.0。内置固件，仿真标准串…...
Java语言介绍
Java是一种广泛使用的计算机编程语言，由Sun Microsystems公司于1995年推出。它是一个健壮的、面向对象的、跨平台的语言，被用于开发各种应用程序和系统，包括Web应用程序、移动应用程序、桌面应用程序、游戏以及企业级系统等。 Java具有许多优…...
终于把 vue-router 运行原理讲明白了（二）！！！
一、vue-router路由变化侦测 1.1 上一遍文章中，介绍了vue-router 的install 函数的内部实现，知道了能在this中访问$router 和视图更新的机制，文章链接终于把 vue-router 运行原理讲明白了（一）！！…...
ChatGPT实现服务器体验沙箱
服务器体验沙箱 IT 人员在学习一门新技术时，第一个入门门槛通常都是"如何在本地安装并成功运行"。因此，很多技术的官网都会通过沙箱技术，提供在线试用的 playground 或者按步模拟的 tour。让爱好者先在线尝试效果是否满足预期&…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
基于Springboot+Vue的办公管理系统
角色： 管理员、员工 技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...
详细解析)
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...