Question

我的HTML代码存在问题，我希望在黑色背景上显示白色文字。但是我不知道我会怎么做。

这是我的HTML：

<!DOCTYPE html> 
<html>
<head>
    <title>Home</title> 
    <link rel="stylesheet" type="text/css" href="home.css">
    <meta charset="UTF-8">  
</head>

<body>
    <main>
        <header> 
        <h1>Site Index</h1> 
        </header>
            <nav>
                <a href="homePage.html">Home</a>
                <a href="blog.html">Blog</a>
                <a href="news.html">News</a>
                <a href="contact.html">Contact Us</a>   
            </nav>
        <section>
            <article>
                <h2>This is the section</h2>
            <p style="color: #50FFFF; font-size: 16px;
                text-shadow:
                 0px 0px 2px #1040FF,
                -2px -2px 2px #1040FF,
                 2px -2px 2px #1040FF,
                -2px 2px 2px #1040FF,
                 2px 2px 2px #1040FF;">
            This is my home page of my test HTML web page.
            Right now i am using a HTML style on this paragraph. It 
            uses a hexidecimal color, font size of 16 px and text shadow. 
            </p>
            </article>
        </section>
    <hr>
<footer>
    <strong>
            Copyright &copy; 2016 Stephen Fawcett, All rights reserved
    </strong>
</footer>
</main> 
</body>

</html>

我的CSS：

body {
    background-color: #101010
} 

h1 {
    color: #ffffff
}

footer {
    color: #ffffff
}

所以基本上，我希望我的页眉和页脚出现在网页上。但由于文本本身是黑色的，因此它不会出现在黑色背景上。如何让我的页眉和页脚更亮？

我很感激所有的反馈。

Answer 1

与建议的@ link2pk一样，在CSS中将color: #ffffff;添加到body会使文字默认为白色。

我还使用nav a在导航链接上添加了相同的颜色修改，因为蓝色很难在黑色背景上阅读，但这完全取决于你。

body {
  background-color: #101010;
  color: #ffffff;
}
h1 {
  color: #ffffff;
}
nav a {
  color: #ffffff;
}
footer {
  color: #ffffff;
}

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
    <header>
      <h1>Site Index</h1> 
    </header>
    <nav>
      <a href="homePage.html">Home</a>
      <a href="blog.html">Blog</a>
      <a href="news.html">News</a>
      <a href="contact.html">Contact Us</a> 
    </nav>
    <section>
      <article>
        <h2>This is the section</h2>
        <p style="color: #50FFFF; font-size: 16px;
                text-shadow:
                 0px 0px 2px #1040FF,
                -2px -2px 2px #1040FF,
                 2px -2px 2px #1040FF,
                -2px 2px 2px #1040FF,
                 2px 2px 2px #1040FF;">
          This is my home page of my test HTML web page. Right now i am using a HTML style on this paragraph. It uses a hexidecimal color, font size of 16 px and text shadow.
        </p>
      </article>
    </section>
    <hr>
    <footer>
      <strong>
            Copyright &copy; 2016 Stephen Fawcett, All rights reserved
    </strong>
    </footer>
  </main>
</body>

</html>

使用黑色CSS背景使我的文字变白

1 个答案: