2012-02-28 5 views
8

이것이 작동하지 않는 이유에 대해 완전히 이해하기 어렵습니다. 둘 다 같은 디렉토리에 있더라도 HTML 파일이 CSS를로드 할 수없는 것 같습니다. 어떤 아이디어가 문제 일 수 있습니까?HTML이 CSS 파일을로드하지 않습니다.

index.html을 위의 내용 작동하지 않습니다

body{ 
    background-color: #F9F9F9; 
    background-image: url(images/bg3.png); 
    background-position: center top; 
    background-repeat: repeat; 
    text-shadow: #FFFFFF 0px 1px 0px; 
    font-family: "Georgia", "Times", serif; 
    -webkit-font-smoothing: antialiased; 
} 

a{ 
    text-decoration: none; 
} 

#main{ 
    margin: 50px auto 50px auto; 
    width: 1000px; 
    min-height: 500px; 
    padding: 0px 20px 0px 20px; 
} 

<!DOCTYPE html> 
<html> 
<head> 
<title>Home Page</title> 
<link rel="stylesheet" href="style.css" media="screen" /> 
<meta name="viewport" content="width=1100"> 
</head> 
<body> 
<div id="main"> Hello </div> 
</body> 
</html> 

있는 style.css. index.html을에서 CSS를 인라인을 추가하면이 더 이상 최신 브라우저에 필요하지 않을 수도 있지만 그래도

<!DOCTYPE html> 
<html> 
<head> 
<title>Homepage</title> 
<style type="text/css" media="screen"> 
    body { 
     background-color: #F9F9F9; 
     background-image: url(images/bg3.png); 
     background-position: center top; 
     background-repeat: repeat; 
     text-shadow: #FFFFFF 0px 1px 0px; 
     font-family: "Georgia", "Times", serif; 
     -webkit-font-smoothing: antialiased; 
    } 
    a { 
     text-decoration: none; 
    } 
    #main { 
     margin: 50px auto 50px auto; 
     width: 1000px; 
     min-height: 500px; 
     padding: 0px 20px 0px 20px; 
    } 
</style> 
<meta name="viewport" content="width=1100"> 
</head> 
<body> 
    <div id="main"> Hello </div> 
</body> 
</html> 
+0

두 파일이 같은 디렉토리에 있습니까? 파일 이름을 변경하여 두 파일에 모두 액세스 할 수 있습니까 (예 : http://example.com/index.html -> http://example.com/style.css)? 대신 절대 경로 ('/ style.css')를 사용해 보셨습니까? – Zeta

+0

어떤 브라우저를 사용하고 있습니까? style.css의 파일 권한을 이미 확인 했습니까? 구문 분석 문제를 확인하기 위해 CSS의 유효성을 검사하려고 시도 했습니까? – fcalderan

+1

유형 = "text/css"를 추가해도 F12 개발자 도구가 실패하면 네트워크 모니터를보고 .css url이 요청 했습니까? 괜찮습니까? –

답변

12

귀하의 링크 태그

type="text/css" 

추가 작품을 잘 HTML4 specification이 필요한 선언 속성.

유형 = 콘텐츠 형식 [의 CI는]

이 속성은 요소의 내용의 스타일 시트 언어를 지정하고 기본 스타일 시트 언어를 대체합니다. 양식 언어는 이며 언어는 콘텐츠 유형 (예 : 'text/css')으로 지정됩니다. 작성자는이 속성의 값을 제공해야합니다. 이 속성에는 기본값 값이 없습니다.

+0

상용구 (h5bp)는 해당 속성을 사용하지 않으며 잘 작동합니다. – fcalderan

+0

type = "text/css"가 기본값입니다. 그것을 추가 할 필요가 없습니다. –

+0

HTML4 [link] (http://www.w3.org/TR/html4/present/styles.html#h-14.2.3)에서는 type 속성이 선택 사항이 아니므로 일부 olders 브라우저는이를 . –

2

이 작업을 시도 할 수 :

<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/> 

브라우저가 실제로 요청을하고 다음 동일한 디렉토리에 404

+0

rel = "stylesheet"가 나를 위해 일했습니다! –

+0

type = "text/css"나를 위해 일했습니다 –

5

확인을 두 파일 모두를 반환하지 않습니다 있는지 확인 이것을 시도하십시오

<link href="style.css" rel="stylesheet" type="text/css"/> 
+1

감사합니다. rel = "stylesheet"는 저에게 문제입니다. Im hhh 누락되었습니다. –

2

당신이 말한대로 두 파일은 같은 디렉토리에 있습니다. 1. index.html 및 2. style.css

코드를 복사하여 내 로컬 컴퓨터에서 실행하면 문제가 없습니다. 브라우저가 새로 고칠 수/R.

맥 CMD + Windows에서 CTRL + F5를 눌러 전체 페이지를 다시로드 여전히 점점 문제는 다음 테스트 할 수있는 경우

그것을 시도 파일을 새로 고침하지 않는 날에 따르면

파이어 폭스 용 도구 firebug을 사용합니다.

IE8 및 Google 크롬의 경우 F12 키를 눌러 개발자 도구가 팝업되고 HTML 및 CSS가 표시되는지 확인할 수 있습니다.

그래도 문제가 있으시면 언제든지 알려주십시오.

3

당신은 당신은 또한 .이 .CSS는 매우 간단한 파일로드 현재 디렉토리

+0

왜 그런지 모르지만 점을 추가하면 도움이됩니다. –

0

사용을 다음과 같이 지정 href="./style.css"를 지정할 수 있습니다 type="text/css"을 추가해야합니다.

<link rel="stylesheet" href="path_here.css">

참고 : 1 -> rel 속성에 "스타일"을 작성하는 것을 잊지 마세요. 2 -> 올바른 경로 예를 들어, 사용 : D를 : \ 폴더 1 \ forlder2 \ FOLDER3 \ 당신이있는 그 어느 디렉토리 이제

, 당신은 당신이 언급 정확히 경로 당신의 .css 파일을로드 할 수 있습니다 "file.css

합니다.

감사합니다! 무하마드 마지드.

-3

추가 유형 = "텍스트/CSS는"그것은 나를 위해 일한 .

+4

이 답변은 이미 5 년 전에 세 번이나 주어졌습니다. 이 답변은 어떤 부가 가치를 제공합니까? – JJJ

1
나는이 같은 문제 (우분투 16.04, 전갱이 편집기, 파이어 폭스, 구글 크롬과 분투

.

솔루션 : Clear br Chrome에서 데이터 올리기 "설정> 고급 설정> 인터넷 사용 정보 삭제", Firefox에서 "메뉴 이미지 오른쪽 상단 툴바 '환경 설정'고급 '을 열고 메뉴에서이 이미지를 찾으십시오. 캐시 된 웹 컨텐트" 지금 지우기 ". 브라우저의 .css 파일을 캐시하고 변경되지 않은 경우 대개 다시로드하지 않습니다. 따라서 .css 파일을 변경하면이 웹 캐시를 지우고 .css 파일에 문제가없는 한 작동해야합니다. 평화, HTML5와 스탠

2

는 당신이 필요로하는 모든이 rel,조차 type입니다.

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

관련 문제