CSS 파일은 Google App Engine과 부분적으로 만 작동합니다.

Udacity의 웹 개발 과정을 수강하는 동안 Google App Engine을 사용하여 만든 간단한 웹 앱의 HTML 부분에 스타일을 추가하고 싶습니다. 그러나 내가 추가 한 CSS 파일은 부분적으로 페이지에만 적용되는 것처럼 보입니다. 여기에 HTML 코드입니다 : 여기 CSS 파일은 Google App Engine과 부분적으로 만 작동합니다.

<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="../static/main.css" /> 
    <title>What do ya wanna do?</title> 
</head> 

<body> 
    <form class="wrapper"> 
     <a value="birth" class="myButton">Mystify your text!</a> 
     <a value="rot13" class="myButton">Enter your birthday</a> 
     <a value="signup" class="myButton">Feel like signing up?</a> 
    </form> 
</body> 
</html>

내 CSS 파일입니다 (나는 CSS에서 많은 기술이없는, 그래서 나는이 http://www.bestcssbuttongenerator.com/를 사용하여 만든) :

.wrapper { 
    position:absolute; 
    top: 30%; 
    left: 25%; 
    margin-top: -20px; 
    margin-left: -10px; 

.myButton { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%); 
    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%); 
    background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%); 
    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%); 
    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0); 
    background-color:#ededed; 
    -moz-border-radius:7px; 
    -webkit-border-radius:7px; 
    border-radius:7px; 
    display:inline-block; 
    cursor:pointer; 
    color:#777777; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:21px 45px; 
    text-decoration:none; 
} 
.myButton:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); 
    background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%); 
    background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%); 
    background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%); 
    background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%); 
    background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0); 
    background-color:#dfdfdf; 
} 
.myButton:active { 
    position:relative; 
    top:1px; 
}

그리고 마지막으로, 여기 내 인을 app.yaml 파일 :

application: appudacityhelloworld 
version: 1 
runtime: python27 
api_version: 1 
threadsafe: true 

handlers: 
- url: /static 
    static_dir: static 

- url: /.* 
    script: hello.application 

libraries: 
- name: jinja2 
    version: latest

작동하는 것 같다 CSS의 유일한 부분은 <form>의 장소입니다. /templates 폴더에 내 HTML 코드가 있고 /static 폴더에 내 CSS가 있고 모든 것이 정확히 CSS 파일의 내용을 제외하고 개발 한 다른 앱처럼 보입니다. 모든 것을 시도해 본 결과, GAE에는 CSS를 다루는 데 몇 가지 한계가 있다고 생각하기 시작했습니다. 나는 뭔가를 놓친 건가요?

출처

2014-05-19 oxtay

JoeBiz가 문제를 발견 한 것 같습니다. 나는 CSS 파일을 "부분적으로 적용"할 수 없다는 점을 덧붙이겠다. 이것은 브라우저에 의해로드되거나 그렇지 않다. 일부 규칙이 무시되는 경우 CSS 파일의 어딘가에 문제가 있습니다. –

감사합니다. 나는 이것에 반나절을 보냈다는 것을 믿을 수 없어 그것을 이해할 수 없었다. 디버깅을 시도한 방식은 이러한 파일을 별도의 폴더에 넣고 Chrome을 사용하여 열어서 예상대로 정확하게 작동하도록하는 것이 었습니다. 그래서 아마도 Chrome에는 이러한 종류의 문제를 감지하고 수정하여 문제가 다른 곳에 있다고 생각하게 된 것 같습니다. – oxtay

.wrapper css 규칙 끝에 중괄호가 없습니다.

변경 :

.wrapper { 
    position:absolute; 
    top: 30%; 
    left: 25%; 
    margin-top: -20px; 
    margin-left: -10px;

에 :

.wrapper { 
    position:absolute; 
    top: 30%; 
    left: 25%; 
    margin-top: -20px; 
    margin-left: -10px; 
}

모든 것이 적용됩니다.

출처

2014-05-19 16:58:35 theJoeBiz

CSS 파일은 Google App Engine과 부분적으로 만 작동합니다.

답변

관련 문제