Question

我无法将我的HTML链接到我的CSS。我尝试过相对路径和绝对路径，但都没有工作。我使用ctrl-u并且链接不会显示在html中。

    <head>
     <meta charset="utf-8"/>
      <title> Jubilee Austin | Developer. </title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700'rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
   </head>

Answer 1

尝试将这些文件路径设置为相对的样式表。如果它们位于名为“css”的目录中，并且该目录位于您的html文件旁边，那么这应该有效：

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

如果html文件位于“css”目录旁边的单独目录中，则为：

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

Answer 2

在检查浏览器读取的页面时，您无法看到指向css文件的链接，是吗？听起来它听起来像一些缓存问题，我不能说在什么级别，它也可以在浏览器级别。您是否尝试在其他浏览器中打开它？

Answer 3

设置这样的环境，类似于您所描述的：

(Users/Myname/Desktop) +-- (some folder)
                       |
                       +-- (101-sample-code) --+-- [index.html]
                                               |
                                               +-- (css) --+-- [main.css]
                                                           |
                                                           +-- [normalize.css]

where a (directory) is in parentheses and a [file] is in brackets

使用浏览器菜单打开 index.html 文件时，这些文件对我有用文件＆gt; 打开文件（在Mac OS X上运行的Chrome浏览器）
index.html 文件位于101-sample-code目录中，css目录是index.html文件的 sibling ;一个101-样本代码的子目录。

因此路径css/main.css 相对到html源文件。

/* css/main.css */
p.main {
    padding: 1em;
    border: 1px dotted green;
}
p.main > code {
    background-color: #f0f0ff;
}

/* normalize.css */
p {
    font-family: "Lora";
}
p > code {
    font-family: "Source Sans Pro";
    border-bottom: 1px dotted #a0a0ff;
}

p.normal {
    padding: 1em;
    background-color: #f0fff0;
    border: 1px dotted black;
}
p.normal > code {
}

<DOCTYPE html>
<html>
    <head>
     <meta charset="utf-8"/>
      <title> Jubilee Austin | Developer. </title>
       <!--
        <link rel="stylesheet" type="text/css" href="C:\Users\Stone\Desktop\101-sample-code-17.08\css\main.css">
        <link rel="stylesheet" type="text/css" href="C:\Users\Stone\Desktop\101-sample-code-17.08\css\normalize.css">
       -->
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/normalize.css">

        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700'rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <h1>Heading</h1>

        <p>This paragraph is plain, it has no css class or ID attached to it.</p>

        <p class="normal">This is a <code>class="normal"</code> paragraph.</p>

        <p class="main">This is a <code>class="main"</code> paragraph.</p>
    </body>
</html>

如果这与您的目录树不同，您必须提供有关如何设置您的目录树的更多详细信息，例如，如果您有一个html目录且它有一个兄弟 css目录从html到css文件的相对路径会有所不同 - href="../css/main.css"

我无法将CSS连接到html

3 个答案: