html 未< body>应用外部CSS中的规则

2mbi3lxu 于 2023-04-18 发布在其他

关注(0)|答案(2)|浏览(139)

似乎我的外部样式表不适用于body部分。下面是我的代码：

所有.css：

body {
    background: url(../texture1.jpg);
    background-size: 600px 500px;
    background-repeat: repeat;
}

HTML：

<head>
    <link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
    <div id="main">
        <h3 id="h3">
            <a class="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div></a></br>
            <a class="a" href="assign.php"><div class="div" style="left:210px"><center>Assign Employee</div></a></br>
            <a class="a" href="accounts.php"><div class="div" style="left:400px"><center>Accounts</div></a>
        </h3>
    </div>
</body>

Html

来源：https://stackoverflow.com/questions/23418955/rules-for-body-in-external-css-not-being-applied

2条答案

按热度按时间

8aqjt8rx1#

你的HTML代码中有几个缺陷：

<style></style>-空样式块，实际上不是问题
<center>标签似乎没有结束标签。此标签已弃用，您应该考虑使用CSS样式text-align: center。
id="div"-不建议使用多个ID的相同值，因为它可能会产生无法解释的结果。这样做的目的是使它们唯一。
</div> inside <a> tags -在HTML 4中，不允许在内联元素中包含块级元素。这在HTML5中已经改变，请注意。
style="left:###px"-将'left'作为样式属性本身没有任何作用。该元素还需要设置相关的position属性，无论是设置为“relative”、“absolute”、“fixed”还是“static”

修复这些问题可能是你的首要任务，因为你的页面结构已经混乱到无法修复的地步，浏览器无法正确呈现你的（正确的）CSS。
另外，请确保您的“texture1.jpg”位于all.css的父目录下，该目录似乎在您的home.php文件的上一个目录下。尝试删除“../”，如果它们都在同一个目录下，您应该会很好。
更详细地说，这是您的应用程序如何查看您的文件夹结构：

???
|--public_html          <--- Root HTML directory
|    |-- all.css        <--- CSS File you provided
|    |-- home.php       <--- HTML file you provided
|    |-- assign.php
|    +-- accounts.php
+--picture1.jpg         <--- Picture file? CSS/HTML file cannot access above public_html

如果您的注解说它与HTML文件相同，那么在all.css中，将该行更改为url('picture1.jpg')。
作为一个罕见的帮助，我会看看我是否可以修复所有从您提供的信息和所有3个文件（CSS，HTML，JPG）在同一个目录中。

home.phpHTML（complete）：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
    <div id="main">
        <h3>
            <a class="active" href="home.php">Work Load</a><br />
            <a href="assign.php">Assign Employee</a><br />
            <a href="accounts.php">Accounts</a>
        </h3>
    </div>
</body>
</html>

all.cssCSS（添加了样式，一些示例）：

body {
    background: url('texture1.jpg');
    background-size: 600px 500px;
    background-repeat: repeat;
}
#main {
    background-color: lightpink;
}   
.active {
    color: green;
}
h3 {
    text-align: center;
}

我已经用这些信息创建了一个工作的JSFiddle，我希望你可以把它作为一个学习课程，看看selectors work在CSS中是如何工作的，以及它是如何与你的HTML结构相关联的。

赞(0）回复(0）举报 2023-04-18

nkhmeac62#

我只需要在body前面加上{}，它对我很有效

赞(0）回复(0）举报 2023-04-18