为什么我的CSS样式表不起作用？

Question

I am having some trouble with a site that I have to make for school. 我在上学时必须使用的网站遇到了一些麻烦。 I've been troubling with it for a few days now. 我已经困扰了几天了。 The problem is that my CSS styling is not showing up. 问题是我的CSS样式没有显示。 Everything validates on my HTML page, and everything on the CSS page validates with the exception of my background image and a hlsa error. 除了我的背景图片和hlsa错误外，所有内容都可以在我的HTML页面上进行验证，而CSS页面上的所有内容都可以进行验证。 The image name is "background" and I am getting this error: 图像名称是“背景”，并且出现此错误：

18 header Value Error : background-image Parse Error ("Module3/background.jpeg") 29 h1 Value Error : color 0 is not a color value : hlsa(0,0%,0%,0.2) 18标头值错误：背景图像解析错误（“ Module3 / background.jpeg”）29 h1值错误：颜色0不是颜色值：hlsa（0,0％，0％，0.2）

My stylesheet: 我的样式表：

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; }

And my HTML page: 而我的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>

Answer 1

To use the background-image selector, you must put the value in a url() . 要使用background-image选择器，必须将值放在url() 。 Example: 例：

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

Make sure the image is being pointed to correctly also. 确保还正确指向图像。

Answer 2

Keep you code clean and well formatted. 保持代码干净且格式正确。 Open developer tools and inspect broken properties. 打开开发人员工具并检查损坏的属性。 If you are not sure that you can write properties without making mistakes, use emmet or similar utilities. 如果不确定是否可以正确编写属性，请使用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>

为什么我的CSS样式表不起作用？

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-12-29 15:33:26

解决方案2
0 2015-12-29 15:39:28

为什么我的CSS样式表不起作用？

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-12-29 15:33:26

解决方案2 0 2015-12-29 15:39:28

解决方案1
2 已采纳 2015-12-29 15:33:26

解决方案2
0 2015-12-29 15:39:28