Question

我的外部样式表似乎不适用于身体部位。这是我的代码：

all.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>

Answer 1

HTML代码中有几个缺陷：

<style></style> - 空样式块，不是真正的问题
<center>代码似乎没有结束标记。不推荐使用此标记，您应该考虑使用CSS样式text-align: center。
id="div" - 建议不要使用具有相同值的多个ID，因为它可能有无法解释的结果。这些目的是使它们独一无二。
</div>在<a>个标签内 - 在HTML4中，不允许在内联元素中使用块级元素。这已在HTML5中发生变化，请注意。
style="left:###px" - 离开＆＃39;作为一个风格属性本身没有任何作用。该元素也需要设置相关的position属性，无论它是否设置为＆＃34; relative＆＃34;，＆＃34; absolute＆＃34;，＆＃34; fixed＆＃34; ，甚至＆＃34;静态＆＃34;

修复这些问题可能是您的首要任务，因为您的网页结构无法修复，浏览器无法正确呈现您的（正确的）CSS。

另外，请确保您的＆＃34; texture1.jpg＆＃34;位于 all.css 的父目录中，该目录似乎是 home.php 文件上方的一个目录。尝试删除＆＃34; ../ ＆＃34;，如果它们都在同一目录中，那么您应该很好。

更详细一点，这就是您的应用程序看到文件夹结构的方式：

???
|--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

如果您的comment表示它与HTML文件相同，则在all.css内，将该行更改为url('picture1.jpg')。

作为一种罕见的恩惠，我会看看我是否可以根据您提供的信息修复所有内容，并且所有3个文件（CSS，HTML，JPG）都位于同一目录中。您似乎并不理解classes and IDs如何协同工作的概念。

home.php HTML（完整）：

<!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.css CSS（添加了样式，一些示例）：

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

我已经使用此信息创建了一个有效的JSFiddle，我希望您可以将其用作学习课程，以了解CSS中的selectors work以及它与HTML结构的关联方式。< / p>

Answer 2

像这样改变

 <head>
<style>

body {
                background: url(../texture1.jpg);
                background-size: 600px 500px;
                background-repeat: repeat;
                }
                <!--html page-->
            </style>
                <link rel="stylesheet" type="text/css" href="all.css"><style>
                </head>
                <body>
                <div id="main">
                <h3 id="h3">
                <a id="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div>       </a></br>
            <a id="a" href="assign.php"><div id="div" style="left:210px"><center>Assign Employee</div></a></br>
            <a id="a" href="accounts.php"><div id="div" style="left:400px"><center>Accounts</div></a></h3>
            </div>
            </body>

Answer 3

只需添加 {} 在身体之前，它对我有用

外部CSS的规则未应用

3 个答案: