Webseitenbau
Home
Sitemap
 
Web Webseitenbau
Google English français  
↑ 2. 13. 8 Hintergrund- und Schriftfarbe

2.13.8 Hintergrund- und Schriftfarbe

1 Allgemein

a) Bezeichnungen

b) Prinzip

c) Grundlagen und Workshops

2 Hintergrundfarbe (background-color)

a) CSS-Tags

b) Beispiel 1: Hintergrund eines Abschnittes formatiert im HTML-Dokument

Attribut: <p stye="background-color:yellow"> 

<p style="background-color:yellow">
Dieser Hintergrund heisst: <p style="background-color:yellow"></p>

Dieser Hintergrund heisst: <p style="background-color:yellow">

c) Beispiel 2: Hintergrund eines Abschnittes formatiert mit CSS

1) Angabe im Stylesheet (mit class) 

pre.quell {font-family:monospace;background:#FAEBD7;color:#000000;}

2) Angabe im Quelltext (mit class="") 

<pre class="style">
Dies ist ein "pre-Text"
</pre>

3) Dann erscheint im HTML-Dokument 

Dies ist ein "pre-Text"

d) Grundlagen und Workshops

3 Schriftfarbe (color)

a) Attribute

b) Beispiel 1 

<p style="color:blue">
Diese Schrift heisst:<p style="color:blue"></p>

Diese Schrift heisst: p style="color:blue"

c) Beispiel 2 

<p style="font-family:Arial,sans-serif;font-size:20px;color:red">
Diese Schrift heisst: <p style="font-family:Arial,sans-serif;
font-size:20px;color:red"</p>

Diese Schrift heisst: <p style="font-family:Arial,sans-serif;font-size:20px;color:red">

d) Grundlagen und Workshops

4 Hintergrundfarbe und Schriftfarbe vom ganzen Dokument

a) Beispiel 1: Formatiert im HTML-Dokument mit HTML-Tags 

<body style="background:#751000;color:#000;">

b) Beispiel 2: Angabe im Stylesheet 

body {background:#751000;color:#000;}

5 Hintergrundfarbe und Schriftfarbe in einer Tabelle

a) Beispiel 1 

<table cellpadding="10" border="0">
 <tr>
  <td bgcolor="#33CCFF">
   Text 1a Spalte 1 <br>
   Text 1b Spalte 1
  </td>
  <td bgcolor="lime">
   Text 2a Spalte 2a <br>
   Text 2b Spalte 2
  </td>
  </tr>
</table>
Text 1a Spalte 1
Text 1b Spalte 1 		Text 2a Spalte 2a
Text 2b Spalte 2

b) Beispiel 2

6 Mit <span> formatierter Text mit Farbe hervorheben

⇒ Siehe auch "Mit <span> formatieren"

a) Beispie 1: Angabe im Text (inline) 

<p>Dies ist ein Text bei dem <span style="background-color:yellow">
"Hervorgehobener Text" </span>hervorgehoben wird.</p>

Dies ist ein Text bei dem "Hervorgehobener Text" hervorgehoben wird.

b) Beispiel 2: Formatierung mit Stylesheet

1) Angabe im Stylesheet mit class-Formatierung 

span.highlight {background-color:yellow;}

2) Angabe im Quelltext 

<p>Dies ist ein Text bei dem<span class="highlight">
"Hervorgehobener Text"</span>hervorgehoben wird.</p>

3) Dann erscheint im HTML-Dokument

Dies ist ein Text bei dem "Hervorgehobener Text" hervorgehoben wird.

↑