HTML 无法识别外部 css

我正在尝试在我的HTML书中做一些项目，对于一个练习，我需要在继续练习之前将嵌入式css移动到外部样式表。由于某种原因，即使在我的练习中我从未遇到过这个问题，也没有选择外部 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 识别外部样式表，以便我可以继续前进到更远的地方。如能为找到本练习的答案提供任何帮助或指导，将不胜感激。

尝试打开 Web 浏览器的开发人员工具控制台，并在观看控制台面板的同时重新加载网页。您可能会看到一个错误，该错误会提示您为什么 CSS 未加载 - 也许找不到文件路径。

您的样式表是否在同一个文件夹中？如果它在不同的文件夹中，请执行 ./foldername/lighthouse.css

也许你的 css 在另一个文件夹中，所以你必须在你的链接上写这样的东西/yourfolder/lighthouse.css

如果这听起来很愚蠢，请原谅我的无知，但它适用于 chrome 但不适用于 IE（或边缘）。我假设 HTML 中有一行代码可以解释原因（我对此很陌生）

相关内容

最新更新

热门标签：