Ik heb een probleem met het koppelen van HTML en CSS en heb geen idee waarom. Ik doe alles zoals het boek en de tutorials zegt. Ik krijg echter niet de externe configuratie van CSS.
Dit is de code (slechts een test):
<!DOCTYPE html>
<html lang = "eng">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheets" type="text/css" href="/styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
en CSS:
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
Misschien mis ik iets, want wanneer ik interne CSS (binnen mijn HTML-code met) gaat, gaat het goed en de webbrowser kan dat lezen. Het lijkt erop dat de HTML niet verband houdt met CSS, maar het is zelfs op dezelfde map, zodat het pad niet het probleem zou moeten zijn.
Ik gebruik Linux en Aptana Studio.
Ik heb de laatste 2 uur veel doorzocht en kan niet vinden waar de fout is.
Antwoord 1, Autoriteit 100%
Ik nodig je uit om dit artikel te lezen absolute en relatieve paden
Dan passeren we naar uw code:
<link rel="stylesheets" type="text/css" href="/styles.css">
zou moeten zijn:
<link rel="stylesheet" type="text/css" href="styles.css">
Uw styles.cssmoet in dezelfde map staan als uw html-bestand.
Om te controleren of u een fout heeft, controleert u Consolevan uw browser. U zult zien dat uw bestand niet bestaat (404-fout).
Een andere manier om je css te laten werken, is door het zonder scheiding in je pagina te integreren:
Voorbeeld:
<style type='text/css'>
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
</style>
Antwoord 2, autoriteit 25%
Als de andere suggesties niet werken, kunt u proberen de HTML- en CSS-bladen opnieuw op te slaan met “UTF-8”-codering en UTF-8-codering in de HTML te declareren onder de <head>met <meta charset="utf-8>"
Antwoord 3
Zorg ervoor dat style.cssin uw root-webdirectory staat, want dat is waar u het vandaan roept
Antwoord 4
Plaats de / niet voor styles.css en zorg ervoor dat ze in dezelfde map staan.
Antwoord 5
Het rel-attribuut moet alleen een stylesheet bevatten, ook enkelvoud en niet meervoud
Antwoord 6
Probeer dit in plaats daarvan:
<!DOCTYPE html>
<!-- Language was wrong? -->
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Check the path to the file - I made it relative to where the HTML is -->
<!-- Correct the rel attribute's value too -->
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
Antwoord 7
Ik had hetzelfde probleem, corrigeer de juiste directorystructuur en loste mijn probleem op. Dit is een goede visualisatie voor het organiseren van uw directorystructuur.
http://rosebusch.net/jeff/miscellaneous/tree.html
Dat wil zeggen, de map index.htmlbevindt zich op hetzelfde niveau als de CSS-map. Als je index.htmlin een HTML-map wilt plaatsen, moet je om naar de CSS-map te linken eerst een back-up maken door href="../css/stylesheet.css". De ".."brengt je een niveau hoger.
Antwoord 8
Als al het bovenstaande niet werkt:
1- Zorg ervoor dat u geen inline/interne CSS > Verwijder alle stijlcode van de Html-pagina (het voorkomt externe css-link)
Antwoord 9
Als uw CSS-bestand zich in een andere mapbevindt, gebruik dan
<link rel="stylesheet" type="text/css" href="folder-name/styles.css">
Antwoord 10
Ik ontdekte tijdens het gebruik van Visual Studio Code en het toevoegen van aanhalingstekens dat het automatisch citeerde. Dus toen ik aanhalingstekens plaatste en in de index.html van de index keek, citeerde het de aanhalingstekens (Slecht Nieuws). Probeer link
<href=FILENAME.css rel=stylesheet type=text/css />
Hopelijk werkt dit! Als je meerdere CSS-bestanden wilt, organiseer ze dan in een map, als je dat doet in FILENAME zet je /FOLDERNAME/FILENAME.css
MAAR ZORG ERVOOR dat deze zich onder de hoofdmap bevindt waar uw Index zich bevindt!
Antwoord 11
Mijn woord, ik had hetzelfde probleem en kwam bijna aan het einde ervan.
Het probleem is dat het rel=”stylesheet” is en niet “stylesheets”