Question

我正在使用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>MATTY@EXAMPLE.COM</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>

全部在同一个文件夹中

Answer 1

正如@Michael所述，请向我们提供有关如何调用外部样式表的更多信息。通常，您可以在HTML头中调用样式表，如下所示：

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

Answer 2

您只需导入外部CSS：

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

Answer 3

css与文档的head部分中的<link />标记链接，如下所示
<link href="cssfolder/yourcss.css" media="all" rel="stylesheet" type="text/css"/>

应该这样做。

链接到外部样式表时，页面将不会加载

3 个答案: