内部样式通过<style>标签在HTML头部定义CSS，适用于简单或单页场景。其语法为将CSS规则置于<head>内的<style>标签中，如p{color:blue;} .highlight{background:yellow;}。常用属性包括type（默认text/css，可省略）、media（指定设备类型）等。示例页面展示了body、h1、.warning等样式的内联定义与应用。优点是无需外部文件、便于调试；缺点是难以复用、维护性差、不利于大型项目。小型项目可用，大型项目建议外链CSS。
在HTML页面的头部通过 <style> 标签嵌入内部样式，是一种常见的为页面添加CSS的方法。这种方式将样式代码写在HTML文档的 <head> 区域内，无需额外的文件，适合样式较简单或仅用于单个页面的情况。
基本语法结构
使用 <style> 标签将CSS规则包裹起来，并放置在 <head> 中：
<head><br> <style><br> p {<br> color: blue;<br> font-size: 16px;<br> }<br> .highlight {<br> background-color: yellow;<br> }<br> </style><br></head>
关键属性说明
<style> 标签支持一些常用属性：
-
type：指定样式表类型，通常为
text/css（在HTML5中可省略） -
media：定义样式适用的设备类型，如
screen、print - scoped：已废弃，曾用于限制样式作用范围
实际应用示例
以下是一个完整的小页面示例：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html><br><html><br><head><br> <meta charset="UTF-8"><br> <title>内部样式示例</title><br> <style><br> body {<br> font-family: Arial, sans-serif;<br> background-color: #f0f0f0;<br> }<br> h1 {<br> color: #333;<br> text-align: center;<br> }<br> .warning {<br> color: red;<br> font-weight: bold;<br> }<br> </style><br></head><br><body><br> <h1>欢迎访问我的网页</h1><br> <p class="warning">这是一个警告信息！</p><br></body><br></html>
优缺点分析
内部样式适用于特定场景，但也有局限性：
优点：- 无需额外请求，样式与HTML同文件加载
- 便于快速调试和原型开发
- 避免外部文件依赖
- 不利于多页面复用，维护成本高
- HTML文件体积增大，影响加载效率
- 样式与结构未完全分离，不符合最佳实践
