HTML erkennt externe CSS nicht

Ich versuche, einige Projekte in meinem HTML-Buch zu tun, und für eine Übung muss ich Embedded CSS in ein externes Stylesheet verschieben, bevor Sie in den Übungen fortfahren. Aus irgendeinem Grund wird das externe CSS nicht abgeholt, obwohl ich in früheren Übungen dieses Problem nie hatte.HTML erkennt externe CSS nicht

Dies ist der 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>

Und die 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; 
}

Alles, was ich an dieser Stelle zu tun versuche, ist mein HTML bekommen das externe Stylesheet zu erkennen, so dass ich auf eine weitergehen kann weiterer Punkt. Jede Hilfe oder Anleitung, um die Antwort auf diese Übung zu finden, wäre sehr willkommen.

Quelle

2017-10-11 kantor9991

Haben Sie eine harte Aktualisierung auf Browser versucht? Manchmal werden diese externen js und CSS-Dateien im Browser gespeichert. Zweitens sind die HTML-Datei und CSS-Datei im selben Ordner? –

Ich nehme an, es versteht sich von selbst, aber stellen Sie sicher, dass alles richtig geschrieben ist –

Ist es nicht einige Stile oder alle Stile zu erkennen? –

Versuchen Sie, die Developer Tools-Konsole Ihres Webbrowsers zu öffnen und laden Sie Ihre Webseite neu, während Sie das Konsolenfenster sehen. Möglicherweise sehen Sie einen Fehler, der Ihnen einen Hinweis gibt, warum das CSS nicht geladen wurde - vielleicht wurde der Dateipfad nicht gefunden.

Quelle

2017-10-11 17:28:58

Funktioniert in Chrome, aber nicht Edge, Ill nur mit Chrom für die Zeit testen Ich nehme an. Ich bin ziemlich neu, also denke ich, dass etwas in diesem Code IE zu einer Ausnahme macht, oder es ist mein PC – kantor9991

Überprüfen Sie auch die Edge Developer Tools-Konsole. Freut mich zu hören, dass es in Chrome funktioniert! –

Wenn ich die Edge-Dev-Tools öffne, ist es nur eine graue leere Box (kein Code/nichts zeigt). Gibt es einen Weg dahin? – kantor9991

Ist Ihr Stylesheet im selben Ordner? Wenn es in einem anderen Ordner ./foldername/lighthouse.css

tun

Quelle

2017-10-11 17:30:12

Es ist im selben Ordner ja. Deshalb erscheint es mir so komisch, dass es nicht auftaucht – kantor9991

Vielleicht haben Sie Ihre CSS innerhalb eines anderen Ordners, so dass Sie auf Ihren Link so etwas schreiben muss /yourfolder/lighthouse.css

Quelle

2017-10-11 17:33:00

Verzeihen Sie meine Ignoranz, wenn das dumm klingt, aber es funktioniert in Chrome, aber nicht IE (oder Edge). Ich nehme an, es gibt eine Codezeile, die im HTML war, die erklären würde, warum (im ziemlich neu zu diesem)

Quelle

2017-10-11 17:35:57 kantor9991

HTML erkennt externe CSS nicht

Antwort

Verwandte Themen