Question

嘿，我是HTML世界的新手，我正在尝试用css制作一个简单的html网页，但网页只是空白，请帮助我，并且控制台中也没有错误。

linking14.html

<html>
    <head>
    <link href="C:\Users\Manuj Srivastava\Desktop\html tutorials\css\linking14.css" rel="stylesheet" type="text/css">
                                        <!relation and accordingly type is set>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
        <div id="div6"></div>
    </body>
</html>

和linking14.css

#div1{
    width: "300px";
    height: "200px";
    background: "firebrick"; <!#B222222>
} 
#div2{
    width:"300px";
    height:"200px";
    background:"skyblue";     
}
#div3{
    width:"300px";
    height:"200px";
    background:"slateblue";   <!#6A5ACD>
}
#div4{
    width:"300px";
    height:"200px";
    background:"firebrick" ;  <!#87CEEB>
}
#div5{
    width:"300px";
    height:"200px";
    background:"#1BE7FF";
        float:left;
}
#div6{
    width:"300px";
    height:"200px";
    background:"#052633";
        float:left;
}

Answer 1

不要为css属性使用引号" "＆＃39;值

＆＃13;

#div1{
 
    width: 300px;
    height: 200px;
    background: firebrick;

}

#div2{
    width:300px;
    height: 200px;
    background:skyblue;     
}
#div3{
    width:300px;
    height:200px;
    background:slateblue;   <!#6A5ACD>
}
#div4{
    width:300px;
    height:200px;
    background:firebrick;  <!#87CEEB>
}
#div5{
    width:300px;
    height:200px;
    background:#1BE7FF;
        float:left;
}
#div6{
    width:300px;
    height:200px;
    background:#052633;
        float:left;
}

＆＃13;

<div id="div1"> </div>
    <div id="div2"> </div>
    <div id="div3"> </div>
    <div id="div4"> </div>
    <div id="div5"> </div>
    <div id="div6"> </div>

＆＃13;

Answer 2

尝试更改

<link href="C:\Users\Manuj Srivastava\Desktop\html tutorials\css\linking14.css" rel="stylesheet" type="text/css">

到

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

另外，使用正斜杠。我不会在我的文件名或目录名中使用空格。知道你的webroot是什么。在尝试指定资源的相对路径时会有所帮助。

Answer 3

<link>

此标记的src属性不应使用Windows文件路径约定。使用与Web服务器相关的文件路径。我不会在文件名或文件夹中使用空格。

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

Answer 4

您不应将Windows目录结构用作css链接，如

C:\Users\Manuj Srivastava\Desktop\html tutorials\css\linking14.css

应该是

./css/linking14.css

./是当前文件夹

Answer 5

如果您的html文件位于css文件的同一文件夹中，请将链接更改为：

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

如果在子文件夹＆＃34; css＆＃34;上，请将您的链接更改为：

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

Answer 6

问题是，CSS属性的值是引号""。

#div4{
    width:"300px";
    height:"200px";
    background:"firebrick";
}

需要：

#div4{
    width: 300px;
    height: 200px;
    background: firebrick;
}

即使您的CSS文件已正确关联，CSS也不会显示，因为加载invlaid property value时引号会产生CSS错误。

Answer 7

如果这应该是评论

<!relation and accordingly type is set>

应该是

<!--relation and accordingly type is set-->

我建议您将所有项目文件放在一个文件夹中，以便轻松链接css，scripts，图片或其他文件

read here`

Answer 8

使用css文件相对于子文件夹进行链接，一切都会好的：

...Capture

只需确保linked14.html和css子文件夹位于同一文件夹中。

另请注意，此链接区分大小写，因此如果您将css文件命名为＆＃34; Linking14.css＆＃34;你还必须在html文件中使用大写字母L.

基本网页css和html没有加载

8 个答案: