외부 스타일 시트에 링크 할 때 페이지가로드되지 않습니다.

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은 같은 폴더에

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

모두의 index.php로 저장

출처

2013-04-16 aztekgold

HTML에서 외부 스타일 시트에 연결하는 방법을 알려주세요. – Michael

당신은 단순히 외부 CSS를 가져올 수 :

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

출처

2013-04-16 14:46:39

을 표시하도록 게시물을 업데이트했습니다. 이제 페이지에 스타일이 없으면 일반 텍스트 만 표시되고 스타일 시트는로드되지 않는 것처럼 보일 수 있습니다. 아마도 스타일을 embeded 방식으로 추가 할 수 있습니다. 이건 정말 혼란 스럽네요. – aztekgold

@aztekgold 당신은 파일 경로가 잘못되었거나 서버 권한 문제입니다. –

웹 서버 도움말을 통해 읽으면 권한 문제인 것처럼 보입니다. 고정, 고마워요 – aztekgold

@Michael로 명시 적으로 외부 스타일 시트를 호출하는 방법에 대한 정보를 제공해주십시오. 일반적으로,이 같은 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

외부 스타일 시트에 링크 할 때 페이지가로드되지 않습니다.

답변

관련 문제