為什么我的CSS樣式表不起作用？
[英]Why doesn't my CSS stylesheet work?
問題描述
我在上學時必須使用的網站遇到了一些麻煩。 我已經困擾了幾天了。 問題是我的CSS樣式沒有顯示。 除了我的背景圖片和hlsa錯誤外，所有內容都可以在我的HTML頁面上進行驗證，而CSS頁面上的所有內容都可以進行驗證。 圖像名稱是“背景”，並且出現此錯誤：
18標頭值錯誤：背景圖像解析錯誤（“ 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> © <a href="myschoolemail">me</a></p>
</footer>
</div>
</body>
</html>
2 個解決方案
解決方案1
2 已采納 2015-12-29 15:33:26
要使用background-image選擇器，必須將值放在url() 。 例：
background-image: url("Module3/background.jpeg");
確保還正確指向圖像。
解決方案2
0 2015-12-29 15:39:28
保持代碼干凈且格式正確。 打開開發人員工具並檢查損壞的屬性。 如果不確定是否可以正確編寫屬性，請使用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> © <a href="myschoolemail">me</a></p> </footer> </div>
為什么 CSS 樣式表在移動設備上不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.