規則<body>在未應用的外部 CSS 中
[英]Rules for <body> in external CSS not being applied
問題描述
似乎我的外部樣式表不適用於正文部分。 這是我的代碼：
所有.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>
3 個解決方案
解決方案1
1 2014-05-02 00:51:24
你的 HTML 代碼有幾個缺陷：
-
<style></style>- 空樣式塊，不是真正的問題 -
<center>標簽似乎沒有結束標簽。 此標簽已棄用，您應該考慮使用 CSS 樣式text-align: center代替。 -
id="div"- 不建議使用具有相同值的多個 ID，因為它可能會產生無法解釋的結果。 這些的目的是使它們獨一無二。 -
<a>標簽內的</div>- 在 HTML4 中，不允許在行內元素中包含塊級元素。 這在 HTML5 中已經改變，請注意。 -
style="left:###px"- 將 'left' 作為樣式屬性本身沒有任何作用。 該元素也需要設置相關的position屬性，無論是設置為“相對”、“絕對”、“固定”還是“靜態”
解決這些問題可能是您的首要任務，因為您的頁面結構一團糟，無法修復，瀏覽器無法正確呈現您的（正確）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）都在同一目錄中。 您似乎不了解類和 ID如何協同工作的概念。
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 中工作以及它如何與您的 HTML 結構相關聯。
解決方案2
0 2014-05-02 00:37:15
像這樣改變
<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>
解決方案3
0 2020-04-14 10:27:45
只需在 body 前添加 {}，它對我有用
未應用外部文件中的CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.