如何在 HTML 中添加 CSS 文件

2025年3月17日 | 阅读 7 分钟

将 CSS（层叠样式表）添加到 HTML 文档对于增强网页的视觉吸引力和呈现至关重要。CSS 允许您控制 HTML 元素的布局、颜色、字体和其他样式方面。将 CSS 文件集成到 HTML 文档是一个简单的过程，可以增强您网站的整体美感和功能。在本指南中，我们将探讨将 CSS 文件添加到 HTML 的各种方法。

方法 1：外部 CSS 文件

最常见且推荐的方法是将外部 CSS 文件链接到您的 HTML 文档。此方法具有多项优势，包括更好的组织性、更轻松的维护性以及更佳的页面加载性能。

首先创建一个带有 .css 扩展名的单独 CSS 文件。您可以使用任何文本编辑器，如记事本、Sublime Text 或 Visual Studio Code 来编写您的 CSS 规则。

代码

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JTP</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="wrapper">
    <h1>JavaTpoint</h1>
    <p>JavaTpoint is a Delhi/NCR based leading IT Company established in the year 2011. The development of JavaTpoint began
      with a motto to spread technical knowledge and help students learn efficiently. Earlier the Business was set up in
      Ghaziabad Later, it was shifted to Noida in 2015. The company kept on growing and eventually reached the mark of
      180+ employees and has been growing since then.</p>
  </div>
</body>

</html>

CSS

wrapper{
  margin: auto;
  width: 50%;
  text-align: center;
  background-color: rgb(139, 236, 253);
  padding: 20px;
}

输出

优点

模块化和可重用性：通过将 CSS 规则分离到外部文件中，您可以维护更清洁、更有条理的代码库。这种模块化允许您在多个 HTML 页面中重用样式，确保整个网站的一致性。
易于维护：外部 CSS 文件可以更轻松地进行维护，因为您可以通过编辑单个文件来进行全局样式更改。这种集中式方法简化了更新并降低了出错的风险。
改进的页面加载：外部 CSS 文件可以被浏览器缓存，从而加快返回访问者的页面加载速度。此外，将 CSS 与 HTML 分离可以减小文件大小，从而优化网站性能。

最佳实践

使用描述性文件名：为您的 CSS 文件选择有意义的名称，以提高可读性和可维护性。例如，styles.css 或 main.css 是常用的文件名。
组织样式表：通过对相关样式进行分组来逻辑地组织您的 CSS 文件。可以考虑使用注释或为不同的页面组件（例如，页眉、页脚、导航）设置单独的部分。
最小化和压缩：在部署之前最小化和压缩您的 CSS 文件，以减小文件大小并缩短加载时间。许多在线工具和构建过程都可以自动执行此优化。

方法 2：内部 CSS

您也可以使用 <style> 标签直接在 HTML 文档中包含 CSS。虽然此方法不常用且模块化程度较低，但对于小型项目或希望为单个页面应用特定样式时可能很有用。

在 HTML 中添加 CSS：在 HTML 文档的 <head> 部分内，使用 <style> 标签定义您的 CSS 规则。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JTP</title>
    <style>
        /* CSS Styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
        }
        
        section {
            padding: 20px;
            text-align: center;
        }
        
        h1 {
            color: #333;
        }
        
        p {
            color: #666;
            line-height: 1.6;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        footer p{
          text-align: center;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    
    <!-- Content Section -->
    <section class="container">
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec dui aliquam, fermentum justo nec, ultrices justo. Nullam at metus sed neque vehicula malesuada a sed odio.</p>
        <p>Phasellus quis orci et felis lacinia tincidunt et vitae elit. Morbi id nulla vitae urna laoreet vestibulum nec sit amet velit.</p>
    </section>
    
    <!-- Footer -->
    <footer>
        <p>� 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

输出

用例

特定页面样式：内部 CSS 适用于需要不与网站共享的唯一或临时样式的页面。例如，登录页面或促销页面可能有独特的设计要求。
快速原型设计：在开发或原型制作的初始阶段，内部 CSS 允许在不创建单独文件的情况下快速尝试样式。

局限性

重用性有限：在内部定义的样式仅限于特定的 HTML 文档，无法在多个页面之间轻松重用。这种方法可能会导致代码重复和为保持一致性而增加的维护工作。
HTML 增大：将 CSS 包含在 HTML 文件中可能会导致文档大小膨胀，尤其是对于广泛的样式。这可能会影响页面加载性能，尤其是在连接速度较慢的情况下。

方法 3：内联 CSS

内联 CSS 涉及使用 style 属性将样式直接应用于单个 HTML 元素。虽然此方法提供了最高的特异性，但由于缺乏模块化和维护方面的挑战，通常不推荐用于大型项目。

内联应用样式：在您的 HTML 元素内，使用 style 属性定义 CSS 规则。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; box-sizing: border-box;">
    <!-- Header -->
    <header style="background-color: #333; color: #fff; padding: 10px 20px; text-align: center;">
        <h1>Welcome to My Website</h1>
    </header>
    
    <!-- Content Section -->
    <section class="container" style="max-width: 800px; margin: 0 auto; padding: 20px; text-align: center;">
        <h2 style="color: #333;">About Us</h2>
        <p style="color: #666; line-height: 1.6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec dui aliquam, fermentum justo nec, ultrices justo. Nullam at metus sed neque vehicula malesuada a sed odio.</p>
        <p style="color: #666; line-height: 1.6;">Phasellus quis orci et felis lacinia tincidunt et vitae elit. Morbi id nulla vitae urna laoreet vestibulum nec sit amet velit.</p>
    </section>
    
    <!-- Footer -->
    <footer style="text-align: center;">
        <p>� 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

输出

注意事项

特异性和覆盖：内联样式具有最高的特异性，这意味着它们会覆盖外部和内部样式。虽然对于快速调整或一次性样式很有用，但过度使用内联 CSS 可能会导致代码混乱和维护困难。
维护困难：内联样式嵌入在各个 HTML 元素中，使得在多个页面之间保持一致性变得困难。样式更改需要编辑每个受影响的元素，这对于大型项目来说可能很麻烦。

应用

视觉样式
- 布局控制： CSS 允许开发人员定位元素、创建网格和定义网页的整体布局，提供结构和组织。
- 排版： CSS 允许自定义文本元素的字体、大小、样式、间距和对齐方式，从而提高可读性和视觉吸引力。
- 配色方案： CSS 提供对颜色的精确控制，包括背景颜色、文本颜色和边框颜色，使设计人员能够创建反映品牌和美学的协调配色方案。
- 背景和图像： CSS 允许使用渐变、图案或图像为背景设置样式，增强网页的视觉丰富度。
响应式设计
- 媒体查询： CSS 媒体查询允许开发人员创建响应式布局，这些布局可以适应不同的屏幕尺寸和设备，确保在台式机、平板电脑和智能手机上获得最佳的观看体验。
- 灵活的单位： CSS 单位，如百分比、视口单位和 flexbox/grid 布局，能够实现流体且适应性强的设计，这些设计可以动态地适应不同的屏幕尺寸。
用户界面增强
- 动画和过渡： CSS 动画和过渡可用于为元素添加交互式和引人入胜的效果，例如淡入、滑动或旋转，从而改善用户体验和参与度。
- 悬停效果： CSS 伪类，例如 :hover，可以创建交互式悬停效果，例如更改颜色、缩放元素或显示额外信息，从而增强交互性和可用性。
- 表单样式： CSS 可以为输入字段、按钮、复选框和下拉菜单等表单元素设置样式，以提高其外观和可用性。
可访问性
- 语义 HTML 和 ARIA：通过为语义 HTML 元素设置样式并利用 ARIA（可访问富 Internet 应用程序）属性，CSS 可以提高残障用户的网络内容的访问性，确保与屏幕阅读器等辅助技术的兼容性。
- 对比度和可读性： CSS 样式可以增强文本对比度，调整字体大小，并优化间距，以提高所有用户的可读性，包括视障人士。
跨浏览器兼容性
- 供应商前缀： CSS 供应商前缀（例如，-webkit-、-moz-、-ms-、-o-）允许开发人员实现实验性或特定于浏览器的 CSS 功能，同时确保跨不同 Web 浏览器的兼容性。
品牌和定制
- 自定义主题： CSS 允许创建自定义主题和品牌元素，使网站能够反映独特的视觉标识并符合品牌指南。
- 自定义光标和图标： CSS 可以自定义光标样式并集成自定义图标字体或 SVG 图标，从而增强整体设计和用户体验。
打印样式
- 打印媒体查询： CSS 提供用于打印样式的特定媒体查询，允许开发人员通过隐藏非必要元素、调整布局和指定打印特定样式来优化网页的打印效果。

结论

选择合适的 CSS 添加到 HTML 的方法取决于您项目的具体要求和限制。虽然外部 CSS 文件为大型网站提供了最大的灵活性和可伸缩性，但对于小型项目或孤立的样式需求，内部和内联 CSS 可能更合适。通过了解每种方法的优点和局限性，您可以做出明智的决定，从而创建设计良好且易于维护的 Web 体验。

下一个主题HTML 货币格式

如何在 HTML 中添加 CSS 文件

方法 1：外部 CSS 文件

优点

最佳实践

方法 2：内部 CSS

用例

局限性

方法 3：内联 CSS

注意事项

应用

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中添加 CSS 文件

方法 1：外部 CSS 文件

优点

最佳实践

方法 2：内部 CSS

用例

局限性

方法 3：内联 CSS

注意事项

应用

结论

相关帖子

HTML 计数器

HTML 内联标签

HTML Alt 标签

CodePen HTML

HTML Tab 标签

如何在 HTML 中插入图片

HTML 制表符空格

如何将图片作为链接在 HTML 中

HTML 中的元数据包含在哪一部分

HTML IDE

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器