2016-08-15 92 views
1

我有我的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 
} 

所以基本上,我想我的標題和頁腳顯示在網頁上。但由於文本本身是黑色的,因此它不會出現在黑色背景中。我如何讓標題和頁腳更明亮?

我很欣賞我所能得到的所有反饋。

+0

似乎工作得很好,所以只需確保CSS文件(*** home.css **是在同一文件夾中的HTML或如果沒有則修復路徑給它*) –

+0

添加顏色:#fff到身體像 body { background-color:#101010;顏色:#FFF; } – link2pk

回答

3

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