参考资料

  1. HTML 布局
  2. HTML 段落格式化标签
  3. HTML 多媒体
  4. HTML 图像
  5. HTML 框架
  6. HTML 用于短的引用
  7. HTML 强调
  8. HTML 超链接

HTML 内部样式表格式化

详细介绍

内部样式表是写在HTML文档<head>部分的<style>标签中的CSS代码，它只影响当前HTML文档的样式。

主要标签

  • <style>：用于定义内部样式表

  • type="text/css"：可选属性，指定样式表类型

基本用法

<head>
    <style>
        选择器 {
            属性: 值;
            属性: 值;
        }
    </style>
</head>

实例

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial;
        }
        
        h1 {
            color: navy;
            text-align: center;
        }
        
        p {
            color: darkgreen;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

功能特点

  1. 只作用于当前HTML文档

  2. 优先级高于外部样式表但低于内联样式

  3. 减少HTTP请求，提高页面加载速度

  4. 便于小型项目或单页面的样式管理

CSS扩展功能

  1. 伪类选择器：:hover, :active, :focus等

  2. 伪元素选择器：::before, ::after等

  3. 媒体查询：@media规则实现响应式设计

  4. 动画：@keyframes规则创建动画

  5. 变量：使用--*定义CSS变量

扩展实例

<style>
    :root {
        --main-color: #4CAF50;
    }
    
    button {
        background-color: var(--main-color);
        transition: background-color 0.3s;
    }
    
    button:hover {
        background-color: #45a049;
    }
    
    @media screen and (max-width: 600px) {
        body {
            font-size: 14px;
        }
    }
</style>
TAG：样式表内部文档标签当前定义实例功能页面选择器

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。