为什么 CSS 没有显示在我的 html 页面上（使用 Apache）？
[英]Why is CSS not displaying on my html page (with Apache)?
问题描述
I am hosting a site at localhost and am trying to load CSS from an external file.
我在 localhost 托管一个站点，并尝试从外部文件加载 CSS。 The CSS is not displaying and is not being accessed when I check my apache access_log.当我检查我的 apache access_log 时，CSS 没有显示并且没有被访问。 When I contain the CSS within the html it all works fine.当我将 CSS 包含在 html 中时，一切正常。
Also, when I access the CSS directory directly I can view the.css file in the browser.另外，直接访问CSS目录时，可以在浏览器中查看.css文件。
Here is my html:这是我的 html：
<html>
<head>
<style>
<link href="css/mobile.css" rel="stylesheet" type="text/css">
html {height: 100%;}
body {margin: 0px; padding: 0px; height: 100%; overflow: hidden;}
#site_box {position: absolute; margin:0px; min-height: 100%; min-width: 100%; padding:0px;}
#centre_column_box {display: block; margin-left: auto; margin-right: auto; max-width: 600px;}
#title_box {text-align: center; }
#title_box_title {font-weight: bold;}
#content_title_box {font-weight: bold;}
/* */
.wrapper {margin: 10px; padding: 5px;}
/*Test Wrapper
.wrapper {margin: 10px; padding: 5px; border-style: solid; border-color: black;}
/* */
/* For desktop */
@media (min-width: 1200px){
#top_row_box {display: none;}
#top_row_divider_box {display: none;}
#left_column_box {float: left; min-height: 100%; max-width: 200px;}
#profile_picture_box {width: 50px; height:50px;}
#menu_title {font-weight: bold;}
#left_column_divider_box {float: left; padding: 5px; height: 100vh; max-width: 5px;}
#left_column_divider {min-height: 99%; border-color: black; border-style: solid;}
}
</style>
</head>
<body>
<!-- html stuff here -->
</body>
</html>
and CSS:和 CSS：
/* For mobile */
@media (max-width: 1200px){
#menu_list_box > ul > li {margin: 10px; display: inline-block; border-style: solid; border-color: black; padding: 10px;}
#top_row_divider_box {padding: 5px; width: 95%;}
#top_row_divider {min-height: 99%; border-color: black; border-style: solid;}
#left_column_box {display: none;}
#left_column_divider_box {display: none;}
}
The html file is in the document root and the css file is in the sub directory /css/. html文件在文档根目录下，css文件在子目录/css/下。
Things I have tried so far:到目前为止我尝试过的事情：
- Clearing chrome cache清除铬缓存
- Placing CSS in the document root ( so at / instead of /css/ )将 CSS 放在文档根目录中（所以在 / 而不是 /css/ ）
- Trying Firefox尝试 Firefox
- Loading CSS via an absolute path so /srv/apache2/htdocs/css/通过绝对路径加载 CSS 所以 /srv/apache2/htdocs/css/
None of these presented the CSS or recorded an access in the apache access log.这些都没有提供 CSS 或在 apache 访问日志中记录访问。
What is going wrong?出了什么问题？
Help is appreciated !感谢帮助！
2 个解决方案
解决方案1
0 2022-11-14 11:49:51
Most likely because you put inside the element.很可能是因为您将元素放入其中。 Try putting it outside of that and it should work试着把它放在外面，它应该可以工作
解决方案2
0 2022-11-14 12:00:35
You should include a reference to the external style sheet file inside the head section, and not in style section.您应该在 head 部分中包含对外部样式表文件的引用，而不是在样式部分中。 here is an example:这是一个例子：
<.DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/mobile.css"> <style> // your styles </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.