Question

我似乎无法链接到我的HTML中的CSS文件。以下是我的HTML文件：

<!DOCTYPE html>
<html>

<head>
    <title>Welcome.</title>

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

<body>

    <p> This paragraph has no ID</p>
    <div id="block">
        <h2>Hello this is h2 text.</h2>
    </div>

    <h3> This is a h3 tag with an id that should give it some styling</h3>
    <p id="examplep"> This is an example paragraph has an ID that should give it large font.</p>

</body>

</html>

这是main.css，它与我的HTML文件位于同一文件夹中：

body{
background-color: blue;
}
p{
font-size: 50;
}

#block{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;

    color: black;
    background-color: white;
    width: 300px;
    height: 300px;
    font-family: Arial, Helvetica, sans-serif;
}
#examplep{
font-size: 50px;
}

抱歉格式糟糕。无论如何，我认为这是一个问题链接。不应该背景为蓝色，没有ID的段落大小为50，div为白色文本页面中间的白色框，而examplep段落大小为50？我已经尝试了所有知识来修复它，但我似乎无法做到。有什么帮助吗？

Answer 1

请勿将其包含在样式标记中。只需写下

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

Answer 2

将您撰写的<link href="main.css" rel="stylesheet" type="text/css" />标记放在head元素中，因为它是有关该网页元数据的容器 - 包括指向样式表的链接，脚本等

将其放在<style></style>标记中会导致浏览器期望在所述标记中找到CSS样式表语言，而<link>标记不在其中。因此，将尝试将所述标记内的内容呈现为浏览器中的CSS，这将无效。

选择的答案是正确的，只是想提供一些推理，说明为什么这不起作用。

Answer 3

以下是代码：

<head>
   <title>Welcome.</title>
   <link href="main.css" rel="stylesheet" type="text/css" />
</head>

那就是它。

无法链接到HTML中的CSS文件

3 个答案: