堆栈内存溢出
  简体   繁体   English

我的Css类无法使用我的html文件

[英]my Css class is not working with my html file

 原文  2016-07-26 18:00:36  6   2    html/ css/ class/ coding-style/ styles

问题描述

The class "cta" is not doing anything when i want to style it. 当我想设置样式时，“ cta”类什么也没做。 Have i missed anything or made a typo?? 我错过了什么或打错了打字吗？ can anybody help me please as it is driving me insane. 任何人都可以帮助我，因为它使我发疯。 sorry but this stupid thing is telling me to add more info some im just writing a load of rubbish now haha so just forget about this part but would really appericate some help 抱歉，这愚蠢的事情告诉我要添加更多信息，一些即时消息现在只是在写垃圾，哈哈，所以就算了这部分也可以，但真的会有所帮助 

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

2 个解决方案

解决方案1
 1 已采纳  2016-07-26 18:07:27

Your problem resulted being fairly easy to solve. 您的问题导致很容易解决。 You left out the closing parentheses in the background style a little before your a.cta style which made the parser assume all of the styles after refer to a background url. 在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
 0  2016-07-26 18:09:37

If I call the .cta class it works, you simply need to remove the utf 8 reference and use the proper close tags for your body and html tags: 如果我调用.cta类可正常工作，则只需删除utf 8参考并为您的body和html标签使用适当的close标签： 

 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我的 .css 文件在我的 .html 文件中不起作用 - My .css file isn't working inside my .html file 如何将我的 CSS class 链接到我的 HTML 文件？ - How can I link my CSS class to my HTML file? 为什么我的 CSS 样式表不再工作/链接到我的 HTML 文件？ - Why is my CSS stylesheet not working/linking to my HTML file anymore? 为什么我的CSS代码在我的HTML文件中不起作用？ - Why is my CSS code not working in my HTML file? CSS 不适用于我的 html 并且不显示 - CSS is not working with my html and not displaying 为什么我的CSS类不起作用 - Why is my CSS class not working 我的 CSS 文件在我的 PHP 文件中不起作用 - My CSS file not working in my PHP file 我怎样才能从 html 文件中的 css 文件中获得 css class 建议？ - how can i get css class suggestion from a html file in my css file on VScode? 自从我在HTML文件和CSS文件中指定了适当的类名称后，为什么CSS中的样式无法正常工作？ - Why my styles in CSS is not working since I gave appropriate name of classes in HTML file and CSS file? 将css文件链接到我的html文件 - linking a css file to my html file
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM