为什么 CSS 没有显示在我的 html 页面上（使用 Apache）？答案

【问题标题】：Why is CSS not displaying on my html page (with Apache)?为什么 CSS 没有显示在我的 html 页面上（使用 Apache）？
【发布时间】：2022-11-16 23:36:59
【问题描述】：

我在 localhost 托管一个站点，并试图从外部文件加载 CSS。当我检查我的 apache access_log 时，CSS 没有显示也没有被访问。当我在 html 中包含 CSS 时，一切正常。

另外，当我直接访问 CSS 目录时，我可以在浏览器中查看 .css 文件。

这是我的 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>

和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;}
}

html文件在文档根目录下，css文件在子目录/css/下。

到目前为止我尝试过的事情：

正在清除 Chrome 缓存
将 CSS 放在文档根目录中（所以放在 / 而不是 /css/ ）
试用 Firefox
通过绝对路径加载 CSS 所以 /srv/apache2/htdocs/css/

这些都没有提供 CSS 或在 apache 访问日志中记录访问。

出了什么问题？

感谢帮助！

【问题讨论】：

link 元素不属于里面style 元素。

标签： html css apache http

【解决方案1】：

很可能是因为您将元素放入其中。试着把它放在外面，它应该可以工作

【讨论】：

【解决方案2】：

您应该在 head 部分中包含对外部样式表文件的引用，而不是在样式部分中。这是一个例子：

<!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>

【讨论】：