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>

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

相关推荐
EndingCoder3 小时前
React从基础入门到高级实战:React 实战项目 - 项目三:实时聊天应用
前端·react.js·架构·前端框架
阿阳微客4 小时前
Steam 搬砖项目深度拆解:从抵触到真香的转型之路
前端·笔记·学习·游戏
德育处主任Pro5 小时前
『React』Fragment的用法及简写形式
前端·javascript·react.js
CodeBlossom5 小时前
javaweb -html -CSS
前端·javascript·html
打小就很皮...5 小时前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序
集成显卡6 小时前
PlayWright | 初识微软出品的 WEB 应用自动化测试框架
前端·chrome·测试工具·microsoft·自动化·edge浏览器
前端小趴菜057 小时前
React - 组件通信
前端·react.js·前端框架
Amy_cx8 小时前
在表单输入框按回车页面刷新的问题
前端·elementui
dancing9998 小时前
cocos3.X的oops框架oops-plugin-excel-to-json改进兼容多表单导出功能
前端·javascript·typescript·游戏程序
后海 0_o8 小时前
2025前端微服务 - 无界 的实战应用
前端·微服务·架构