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

8 Gründe, warum Sie die Xfce-Desktopumgebung für Linux verwenden sollten

Aus verschiedenen Gründen (einschließlich Neugier...

NULL und leere Zeichenfolge in MySQL

Ich bin vor kurzem mit MySQL in Berührung gekomme...

MySQL Series 7 MySQL-Speicher-Engine

1. MyISAM-Speicher-Engine Mangel: Keine Unterstüt...

Beispielmethode zum Anzeigen von IP in Linux

Die Kenntnis der IP-Adresse eines Geräts ist wich...

Bootstrap+Jquery zum Erreichen eines Kalendereffekts

In diesem Artikel wird der spezifische Code von B...

MySQL-Methode zum Generieren von Zufallszahlen, Zeichenfolgen, Daten, Bestätigungscodes und UUIDs

Inhaltsverzeichnis Zufallszahlen generieren Gener...

Installationsschritte für das grafische MySQL-Verwaltungstool Navicat

Inhaltsverzeichnis Vorwort 1. Stellen Sie das Ins...

Mac OS10.14 perfekt unter der virtuellen Maschine Win10 VM installieren (grafisches Tutorial)

Ich habe mir kürzlich die Pressekonferenz von App...

Echart Bar-Doppelsäulendiagrammstil, umfassendste und detaillierteste Erklärung

Inhaltsverzeichnis Vorwort Installation und Konfi...

Vergleich von CSS-Schatteneffekten: Schlagschatten und Box-Schatten

Drop-Shadow und Box-Shadow sind beide CSS-Eigensc...

Einführung in die Verwendung des HTML-Basistags target=_parent

Der <base>-Tag gibt die Standardadresse oder...

Tutorial-Diagramm zum Erstellen eines Hadoop-Hochverfügbarkeitsclusters basierend auf ZooKeeper

Inhaltsverzeichnis 1. Einführung in Hochverfügbar...

Chrome 4.0 unterstützt GreaseMonkey-Skripte

GreaseMokey (die Chinesen nennen es Grease Monkey...

VMware12 installiert die Desktopversion von Ubuntu19.04 (Installations-Tutorial)

1. Versuchsbeschreibung Installieren Sie in der v...

Detaillierte Erklärung der MySQL 8.0.18-Befehle

Öffnen Sie den gerade entpackten Ordner C:\web\my...