对不起，我是 IT 新手，我几乎尝试了所有方法，我很沮丧，因为我无法将我的 .css 文件正确导入到我的 .html 文件中。我查看了许多其他 stackoverflow 问题，例如:( 1 )、( 2 )、( 3 )，但没有找到任何帮助。如果我使用 <style></style> 将我的 .css 导入 html - 它有效，但包含文件作为“链接 href 样式表” - 它没有。我使用 Chrome 浏览器 版本 69.0.3497.100(官方构建)(64 位)。
我试图用我的 openstreet map 制作 html 页面，并且那个 map 也包含了它自己的样式表。它不起作用，因为我不能将多个 css 文件包含到一个 html 中？ 我在同一文件夹中有 .html 文件和 .css 文件。为什么这样:<link href='/styles.css' rel='stylesheet' />请问不工作吗？
我的代码(client.html):
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>The mapbox tutorial</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link href='/styles.css' rel='stylesheet' />
</head>
<body>
<div>
<h1>MY new page</h1>
<div id="data">
Write me something: <input type="text" id="inputData">
<button id="myButRun">Send</button>
</div>
</div>
<div style="margin-left:10px; height: 500px; margin-top: 20px; width: 400px; " id='map'></div>
<script>
mapboxgl.accessToken = 'myPrivateKey';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [42.10, 57.14],
zoom: 11
});
map.on('load', function () {
map.addLayer({
"id": "data-update",
"type": "line",
"source": {
"type": "geojson",
"data": "empty"
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#faff00",
"line-width": 8
}
});
});
</script>
</body>
</html>
我的代码(styles.css):
body { margin:0; padding:0; }
#map{
border-style: solid;
border-width: 5px;
}
最佳答案
/使用 /styles.css 时表示该文件位于网站的网络根目录中。 web-root 是配置网站的 web-server 服务的实际主目录。当没有网络服务器在运行时，就没有实际的网络根目录，可以从中读取文件并将其传送到浏览器。
在这种情况下，不存在网络服务器，文件直接从本地文件系统访问并使用<link href='styles.css' rel='stylesheet'>将正确引用与 HTML 文件位于同一目录中的 CSS 文件。
关于html - 如何使我的 css 导入到 html 正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52806746/