黒色のCSS背景でテキストを白くする

黒い背景の上に白いテキストを配置するHTMLコードに問題があります。しかし、私はそれをどうやってやるか分からない。ここで黒色のCSS背景でテキストを白くする

は私の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 
}

だから、基本的に、私は私の見出しとフッタは、Webページに表示したいです。しかし、テキスト自体は黒であるため、黒の背景には表示されません。見出しとフッターをどのように明るくするには？

私が得ることができるすべてのフィードバックに感謝します。

出典

2016-08-15 Stephen.F

これだけのCSSファイル（*** home.css **は、HTMLと同じフォルダにまたはパスを修正した後でない場合であることを確認して、うまく動作するようですそれに*） –

色を加える：#fff体のように体{ 背景色：＃101010;色：#fff; } – link2pk

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

出典

2016-08-15 00:54:56 j3ff

黒色のCSS背景でテキストを白くする

答えて

関連する問題