В целом моя проблема заключается в том, что я не могу связать свою внешнюю таблицу стилей CSS.
- У меня есть две внешние таблицы стилей с идентичным содержимым: land.css и test.css.
- land.css ссылается нормально, но test.css возвращает html-файл (land.html.php), который пытался связать его в теле ответа.
Вот подробности ответа сервера:
Когда я связываю test.css, внешняя таблица стилей не возвращается должным образом, и тело ответа для test.css имеет вид land.html.php:
неверный ответ сервера на test.css
Когда я связываю land.css, внешняя таблица стилей загружается очень хорошо, а тело ответа для land.css - это land.css (как и должно быть):
правильный ответ сервера на land.css
Я заглянул в конфигурацию mime, чтобы убедиться, что все файлы .css будут использоваться в качестве содержимого типа text / css. Я сделал следующее устранение неисправностей ..
- Я подтвердил, что /etc/mime.types включает строку
text/css css
- Я подтвердил, что /etc/apache2/mods-available/mime.conf содержит
TypesConfig /etc/mime.types и / etc / apache2 / mods-enabled / symlinks mime.conf
- Я добавил
AddType text/css .css в /etc/apache2/mods-available/mime.conf, /etc/apache2/apache2.conf и мой <VirtualHost> - излишний, но ни один из них, похоже, не работает
- Я перезапустил службу apache2 ... не повезло
- Я включил модуль mod_headers и добавил следующее в мой файл apache.conf, но все равно не повезло:
<FilesMatch *.css>
Header set Content-Type "text/css"
</FilesMatch>
Вот детали кода:
Все эти файлы находятся в одном каталоге, и Apache обслуживает их со статусом возврата 200
- land.html.php (строка 1) :: <?php include head.html.php ?>
- head.html.php ::
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJ$
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="test.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="page-header"></div>
</head>
- test.css и land.css имеют эквивалентное содержимое , показанное здесь ::
.navbar {
background: linear-gradient(to right, #ee343a 0%,#468be6 100%);
padding:1% 0;
font-size: 1.2em;
}
.navbar-default .navbar-nav li a {
color: #bec6e0;
}
.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a.active {
color: #dfdfda;
}
#home {
background: url(images/Bikeclouds.jpg) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
background-size: cover;
padding-bottom: 400px;
opacity: .75;
}
.landing-text {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.landing-text h1 {
font-size: 500%;
font-weight: 700;
}
.padding img {
width: 100%;
}
footer {
width: 100%;
background-color: #23415c;
padding: 5% 5% 10% 5%;
color: #dce5f4;
}
.fa {
padding: 15px;
font-size: 25px;
color: #8f9d88
}