当前位置: 动力学知识库 > 问答 > 编程问答 >

html - embedding css into webpage

问题描述:

I know this is a "noob" question, but I am a college student attempting to complete an intro to HTML 5/CSS class assignment. Thus far I haven't had much trouble completing assignments but for some reason I keep hitting my head into the wall when I attempt to embed css into the HTML file to add visual styles to the page. I have attempted to insert the css into the but the page doesn't change it's style. What am I missing? I appreciate all the help!

HTML with embedded CSS:

<!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>

网友答案:

Your css was between comment tags <!--- style was here! --->.

Just use the <style> and </style> wrappers to put css into the same page, no need to add type=”text/css” where there's no link to an external stylesheet.

<!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>
网友答案:

While the other answer is good, the actual cause of the problem in your source is the use of smart quotes in the style start tag.

<style type=”text/css”>

Curly quotes instead of straight quotes. This causes the browser to not recognise the type, and therefore to ignore the style element.
So the solution in the other answer works because you removed the type=”text/css” part, not because you removed the <!-- and --> bits.

In reality, the <!-- and --> won't do any harm, even though they're not needed. See this example, where the style does get applied:

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

The <!-- -->tags are used for comments so anything in between them is not processed. Try removing them. For a small homework assignment it's probably OK to inline them, but for a larger project the best practice is to use an external CSS file. This allows you to share styles across multiple pages.

分享给朋友:
您可能感兴趣的文章:
随机阅读: