CSS 样式文件引入的方式有哪些?

一、内部样式表

1. 定义

在 HTML 文档内部,通过`<style>`标签在`<head>`部分定义 CSS 样式。这些样式只对当前 HTML 页面有效。

2. 优点

方便简单、针对性强。

3. 缺点

缺乏复用性、HTML 文件臃肿。

二、外部样式表

1. 定义

将 CSS 样式代码单独写在一个`.css`文件中,然后通过 HTML 文档中的`<link>`标签将其引入。

2. 优点

复用性高、便于维护、提高性能(在一定程度上)。

3. 缺点

增加请求数量(相对)、需要注意路径问题。

三、内联样式

1. 定义

直接在 HTML 元素的`style`属性中定义 CSS 样式。这种样式只应用于当前元素。

2. 优点

精准控制、简单直接。

3. 缺点

缺乏复用性和可维护性、不符合样式与内容分离原则。

相关推荐
King of fraud9 分钟前
HTML 页面的 CSS 选择器详解
前端·css·html
前端 贾公子11 分钟前
Milvus使用指南 (下)
java·服务器·前端
用户542778485154025 分钟前
浏览器后台休眠节流
前端
蜡台26 分钟前
Vue 3 原生 ESM 开发实战:不用打包工具,从零搭建组件化应用
前端·javascript·vue.js·html
我的div丢了肿么办29 分钟前
grid布局justify-items和align-items、justify-content和align-content
前端·css
用户2986985301429 分钟前
在 React 中使用 JavaScript 将 HTML 转换为图片
javascript·react.js·html
寻缘千鹤31 分钟前
LogicFlow流程图 PNG 导出「线上按钮置灰、无反应」故障复盘
前端·javascript·vue.js
梨想橙汁36 分钟前
Vite 优化、踩坑汇总 + Webpack 迁移 Vite 实战
前端·webpack·vite
10share38 分钟前
给 JSX 组件也来一份 Vue 式 scoped:jsx-scoped 让样式隔离不再靠自觉
前端·vue.js
小聪70838 分钟前
elpis-core 领域模型驱动设计解析
前端