Question

我知道这是一个“noob”问题，但我是一名大学生，试图完成HTML 5 / CSS课程作业的介绍。到目前为止，我在完成作业时没有遇到太多麻烦，但出于某种原因，当我尝试将CSS嵌入到HTML文件中以向页面添加视觉样式时，我仍然不停地撞到墙上。我试图将css插入到页面中，但页面不会改变它的样式。我错过了什么？我感谢所有的帮助！

带嵌入式CSS的HTML：

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8" />
<title>Apply 7-1</title>

<style type=”text/css”>
<!--
body     {font-family: Verdana, Arial, sans-serif;
         background: #edbf79;}
a        {text-decoration: none; color: #5a3702;}
#menubar {border-top: 4px solid #f4dab2; border-right: 4px
         solid #e0a140; border-bottom: 4px solid #e0a140;
         border-left: 4px solid #f4dab2; background-color:
         #f5cb8a; color: #5a3702; height: 23px;}
.menu    {float: left; padding: 0.1em 3em 0.1em 0.5em;
         cursor: default;}
.menu ul {display: none; position: absolute;
         background-color: #f4dab2; color: #5a3702;
         list-style: none; margin: 0.1em 0 0 0; padding: 0;}
.menu ul li {display: block; font-size: small; padding: 0.2em;}
div.menu:hover ul {margin: 0; padding: 0; display: block;
                  border-bottom: .15em solid #e0a140; border-left:
                  .15em solid #e0a140;}
div.menu ul li:hover {background-color: #e0a140;}
div.content    {margin-left: 20px; margin-right: 20px;
               padding-top: 8%; color: #5a3702;}
-->
</style>

</head>
 
<body>
 
<div id="menubar">
	<div class="menu">Giza Pyramids
	<ul>
    	<li><a href="sample.html">Khufu</a></li>
    	<li><a href="sample.html">Kafhre</a></li>
    	<li><a href="sample.html">Menkaura</a></li>
    </ul>
	</div>

	<div class="menu">Pharaohs
	<ul>
    	<li><a href="sample.html">Ramses the Great</a></li>
    	<li><a href="sample.html">King Tut</a></li>
    	<li><a href="sample.html">Cleopatra</a></li>
    </ul>
	</div>

	<div class="menu">Temples
	<ul>
    	<li><a href="sample.html">Horus at Edfu</a></li>
    	<li><a href="sample.html">Deir El Bahari</a></li>
    	<li><a href="sample.html">Abu Simbel</a></li>
    </ul>
	</div>
</div>
 
<div>
<table>
	<tr>
		<td><img src="egypt.jpg" width="329" height="256" alt="logo" /></td>
 
		<td style="vertical-align:top"><p>You should research information about the Egyptian pyramids at Giza, the three Pharaohs listed, and the temples highlighted in the drop-down menus. There is a significant amount of information available.</p></td>
	</tr>
</table>
 
 </div>
 
</body>
</html>

这是我应该在修改css样式后让网页看起来的样子：enter image description here

Answer 1

虽然另一个答案是好的，但源中问题的实际原因是在样式开始标记中使用了智能引号。

<style type=”text/css”>

引用引号而不是直引号。这会导致浏览器无法识别类型，因此忽略样式元素因此，另一个答案中的解决方案是有效的，因为您删除了type=”text/css”部分，而不是因为您删除了位。

实际上，不会造成任何伤害，即使他们不需要。请参阅此示例，其中应用了样式：

＆＃13;

<style type="text/css">
  <!--
    body {background: #edbf79;}
  -->
</style>

＆＃13;

Answer 2

您的CSS位于评论标记之间。

只需使用<style>和</style>包装将css放入同一页面，无需添加type=”text/css”，而且没有指向外部样式表的链接。

＆＃13;

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8" />
<title>Apply 7-1</title>

<style>

body     {font-family: Verdana, Arial, sans-serif;
         background: #edbf79;}
a        {text-decoration: none; color: #5a3702;}
#menubar {border-top: 4px solid #f4dab2; border-right: 4px
         solid #e0a140; border-bottom: 4px solid #e0a140;
         border-left: 4px solid #f4dab2; background-color:
         #f5cb8a; color: #5a3702; height: 23px;}
.menu    {float: left; padding: 0.1em 3em 0.1em 0.5em;
         cursor: default;}
.menu ul {display: none; position: absolute;
         background-color: #f4dab2; color: #5a3702;
         list-style: none; margin: 0.1em 0 0 0; padding: 0;}
.menu ul li {display: block; font-size: small; padding: 0.2em;}
div.menu:hover ul {margin: 0; padding: 0; display: block;
                  border-bottom: .15em solid #e0a140; border-left:
                  .15em solid #e0a140;}
div.menu ul li:hover {background-color: #e0a140;}
div.content    {margin-left: 20px; margin-right: 20px;
               padding-top: 8%; color: #5a3702;}

</style>

</head>
 
<body>
 
<div id="menubar">
	<div class="menu">Giza Pyramids
	<ul>
    	<li><a href="sample.html">Khufu</a></li>
    	<li><a href="sample.html">Kafhre</a></li>
    	<li><a href="sample.html">Menkaura</a></li>
    </ul>
	</div>

	<div class="menu">Pharaohs
	<ul>
    	<li><a href="sample.html">Ramses the Great</a></li>
    	<li><a href="sample.html">King Tut</a></li>
    	<li><a href="sample.html">Cleopatra</a></li>
    </ul>
	</div>

	<div class="menu">Temples
	<ul>
    	<li><a href="sample.html">Horus at Edfu</a></li>
    	<li><a href="sample.html">Deir El Bahari</a></li>
    	<li><a href="sample.html">Abu Simbel</a></li>
    </ul>
	</div>
</div>
 
<div>
<table>
	<tr>
		<td><img src="egypt.jpg" width="329" height="256" alt="logo" /></td>
 
		<td style="vertical-align:top"><p>You should research information about the Egyptian pyramids at Giza, the three Pharaohs listed, and the temples highlighted in the drop-down menus. There is a significant amount of information available.</p></td>
	</tr>
</table>
 
 </div>
 
</body>
</html>

＆＃13;

Answer 3

标记用于评论，因此不会处理它们之间的任何内容。尝试删除它们。对于小型家庭作业，可以内联它们，但对于更大的项目，最佳做法是使用外部CSS文件。这允许您跨多个页面共享样式。

将css嵌入到网页中

3 个答案: