📌  相关文章
📜  插入 css (1)

📅  最后修改于: 2023-12-03 14:54:44.364000             🧑  作者: Mango

插入 CSS

在 Web 开发中，CSS 用于控制页面的样式效果，例如调整字体、颜色、布局以及响应式设计等。

在 HTML 中，可以通过 <link> 标签或 <style> 标签插入 CSS。

使用 <link> 标签插入 CSS

<link> 标签用于将外部样式表文件链接到 HTML 文件中。

<head>
  <link rel="stylesheet" href="style.css">
</head>

在上述示例中，href 属性指定了样式表文件的路径，rel 属性指定了文档与链接文档之间的关系，这里是样式表文件。现在，样式表文件中的所有样式都可以应用于 HTML 文件中的元素了。

使用 <style> 标签插入 CSS

<style> 标签用于将 CSS 代码直接嵌入到 HTML 文件中。

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

在上述示例中，CSS 代码被包裹在 <style> 标签内，其中的选择器是 p，代表所有 <p> 标签。color 属性用于设置文本颜色，font-size 属性用于设置字体大小。

总结

无论是使用 <link> 标签还是使用 <style> 标签，都可以将 CSS 插入到 HTML 中，实现页面样式的控制。至于何时使用哪一种方式，取决于情况而定，如果多个 HTML 文件都需要相同的样式，则推荐使用 <link> 标签链接外部样式表文件，这样可以方便样式的维护和修改。如果样式很简单或仅需要应用于单个 HTML 文件，可以使用 <style> 标签直接嵌入 CSS 代码。