2016-07-26 3 views
0

Класс «cta» ничего не делает, когда я хочу его стилизовать. Я что-то пропустил или сделал опечатку? может кто-нибудь мне помочь, так как это сводит меня с ума. извините, но это глупая вещь, говорит мне, чтобы добавить больше информации некоторые им просто писать груз мусора в настоящее время ха-ха так просто забыть об этой части, но действительно appericate некоторой помощимой класс 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

Вашей проблеме что довольно легко решить. Вы ушли из закрывающих круглых скобок в стиле фона немного раньше вашего стиля 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>

Смежные вопросы