HTML無法識別外部的CSS

我想在我的HTML書中做一些項目，並且在練習中繼續練習之前，我需要將嵌入式CSS移動到外部樣式表。由於某些原因，即使在之前的練習中，我從來沒有遇到過這個問題，但外部CSS仍未被拾取。HTML無法識別外部的CSS

這是HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Lighthouse Island Bistro</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="lighthouse.css" media="screen"> 

<!--[if lt IE 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> 
</script> 
<![endif]--> 
</head> 
<body> 
<div id="wrapper"> 
    <header role="banner"> 
    <h1>Lighthouse Island Bistro</h1> 
    </header> 
    <nav role="navigation"> 
<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="menu.html">Menu</a></li> 
<li><a href="map.html">Map</a></li> 
<li><a href="contact.html">Contact</a></li> 
</ul> 
    </nav> 
    <main role="main"> 
    <h2>Locally Roasted Free-Trade Coffee</h2> 
    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks   are available hot or cold.</p> 
    <h2>Specialty Pastries</h2> 
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p> 
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island"> 
<h2>Lunchtime is Anytime</h2> 
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p> 
<h2>Panoramic View</h2> 
<p>Take in some scenery!</p> 
<p>The top of our lighthouse offers a panoramic view of the countryside.  
Challenge your friends to climb our 100-stair tower.</p> 
    </main> <!-- end of main content --> 
    <footer role="contentinfo">Copyright &copy; 2016 
    </footer> 
    </div> <!-- end of wrapper --> 
</body> 
</html>

而CSS

header, nav, main, footer, figure, figcaption { display: block; } 
* {box-sizing: border-box; } 

body { font-family: Verdana, Arial, sans-serif; 
     background-color: #00005D; 
} 

#wrapper { background-color: #b3c7e6; 
     color: #000066; 
     width: 80%; 
     margin: auto; 
     min-width:850px; 
} 

header { background-color: #869dc7; 
    color: #00005D; 
    font-size: 150%; 
    padding: 10px 10px 10px 155px; 
    background-image: url(lighthouselogo.jpg); 
    background-repeat: no-repeat; 
} 

nav { float: right; 
    width: 150px; 
    letter-spacing:0.1em; 
    font-weight: bold; 

} 

nav ul { list-style-type: none; 
     margin: 0; 
     padding: 0; 
} 

nav a { text-decoration: none; 
    display: block; 
    padding: 20px;  
    background-color: #b3c7e6;  
    border-bottom: 1px solid #ffffff; 
    background-image: url(sprites.gif); 
    background-repeat: no-repeat; 
    background-position: right 0;  
} 

nav a:link { color: #ffffff; } 
nav a:visited { color: #eaeaea; } 
nav a:hover { background-color: #eaeaea; 
      color: #869dc7; 
      background-position: right -100px; } 

main { background-color: #ffffff; 
     color: #000000; 
     padding: 10px 20px; 
     overflow: auto; 
} 

h1 { margin-bottom: 20px; } 
h2 { color: #869dc7; 
font-family: arial, sans-serif; 
} 

#floatright { margin: 10px; 
     float: right; 
} 

footer {font-size:70%; 
    text-align: center; 
    padding: 10px; 
    background-color: #869dc7; 
    clear: both; 
}

所有我想在這一點上做的是讓我的HTML識別外部樣式表，這樣我就可以移動到更遠的點。任何援助或指導找到這個練習的答案將不勝感激。

來源

2017-10-11 kantor9991

您是否嘗試在瀏覽器上進行硬刷新？有時候這些外部的js和css文件在瀏覽器的內存中被分割。其次是在同一個文件夾中的HTML文件和CSS文件？ –

我想這不言而喻，但要確保所有拼寫都正確 –

它不識別某些樣式或所有樣式嗎？ –