在HTML中引用CSS的三种主要方式

在 HTML 中引用 CSS 的三种主要方式

HTML 组成了网页的基本结构，CSS 则给网页当中所有的结构添加样式，使网页更加好看。

1. 外部样式表（External Style Sheet）
   使用元素在 HTML 文档的部分引用外部 CSS 文件。这是最常见且推荐的方式，因为它允许样式和内容分离，使得样式更易于管理和复用。

   DOCTYPE html>  
   html>  
   head>  
       title>外部样式表示例title>  
       link rel="stylesheet" type="text/css" href="styles.css">  
   head>  
   body>  
       h1>欢迎来到我的网站！h1>  
       p>这是一个使用外部样式表的段落。p>  
   body>  
   html>
   

   在这个例子中，styles.css 是外部样式表文件，它应该位于与 HTML 文件相同的目录或指定的路径下。

2. 内部样式表（Internal Style Sheet）
   使用

   DOCTYPE html>  
   html>  
   head>  
       title>内部样式表示例title>  
       style>  
           body {  
               background-color: lightblue;  
           }  
           h1 {  
               color: white;  
               text-align: center;  
           }  
           p {  
               font-family: verdana;  
               font-size: 20px;  
           }  
       style>  
   head>  
   body>  
       h1>欢迎来到我的网站！h1>  
       p>这是一个使用内部样式表的段落。p>  
   body>  
   html>
   

   在这个例子中，所有的 CSS 规则都定义在

3. 内联样式（Inline Style）
   使用 style 属性直接在 HTML 元素上定义 CSS 规则。这种方式应该谨慎使用，因为它增加了 HTML 的复杂性，并且不利于样式的维护和复用。

   DOCTYPE html>  
   html>  
   head>  
       title>内联样式示例title>  
   head>  
   body>  
       h1 style="color: white; text-align: center; background-color: black;">欢迎来到我的网站！h1>  
       p style="font-family: verdana; font-size: 20px;">这是一个使用内联样式的段落。p>  
   body>  
   html>
   

   在这个例子中，每个 HTML 元素都通过 style 属性直接指定了 CSS 样式。这种方式通常用于覆盖其他样式表中的特定样式或为单个元素应用一次性样式。然而，对于大型项目或需要一致样式的场景，外部样式表通常是更好的选择。