如何使我的 css 导入到 html 正确？答案

【问题标题】：How to make my css import to html correct?如何使我的 css 导入到 html 正确？
【发布时间】：2018-10-14 20:19:28
【问题描述】：

对不起，我是 IT 领域的新手，我几乎尝试了所有方法，我很沮丧我无法将我的 .css 文件正确导入到我的 .html 文件中。我查看了许多其他 stackoverflow 问题，例如：(1)、(2)、(3) 并没有找到任何帮助。如果我使用<style></style> 将.css 导入到html - 它可以工作，但包含文件作为“链接href 样式表” - 它不能。我使用 Chrome 浏览器 版本 69.0.3497.100（官方构建）（64 位）。

我尝试使用我的 openstreet 地图制作 html 页面，而 地图也包含自己的样式表。它不起作用，因为我不能在一个 html 中包含多个 css 文件？ 我在同一个文件夹中有 .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;
}

【问题讨论】：

你试过<link href='styles.css' rel='stylesheet' />吗？
嗯，这不是，我看到它总是以 / 开头...好的，我试试，谢谢你的另一个选择
两个可能的原因：您的样式表不在您的文档根目录（您使用/ 引用它 - 这是文档根目录），或者您的样式已缓存。如果您的样式表不在文档根目录中，则需要使用相对引用（如href="styles.css" 或href="../styles.css"）。如果您已缓存，请尝试CTRL + SHIFT + R。提及索引文件在文件夹结构中的位置以及样式表的位置会有所帮助:)
“我看到它总是以 / 开头”。使用 /styles.css 意味着 style.css 位于项目的根目录。
如果你没有使用网络服务器，那么就没有网络根并且无法使用/styles.css访问文件。

标签： html css google-chrome

【解决方案1】：

使用/styles.css 时的/ 表示该文件位于网站的web-root 中。 web-root 是 web-server 为已配置网站提供的实际主目录。当没有运行网络服务器时，就没有实际的网络根目录，可以从中读取文件并将其传送到浏览器。

在这种情况下，不存在网络服务器，文件是直接从本地文件系统访问的，使用<link href='styles.css' rel='stylesheet'>将正确引用位于同一目录中的CSS文件作为 HTML 文件。

【讨论】：