如何将 css 链接到 html

📌 相关文章

📜 如何将 css 链接到 html - CSS (1)

📅 最后修改于: 2023-12-03 15:38:43.859000 🧑 作者: Mango

在学习 HTML 和 CSS 的过程中，我们通常需要将 CSS 样式文件与 HTML 文件链接起来才能对页面进行样式设计。接下来，我将介绍如何将 CSS 文件链接到 HTML 文件中。

方法一：内部样式表

内部样式表适用于需要在一组 HTML 页面中使用特定样式的情况。您可以将 CSS 样式代码嵌入到 <style> 元素中，并将该元素放置在 HTML 页面的 <head> 中。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <style>
      /* CSS 样式代码 */
      body {
        background-color: #F5F5F5;
      }
      h1 {
        color: #000;
        font-size: 36px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>这是我的页面。</p>
  </body>
</html>

方法二：外部样式表

外部样式表适用于需要在多个 HTML 页面中使用相同样式的情况。您可以将 CSS 样式代码保存为单独的 .css 文件，并在 HTML 文件中使用 <link> 标签将其链接到您的页面中。

在 HTML 文件的 <head> 中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>这是我的页面。</p>
  </body>
</html>

其中，href 属性的值为您的样式表文件的路径。

而在您的样式表文件 style.css 中，可以添加所有 CSS 样式代码：

/* CSS 样式代码 */
body {
  background-color: #F5F5F5;
}
h1 {
  color: #000;
  font-size: 36px;
  font-weight: bold;
}

方法三：行内样式

行内样式适用于需要在单个 HTML 元素上应用特定样式的情况。您可以在 HTML 元素中使用 style 属性，并将 CSS 样式代码放入该属性中。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1 style="color: #000; font-size: 36px; font-weight: bold;">Hello World!</h1>
    <p>这是我的页面。</p>
  </body>
</html>

以上是三种常用的将 CSS 链接到 HTML 的方法。根据您的具体情况，可以选择最适合您的方法。