我的 Css 类不适用于我的 html 文件答案

【问题标题】：my Css class is not working with my html file我的 Css 类不适用于我的 html 文件
【发布时间】：2016-11-30 12:21:46
【问题描述】：

当我想要设置样式时，“cta”类没有做任何事情。我错过了什么或打错了吗？？任何人都可以帮助我，因为它让我发疯。抱歉，但这个愚蠢的事情是告诉我添加更多信息，我现在只是在写一堆垃圾，哈哈，所以忘记这部分，但真的会得到一些帮助

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

【问题讨论】：

我注意到你正在使用@charset "UTF=8"。它应该是字符集“UTF-8”
感谢解决了这么多问题:)

标签： html css class coding-style styles

【解决方案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 -->

【讨论】：

【解决方案2】：

如果我调用 .cta 类它可以工作，你只需要删除 utf 8 引用并为你的 body 和 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>

【讨论】：