Apache环境下HTML页面无法加载外部CSS的问题求助

核心问题是你把外部CSS的<link>标签错误嵌套在了<style>标签内部。根据HTML规范，<link>是<head>的直接子元素，不能放在<style>标签里——浏览器会把它当作无效的CSS内容忽略，根本不会发起请求去加载mobile.css，这就是access_log里没有该文件访问记录的原因。

修正后的HTML代码 #

把<link>标签移到<style>标签外面，和<style>同级，放在<head>中：

<html>
    <head>
        <link href="css/mobile.css" rel="stylesheet" type="text/css">
        <style>
        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位置、换浏览器等操作都无效，是因为问题本质不是文件路径或缓存，而是HTML结构错误导致浏览器没有触发CSS文件的加载请求。修正结构后，浏览器会正常发起请求，access_log里也会出现对应的记录，CSS样式也能正常生效。

内容的提问来源于stack exchange，提问作者DevJoe