2016-07-26 22 views
0

クラス "cta"はスタイルを設定したいときは何もしません。私は何かを見逃したり、タイプミスをしたことがありますか?誰でも私を狂ってしまうように喜ばせることができます。申し訳ありませんが、この愚かな事は、いくつかのイムは、ちょうど今ハハので、ちょうどこの部分を忘れてごみの負荷を書くより多くの情報を追加するために私に言っているが、実際にいくつかの助けに私のCssクラスが私のhtmlファイルで動作していません

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF=8"> 
    <meta name="viewport" content="width=device-width, maxium-scale=1.0, minimun-width=1.0, 
    initial-width=1.0" /> 
    <title>Welcome to Drunken Anticz</title> 
    <link rel="stylesheet" type="text/css" href="css/screen_style.css" /> 
    <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and 
    (max-width:500px)" href="css/scrren_layout_small.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and 
    (max-width:750px)" href="css/scrren_layout_medium.css" /> 
    <!--[if lt IE 9]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif] --> 
</head> 
    <body> 
     <div class="page"> 

      <header> 
       <a class="logo" href="#"></a> 
      </header> 

      <article> 
       <h1>Welcome</h1> 
       <p>Welcome to the site blah blah blahblah blah blahblah blah blahblah blah blah 
       blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 
       blah blah blahblah blah blah</p> 
      </article> 

      <div class="promo-container"> 
       <div class="promo"> 
        <div class="content"> 
         <h3><a href="#">Events</a></h3> 
         <p>list of eventslist of eventslist of eventslist of eventslist of events 
         list of eventslist of eventslist of eventslist of eventslist of events</p> 
         <p><a class="cta" href="#">More info.</a></p> 
        </div> 
       </div> 
      </div> 
      <div class="promo-container"> 
       <div class="promo"> 
        <div class="content"> 
         <h3><a href="#">Loyalty Cards</a></h3> 
         <p>info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards 
         info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards</p> 
         <p><a class="cta" href="#">More info.</a></p> 
        </div> 
       </div> 
      </div> 


     <nav> 
      <a href="#">Home</a> 
      <a href="#">Event's</a> 
      <a href="#">Book Us</a> 
      <a href="#">Loyalty Card</a> 
      <a href="#">Contact Us</a> 
     </nav> 

     </div> 
    </body> 

@charset "UTF=8"; 

body { 
color: #575c7a; 
line-height: 1.5em; 
font-family: arial; 
font-size: 14px; 
background: #fff url(../images/background-black-white.jpg) repeat-x 0px 0px; 
} 

.page { 
max-width: 980px; 
margin: 0px auto 0px auto; 
position: relative; 
background-color: #DDDDDF; 
} 

h1 { 
font-size: 2em; font-weight: normal; color: #7A7979; margin: 0 0 .5em 0; 
} 

h2 { 
font-size: 1.7em; margin: 0 0 1em 0; 
} 

h3 { 
font-size: 1.5em; margin: 0 0 1em 0; 
} 

p { 
margin: 0 0 .75em 0; 
} 

a { 
color: #7A7979; 
} 

a:hover { 
color: #009eff; 
} 

footer { 
font-size: .85em; color: #7A7979; background-color: url(../images/background-black-white.jpg; padding: 10px 10px 10px 0px; 
} 

a.cta { 
font-size: 40px; 
} 
+0

@charset "UTF = 8"を使用していることがわかりました。それは文字セット "UTF - 8" – MiltoxBeyond

+0

ありがとう非常に多くの問題を解決する必要があります:) – supersimion21

答えて

1

あなたの問題をappericateう結果はかなり簡単に解決できました。あなたはバックグラウンドスタイルの閉じ括弧をa.ctaスタイルの少し前に置いたので、バックグラウンドurlを参照した後にパーサがすべてのスタイルを取るようにしました。

@charset "UTF-8"; 
 

 
body { 
 
color: #575c7a; 
 
line-height: 1.5em; 
 
font-family: arial; 
 
font-size: 14px; 
 
background: #fff url(../images/background-black-white.jpg) repeat-x 0px 0px; 
 
} 
 

 
.page { 
 
max-width: 980px; 
 
margin: 0px auto 0px auto; 
 
position: relative; 
 
background-color: #DDDDDF; 
 
} 
 

 
h1 { 
 
font-size: 2em; font-weight: normal; color: #7A7979; margin: 0 0 .5em 0; 
 
} 
 

 
h2 { 
 
font-size: 1.7em; margin: 0 0 1em 0; 
 
} 
 

 
h3 { 
 
font-size: 1.5em; margin: 0 0 1em 0; 
 
} 
 

 
p { 
 
margin: 0 0 .75em 0; 
 
} 
 

 
a { 
 
color: #7A7979; 
 
} 
 

 
a:hover { 
 
color: #009eff; 
 
} 
 

 
footer { 
 
font-size: .85em; 
 
color: #7A7979; 
 
background/*-color -- Color doesn't take a url value*/: url(../images/background-black-white.jpg) 
 
/* YOU FORGOT THE CLOSING PARENTHESES */; 
 
padding: 10px 10px 10px 0px; 
 
} 
 

 
a.cta { 
 
font-size: 40px; 
 
}
<div class="page"> 
 
    <header> 
 
    <a class="logo" href="#"></a> 
 
    </header> 
 
    <article> 
 
    <h1>Welcome</h1> 
 
    <p>Welcome to the site blah blah blahblah blah blahblah blah blahblah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah blah blah blahblah blah blah</p> 
 
    </article> 
 

 
    <div class="promo-container"> 
 
    <div class="promo"> 
 
     <div class="content"> 
 
     <h3><a href="#">Events</a></h3> 
 
     <p>list of eventslist of eventslist of eventslist of eventslist of events list of eventslist of eventslist of eventslist of eventslist of events</p> 
 
     <p><a class="cta" href="#">More info.</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="promo-container"> 
 
    <div class="promo"> 
 
     <div class="content"> 
 
     <h3><a href="#">Loyalty Cards</a></h3> 
 
     <p>info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards</p> 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

0

私はそれが動作.ctaクラスを呼び出す場合は、単純にUTF-8の参照を削除して、あなたの身体とhtmlタグの適切なクローズタグを使用する必要があります。

body { 
 
color: #575c7a; 
 
line-height: 1.5em; 
 
font-family: arial; 
 
font-size: 14px; 
 
background: #fff url(../images/background-black-white.jpg) repeat-x 0px 0px; 
 
} 
 

 
.page { 
 
max-width: 980px; 
 
margin: 0px auto 0px auto; 
 
position: relative; 
 
background-color: #DDDDDF; 
 
} 
 

 
h1 { 
 
font-size: 2em; font-weight: normal; color: #7A7979; margin: 0 0 .5em 0; 
 
} 
 

 
h2 { 
 
font-size: 1.7em; margin: 0 0 1em 0; 
 
} 
 

 
h3 { 
 
font-size: 1.5em; margin: 0 0 1em 0; 
 
} 
 

 
p { 
 
margin: 0 0 .75em 0; 
 
} 
 

 
a { 
 
color: #7A7979; 
 
} 
 

 
.cta { 
 
color: red; 
 
}
<!doctype html> 
 
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF=8"> 
 
    <meta name="viewport" content="width=device-width, maxium-scale=1.0, minimun-width=1.0, 
 
    initial-width=1.0" /> 
 
    <title>Welcome to Drunken Anticz</title> 
 
    <link rel="stylesheet" type="text/css" href="css/screen_style.css" /> 
 
    <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css /> 
 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and 
 
    (max-width:500px)" href="css/scrren_layout_small.css" /> 
 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and 
 
    (max-width:750px)" href="css/scrren_layout_medium.css" /> 
 
    <!--[if lt IE 9]> 
 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
    <![endif] --> 
 
</head> 
 
    <body> 
 
     <div class="page"> 
 

 
      <header> 
 
       <a class="logo" href="#"></a> 
 
      </header> 
 

 
      <article> 
 
       <h1>Welcome</h1> 
 
       <p>Welcome to the site blah blah blahblah blah blahblah blah blahblah blah blah 
 
       blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 
 
       blah blah blahblah blah blah</p> 
 
      </article> 
 

 
      <div class="promo-container"> 
 
       <div class="promo"> 
 
        <div class="content"> 
 
         <h3><a href="#">Events</a></h3> 
 
         <p>list of eventslist of eventslist of eventslist of eventslist of events 
 
         list of eventslist of eventslist of eventslist of eventslist of events</p> 
 
         <p><a class="cta" href="#">More info.</a></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="promo-container"> 
 
       <div class="promo"> 
 
        <div class="content"> 
 
         <h3><a href="#">Loyalty Cards</a></h3> 
 
         <p>info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards 
 
         info about loyalty cardsinfo about loyalty cardsinfo about loyalty cards</p> 
 
         <p><a class="cta" href="#">More info.</a></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
</body> 
 
</html> 
 

 
     <nav> 
 
      <a href="#">Home</a> 
 
      <a href="#">Event's</a> 
 
      <a href="#">Book Us</a> 
 
      <a href="#">Loyalty Card</a> 
 
      <a href="#">Contact Us</a> 
 
     </nav> 
 

 
     </div> 
 
    </body>

関連する問題