1. Zuhause
  2. Frage und Antwort
  3. meine CSS-Klasse arbeitet nicht mit meiner HTML-Datei

meine CSS-Klasse arbeitet nicht mit meiner HTML-Datei

2016-07-26 135 views
0

Die Klasse "CTA" macht nichts, wenn ich es stylen möchte. Habe ich etwas verpasst oder einen Tippfehler gemacht ?? kann mir bitte jemand helfen, da es mich wahnsinnig macht. Sorry, aber diese dumme Sache sagt mir mehr Informationen einige im nur einen Quatsch zu schreiben jetzt so einfach haha ​​hinzufügen diesen Teil vergessen, aber wirklich etwas Hilfemeine CSS-Klasse arbeitet nicht mit meiner HTML-Datei

<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; 
}

Quelle

2016-07-26 supersimion21

+0

Eine Sache, die ich bemerkte, ist, dass Sie @charset "UTF = 8" verwenden. Es sollte Charset "UTF-8" – MiltoxBeyond

+0

Dank so viel Problem gelöst werden :) – supersimion21

Antwort

1

Ihr Problem appericate würde Ergebnis ist ziemlich einfach zu lösen. Sie haben die abschließenden Klammern im Hintergrundstil etwas vor Ihrem a.cta-Stil weggelassen, wodurch der Parser alle Stile angenommen hat, nachdem er auf eine Hintergrund-URL verwiesen hat.

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

Quelle

2016-07-26 18:07:27 MiltoxBeyond

0

Wenn ich die .cta Klasse funktioniert es nennen, müssen Sie einfach die utf 8 Referenz und verwenden die richtigen End-Tags für Ihren Körper und HTML-Tags entfernen:

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>

Quelle

2016-07-26 18:09:37

 Verwandte Themen

  • Keine verwandten Themen^_^