爲什麼我的CSS樣式表不工作？

-1

我有一些麻煩，我必須爲學校做一個網站。我現在一直在困擾它幾天。問題是我的CSS樣式沒有顯示出來。一切都在我的HTML頁面上驗證，並且CSS頁面上的所有內容都會驗證，但背景圖像和hlsa錯誤除外。圖像名稱爲「background」，出現此錯誤：爲什麼我的CSS樣式表不工作？

18標頭值錯誤：background-image解析錯誤（「Module3/background.jpeg」） 29 h1值錯誤：顏色0不是顏色值：hlsa（0,0％，0％，0.2）

我的樣式表：

body 
.gradient 
    {background-color:#666666; 
    background-image: linear-gradient(to bottom, #ffffff, #666666); 
    font-family: Arial, Helvetica, sans-serif; 
    Margin:0px 
    ; 
} 

#container { background-color: white; 
    width:960px; 
    padding:20px; 
    margin-left:auto; 
    margin-right:auto; 
    box-shadow:5px 5px 5px #1e1e1e; 
    border-radius:15px} 

header {background-image: ("Module3/background.jpeg"); 
    background-repeat: No-repeat; 
    height:150px; 
    border:1px; 
    border-color: black; 
    border-radius:15px; 
    } 

h1 {font-family:Impact, sans-serif; 
    font-size:4em; 
    padding-left:15px; 
    color: hlsa(0,0%,0%,0.2);} 

h2 { font-family: Impact, Sans-serif; 
    font-size: 2em; 
    color: black;} 
.photo {float:right;} 


footer {border-style: solid; 
    border-top: thick; 
    font-size:.8em; 
    font-style: italic; }

我的HTML頁面：

 <!DOCTYPE html> 
<html lang="en"> 

<head> 

<meta charset="utf-8"> 
<title>My name</title> 
<LINK href="Module3/assignment3.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div class="w3-container"> 
<!--My required class information 
--> 

<h1>My Name</h1> 

<h2>Education Goals</h2> 
<img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200"> 
<ul> 
    <li>my goals</li> 
    <li>Graduate from my school</li> 
</ul> 

<h2>Hobbies/Interests</h2> 
<ul> 
    <li>Reading</li> 
    <li>Volunteering</li> 

</ul> 
<h2>Favorite Web Sites</h2> 
<ul> 
    <li><a href="http://www.wikipedia.org">Wikipedia</a></li> 
    <li><a href="http://www.mainstrike.com/mstservices/handy/insult.html">The Shakespearean Insulter</a></li> 
</ul> 

<footer> 
<p> &copy; <a href="myschoolemail">me</a></p> 
</footer> 
</div> 
</body> 

</html>

來源

2015-12-29 Itsonlyme

我不是專家，但我把它的jsfiddle你https://jsfiddle.net/ohL7a8s1/ – ssaltman

查找'背景image'的語法。它是'url（）'，而不僅僅是括號。 – JJJ

'hsla'，而不是'hlsa'; – 0x860111

要使用background-image選擇，你必須將該值設置爲url()。例如：

background-image: url("Module3/background.jpeg");

確保圖像也被正確指向。

來源

2015-12-29 15:33:26

保持你的代碼乾淨，格式良好。打開開發人員工具並檢查損壞的屬性。如果您不確定是否可以在不犯錯的情況下編寫屬性，請使用emmet或類似的實用程序。

body, 
 
.gradient { 
 
    background-color: #666; 
 
    background-image: linear-gradient(to bottom, #fff, #666); 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    margin: 0px; 
 
} 
 

 
#container { 
 
    background-color: white; 
 
    width: 960px; 
 
    padding: 20px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    box-shadow: 5px 5px 5px #1e1e1e; 
 
    border-radius: 15px; 
 
} 
 

 
header { 
 
    background-image: url("Module3/background.jpeg"); /* Be sure that path is exist */ 
 
    background-repeat: no-repeat; 
 
    height: 150px; 
 
    border: 1px; 
 
    border-color: black; 
 
    border-radius: 15px; 
 
} 
 

 
h1 { 
 
    font-family: Impact, sans-serif; 
 
    font-size: 4em; 
 
    padding-left: 15px; 
 
    color: hsla(0, 0%, 0%, 0.2); 
 
} 
 

 
h2 { 
 
    font-family: Impact, Sans-serif; 
 
    font-size: 2em; 
 
    color: black; 
 
} 
 

 
.photo { 
 
    float:right; 
 
} 
 

 
footer { 
 
    border-style: solid; 
 
    border-top: thick; 
 
    font-size:.8em; 
 
    font-style: italic; 
 
}

<div class="w3-container"> 
 
    <!--My required class information--> 
 

 
    <h1>My Name</h1> 
 

 
    <h2>Education Goals</h2> 
 

 
    <img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200"> 
 

 
    <ul> 
 
    <li>my goals</li> 
 
    <li>Graduate from my school</li> 
 
    </ul> 
 

 
    <h2>Hobbies/Interests</h2> 
 

 
    <ul> 
 
    <li>Reading</li> 
 
    <li>Volunteering</li> 
 
    </ul> 
 

 
    <h2>Favorite Web Sites</h2> 
 

 
    <ul> 
 
    <li><a href="http://www.wikipedia.org">Wikipedia</a></li> 
 
    <li><a href="http://www.mainstrike.com/mstservices/handy/insult.html">The Shakespearean Insulter</a></li> 
 
    </ul> 
 

 
    <footer> 
 
    <p> &copy; <a href="myschoolemail">me</a></p> 
 
    </footer> 
 
</div>

來源

2015-12-29 15:39:28 0x860111

爲什麼我的CSS樣式表不工作？

回答

相關問題