如何在CSS中使用在页面头部添加样式_通过标签嵌入内部样式-css教程-PHP中文网

如何在CSS中使用在页面头部添加样式_通过标签嵌入内部样式

P粉602998670

发布： 2025-11-26 18:30:08

原创

486人浏览过

内部样式通过<style>标签在HTML头部定义CSS，适用于简单或单页场景。其语法为将CSS规则置于<head>内的<style>标签中，如p{color:blue;} .highlight{background:yellow;}。常用属性包括type（默认text/css，可省略）、media（指定设备类型）等。示例页面展示了body、h1、.warning等样式的内联定义与应用。优点是无需外部文件、便于调试；缺点是难以复用、维护性差、不利于大型项目。小型项目可用，大型项目建议外链CSS。

如何在css中使用<style>在页面头部添加样式_通过<style>标签嵌入内部样式

在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：已废弃，曾用于限制样式作用范围

实际应用示例

以下是一个完整的小页面示例：

知海图Chat

知乎与面壁智能合作推出的智能对话助手

157

查看详情

立即学习“前端免费学习笔记（深入）”；

<!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>

登录后复制