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。让爱好者先在线尝试效果是否满足预期&…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...
tauri项目，如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...