Ressourcen: 16 Graustufen in HTML - Kombinationen mit Farbe gray17

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbe gray17
Detail	:	Hintergrundfarbe gray17	Verlauf nach Weiß		Verlauf nach Schwarz
Farbe	:	gray17	#111111	#111111	#111111	#111111
Farbwert	:	#111111	#333333	#333333	#0e0e0e	#0e0e0e
HTML	:	gray17	#555555	#555555	#0c0c0c	#0c0c0c
CSS	:	gray17	#777777	#777777	#090909	#090909
CSS (Wert)	:	#111111	#999999	#999999	#070707	#070707
CSS (kürzest)	:	#111	#bbbbbb	#bbbbbb	#040404	#040404
CSS (RGB)	:	rgb(17,17,17)	#dddddd	#dddddd	#020202	#020202
CSS (%RGB)	:	rgb(6%,6%,6%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbe gray17

Änderung der Hintergrundfarbe von HTML-Tag a

Einen Verweis erzeugt man mit Tag <a>. Diesen kann man hervorheben und farblich gestalten.

Wir setzen als Beispiel bei <a> die Hintergrundfarbe auf Farbe gray17. Die Textfarbe behalten wir bei. Die Schriftart ändern wir auf monospace:

<style type="text/css"><!--
  a { 
    font-family: monospace; 
    background-color: gray17;
  }
//-->
</style>

Weiteres zum Thema können Sie in Verweise und Protokolle in HTML finden. Zur Beschreibung des HTML-Befehl <a>.

Änderung der Hintergrundfarbe bei Hover bei Tag q

Die Hintergrundfarbe soll sich ändern, wenn man mit der Maus darauf zeigt. Für das Beispiel bereiten wir zunächst Formatierungen von <q> vor.

Wir legen für dieses Beispiel die Hintergrundfarbe von <q> auf Farbe gray17 fest. Zwar ändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf arial und verringern die Schriftgröße auf 84%:

<style type="text/css"><!--
  q { 
    background-color: #554e5a; 
    font-size: 84%; 
    font-family: arial;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Hintergrundfarbe auf Farbe gray17 gesetzt wird.

<style type="text/css"><!--
  q: hover { 
    background-color: gray17;
  }
//-->
</style>

Möglichkeiten vom Tag q sind in der HTML Referenz bei <q> ausführlich beschrieben.