gpt4 book ai didi

html - 如何使我的 css 导入到 html 正确?

转载 作者:搜寻专家 更新时间:2023-10-31 08:23:27 26 4
gpt4 key购买 nike

对不起,我是 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">&nbsp;
<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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com