ウェブページにCSSを埋め込む

これは「noob」の質問ですが、私は大学生でHTML5/CSSクラスの割り当てのイントロを完了しようとしています。これまで私は割り当てを完了するのに苦労していませんでしたが、HTMLファイルにCSSを埋め込み、ページにビジュアルスタイルを追加しようとすると何らかの理由で私は頭を打ちました。私はCSSを挿入しようとしましたが、ページはスタイルを変更しません。私は何が欠けていますか？私はすべての助けに感謝します！埋め込まれた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"> 
 
\t <div class="menu">Giza Pyramids 
 
\t <ul> 
 
    \t <li><a href="sample.html">Khufu</a></li> 
 
    \t <li><a href="sample.html">Kafhre</a></li> 
 
    \t <li><a href="sample.html">Menkaura</a></li> 
 
    </ul> 
 
\t </div> 
 

 
\t <div class="menu">Pharaohs 
 
\t <ul> 
 
    \t <li><a href="sample.html">Ramses the Great</a></li> 
 
    \t <li><a href="sample.html">King Tut</a></li> 
 
    \t <li><a href="sample.html">Cleopatra</a></li> 
 
    </ul> 
 
\t </div> 
 

 
\t <div class="menu">Temples 
 
\t <ul> 
 
    \t <li><a href="sample.html">Horus at Edfu</a></li> 
 
    \t <li><a href="sample.html">Deir El Bahari</a></li> 
 
    \t <li><a href="sample.html">Abu Simbel</a></li> 
 
    </ul> 
 
\t </div> 
 
</div> 
 
    
 
<div> 
 
<table> 
 
\t <tr> 
 
\t \t <td><img src="egypt.jpg" width="329" height="256" alt="logo" /></td> 
 
    
 
\t \t <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> 
 
\t </tr> 
 
</table> 
 
    
 
</div> 
 
    
 
</body> 
 
</html>

これは、私は、CSSスタイルを変更した後、Webページの外観を作ることになっています方法です：enter image description here

出典

2016-03-27 M0n3r0 M4ni4c

-1

あなたのCSSはコメントタグの間でした。

<style>と</style>ラッパーを使用してCSSを同じページに配置するだけで、外部スタイルシートへのリンクがない場合はtype=”text/css”を追加する必要はありません。

<!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"> 
 
\t <div class="menu">Giza Pyramids 
 
\t <ul> 
 
    \t <li><a href="sample.html">Khufu</a></li> 
 
    \t <li><a href="sample.html">Kafhre</a></li> 
 
    \t <li><a href="sample.html">Menkaura</a></li> 
 
    </ul> 
 
\t </div> 
 

 
\t <div class="menu">Pharaohs 
 
\t <ul> 
 
    \t <li><a href="sample.html">Ramses the Great</a></li> 
 
    \t <li><a href="sample.html">King Tut</a></li> 
 
    \t <li><a href="sample.html">Cleopatra</a></li> 
 
    </ul> 
 
\t </div> 
 

 
\t <div class="menu">Temples 
 
\t <ul> 
 
    \t <li><a href="sample.html">Horus at Edfu</a></li> 
 
    \t <li><a href="sample.html">Deir El Bahari</a></li> 
 
    \t <li><a href="sample.html">Abu Simbel</a></li> 
 
    </ul> 
 
\t </div> 
 
</div> 
 
    
 
<div> 
 
<table> 
 
\t <tr> 
 
\t \t <td><img src="egypt.jpg" width="329" height="256" alt="logo" /></td> 
 
    
 
\t \t <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> 
 
\t </tr> 
 
</table> 
 
    
 
</div> 
 
    
 
</body> 
 
</html>

出典

2016-03-27 14:05:06 benzenski

あなたの答えの作品ではなく、なぜなら、あなたが言及した理由の！私自身の答えを見てください。 –

CSSコメントの形式は '/ *私はコメント* /'です。 HTMLのコメントは、 '

ウェブページにCSSを埋め込む

答えて