Question

我正在尝试在我的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识别外部样式表，这样我就可以继续前进了。任何有助于找到本练习答案的帮助或指导都将不胜感激。

Answer 1

尝试打开网络浏览器的开发人员工具控制台，然后在观看控制台面板的同时重新加载网页。你可能会看到一个错误，它会给你一个关于为什么CSS没有加载的提示 - 也许找不到文件路径。

Answer 2

你的样式表在同一个文件夹中吗？如果它在不同的文件夹中./foldername/lighthouse.css

Answer 3

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

Answer 4

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

HTML无法识别外部CSS

4 个答案: