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

Die JS-Methode hasOwnProperty() erkennt, ob eine Eigenschaft die eigene Eigenschaft eines Objekts ist.

Die JavaScript-Methode hasOwnProperty() ist die P...

Verwenden Sie CSS, um ein dreispaltiges adaptives Layout zu erreichen (feste Breite auf beiden Seiten, adaptiv in der Mitte)

Das sogenannte dreispaltige adaptive Layout bedeu...

jQuery implementiert die Funktion zum Ziehen von Bildern mit der Maus

In diesem Beispiel wird jQuery verwendet, um eine...

So ermitteln Sie die Ausführungszeit eines Befehls oder Prozesses in Linux

Auf Unix-ähnlichen Systemen wissen Sie möglicherw...

Zusammenfassung der Methoden zum Einfügen von Videos in HTML-Seiten

Wenn Sie nun das Video-Tag auf einer Seite verwen...

CSS3-Animation – Erläuterung der Funktion „Steps“

Als ich mir in letzter Zeit einige CSS3-Animation...

Eine kurze Analyse der CSS-Selektorgruppierung

Selektorgruppierung Angenommen, Sie möchten, dass...

Zusammenfassung der in MySQL häufig verwendeten Typkonvertierungsfunktionen (empfohlen)

1. Concat-Funktion. Häufig verwendete Verbindungs...

Drei Möglichkeiten zum Parsen von QR-Codes mit Javascript

Inhaltsverzeichnis 1. Verwenden Sie JavaScript, u...

Verwendung des Zielattributs des HTML-Tags a

1: Wenn Sie das Tag <a> zum Verlinken auf ei...

Verwenden Sie das Docker-Buildkit, um ein Docker-Image zu erstellen, das auf dem Raspberry Pi verwendet werden kann

Docker-Installation curl -fsSL https://get.docker...

Detaillierte Erläuterung der Destrukturierungszuweisung von JS ES6-Variablen

Inhaltsverzeichnis 1. Was ist Dekonstruktion? 2. ...

Sehr praktische Methode zur Implementierung des Tomcat-Startskripts

Vorwort Es gibt ein Szenario, in dem das Unterneh...

Einführung in MySQL-Rollenfunktionen

Inhaltsverzeichnis Vorwort: 1. Einführung in die ...

MySQL sollte niemals Update-Anweisungen wie diese schreiben

Inhaltsverzeichnis Vorwort Ursache Phänomen warum...