2.15.8 Hintergrund- und Schriftfarbe

• 1 Allgemein
  • a) Bezeichnungen
  • b) Prinzip
  • c) Grundlagen Websites und Workshops
• 2 Hintergrundfarbe (background-color)
  • a) CSS-Tags
  • b) Beispiel 1: Hintergrund eines Abschnittes formatiert im HTML-Dokument
  • c) Beispiel 2: Hintergrund eines Abschnittes formatiert mit CSS
  • d) Grundlagen und Workshops
• 3 Schriftfarbe (color)
  • a) Attribute
  • b) Beispiel 1
  • c) Beispiel 2
  • d) Grundlagen und Workshops
• 4 Hintergrundfarbe und Schriftfarbe vom ganzen Dokument
  • a) Beispiel 1: Formatiert im HTML-Dokument mit HTML-Tags
  • b) Beispiel 2: Angabe im Stylesheet
• 5 Hintergrundfarbe und Schriftfarbe in einer Tabelle
  • a) Beispiel 1
  • b) Beispiel 2
• 6 Mit <span> formatierter Text mit Farbe hervorheben
  • a) Beispie 1: Angabe im Text (inline)
  • b) Beispiel 2: Formatierung mit Stylesheet

-

⇧ 1 Allgemein

• a) Bezeichnungen
• b) Prinzip
• c) Grundlagen Websites und Workshops

-

↑ a) Bezeichnungen

• background = Hintergrund

• background-color = Hintergrundfarbe

• color = Farbe = verwendet für die Schriftfarbe

-

↑ b) Prinzip

• bgcolor = sollte nicht mehr verwendet werden;

• Der W3C-Validator verlangte früher, dass wenn im Stylesheet für ein Element eine Hintergrundfarbe angegeben wurde, immer auch die Schriftfarbe angegeben werden musste.

• Als Hintergrundfarbe kann dann auch "transparent" gewählt werden, damit die vordefinierte Hintergrundfarbe nicht überschrieben wird.

-

↑ c) Grundlagen Websites und Workshops

• SELFHTML de Farben für Hintergrund, Text und Verweise
  SELFHTML de Beispiel

-

⇧ 2 Hintergrundfarbe (background-color)

• a) CSS-Tags
• b) Beispiel 1: Hintergrund eines Abschnittes formatiert im HTML-Dokument
• c) Beispiel 2: Hintergrund eines Abschnittes formatiert mit CSS
• d) Grundlagen und Workshops

-

↑ a) CSS-Tags

• body {background-color: yellow}
  

• h1 {background-color: #00ff00}
  

• h2 {background-color: transparent}
  

• p {background-color: rgb(250,0,255)}
  

-

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

1) Angabe im Quelltext:

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

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

2) Anzeige im HTML-Dokument:

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

• W3Schools: en Beispiel 1: Set the background color
  W3Schools en Beispiel 2
  W3Schools en Beispiel 3

• Web Design Group en Background and Color Properties
  Web Design Group en Syntax: background-color

• CSS 4 You de Hintergrundfarbe (background-color)
  CSS 4 You de Beispiel

-

⇧ 3 Schriftfarbe (color)

• a) Attribute
• b) Beispiel 1
• c) Beispiel 2
• d) Grundlagen und Workshops

-

↑ a) Attribute

• <p style="color:blue">

-

↑ b) Beispiel 1

1) Angabe im Quelltext:

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

2) Anzeiger im HTML-Dokument:

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

-

↑ c) Beispiel 2

1) Angabe im Quelltext:

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

2) Anzeiger im HTML-Dokument:

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

-

↑ d) Grundlagen und Workshops

• SELFHTML de Schriftart, Schriftgrösse und Schriftfarbe
  SELFHTML de Beispiel

• W3Schools: en Beispiel: Set the color of the text

• CSS 4 You de Textfarbe
  CSS 4 You de Beispiel

-

⇧ 4 Hintergrundfarbe und Schriftfarbe vom ganzen Dokument

• a) Beispiel 1: Formatiert im HTML-Dokument mit HTML-Tags
• b) Beispiel 2: Angabe im Stylesheet

-

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

Angabe im Quelltext:

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

-

↑ b) Beispiel 2: Angabe im Stylesheet

Angabe im Stylesheet:

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

-

⇧ 5 Hintergrundfarbe und Schriftfarbe in einer Tabelle

• a) Beispiel 1
• b) Beispiel 2

-

↑ a) Beispiel 1

• td bgcolor="#33CCFF" (Zellen-Farbe)
  

• td bgcolor="lime" (Zellen-Farbe)
  

1) Angabe im Quelltext:

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

2) Anzeige im HTML-Dokument:

Text 1a Spalte 1 Text 1b Spalte 1

Text 2a Spalte 2a Text 2b Spalte 2

-

↑ b) Beispiel 2

• SELFHTML de Tabellen - Hintergrundfarben und Hintergrundbilder
  SELFHTML de Beispiel

-

6 Mit <span> formatierter Text mit Farbe hervorheben

• a) Beispie 1: Angabe im Text (inline)
• b) Beispiel 2: Formatierung mit Stylesheet

⇒ Siehe auch "Mit <span> formatieren"

-

↑ a) Beispie 1: Angabe im Text (inline)

1) Angabe im Quelltext:

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

1) Anzeige im HTML-Dokument:

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.

• W3Schools: en Beispiel: Set the background-color of the text

↑