Question

我对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不能正常工作

这是必需的工作空间图像

Answer 1

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

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

div元素未选择外部样式

1 个答案: