Извините, я новичок в ИТ и перепробовал почти все, я разочарован тем, что не могу правильно импортировать мой файл .css в мой файл .html.Я посмотрел на многие другие вопросы, связанные с переполнением стека, например: ( 1 ), ( 2 ), ( 3 ) и не нашел помощи.Если я импортирую свой файл .css в html с <style></style> - он работает, но с включаемым файлом как «таблица стилей href» - это не так.Я использую Браузер Chrome Версия 69.0.3497.100 (Официальная сборка) (64-разрядная версия).
Я попытался создать html-страницу с моей картой openstreet, и у карты есть своя собственная таблица стилейв комплекте тоже .Это не работает, потому что я не могу включить несколько файлов 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;
}