css样式表没有加载和响应正文是试图链接它的html

Overall, my issue is that I cannot link my external css stylesheet.

  • I have two external stylesheets with identical content: land.css and test.css.
  • land.css links in fine, but test.css returns the html file (land.html.php) that tried to link it in the response body.

Here are the details of the server response:

When I link test.css, the external stylesheet does not get returned properly, and the response body for test.css is land.html.php:
faulty server response to test.css

When I link land.css, the external stylesheet loads just fine, and the response body for land.css is land.css (as it should be):
proper server response to land.css

I looked into the mime config to make sure all .css files would be served as content-type text/css. I have done the following troubleshooting..

  1. I confirmed that /etc/mime.types includes the line text/css css
  2. I confirmed that /etc/apache2/mods-available/mime.conf contains TypesConfig /etc/mime.types, and /etc/apache2/mods-enabled/ symlinks mime.conf
  3. I added AddType text/css .css to /etc/apache2/mods-available/mime.conf, /etc/apache2/apache2.conf, and my <VirtualHost>--overkill, but none of these seem to work
  4. I restarted the apache2 service... no luck
  5. I enabled the mod_headers module and added the following to my apache.conf file, but no luck still:
    <FilesMatch *.css> Header set Content-Type "text/css" </FilesMatch>

Here are the details of the code:

All of these files reside in the same directory and apache serves them with return status 200
- land.html.php (line 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 and land.css have equivalent contents shown here::

.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
}