gpt4 book ai didi

html - div 元素未选取的外部样式

转载 作者:太空宇宙 更新时间:2023-11-04 09:50:46 25 4
gpt4 key购买 nike

我对 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 它不起作用

这是所需的工作区图像

enter image description here

最佳答案

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

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

关于html - div 元素未选取的外部样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39116285/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com