使我的文本白色与黑色的CSS背景

我有一个问题，我的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
}

基本上，我想让我的标题和页脚出现在网页上。但是由于文本本身是黑色的，所以它不会出现在黑色的背景上。如何使标题和页脚更亮?

感谢大家的反馈。

就像@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>

相关内容

最新更新

热门标签：