CSS的书写位置

让我为大家介绍一下css的书写位置

1.内部

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部</title>
    <!-- 内部位置 -->
    <!-- 这就是内部形式 -->
    <style>
        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
</html>

2.外部

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部</title>
    <!-- 这是外部形式,也是开发中最常用的 -->
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
</html>

3.行内

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内</title>
</head>
<body>
    <!-- 行内加style -->
    <div style="width: 200px;height: 200px;">1</div>
</body>
</html>

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关推荐
涛涛ing4 分钟前
为什么你的页面在 Safari 上总出问题?Interop 2027 正在解决这个 20 年老毛病
前端
不一样的少年_17 分钟前
WebP 压缩到底在干嘛?小白也能看懂的原理拆解
前端·后端·图片资源
问心无愧051318 分钟前
ctf show web 177
前端·笔记
不一样的少年_20 分钟前
PNG/JPG 如何变成 WebP?真相不是改后缀!
前端·后端·图片资源
杉氧31 分钟前
RN 性能调优指南:重渲染(Re-renders)控制与长列表(FlatList)优化
android·前端·react native
一_个前端33 分钟前
[JS] 一站式搞定 PDF、图片、Dom弹窗、表格的浏览器打印功能
前端
JavaGuide37 分钟前
阿里 Qoder 又开源了一个专门给 Claude Code、Codex 做“体检”的项目
前端·后端
不一样的少年_37 分钟前
JPEG 压缩到底在干嘛?小白也能看懂的 8 步拆解
前端·后端·图片资源
三小河1 小时前
RAG、LLM Wiki、本体(Ontology)到底是个啥?
前端·人工智能·后端
大模型码小白1 小时前
数据可视化:AI 生成 HTML5 动态交互式数据图表
前端·数据库·人工智能·深度学习·机器学习·信息可视化·html5