Admin: Textersetzung - „“ durch „“

2025-02-07T19:04:32Z

Textersetzung - „<syntaxhighlight lang="css">“ durch „<syntaxhighlight lang="css" copy>“

← Nächstältere Version		Version vom 7. Februar 2025, 22:04 Uhr
Zeile 29:		Zeile 29:

	=== CSS ===		=== CSS ===
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css" copy>
	p {		p {
	font-size: 16px;		font-size: 16px;
Zeile 65:		Zeile 65:

	== Beispiel mit Variablen ==		== Beispiel mit Variablen ==
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css" copy>
	:root {		:root {
	--primary-color: #3498db;		--primary-color: #3498db;

Admin: Textersetzung - „“ durch „“

2025-02-07T19:03:55Z

Textersetzung - „<syntaxhighlight lang="html">“ durch „<syntaxhighlight lang="html" copy>“

← Nächstältere Version		Version vom 7. Februar 2025, 22:03 Uhr
Zeile 19:		Zeile 19:
	== Beispiel für die Verwendung ==		== Beispiel für die Verwendung ==
	=== HTML ===		=== HTML ===
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html" copy>
	<body>		<body>
	<p class="example1">Dieser Text ist rot.</p>		<p class="example1">Dieser Text ist rot.</p>

Philip am 23. Januar 2025 um 12:35 Uhr

2025-01-23T12:35:20Z

Neue Seite

{{Programmierung
|name = CSS: color
|bild = Css.png
|portal = [[Portal:CSS|CSS-Portal]] • [[Portal:Webentwickler|Portal für Webentwickler]]
}}
'''Die Eigenschaft color''' in CSS legt die Textfarbe eines Elements fest. Sie wird verwendet, um Texte zu gestalten, und unterstützt sowohl einfache Farbnamen als auch komplexere Formate wie RGB, HEX, HSL und andere. Es handelt sich um eine der grundlegendsten und am häufigsten verwendeten Eigenschaften in der Webentwicklung.

== Farbformate ==
Die Eigenschaft <code>color</code> unterstützt verschiedene Möglichkeiten zur Definition von Farben:

# '''Farbnamen''': Einfache Namen wie <code>red</code>, <code>blue</code>, <code>green</code>.
# '''HEX-Farbcode''': Hexadezimale Schreibweise, z. B. <code>#ff0000</code> (Rot).
# '''RGB''': Angabe im Format <code>rgb(255, 0, 0)</code>.
# '''RGBA''': Ähnlich wie RGB, jedoch mit Transparenz, z. B. <code>rgba(255, 0, 0, 0.5)</code>.
# '''HSL''': Definition der Farbe durch Farbton, Sättigung und Helligkeit, z. B. <code>hsl(0, 100%, 50%)</code>.
# '''HSLA''': HSL mit Transparenz, z. B. <code>hsla(0, 100%, 50%, 0.5)</code>.
# '''CSS-Variablen''': Farben können mit Variablen definiert werden, z. B. <code>var(--main-color)</code>.

== Beispiel für die Verwendung ==
=== HTML ===
<syntaxhighlight lang="html">
<body>
Dieser Text ist rot.
Dieser Text ist blau.
Dieser Text ist grün.
Dieser Text ist orange mit Transparenz.
</body>
</syntaxhighlight>

=== CSS ===
<syntaxhighlight lang="css">
p {
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.5;
}

.example1 {
color: red; /* Farbnamen */
}

.example2 {
color: #0000ff; /* HEX-Farbcode */
}

.example3 {
color: rgb(0, 255, 0); /* RGB */
}

.example4 {
color: rgba(255, 165, 0, 0.8); /* RGBA */
}
</syntaxhighlight>

== Unterstützung durch Browser ==
Die Eigenschaft <code>color</code> wird von allen modernen Browsern, einschließlich mobiler Versionen, unterstützt. Sie gehört zu den grundlegenden CSS-Eigenschaften und ist sogar in den ältesten Browser-Versionen verfügbar.

== Hinweise ==
* Die Textfarbe eines Elements kann von einem übergeordneten Element vererbt werden, wenn sie nicht explizit festgelegt wird.
* Für komplexere Farbeffekte (z. B. Farbverläufe) verwenden Sie die Eigenschaft <code>background</code> oder <code>background-image</code>.

== Nützliche Tipps ==
* Verwenden Sie semantische Farbvariablen wie <code>--main-color</code>, um das Farbschema Ihrer Website einfacher verwalten zu können.
* Überprüfen Sie den Kontrast zwischen Text und Hintergrund, um eine gute Lesbarkeit zu gewährleisten (z. B. mit dem [https://webaim.org/resources/contrastchecker/ WebAIM Contrast Checker]).

== Beispiel mit Variablen ==
<syntaxhighlight lang="css">
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}

h1 {
color: var(--primary-color);
}

p {
color: var(--secondary-color);
}
</syntaxhighlight>
In diesem Beispiel werden CSS-Variablen zur Definition der Hauptfarben verwendet:

* <code>:root</code> ist ein Pseudoklasse, die das Wurzelelement des Dokuments darstellt (normalerweise <code><html></code>). Variablen, die in <code>:root</code> definiert werden, sind auf der gesamten Website verfügbar.
* <code>--primary-color</code> und <code>--secondary-color</code> sind benutzerdefinierte Variablen, die Farbwerte enthalten. Sie können für bestimmte Bereiche der Website überschrieben werden, falls nötig.
* In den Regeln für <code>h1</code> und <code>p</code> wird die Funktion <code>var()</code> verwendet, um die Werte der Variablen auf die <code>color</code>-Eigenschaft anzuwenden.

Dies ist eine praktische Methode, um die Farbpalette Ihrer Website zu organisieren. Beispielsweise können Sie den Hauptfarbton des Designs einfach ändern, indem Sie den Wert der Variablen an einer zentralen Stelle bearbeiten. Die Änderungen werden automatisch auf alle Elemente angewendet, die die Variable verwenden.

Variablen sind besonders nützlich für die Erstellung von Designs mit Themen (z. B. helle/dunkle Themen), da sie es einfach machen, Farbwerte basierend auf Benutzerpräferenzen zu ändern.

== Fazit ==
Die Eigenschaft <code>color</code> ist ein unverzichtbarer Bestandteil von CSS und ermöglicht eine effiziente Steuerung der Textfarben auf Webseiten. Sie unterstützt verschiedene Formate, was sie für jedes Projekt vielseitig einsetzbar macht.

== Weitere Artikel zu CSS ==
{{Enzyklopädie CSS/Navigation}}
{{Vorlage:Navigationsleiste/CSS}}
[[wj-en:Encyclopedia CSS: color]]
[[wj-ru:Энциклопедия CSS: color]]
[[wj-es:Enciclopedia CSS: color]]
[[wj-it:Enciclopedia CSS: color]]
[[wj-fr:Encyclopédie CSS: color]]
[[Kategorie:CSS]]

Enzyklopädie CSS: color - Versionsgeschichte

Admin: Textersetzung - „“ durch „“

Admin: Textersetzung - „“ durch „“

Philip am 23. Januar 2025 um 12:35 Uhr