单个CSS类拒绝表现

时间:2014-02-28 19:15:40

标签: html css html5 css3 firefox

我有一个CSS3类,拒绝将其属性应用于文本。我已多次更改名称,但仍有问题。在Chrome和Firefox中测试 - 运行Ubuntu,还没有安装IE。 CSS和HTML都已由w3

验证

CSS3:

body {
    background-color: #000000;
    color:white;
    margin-left: 10px;
    line-height: 200%;
}
h1, h2 {
    text-align: center;
    color:#FFFFFF;
}
.one {
    color: white;
    background-color: black;
    margin: 50px;
    font-weight: bolder;
    font-stretch: wider;
    font-variant: small-caps;
    font-style: italic;
    font-size: xx-large;
    font-family: Ubuntu, sans-serif;
}
.two {
    color: white;
    background-color: black;
    /*  margin: 10px;
      width: 500px;
      height: 70px;*/
    display: inline-block;
    font-family: Consolas, monaco, monospace;
}
a:link {
    color:#FF00FF;
}
/* unvisited link */
 a:link {
    background-color: black;
}
a:visited {
    color:#66FF33;
}
/* visited link */
 a:hover {
    color:#FF0099;
}
/* mouse over link */
 a:active {
    color:#66FF33;
}
/* selected link */
 a:focus {
    color:#FF9900
}
.ptxt {
    color: green;
    background-color: black;
    margin: 50px;
    display: inline-block;
    font-style: italic;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.list {
    color: white;
    background-color: black;
    margin: 50px;
    /*  width: 500px;
      height: 70px;*/
    display: inline-block;
    font-style: italic;
    font-family:"Comic Sans MS", cursive, sans-serif
}
.header {
    color: white;
    background-color: black;
    margin: 50px;
    /*  width: 500px;
      height: 70px;*/
    display: inline-block;
    font-size: large;
    font-style: normal;
    font-weight: bolder;
    font-family: font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
}

HTML5:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>This is a shell for an HTML5 webpage.</title>
        <link rel="stylesheet" type="text/css" href="Moog%20Page.css">
    </head>

    <body>
        <div>
            <div class="one">Site Index and Utilized Resources</div>
            <div class="two">
                <div class="list">
                    <p> <a href="http://www.cssbuttongenerator.com/">Here</a> is a website I used to make a CSS Button. I found it pretty handy.</p>
                    <p> <a href="http://www.moogmusic.com/">Moog Music</a> gave me a lot of inspiration for this website, and I definitely owe them some of the credit. Plus, by adding yet another link, I increase your odds of visiting the site and drooling over synthesizers.</p>
                    <p> <a href="http://www.w3schools.com/">The w3schools</a> site certainly deserves a round of applause- I frantically prowled around site looking for documentation while trying to complete this assignment.</p>
                    <p>And, of course, <a href="http://www.ncssm.edu/~morrison/">Dr. Morrison</a>, who gave me the tools (and the assignment) for making this site. If not for him (and his requirement that I build this to get a grade), this site would not exist at all.</p>
                </div>
                <div class="ptxt">
                    <p>This text simply refuses to behave according to the standards of the "ptxt" class.
                        <!-- To Black Hats: The server running this is a Raspberry Pi. It would be really lame if you tried to take my server down, because anyone can take down a server with less than A Gig of RAM. You should go for the big fish, like Brainhoney or something. (Seriously though, don't do that; I've dealt with idiocy like that already.) -->
                    </p>
                </div>
            </div>
    </body>

</html>

Text不响应“ptxt”类,但在更改为其他类(例如“one”或“list”)时会响应。

感谢您提供的任何帮助。

2 个答案:

答案 0 :(得分:1)

CSS表格中有<style>个标签。删除它们,它应该工作。

<style type="text/css">
a:link {color:#FF00FF;}    /* unvisited link */
a:link {background-color: black;}
a:visited {color:#66FF33;} /* visited link */
a:hover {color:#FF0099;}   /* mouse over link */
a:active {color:#66FF33;}  /* selected link */
a:focus {color:#FF9900 }
</style>

致:

a:link {color:#FF00FF;}    /* unvisited link */
a:link {background-color: black;}
a:visited {color:#66FF33;} /* visited link */
a:hover {color:#FF0099;}   /* mouse over link */
a:active {color:#66FF33;}  /* selected link */
a:focus {color:#FF9900 }

答案 1 :(得分:1)

尝试从此

中删除样式标记
<style type="text/css">
a:link {color:#FF00FF;}    /* unvisited link */
a:link {background-color: black;}
a:visited {color:#66FF33;} /* visited link */
a:hover {color:#FF0099;}   /* mouse over link */
a:active {color:#66FF33;}  /* selected link */
a:focus {color:#FF9900 }
</style>