Anzeigen von Text als Beschriftung eines Fotos in CSS

Webmaster können Text auf Webseiten anzeigen und mit dem CSS - Cascading Style Sheet - Code formatieren, um verschiedene Textarten zu formatieren. Um Text als Beschriftung für ein Foto anzuzeigen, erstellen Sie eine CSS-Code-Klasse für den Beschriftungstext und kennzeichnen Sie dann jede Beschriftung mit dem Klassenbezeichner, um den Text automatisch im Beschriftungsstil zu formatieren.

1

Starten Sie Ihr gewöhnliches Webdesign-Programm, Ihre HTML-Editor-Anwendung oder das Microsoft Notepad-Textwerkzeug. Öffnen Sie die Webseite, die die Beschriftung enthält, die Sie formatieren möchten.

2

Scrollen Sie zum Kopfzeilenabschnitt oben auf der Seite. Der Header-Abschnitt beginnt mit dem Tag "" und endet mit dem Tag "".

3.

Geben Sie das folgende Code-Snippet ein oder fügen Sie es unmittelbar vor dem Tag "" ein:

4

Markieren und bearbeiten Sie jedes Attribut zwischen den geschweiften Klammern, um Ihren Beschriftungstext zu gestalten und zu formatieren. Ändern Sie beispielsweise das Element "Schriftgröße" in Ihre bevorzugte Textgröße für die Beschriftung. Bearbeiten Sie die "Schriftfamilie" in Ihr bevorzugtes Schriftbild. Möglicherweise möchten Sie eine Schriftart auswählen, die sich entweder vom Rest des Textes auf der Webseite abhebt oder mit der in anderen Teilen der Seite verwendeten Schriftart übereinstimmt. Ändern Sie die Farbe von „# 000000“ - standardmäßiger schwarzer Text - in Ihren bevorzugten Farbcode. Ändern Sie in "font-weight" das Attribut von "normal" in "fett", wenn Sie die Untertitel fett formatieren möchten.

5

Blättern Sie zu den Positionen der einzelnen Fototitel, auf die Sie den Stil im Hauptteil der Webseite anwenden möchten, zwischen den Tags "" und "".

6

Einfügen oder "" unmittelbar vor dem Beschriftungstext eingeben. Fügen Sie "" nach dem Beschriftungstext ein. Der Code sollte so aussehen:

Beispieltext für Beschriftungen, der den Inhalt des Bildes erläutert.

7.

Speichern Sie die Webseite, und laden Sie sie wie üblich über das Bedienfeld des Content-Management-Systems Ihres Hosts oder mit einer File Transfer Protocol-Anwendung auf den Host-Server Ihrer Website hoch.

Tipps

  • Verwenden Sie ein Online-Farbauswahlwerkzeug, um in Schritt 4 den korrekten Hexadezimal-Farbcode für Ihre bevorzugte Schriftfarbe für die Beschriftungsschrift zu finden.
  • Wiederholen Sie diesen Vorgang für jede Webseite, für die Sie den CSS-Beschriftungstextstil anwenden möchten.

Beliebte Beiträge