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

CSS（一）-- 三种样式表

news 2025/10/29 14:30:35

目录

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 页面中使用.

引入外部样式表分为两步：

  1. 新建一个后缀名为 .css 的样式文件，把所有 css 代码都放入此文件中。
  2. 在 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. 外部样式表&#xff08;即引入 .css文件&#xff09;&#xff08;重点掌握&#xff09; 1. 行内样式表 行内样式表&#xff08;内联样式表&#xff09;是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。 <di…...

编程日记 2023/5/30 23:33:58

嵌入式之Samba服务器搭建

在嵌入式系统开发应用平台中&#xff0c;tftp、nfs和samba服务器是最常用的文件传输工具 tftp和nfs是在嵌入式Linux开发环境中经常使用的传输工具 samba则是Linux和Windows之间的文件传输工具。 下面演示在linux上搭建Samba服务器 sudo apt-get install samba chmod -R 77…...

编程日记 2023/5/3 21:39:02

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】…...

编程日记 2023/5/3 21:34:00

Perf工具统计CPU性能

Perf 性能检测工具 Perf 是一个内置于Linux内核中的工具&#xff0c;用于性能分析和调优。它可以对系统的CPU使用情况、内存使用情况、磁盘I/O、网络I/O等进行监控和分析&#xff0c;并提供了丰富的分析和可视化工具&#xff0c;以帮助用户定位和解决性能问题。perf可以进行函…...

编程日记 2023/5/3 21:28:59

考验大家指针功底的时候到了：请问如何理解 (int*)1 + 1 ？

来&#xff0c;猜猜看&#xff0c;这里的执行结果是什么&#xff1f; 这是今天课上的一道理解题&#xff0c;给大家一点点思考时间。 &#xff08;心里有答案了再往下滑哦&#xff09; 5 4 3 2 1 . 答案是&#xff0c;报warning&#xff01;因为%d不是用来输出指针的哈…...

编程日记 2023/5/3 21:23:58

英语基础-介词

介词 方位介词 in:在…里面 Its in the box. 在盒子里 in my backpack 在背包里 in the tree 长在树上on:在…上面&#xff08;指与物体表面接触&#xff09; Its on the box. 在盒子上(和盒子接触) on the floor.在地板上 on the tree.在树上under:在…下面 Its unde…...

编程日记 2023/5/3 21:18:57

Linux进程通信：进程组 会话

1. 进程组 &#xff08;1&#xff09;概念&#xff1a;一个或多个进程的集合&#xff0c;也称为“作业”。 &#xff08;2&#xff09;父进程创建子进程时&#xff0c;默认属于同一个进程组。进程组ID为组长进程ID。 &#xff08;3&#xff09;进程组中只要有一个进程存在&a…...

编程日记 2023/5/3 21:13:55

【前端面经】JS-深浅拷贝

理解深浅拷贝 深浅拷贝问题的出现是由于JavaScript对不同类型的存储方式而引发的。 对于原始数据类型&#xff0c;它们的值是直接存储在栈内存中&#xff1b; 而复杂数据类型&#xff0c;则在栈内存中记录它的指针&#xff0c;而指针指向堆内存中真正的值。 所以对于原始数据类…...

编程日记 2023/5/3 21:08:53

【自然语言处理】实验2布置：Word2Vec TransE案例

NLP_class 学堂在线《自然语言处理》实验课代码报告&#xff0c;授课老师为刘知远老师。课程链接&#xff1a;https://www.xuetangx.com/training/NLP080910033761/1017121?channeli.area.manual_search。 持续更新中。 所有代码为作者所写&#xff0c;并非最后的“标准答案…...

编程日记 2023/5/3 21:03:52

Redis集合底层实现原理

目录 本章重点简单动态字符串SDS集合底层实现原理zipListlistPackskipListquickListKey 与Value中元素的数量 本章重点 掌握Redis简单动态字符串了解Redis集合底层实现原理 简单动态字符串SDS SDS简介 我们Redis中无论是key还是value其数据类型都是字符串.我们Redis中的字符…...

编程日记 2023/5/31 8:59:25

OVS常用命令与使用总结

OVS常用命令与使用总结 说明 在平时使用ovs中&#xff0c;经常用到的ovs命令&#xff0c;参数&#xff0c;与举例总结&#xff0c;持续更新中… 进程启动 1.先准备ovs的工作目录&#xff0c;数据库存储路径等 mkdir -p /etc/openvswitch mkdir -p /var/run/openvswitch …...

编程日记 2023/5/3 20:53:50

一以贯之：从城市网络到“城市一张网”

《论语里仁》中子曰&#xff1a;“参乎&#xff0c;吾道一以贯之”。 孔子所说的“一以贯之”&#xff0c;逐渐成为了中国文化与哲学的重要组成部分&#xff0c;指明事物发展往往需要以标准化、集约化、融合化作为目标。这种智慧在数字化发展中格外重要。从云计算、大数据技术模…...

编程日记 2023/5/3 20:48:48

【Java校招面试】基础知识（四）——JVM

目录 前言一、基础概念二、反射三、类加载器ClassLoader四、JVM内存模型后记 前言 本篇主要介绍Java虚拟机——JVM的相关内容。 “基础知识”是本专栏的第一个部分&#xff0c;本篇博文是第四篇博文&#xff0c;如有需要&#xff0c;可&#xff1a; 点击这里&#xff0c;返回…...

编程日记 2023/5/3 20:43:47

项目管理-计算专题（三点估算、PERT估算）

基本概念 通过考虑估算中的不确定性和风险&#xff0c;可以提高活动持续时间估算的准确性。这个概念源自计划评审技术(PERT)。PERT使用三种估算值来界定活动持续时间的近似区间: 最可能时间(tM)&#xff1a;基于最可能获得的资源、最可能取得的资源生产率、对资源可用时间的现…...

编程日记 2023/5/31 4:04:42

【华为OD机试 2023最新 】模拟商场优惠打折（C语言题解 100%）

文章目录 题目描述输入描述输出描述用例题目解析代码思路C语言题目描述 模拟商场优惠打折，有三种优惠券可以用，满减券、打折券和无门槛券。 满减券：满100减10，满200减20，满300减30，满400减40，以此类推不限制使用； 打折券：固定折扣92折，且打折之后向下取整，每次购…...

编程日记 2023/5/30 17:58:11

使用TrieTree（字典树）来实现敏感词过滤

使用TrieTree&#xff08;字典树&#xff09;来实现敏感词过滤 1. 字典树定义 字典树&#xff08;TrieTree&#xff09;&#xff0c;是一种树形结构&#xff0c;典型应用是用于统计&#xff0c;排序和保存大量的字符串&#xff08;但不仅限于字符串,如01字典树&#xff09;。…...

编程日记 2023/5/31 19:13:03

USB转串口芯片CH9101U

CH9101是一个USB总线的转接芯片&#xff0c;实现USB转异步串口。提供了常用的MODEM联络信号&#xff0c;用于为计算机扩展异步串口&#xff0c;或者将普通的串口设备或者MCU直接升级到USB总线。 特点 全速USB设备接口&#xff0c;兼容USB V2.0。内置固件&#xff0c;仿真标准串…...

编程日记 2023/5/30 23:01:57

Java语言介绍

Java是一种广泛使用的计算机编程语言&#xff0c;由Sun Microsystems公司于1995年推出。它是一个健壮的、面向对象的、跨平台的语言&#xff0c;被用于开发各种应用程序和系统&#xff0c;包括Web应用程序、移动应用程序、桌面应用程序、游戏以及企业级系统等。 Java具有许多优…...

编程日记 2023/5/3 20:18:40

终于把 vue-router 运行原理讲明白了（二）！！！

一、vue-router路由变化侦测 1.1 上一遍文章中&#xff0c;介绍了vue-router 的install 函数的内部实现&#xff0c;知道了能在this中访问$router 和视图更新的机制&#xff0c;文章链接终于把 vue-router 运行原理讲明白了&#xff08;一&#xff09;&#xff01;&#xff01…...

编程日记 2023/5/3 20:13:39

ChatGPT实现服务器体验沙箱

服务器体验沙箱 IT 人员在学习一门新技术时&#xff0c;第一个入门门槛通常都是"如何在本地安装并成功运行"。因此&#xff0c;很多技术的官网都会通过沙箱技术&#xff0c;提供在线试用的 playground 或者按步模拟的 tour。让爱好者先在线尝试效果是否满足预期&…...

编程日记 2023/5/30 17:59:23

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/10/28 2:05:19

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/19 12:51:08

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/10/19 10:09:01

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/10/25 8:57:35

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/9/12 21:09:32

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/10/24 11:54:49

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/10/26 1:09:31

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/9/18 10:36:44

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/8/17 23:35:19