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

CSS的引入方式有哪些？

news 2025/9/29 2:58:35

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 内联样式（Inline Styles）
  • ⭐ 内部样式表（Internal Stylesheet）
  • ⭐ 外部样式表（External Stylesheet）
  • ⭐ 导入样式表（Import Stylesheet）
  • ⭐ 写在最后

⭐ 专栏简介

前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具，我们将深入浅出地解释概念，并提供实际案例和练习来巩固所学内容。同时，我们也会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此，我们还会定期推出一些项目实战教程，让你能够将所学知识应用到实际开发中。通过实际项目的练习，你将能够更好地理解前端开发的工作流程和方法论，并培养自己解决问题和独立开发的能力。我们相信，只有不断积累和实践，才能真正掌握前端开发技术。因此，请准备好迎接挑战，勇敢地踏上这段前端入门之旅！无论你是寻找职业转型、提升技能还是满足个人兴趣，我们都将全力以赴，为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧！加入前端入门之旅，成为一名出色的前端开发者！ 让我们启航前端之旅

在前端开发中，可以通过多种方式引入CSS（层叠样式表）来为网页添加样式和布局。以下是常见的CSS引入方式：

⭐ 内联样式（Inline Styles）

这种方式将CSS样式直接写在HTML元素的style属性中。样式只会应用于特定的元素，但不太适合大规模的样式管理。

<div style="color: blue; font-size: 16px;">This is a blue text</div>

⭐ 内部样式表（Internal Stylesheet）

使用<style>标签在HTML文件的<head>部分定义CSS样式。这种方式适用于单个HTML文件的小规模样式。

<head><style>.blue-text {color: blue;font-size: 16px;}</style>
</head>
<body><div class="blue-text">This is a blue text</div>
</body>

⭐ 外部样式表（External Stylesheet）

将CSS代码保存在独立的.css文件中，然后通过<link>标签将其链接到HTML文件。这是一种更为常见和推荐的方式，可以在多个页面之间共享样式。

<!-- 在 head 部分 -->
<link rel="stylesheet" type="text/css" href="styles.css"><!-- styles.css 文件内容 -->
.blue-text {color: blue;font-size: 16px;
}

⭐ 导入样式表（Import Stylesheet）

可以在一个CSS文件中使用@import规则来导入其他CSS文件。不过，由于每个导入都会导致额外的HTTP请求，这种方式在性能上可能不如使用外部样式表。

/* main.css 文件内容 */
@import url("styles.css");

总之，根据项目的规模和需要，你可以选择适合的CSS引入方式。外部样式表通常是最常用的，因为它可以将样式从HTML中分离出来，使得代码更加清晰、易于维护，并且可以在整个网站中重用样式。

⭐ 写在最后

本专栏适用读者比较广泛，适用于前端初学者；或者没有学过前端对前端有兴趣的伙伴，亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点，所以如果你具备了前端的基础跟着本专栏学习，也是可以很大程度帮助你查漏补缺，由于博主本人是自己再做内容输出，如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我，我们一起进步，与此同时也推荐大家几份专栏，有兴趣的伙伴可以订阅一下：除了下方的专栏外大家也可以到我的主页能看到其他的专栏；

前端小游戏（免费）这份专栏将带你进入一个充满创意和乐趣的世界，通过利用HTML、CSS和JavaScript的基础知识，我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验，这个专栏都适合你。我们会从最基础的知识开始，循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习，你将学会如何运用HTML来构建页面结构，使用CSS来美化游戏界面，并利用JavaScript为游戏添加交互和动态效果。在这个专栏中，我们将涵盖各种类型的小游戏，包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程，并提供详细解释和代码示例。同时，我们也会分享一些优化技巧和最佳实践，帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能，还是对页面游戏开发感兴趣，前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】（付费） 欢迎来到Vue3通透教程！这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南（免费） 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码，我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者，都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成，我们将全面覆盖各个方面。通过阅读本专栏，您将能够提升JavaScript代码的可靠性和可维护性，并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧！点击订阅TypeScript入门指南专栏

在这里插入图片描述

相关文章：

CSS的引入方式有哪些？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 内联样式&#xff08;Inline Styles&#xff09;⭐ 内部样式表&#xff08;Internal Stylesheet&#xff09;⭐ 外部样式表&#xff08;External Stylesheet&#xff09;⭐ 导入样式表&#xff08;Import Stylesheet&#xff09;⭐ 写在最…...

编程日记 2023/8/14 1:57:59

.net core的Knife4jUI，让swagger更精致

要在 .NET Core 中使用 IGeekFan.AspNetCore.Knife4jUI&#xff0c;您可以按照以下步骤进行配置&#xff1a; 首先&#xff0c;安装 IGeekFan.AspNetCore.Knife4jUI NuGet 包。可以通过 Visual Studio 的 NuGet 包管理器或者 .NET CLI 进行安装。 在 Startup.cs 文件的 Config…...

编程日记 2023/8/14 1:56:58

Android 开发中需要了解的 Gradle 知识

作者&#xff1a;wkxjc Gradle 是一个基于 Groovy 的构建工具&#xff0c;用于构建 Android 应用程序。在 Android 开发中&#xff0c;了解 Gradle 是非常重要的&#xff0c;因为它是 Android Studio 默认的构建工具&#xff0c;可以帮助我们管理依赖项、构建应用程序、运行测试…...

编程日记 2023/8/14 1:55:56

Linux之【进程间通信（IPC）】-总结篇

Linux之【进程间通信&#xff08;IPC&#xff09;】-总结篇 管道System V共享内存System V消息队列System V信号量IPC资源的管理方式 往期文章 1.进程间通信之管道 2.进程间通信之System V共享内存 管道 进程之间具有独立性&#xff0c;拥有自己的虚拟地址空间&#xff0c;因…...

编程日记 2023/8/14 1:54:54

C++QT教程3——手册4.11.1自带教程（笔记）——创建一个基于Qt Widget的应用程序

文章目录 创建一个基于Qt Widget的应用程序创建Text Finder项目素材文件 填补缺失的部分设计用户界面完成头文件完成源文件创建资源文件 编译和运行程序 参考文章 创建一个基于Qt Widget的应用程序 本教程介绍如何使用Qt Creator创建一个小型Qt应用程序&#xff0c;名为Text F…...

编程日记 2023/8/14 1:53:52

手机商城网站的分析与设计(论文+源码)_kaic

目录 摘 要 1 1 绪论 2 1.1选题背景意义 2 1.2国内外研究现状 2 1.2.1国内研究现状 2 1.2.2国外研究现状 3 1.3研究内容 3 2 网上手机商城网站相关技术 4 2.1.NET框架 4 2.2Access数据库 4 2.3 JavaScript技术 4 3网上手机商城网站分析与设…...

编程日记 2023/8/14 1:52:51

vue2 封装 webSocket 开箱即用

第一步&#xff1a; 下载 webSocket npm install vue-native-websocket --save 第二步&#xff1a; 需要在 main.js 中 引入 import websocket from vue-native-websocket; Vue.use(websocket, , {connectManually: true, // 手动连接format: json, // json格式reconnection:…...

编程日记 2023/8/14 1:51:50

使用fopen等标准C库来操作文件

fopen 需要的头文件&#xff1a; #include <stdio.h> 函数原型&#xff1a; FILE *fopen(const char *pathname, const char *mode); 参数&#xff1a; pathname: 文件路径mode: “r” &#xff1a;以只读方式打开文件&#xff0c;该文件必须存在。“w” &#xff…...

编程日记 2023/8/14 1:50:49

Spring-Cloud-Loadblancer详细分析_1

背景 从SpringCloud 2020 版本之后&#xff0c;组件移除了除 Eureka 以外&#xff0c;所有 Netflix 的相关&#xff0c;包括最常用的 Ribbon Hystrix 等&#xff0c;所以 SpringCloud 在 spring-cloud-commons 提供了Loadbalancer 用来替代 Ribbon。本系列就来介绍Loadbalance…...

编程日记 2023/8/14 1:49:48

键盘键码keyCode对照表

字母和数字键的键码值(KeyCode)按键键码按键键码A65J74B66K75C67L76D68M77E69N78F70O79G71P80H72Q81I73R82 字母和数字键的键码值(KeyCode)按键键码按键键码S83149T84250U85351V86452W87553X88654Y89755Z90856048957 数字键盘上的键的键码值(KeyCode)按键键码按键键码0968104…...

编程日记 2023/8/14 1:48:46

jupyter切换conda虚拟环境

环境安装 conda install nb_conda 进入你想使用的虚拟环境&#xff1a; conda activate your_env_name 在你想使用的conda虚拟环境中&#xff1a; conda install -y jupyter 在虚拟环境中安装jupyter&#xff1a; conda install -y jupyter 重启jupyter 此时我们已经把该安装…...

编程日记 2023/8/14 1:47:45

【数据结构•堆】经典问题：k路归并

题目描述 k路归并问题&#xff1a; 　　把k个有序表合并成一个有序表。&#xff08; k < 10^4 &#xff09; 输入输出格式 输入格式&#xff1a; 输入数据共有 2*k1 行。 　　第一行&#xff0c;一个整数k&#xff08; k < 10^4 &#xff09;&#xff0c;表示有k个有序…...

编程日记 2023/8/14 1:46:44

VUE3 动态路由

带参数的动态路由匹配 很多时候&#xff0c;我们需要将给定匹配模式的路由映射到同一个组件。例如&#xff0c;我们可能有一个 User 组件&#xff0c;它应该对所有用户进行渲染&#xff0c;但用户 ID 不同。在 Vue Router 中&#xff0c;我们可以在路径中使用一个动态字段来实现…...

编程日记 2023/8/14 1:45:43

CentOS软件包管理rpm、yum

一、软件包概述 Linux常见软件包分为两种&#xff0c;分别是源代码包、二进制文件包。源代码包是没有经过编译的包&#xff0c;需要经过GCC、C编译器编译才能运行&#xff0c;文件内容包含源代码文件&#xff0c;通常以.tar.gz、.zip、.rar结尾&#xff1b;二进制包无需编译&am…...

编程日记 2023/8/14 1:44:40

【VSCode】报错：出现段错误解决办法 (Segmentation fault)

VScode报错&#xff1a;Segmentation fault (core dumped)的解决办法 解决Program received signal SIGSEGV, Segmentation fault.的辛酸 Linux环境下段错误的产生原因及调试方法小结 Linux下的段错误Segmentationfault产生的原因及调试方法经典.pdf 在程序中&#xff0c;TF…...

编程日记 2023/8/14 1:43:39

Linux Centos 8 用户管理之重置密码

如果在使用linux系统时遇到系统密码问题无法进入系统或者操作的时候可以按照下面的方法重置用户密码。 一、root用户密码重置&#xff1a; 方式一&#xff1a; 1.重启电脑或虚拟机&#xff0c;在刚进引导界面时候按“e"键&#xff0c;进入编辑模式。 2.在”quiet"…...

编程日记 2023/8/14 1:42:37

C语言快速回顾（三）

前言 在Android音视频开发中&#xff0c;网上知识点过于零碎&#xff0c;自学起来难度非常大&#xff0c;不过音视频大牛Jhuster提出了《Android 音视频从入门到提高 - 任务列表》&#xff0c;结合我自己的工作学习经历&#xff0c;我准备写一个音视频系列blog。C/C是音视频必…...

编程日记 2023/8/14 1:41:36

【Apollo】Apollo-ros版本架构学习与源码分析

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Apollo-ros版本架构学习与源码分析。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&a…...

编程日记 2023/8/14 1:40:33

【Express.js】集成RabbitMQ

集成RabbitMQ 本节我们介绍在 express.js 中集成 rabbitmq. RabbitMQ 是一个消息队列中间件&#xff0c;常用于请求削峰&#xff0c;事务的队列处理&#xff0c;事件订阅机制的实现等。 准备工作 创建一个 express.js 项目&#xff08;本文基于evp-express-cli&#xff09;…...

编程日记 2023/8/14 1:39:32

UI美工设计岗位的基本职责概述（合集）

UI美工设计岗位的基本职责概述1 1、有良好的美术功底、设计新颖&#xff0c;整体配色及设计创意理念&#xff0c;能够独立完成整个网站页面设计及制作; 2、熟练运用DIV CSS&#xff0c;HTML 设计制作网页 ; 3、熟练运用Photoshop,Dreamweaver,Coreldraw(或Illustrator),Fla…...

编程日记 2023/8/14 1:38:31

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/9/27 23:56:59

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/7/20 12:09:50

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/9/28 0:40:45

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/9/28 18:39:56

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/9/28 2:00:00

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/9/15 12:06:17

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/8/3 5:51:09

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/9/29 0:15:19

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/8/19 6:37:10

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/9/28 22:38:35