logo标签列表

CSS：字体颜色不会改变

cssfontscolors
3

我的html文件在使用CSS样式表中定义的字体颜色方面存在问题。它似乎部分工作正常，但不幸的是它没有达到我想要的效果。

* {
  font-family: "verdana"
  color: #FFF;
}

.wrapper {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.header {
  display: table;
  float: left;
  background-image: url("header.jpg");
  width: 100%;
  height: 250px;
  vertical-align: top;
}

.bodytop {
  display: table;
  clear: both;
  background-image: url(images/header.jpg);
  width: 100%;
  vertical-align: top;
  background-color: #444444;
}

.bodybottom {
  display: table;
  width: 100%;
  vertical-align: top;
  background-color: #666666;
}

.buttonbox {
  display: table;
  width: 150px;
  height: 150px;
  background-color: #888888;
  vertical-align: middle;
  margin: 15px;
}
<htmL>

<head>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <title></title>
</head>

<body>
  <div class="wrapper">
    <div class="header">
      <!--Header, the first 250px from the top-->
      <div class=bodytop>
        <!--upper part of the website-->
        <center>
          <div class="buttonbox">
            Dit is button3
          </div>
          <div class="buttonbox">
            Dit is button2
          </div>
          <div class="buttonbox">
            Dit is button1
          </div>
        </center>
        <div class=bodybottom>
          <!--Lower part of the website-->
        </div>
      </div>
    </div>
  </div>
</body>

</htmL>

代码似乎在将字体更改为Verdana方面起作用，但颜色不会改变。
3
不要使用<center>标签，它已经和恐龙一样灭绝了。 - Praveen Kumar Purushothaman
1
是的，我明白了，我知道我需要改变这个，但由于我不知道该如何改变，所以我快速使用它来检查它的外观，但这将会改变。然而，删除这个不会对字体颜色有帮助。我不想在同一个主题中问这个问题，因为我还没有充分发挥我的研究技能。但是感谢您的提醒^^。 - Robert Wiedeman
1
那只是一个有趣的笑话。除此之外，问题在于第一行缺少分号，伙计！ - Praveen Kumar Purushothaman
2
好的，现在我只是感到羞愧 >,<。问题解决了 =D。非常感谢你，很抱歉浪费了你的时间。 - Robert Wiedeman
3个回答
3

在你的font-family后面缺少了一个分号:

*{
  font-family: "verdana"; /* Missing this semi-colon. */
  color: #FFF;
}
.wrapper
{
  display: table;
  width: 100%;
  height: 100%;
  background-color: #000000;
}
.header
{
  display: table;
  float: left;
  background-image: url("header.jpg");
  width: 100%;
  height: 250px;
  vertical-align: top;
}
.bodytop
{
  display: table;
  clear: both;
  background-image: url(images/header.jpg);
  width: 100%;
  vertical-align: top;
  background-color: #444444;
}
.bodybottom
{
  display: table;
  width: 100%;
  vertical-align: top;
  background-color: #666666;
}
.buttonbox
{
  display: table;
  width: 150px;
  height: 150px;
  background-color: #888888;
  vertical-align: middle;
  margin: 15px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <title></title>
</head>
<body>
<div class="wrapper">
<div class="header">
<!--Header, the first 250px from the top-->
    <div class=bodytop>
    <!--upper part of the website-->
        <center>
        <div class="buttonbox">
        Dit is button3
        </div>
        <div class="buttonbox">
        Dit is button2
        </div>
        <div class="buttonbox">
        Dit is button1
        </div>
        </center>
    <div class=bodybottom>
    <!--Lower part of the website-->
    </div>
    </div>
</div>
</div>
</body>
</html>

3

这是因为你设置了全局选择器*的color属性。对于特定元素，你需要设置它们自己的颜色。此外，全局选择器中只有一个color属性。

另外，你的CSS存在错误：

font-family: "verdana"
//--------------------^ No Semi colon.


* {
  font-family: "verdana"; /* Corrected */
  color: #FFF;
}

.wrapper {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.header {
  display: table;
  float: left;
  background-image: url("header.jpg");
  width: 100%;
  height: 250px;
  vertical-align: top;
}

.bodytop {
  display: table;
  clear: both;
  background-image: url(images/header.jpg);
  width: 100%;
  vertical-align: top;
  background-color: #444444;
}

.bodybottom {
  display: table;
  width: 100%;
  vertical-align: top;
  background-color: #666666;
}

.buttonbox {
  display: table;
  width: 150px;
  height: 150px;
  background-color: #888888;
  vertical-align: middle;
  margin: 15px;
}
我明白了，那么我应该在包装的 div 内定义颜色吗？或者你有其他建议吗？ - Robert Wiedeman
@RobertWiedeman 不要在 * 中定义一些东西。尤其是 color，width 等等... - Praveen Kumar Purushothaman
2

看起来你的CSS缺少一个分号，应该是这样的：

* {
    font-family: "verdana";
    color: #FFF;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接