我正在尝试使用HTML创建GUI，但是我的CSS代码未加载。我不确定错误是什么

Question

I made two separate files for html and CSS and it didn't worked. 我为html和CSS制作了两个单独的文件，但没有用。 Then I added CSS in HTML. 然后，我在HTML中添加了CSS。 After doing that it started displaying the CSS code on Webpage. 之后，它开始在网页上显示CSS代码。

 /** * Load the main menu */ assetLoader.finished = function() { mainMenu(); } /** * Show the main menu after loading all assets */ function mainMenu() { $('#main').show(); } /** * Click handlers for the different menu screens */ $('.play').click(function() { $('#menu').hide(); startGame(); });

 *, *:before, *:after { box-sizing: border-box; } #menu.main { background-image:url('board.png'); } #main { display: none; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #main h1 { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .button { display: block; width: 150px; margin: 0 auto; height: 30px; line-height: 30px; border: 1px solid #AA2666; color: white; font-weight: bold; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; background-color: #FB1886; background-image: -webkit-linear-gradient(bottom, #FB1886 0%, #B30D5D 100%); background-image: linear-gradient(to bottom, #FB1886 0%, #B30D5D 100%); border-radius: 5px; } .button:hover { background-color: #B30D5D; background-image: -webkit-linear-gradient(bottom, #B30D5D 0%, #FB1886 100%); background-image: linear-gradient(to bottom, #B30D5D 0%, #FB1886 100%); }

 <!DOCTYPE html> <html> <head> <meta charset="UTF-16″> <title>Game Engine</title> <link rel = "stylesheet" type= "text/css" href="ChessDisp.css" media= “screen”> <script type="text/javascript" src= “game.js”> </script> </head> <body> <div class="wrapper"> <div id="menu" class="main"> <div id="main"> <h1>Game-Engine</h1> <h3> Welcome </h3> <h2>Select the Game Mode</h2> <button type="button" onclick="" >Play</button> <br> <button type="button" onclick="" >Pause</button> <br> <button type="button" onclick="" >Help</button> <br> <button type="button" onclick="" >About Game</button> <br> <button type="button" onclick="" >Settings</button> <br> <button type="button" onclick="" > License</button> </div> </div> <canvas id="canvas" width="800" height="480"> </canvas> </div> <script type="text/javascript" src="main.js”> </script> </body> </html>

I've tried a lot to run but I think there is some issue with the html file. 我已经尝试了很多运行，但是我认为html文件存在一些问题。 PS I am new to programming, so I am not sure what went wrong. PS：我是编程新手，所以我不确定出了什么问题。 I ran it earlier on Pycharm but it was not able to detect link rel command in HTML, the I ran it on notepad and removed link real but it was again not working. 我早些时候在Pycharm上运行了它，但是它无法检测HTML中的rel rel命令，我在记事本上运行了它，并删除了真实的链接，但是它再次不起作用。

Answer 1

The following css is wrong and will ender all css underneath obsolete: 以下css是错误的，将使所有css过期。

background-image:url('board.png’);

It instead should be: 相反，它应该是：

background-image:url('board.png');

The difference is that after board.png there was a apostrophe instead of a single quotation mark. 区别在于board.png之后有撇号而不是单引号。

Edit: Here is a working jsfiddle: https://jsfiddle.net/fp8t81hv/ 编辑：这是一个工作的jsfiddle： https ://jsfiddle.net/fp8t81hv/

I also changed the button class to button element (removed the leading dot) and set the main display to block instead of none so you can see the result. 我还将按钮类更改为按钮元素（删除了前导点），并将主显示设置为阻塞而不是无，以便您可以看到结果。 The error of why the css was not working was the apostrophe like I mentioned above. 为何CSS无法正常工作的错误是我上面提到的撇号。 Furthermore you can also see there is an issue with the html as said in the answer of Quentin. 此外，您还可以看到Quentin回答中所说的html问题。

Answer 2

You've said media= “screen” instead of media= "screen" 您说的是media= “screen”而不是media= "screen"

HTML attribute values cannot be delimited with U+201C (LEFT DOUBLE QUOTATION MARK) and U+201D (RIGHT DOUBLE QUOTATION MARK). HTML属性值不能用U+201C （左双引号）和U+201D （右双引号）定界。

You must use U+0022 (QUOTATION MARK) or U+0027 (APOSTROPHE). 您必须使用U+0022 （报价标记）或U+0027 （撇号）。

Observe the difference: 观察差异：

 pre { font-size: 400% }

 <pre>media= “screen” media= "screen"</pre>

Likewise you said background-image:url('board.png'); 同样，您说了background-image:url('board.png'); using U+2019 (RIGHT SINGLE QUOTATION MARK) instead of U+0027 (APOSTROPHE). 使用U+2019 （右单引号）代替U+0027 （撇号）。

You've also used the class selector .button but have no elements with class="button" . 您还使用了类选择器.button但没有带有class="button"元素。 Perhaps you meant the type selector button ? 也许您是说类型选择器button ？

我正在尝试使用HTML创建GUI，但是我的CSS代码未加载。我不确定错误是什么

问题描述

2 个解决方案

解决方案1
0 2017-11-20 09:30:07

解决方案2
0 2017-11-20 09:40:19

我正在尝试使用HTML创建GUI，但是我的CSS代码未加载。 我不确定错误是什么

问题描述

2 个解决方案

解决方案1 0 2017-11-20 09:30:07

解决方案2 0 2017-11-20 09:40:19

我正在尝试使用HTML创建GUI，但是我的CSS代码未加载。我不确定错误是什么

解决方案1
0 2017-11-20 09:30:07

解决方案2
0 2017-11-20 09:40:19