div 元素未选择外部样式答案

【问题标题】：External style not picked by div elementdiv 元素未选择外部样式
【发布时间】：2016-08-24 06:51:18
【问题描述】：

我对 CSS 比较陌生，所以如果下面有愚蠢的错误，请告诉我。在尝试 w3cschools 上的一个示例时，我使用了以下代码

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

结果是正确的，绿色边框和灰色背景中的文本。

但是，在尝试对如下外部 css 执行相同操作时。

此代码在 thumbnailTest.css 中

.dics{

    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;

}

这是 HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
    href="C:\Users\Sam\Documents\workspace\test_project\cssTest\thumbnailTest.css">


</head>
<body>

    <div class="dics">This text is the actual content of the box. We have added a
        25px padding, 25px margin and a 25px green border. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.</div>



</body>
</html>

相同的输出不会被复制，它显示为纯文本且没有样式。

虽然 css 的路径是正确的，但我也尝试过放置相对路径，但它不起作用

css 包含没有问题，因为它适用于我使用过的许多其他样式，但对于 Div 则不起作用

这是所需的工作区图片

【问题讨论】：

我认为是因为href。你可能放错了链接。
很可能您的 css 文件路径不正确。
你不要这样放 href= 链接。它应该引用您当前的 html 文件所在的位置。
@SanyamGoel 向我们展示您的项目文件夹的图像。
您在 thumbnailText.css 到 thumbnailTest.css ... x 到 s 中的拼写错误

标签： html css external stylesheet

【解决方案1】：

引用 css 文件时出现拼写错误。 thumbnailTest.css => thumbnailText.css

OP已经根据评论编辑并解决了他的问题。

【讨论】：

【解决方案2】：

用这个替换 css 链接

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

【讨论】：

已经在使用具有绝对路径的外部工作表，并且在任何地方都可以正常工作。
使用这个：如果您的 index.html 文件位于“test_project”文件夹中并且您的CSS 文件位于“cssTest”文件夹中。