So legen Sie die Schriftfarbe in HTML fest und erhalten mit PS eine genaue Schriftfarbe in HTML

So legen Sie die Schriftfarbe in HTML fest und erhalten mit PS eine genaue Schriftfarbe in HTML

1. HTML-Schriftfarbeneinstellung

In HTML verwenden wir das Font-Tag, um die Farbe des Schriftinhalts festzulegen.

1.Schriftsyntax:


Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Online-Beispiel für Schriftfarbe</p></title>
</Kopf>
<Text>
<font color="#FF0000">Ich bin rote Schriftart </font>
<Tabellenbreite="300" Rahmen="1">
<tr>
<td><font color="#0000FF">Hallo</font></td>
<td></p></td>
</tr>
</Tabelle>
</body>
</html>

Erstens ist die Schriftart ein Paar regulärer Tags. Fügen Sie den Textinhalt der Schriftart in das Tag ein und legen Sie die Farbe + den entsprechenden Farbwert im Schriftart-Tag fest, um die Schriftfarbe im Schriftart-Tag-Objekt festzulegen.

2. Beispiel für die Schriftfarbe in HTML-Schriftarteneinstellungen

2-1. Vollständiger Code des HTML-Schriftfarbenbeispiels:


Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Online-Demonstration der CSS-Schriftfarbe</p></title>
<Stil>
.</p>{color:#F00}
</Stil>
<!-- HTML-Kommentar: Verwenden Sie das Style-Tag, um die Schriftfarbe festzulegen -->
</Kopf>
<Text>
<div class="</p>">Meine Schriftart ist rot</div>
<div style="color:#00F">Meine Schriftart ist blau</div>
<!-- Verwenden Sie das Style-Attribut im Div-Tag, um die Schriftfarbe festzulegen -->
</body>
</html>

Die obigen Beispiele legen die Farbe der Schrift separat fest und legen die Farbe der Schrift in der Tabelle fest

2-2. Beispiel-Screenshot der Schriftfarbe

Screenshot eines Beispiels für die HTML-Schriftfarbeneinstellung

2-3. Online-Demo: Fallstudien ansehen

Um die Schriftfarbe zu ändern, ändern Sie einfach den Farbwert.

2. HTML p css Schriftfarbeneinstellung

Legen Sie die Schriftfarbe in HTML mithilfe des CSS-Stils fest.

Es gibt zwei Möglichkeiten, mit CSS die Schriftfarbe in HTML festzulegen: CSS innerhalb des Tags und externes CSS.

1. Einführung in die Grundkenntnisse

Wenn Sie externes CSS verwenden, können Sie den CSS-Code separat in eine CSS-Datei einfügen und einen HTML-Link verwenden, um CSS einzuführen (HTML führt CSS ein), oder Sie können das <style>-Tag in HTML verwenden, um CSS zu erstellen. Sie können auch das Style-Attribut im HTML-Tag verwenden, um die CSS-Farbe festzulegen.

2. p+CSS Beispieldemonstration

Hier üben wir zwei Methoden zum Implementieren von HTML-Schriftfarbeinstellungen: Eine besteht darin, CSS im Tag zu verwenden, und die andere darin, das Stil-Tag zum Implementieren von Schriftfarbeinstellungen zu verwenden.

3. Beispiel vollständiger HTML-Quellcode


Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Online-Demonstration zum Einstellen der Schriftfarbe für HTML-Hyperlinks</p></title>
<Stil>
eine {Farbe: #00F}
a:hover{ color:#F00}/* Schriftfarbe wenn die Maus darüber schwebt*/
/* CSS-Kommentar: Der obige Code dient zum Festlegen der Schriftfarbe der Hyperlinks in HTML*/
.div eine {Farbe: #090}
.div a:hover{ Farbe:#090}
/* CSS-Kommentar: Der obige Code dient zum Festlegen der Schriftfarbe des Hyperlinks im .div-Objekt in HTML*/
</Stil>
</Kopf>
<Text>
<p>Ich habe die Farbe des Testinhalts auf Blau eingestellt<a href="http://www.css.com">cSS</a></p>
<div class="div">Ich befinde mich in einem Div-Objekt, die Hyperlink-Farbe ist <a href="#">Ich bin ein Hyperlink-Grün</a></div>
</body>
</html>

Verwenden Sie das <style>-Tag und das Style-Attribut im p-Tag, um die Schriftfarbe in HTML festzulegen.

4. Screenshot des P CSS-Falls

Screenshot eines Beispiels für die CSS-Schriftfarbeneinstellung

5. CSS+P Fall Online-Demonstration: Fall ansehen

3. HTML-Hyperlink Eine Schriftfarbeneinstellung

Es gibt zwei Möglichkeiten, die Farbe von Ankertext-Schriftarten in HTML festzulegen. Eine besteht darin, eine einheitliche Schriftfarbe für alle HTML-Hyperlinks festzulegen, und die andere besteht darin, eine separate Farbe für die Ankertext-Hyperlink-Schriftarten in einem angegebenen Objekt festzulegen.

Dieser Artikel stellt anhand von Beispielen die einheitlichen und individuellen Einstellungen der Schriftfarbe von Hyperlink-Ankertexten in HTML vor.

1. Der vollständige p+css-HTML-Code lautet wie folgt

  1.  <!DOCTYPE html> <html>
  2.  <Kopf> <meta charset="utf-8" />
  3.  <title>Online-Demo zu Schriftfarbeneinstellungen für HTML-Hyperlinks </title> <style>
  4.  a{ color:#00F} a:hover{ color:#F00}/* Schriftfarbe wenn die Maus darüber schwebt */
  5.  /* CSS-Kommentar: Der obige Code dient zum Festlegen der einheitlichen Schriftfarbe der Hyperlinks in HTML */ .p a{ color:#090}
  6.  .p a:hover{ color:#090} /* CSS-Kommentar: Der obige Code dient zum Festlegen der Schriftfarbe des Hyperlinks im .p-Objekt in HTML */
  7.  </style> </head>
  8.  <body> <p>Ich habe die Farbe des Testinhalts auf Blau eingestellt<a href="http://www..com"></a></p>
  9.  <p class="p">Ich befinde mich im p-Objekt, die Hyperlink-Farbe ist <a href="#">Ich bin ein Hyperlink-Grün</a></p> </body>
  10.  </html>

Die blaue Schrift des Hyperlinks stellt die einheitliche Einstellung von HTML dar, während die grüne Schrift die individuell festgelegte Hyperlink-Schriftfarbe ist.

2. Beispiel-Screenshot der Schriftfarbe eines Hyperlinks

Screenshot eines Beispiels für eine CSS-Hyperlink-Schriftart

3. Online-Demo: Fallstudien ansehen

Die oben genannten drei p+CSS-Fälle sind zum Download gepackt:

Jetzt herunterladen (2.928KB)

4. So erhalten Sie die genaue Schriftfarbe, die HTML benötigt

Um genaue Farbwerte zu erhalten, wird im Allgemeinen die Software Photoshop (ps) verwendet. Im Folgenden erfahren Sie, wie Sie mit PS den Schriftfarbwert einer bestimmten Stelle ermitteln und es flexibel anwenden, um durch Abrufen des Schriftwerts den Hintergrund-, Bild- oder Rahmenfarbwert einer bestimmten Stelle zu ermitteln.

Angenommen, wir möchten den spezifischen Farbwert von Blau im obigen Bild "CSS" erhalten.

1. Öffnen Sie dieses Bild in PS

ps öffne dieses Bild

2. Verwenden Sie das Werkzeug "Vordergrundfarbe auswählen" oder "Hintergrundfarbe auswählen" des PS-Tools

Hier klicken wir auf das Werkzeug "Vordergrundfarbe" im roten Feld

3. Die Registerkarte „Vordergrundfarbe auswählen“ wird angezeigt

Nach dem zweiten Schritt wird die Registerkarte „Vordergrundfarbe auswählen“ angezeigt und der Mauszeiger wird zu einem strohhalmähnlichen Symbol „Farbwähler“. Klicken Sie jetzt auf die Stelle, an der Sie den Farbwert erhalten möchten. Wenn das Bild klein ist und es nicht einfach ist, genau zu klicken, können Sie das Bild mit „Strg+++“ kontinuierlich vergrößern.

Den exakten Farbwert "0000FF" ermitteln

4. Stellen Sie den Farbwert ein, der mit dem Farbwert

Farbe: #0000FF

Tipps: Bei der Verwendung von Farbwerten ist es normalerweise besser, die Farbwerte direkt aus PS zu kopieren, um manuelle Eingabefehler zu vermeiden. Vergessen Sie gleichzeitig nicht, vor dem Farbwert das Zeichen „#“ hinzuzufügen.

5. Zusammenfassung der HTML-Schriftfarben

Hier stellen wir drei Schriftfarbeinstellungen vor, darunter HTML-Schriftart, CSS-Textfarbe und CSS-Hyperlink-Schriftfarbe. Wir zeigen auch, wie Sie PS verwenden, um genaue Farbwerte zu erhalten. Die Nutzung der Schrift- und Hintergrundfarbeinstellungen können Sie flexibel erweitern.

<<:  Automatisierte Schnittstellentests mit Postman

>>:  CSS3 realisiert verschiedene grafische Effekte kleiner Pfeile

Artikel empfehlen

TCP-Socket-SYN-Warteschlange und Accept-Warteschlangen-Unterschiedsanalyse

Zunächst müssen wir verstehen, dass ein TCP-Socke...

Detaillierte Analyse von Javascript-Datenproxys und Ereignissen

Inhaltsverzeichnis Datenbroker und Events Überprü...

Häufige JavaScript-Speicherfehler und Lösungen

Inhaltsverzeichnis 1. Zeitüberwachung 2. Ereignis...

10 Fähigkeiten, die Frontend-Entwickler millionenschwer machen

Die Fähigkeiten, die Front-End-Entwickler beherrs...

So generieren Sie ein kostenloses Zertifikat mit OpenSSL

1: Was ist OpenSSL? Welche Funktion hat es? Was i...

Das WeChat-Applet realisiert eine Links-Rechts-Verknüpfung

In diesem Artikel wird der spezifische Code für d...

Lernen Sie, wie Sie mit vscode eine React-Native-Entwicklungsumgebung erstellen

Frage Der Code hat keine Eingabeaufforderung: Vie...

So stellen Sie gelöschte MySQL 8.0.17-Root-Konten und Passwörter unter Windows wieder her

Ich habe vor Kurzem mein SQL-Lernen beendet und M...

So legen Sie schnell den Dateipfad-Alias ​​in React fest

React ist eine JavaScript-Bibliothek zum Erstelle...

Zwei Möglichkeiten, mit CSS eine horizontale Anordnung von ul und li zu erreichen

Da li ein Element auf Blockebene ist und standard...

Vite führt die Implementierung virtueller Dateien ein

Inhaltsverzeichnis Hintergrund Virtuelle Dateien ...

So führen Sie JavaScript in Jupyter Notebook aus

Später habe ich auch hinzugefügt, wie man Jupyter...

Implementierungsbeispiel zum Hochladen mehrerer Anhänge in Vue

Inhaltsverzeichnis Vorwort Kerncode Datei zeigt e...

So erhalten Sie USB-Scannerdaten mit js

In diesem Artikel wird der spezifische Prozess zu...

Tutorial zur Installation von MySQL unter CentOS7

Vor kurzem habe ich vor, eine Cloud-Festplatte au...