2016-08-15 6 views
1

Ich habe ein Problem mit meinem HTML-Code, wo ich weißen Text über meinem schwarzen Hintergrund haben möchte. Aber ich weiß nicht, wie ich das machen würde.Making mein Text weiß mit einem schwarzen CSS-Hintergrund

Hier ist mein 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> 

Und mein CSS:

body { 
    background-color: #101010 
} 

h1 { 
    color: #ffffff 
} 

footer { 
    color: #ffffff 
} 

Also im Grunde möchte ich meine Überschrift und Fußzeile auf der Webseite erscheinen. Aber da der Text selbst schwarz ist, erscheint er nicht über einem schwarzen Hintergrund. Wie mache ich meine Kopf- und Fußzeile heller?

Ich schätze alle Rückmeldungen, die ich bekommen kann.

+0

gerade scheint gut zu funktionieren, so nur sicherstellen, dass die CSS-Datei (*** home.css ** ist im selben Ordner wie die HTML oder wenn nicht, dann beheben Sie den Pfad dazu *) –

+0

Farbe hinzufügen: #fff zu Körper wie Körper { background-color: # 101010; Farbe: #fff; } – link2pk

Antwort

3

Wie @ link2pk vorgeschlagen, fügt das Hinzufügen color: #ffffff; zu body in Ihrem CSS Text standardmäßig weiß.

Ich habe auch die gleiche Farbänderung auf Navigationslinks mit nav a hinzugefügt, weil Blau ist schwer zu lesen auf schwarzem Hintergrund, aber das ist wirklich alles an Ihnen.

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>

Verwandte Themen