鏈接到外部樣式表時頁面不會加載

我正在使用WAMP在本地查看我的網站。使用嵌入式樣式表時頁面加載和工作正常
（<style type="text/css"> CSS </style>）
與我的頁面，但是當我嘗試鏈接到一個外部樣式表我的頁面將不會顯示，甚至沒有樣式的文本，只是沒有。我的路徑都是正確的，我甚至嘗試將我的樣式表放在與我的頁面相同的文件夾中，以查看是否有效，但沒有任何優點。需要一些幫助鏈接到外部樣式表時頁面不會加載

我的CSS保存爲：style.css的

*{ 
    margin:0; 
} 

@font-face { 
    font-family: 'Aguafina Script'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Aguafina Script Regular'), local('AguafinaScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/aguafinascript/v2/65g7cgMtMGnNlNyq_Z6CvDVi_4UGEKHjyEZCTqR5Ysg.woff) format('woff'); } 

#wrapper{ 
    height:100%; 
    margin-left:0px; 
    margin-bottom:0px; 
} 
#sidebar{ 
    position: absolute; 
    left:0; 
    top:0; 
    width:350px; 
    background:rgba(222,222,222,0.9); 
    text-align: center; 
    animation:mymove 1s; 
    -webkit-animation:mymove 1.35s; 
    -moz-animation:mymove 1s; 
} 

#nav{ 
    margin-top: 20px; 
} 
#nav ul{ 
    text-align: center; 
    padding: 0; 
} 
#nav li { 
    list-style-type: none; 
    margin: auto; 
    font-size: 19px; 
    text-transform: uppercase; 
    margin-top: 15px; 
    letter-spacing: 6px; 

} 
#nav li a{ 
    text-decoration: none; 
    color:#666; 
} 
#nav li a:hover{ 
    color:#0bf; 
} 
#sidebar img{ 
    margin-top: 15px; 
} 
h1{ 
    font-family: 'Aguafina Script'; 
    font-size: 3em; 
    padding-bottom: 15px; 
    border-bottom: 2px dotted #aaa; 
    text-decoration: none; 
    width:80%; 
    color:#0bf; 
    margin: auto; 
} 

#contact{ 
    margin-top:20%; 
    bottom:0; 
    color:#666; 
    font-size: 12px; 
} 


@-webkit-keyframes mymove{ 
    0%{ 
     margin-left: -350px; 
    } 
    100%{ 
     margin-left: 0px;  } 
    } 
}

和我的html在同一文件夾中保存的index.php

<!DOCTYPE html> 
<html> 
<head> 
<title>My Test Site</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 

</head> 
<body> 
<div id="sidebar"> 
    <img src="logo.png" width="200" height="200"> 
    <h1>Example</h1> 
    <div id="nav"> 
     <ul> 
      <li><a href="">Home</a></li> 
      <li><a href="">About</a> 
      <li><a href="">Gallery</a></li> 
      <li><a href="">Contact</a></li> 
     </ul> 
    </div> 
    <div id="contact"> 
     <p>+44 784 737 9557</p> 
     <p>[email protected]</p> 
     <p>YORKSHIRE, UK</p> 
     <p>&copy;<?php echo date('Y'); ?> Peelblue Design</p> 
    </div> 
</div> 

<script type="text/javascript"> 

//set div height 100% 

$(function(){ 
$('#sidebar, #cvbar').css({'height':($(document).height())+'px'}); 
$(window).resize(function(){ 
    $('#sidebar').css({'height':($(document).height())+'px'}); 
}); 
}); 

//sidebar slide in on page load 

$("div#sidebar") 
.css("margin-left",-$(this).width()) 
.animate({ 
    marginLeft:0 
}, 1200); 

</script> 

</body> 
</html>

所有

來源

2013-04-16 aztekgold

請向我們展示如何鏈接到HTML中的外部樣式表。 – Michael

你可以簡單地導入外部CSS：

<style type="text/css"> 
    @import url("external.css"); 
</style>

來源

2013-04-16 14:46:39

現在頁面顯示的只是純文本而沒有樣式，似乎沒有加載樣式表。可能我只能添加樣式的嵌入方式。這真是令人困惑 – aztekgold

@aztekgold你要麼有文件路徑錯誤，要麼是服務器權限問題。 –

我通過網絡服務器幫助閱讀，你是對的似乎是一個權限問題。固定，非常感謝 – aztekgold

作爲@邁克爾聲明，向我們提供一些關於如何調用外部樣式表的更多信息。一般情況下，您撥打的HTML頭樣式表是這樣的：

<link rel="stylesheet" href="css/styles.css">

來源

2013-04-16 14:43:39

ive更新了帖子向我顯示我的代碼 – aztekgold

CSS與文檔的頭部部分<link />標籤鏈接這樣

<link href="cssfolder/yourcss.css" media="all" rel="stylesheet" type="text/css"/>

應該這樣做。

來源

2013-04-16 16:00:50 dragonloverlord

鏈接到外部樣式表時頁面不會加載

回答

相關問題