时间戳

首页 > 解决方案 > 如何将 CSS 文件链接到括号上的 html 页面

html - 如何将 CSS 文件链接到括号上的 html 页面

问题描述

我无法将我的 css 文件链接到我创建的一个页面。上传的图片显示了我尝试将两者链接起来，以及 css 文件中的代码。css 文件和 html 文件都在同一个文件夹中。但是，我的主页无法识别 css。任何帮助将不胜感激。谢谢你。

链接css

css文件代码

标签： htmlcss

解决方案

基本上，样式可以使用以下三种方法之一链接到 HTML 文档：

  1. 内联样式
  2. 嵌入式样式（内部样式）
  3. 外部风格

如何将 CSS 样式表连接到 HTML 页面

  1. 内联样式

    内联样式是将 CSS 样式添加到 HTML 页面的最简单方法。内联样式通过其样式属性应用于文档中的特定标签，应用于 HTML 文档，

    例如，如果你想给 <p> 添加样式，那么你可以这样编码：

    <p style="color: #0000FF">...<p>

    上述声明将确保段落文本为蓝色。此方法可以应用于< body > .... < /body >HTML 页面中的任何 HTML 元素。

例子：

<html>
  <body>
    <p style="color: #0000FF">
      Instyle Paragraph Testing
    </p>
    <p>
      Another Paragraph Testing
    </p>
  </body>
</html>

请注意，第一段中包含的文本< p >将为蓝色。您可以看到只有该段落受到影响，第二段默认为黑色。

内联样式的主要缺点是无法重用。考虑重组一个包含数百个页面的网站，其中内联样式乱扔标记。您应该进入每个页面并单独更改每个 CSS 属性是一项非常困难的任务。

  1. 嵌入式样式（内部样式）

    嵌入式样式允许您通过将它们放置在开始和结束样式标签之间来实现任意数量的 CSS 样式。

    <style>......</style>

    您可以将样式标签放置在该< head > ... < /head >部分中，就在< title >HTML 页面的标签之后。

像这样

<head>
  <style>
    ........
    ........
  </style>
</head>

您应该从开始样式标签开始，如下所示：<style type="text/css">

开始的 Style 标记应始终使用属性“type”。在 CSS 文档的情况下，属性值为“text/css”。

例子 ：

<html>
  <head>
    <title>Embedded Style Sample</title>
    <style type="text/css">
      h1{
        color: #0000FF;
      }
      h2{
        color: #00CCFF;
      }
    </style>
  </head>
  <body>
    <h1>Embedded Style testing</h1>
    <h2>Next Line</h2>
  </body>
</html>

  1. 外部风格

    外部样式表是仅包含 CSS 样式格式的纯文本文件。外部文件的扩展名应以 .css 扩展名结尾（例如 pagestyle.css）。此外部文件称为外部样式表。

    外部样式表（.css 文件）始终与 HTML 文件分开。您可以使用 <link> 标签将此外部文件（.css 文件）链接到您的 HTML 文档文件。您可以将此 < 链接 > 标记放在该< head >部分内，并在< title >HTML 文件的元素之后。

    <link rel="stylesheet" type="text/css" href="styles.css" />

例如，您的HTML文件放置在文件夹中假设您的文件夹名称是WebDesign，并且您的 CSS 文件也放置在该文件夹中，即 WebDesign 文件夹，在您的 html 文件中，CSS 将像这样直接链接

<link rel="stylesheet" type="text/css" href="styles.css" />

推荐阅读