Das Ändern der Linkfarbe kann eine einfache und effektive Möglichkeit sein, Ihrer Website einen einzigartigen Stil zu verleihen. Ob Sie helle Akzente hinzufügen oder Links im Hintergrund ausblenden möchten, das Anpassen von Farbschemata kann dabei helfen. In diesem Artikel erfahren Sie, wie Sie die Farbe eines Links auf einer HTML-Seite leicht ändern können, selbst wenn Sie gerade erst mit der Webentwicklung beginnen.
CSS-Attribute stellen verschiedene Optionen bereit, um das Erscheinungsbild von Elementen auf einer Webseite anzupassen. Eines der häufigsten Attribute ist color, die für die Farbe des Textes verantwortlich ist. In HTML wird der Link durch das Element "a" dargestellt. Sie können die Farbe des Links ändern, indem Sie das style-Attribut verwenden und den entsprechenden Wert für die Farbe festlegen.
Um beispielsweise die Farbe des Links in Blau zu ändern, können Sie den folgenden Code verwenden:
Dies ist nur eine von vielen Möglichkeiten, die Farbe eines Links zu ändern. In diesem Artikel werden wir uns weitere Methoden ansehen, mit denen Sie einen einzigartigen Stil erstellen und die Aufmerksamkeit der Nutzer auf Ihre Website lenken können.
Link Farbe ändern: Schritt für Schritt für Anfänger
Das Ändern der Farbe eines Links auf einer Webseite kann eine einfache Möglichkeit sein, Ihrer Website oder Ihrem Blog ein einzigartiges und ansprechendes Design zu verleihen. Dieses Handbuch enthält einen detaillierten Schritt-für-Schritt-Prozess, den Anfänger leicht erlernen können.
Schritt 1: Öffnen Sie Ihre HTML-Datei in einem beliebigen Texteditor wie Notepad++ oder Sublime Text. Suchen Sie nach dem Tag, das den Link definiert, den Sie stylen möchten.
Schritt 2: Fügen Sie innerhalb des Tags ein style-Attribut mit dem Wert "color: your_color;" hinzu, wobei your_color die Farbe ist, die Sie für Ihre Referenz verwenden möchten. Sie können beispielsweise voreingestellte Farbnamen wie "red" oder "blue" verwenden oder eine bestimmte Farbe im Hexadezimalformat angeben, z. B. "#FF0000" für Rot.
Wenn Sie beispielsweise die Farbe des Links in Rot ändern möchten, sieht Ihr Code folgendermaßen aus:
Schritt 3: Speichern Sie die Änderungen in Ihrer HTML-Datei und öffnen Sie sie in einem beliebigen Internetbrowser. Jetzt sollten Sie sehen, dass sich die Farbe Ihres Links geändert hat.
Denken Sie daran, dass das Ändern der Linkfarbe nicht nur auf Text beschränkt ist. Sie können auch die Hintergrundfarbe, die Linkfarben beim Schweben und andere Stile Ihrer Links mit CSS ändern.
Auswahl der richtigen Farbe als Referenz
1. Berücksichtigen Sie den Kontrast zum Hintergrund.
Die Farbe des Links sollte sich von der Hintergrundfarbe unterscheiden, damit Benutzer ihn leicht erkennen können. Zum Beispiel:
Wenn die Hintergrundfarbe der Seite dunkel ist, wählen Sie eine helle Farbe für den Link aus, z. B. Gelb oder Orange.
Wenn die Hintergrundfarbe der Seite hell ist, wählen Sie eine dunkle Farbe für den Link aus, z. B. Blau oder Schwarz.
2. Berücksichtigen Sie das Farbschema der Website.
Die Farbe des Links sollte mit dem allgemeinen Farbschema Ihrer Website übereinstimmen. Wählen Sie eine Farbe aus, die zu den Hintergrundfarben, Schriftarten und anderen Designelementen auf Ihrer Website passt.
3. Verwenden Sie Standardfarben für Referenzen.
Es ist üblich, bestimmte Standardfarben für Links in Webdokumenten zu verwenden:
- Die blaue Farbe des Links ist für noch nicht besuchte Links.
- Lila ist die Farbe des Links für bereits besuchte Links.
Dies hilft Benutzern zu verstehen, welche Seiten sie bereits besucht haben und welche Links sie noch nicht geöffnet haben.
4. Testen Sie die Farben.
Bevor Sie die Farbe endgültig als Referenz auswählen, probieren Sie verschiedene Optionen aus und testen Sie sie auf verschiedenen Geräten und Bildschirmauflösungen. Stellen Sie sicher, dass die Linkfarbe auf allen Plattformen lesbar und ansprechend bleibt.
Denken Sie daran, dass die Linkfarbe ein wichtiges Gestaltungselement für Ihre Webseite ist, das die Benutzererfahrung und das Benutzerverhalten beeinflussen kann. Wählen Sie sorgfältig die passende Farbe aus, um den Komfort und die ästhetische Attraktivität Ihrer Website zu gewährleisten.
Ändern der Linkfarbe mit CSS
Um die Farbe eines Links auf einer Webseite mit CSS zu ändern, müssen Sie die Eigenschaft verwenden color. Mit dieser Eigenschaft können Sie die Textfarbe des Elements festlegen.
Um die Farbe des Links zu ändern, wählen Sie zuerst den entsprechenden Selektor aus. Normalerweise haben Referenzen einen Standardselektor a. Wenn Sie beispielsweise die Farbe der Links in Rot ändern möchten, können Sie den folgenden CSS-Code verwenden:
In diesem Beispiel wird die color-Eigenschaft auf Rot für alle Links auf der Seite festgelegt. Sie können verschiedene Farben verwenden, indem Sie sie im englischen Farbnamenformat oder im hexadezimalen Farbcodeformat angeben.
Wenn Sie beispielsweise die Farbe eines Links in Blau ändern möchten, können Sie den folgenden Code verwenden:
Wenn Sie die Farbe des Links nur an bestimmten Stellen auf der Seite ändern möchten, können Sie Klassen oder IDs verwenden. Fügen Sie dazu dem Referenzselektor eine entsprechende Klasse oder ID hinzu.
Wenn Sie beispielsweise einen Link innerhalb eines Elements mit der Klasse "highlight" haben und die Farbe dieses Links ändern möchten, können Sie den folgenden Code verwenden:
.highlight a
In diesem Beispiel wird der Verweis innerhalb eines Elements mit der Klasse "highlight" grün angezeigt.
Wenn Sie die Farbe eines Links mit CSS ändern, können Sie ein einzigartiges Design für Ihre Webseiten erstellen und die Bedeutung von Links für Benutzer hervorheben. ExperimentBelgiaEestiLatvijaBosna- i HercegovinaHrvatskaLietuva'+ ['/get-yrdomain?accountid=' ]);">Erstellen Sie Ihr einzigartiges Farbschema und betonen Sie den Stil Ihrer Website!
Anwenden einer Farbe für die Verknüpfung
Um die Farbe des Links zu ändern, müssen Sie CSS verwenden. Es gibt mehrere Möglichkeiten, dies zu tun:
-
Verwenden der Pseudoklasse :visited : Mit dieser Pseudoklasse können Sie einen Stil auf besuchte Referenzen anwenden. Sie können beispielsweise die Farbe für besuchte Links wie folgt festlegen:
a:visited
a[href^="http"]
Example.custom-link
Die Wahl der Farbe für den Link kann vom allgemeinen Farbschema Ihrer Website und Ihrer Präferenz abhängen. Seien Sie vorsichtig bei der Auswahl der Farben, um keinen zu großen Kontrast zu erzeugen, der für das Auge unangenehm sein kann.
Mit diesen Beispielen können Sie beginnen, die Farbe des Links auf Ihrer Webseite zu ändern. Beachten Sie, dass das Anpassen der Farbe des Links wichtig ist, um die Benutzerfreundlichkeit zu gewährleisten und die Benutzererfahrung zu verbessern.
Wie ändere ich die Linkfarbe beim Hover
Das Ändern der Linkfarbe, wenn Sie den Mauszeiger bewegen, kann hilfreich sein, um Interaktivität und ein klares Feedback für die Benutzer zu erzeugen. Sie können dazu eine Pseudoklasse verwenden :hover in CSS. Im Folgenden sind die Schritte aufgeführt, die Ihnen helfen, die Farbe des Links beim Hover zu ändern:
1. Öffnen Sie die CSS-Datei: Wenn Sie noch keine CSS-Datei haben, erstellen Sie sie und speichern Sie sie mit der Erweiterung. "css". Wenn die CSS-Datei bereits vorhanden ist, öffnen Sie sie in einem Texteditor.
2. Suchen Sie den Referenzselektor: Suchen Sie in der CSS-Datei nach dem Selektor für Referenzen. Normalerweise sieht der Selektor für Referenzen wie folgt aus a oder a:link.
3. Fügen Sie eine Pseudoklasse hinzu :hover: Fügen Sie nach dem Verweisselektor eine Pseudoklasse hinzu :hover. Zum Beispiel, wenn der Referenzselektor wie folgt aussieht a, fügen Sie danach hinzu :hover, damit es funktioniert a:hover.
4. Geben Sie eine neue Farbe an: In geschweiften Klammern nach der Pseudoklasse :hover Legen Sie eine neue Farbe für den Link fest. Wenn Sie beispielsweise die Farbe des Links in Rot ändern möchten, fügen Sie Folgendes hinzu color: red; in geschweiften Klammern.
5. Speichern Sie die CSS-Datei: Nachdem Sie die CSS-Datei geändert haben, speichern Sie sie.
Wenn Sie nun den Mauszeiger über einen Link auf Ihrer Webseite bewegen, sollte sich die Farbe des Links entsprechend der von Ihnen angegebenen neuen Farbe ändern.
Hinweis: Damit der Link nach dem Schweben zur ursprünglichen Farbe zurückkehrt, müssen Sie auch einen Stil für den Status :visited festlegen, z.B, a:visited.
Ändern der Farbe bereits besuchter Links
Die Verwendung von Farben zur Kennzeichnung bereits besuchter Links kann Benutzern helfen, ihre Aktivitäten auf einer Webseite zu verfolgen. Dies kann besonders nützlich sein, wenn viele Links auf der Website vorhanden sind und der Benutzer wissen möchte, welche bereits besucht wurden.
Um die Farbe bereits besuchter Links zu ändern, müssen Sie dem Selektor a:visited Stile hinzufügen. Wenn Sie beispielsweise möchten, dass die besuchten Links rot sind:
a:visited color: red;
>
Nachdem Sie diese Stile angewendet haben, werden alle Links, die der Benutzer bereits besucht hat, rot angezeigt. Dies macht es einfach, bereits besuchte Links von denen zu unterscheiden, die der Benutzer noch nicht geöffnet hat.
Beachten Sie, dass einige Browser die Möglichkeit zum Ändern von Stilen für besuchte Links aus Sicherheitsgründen einschränken können. Sie können beispielsweise verhindern, dass die Farbe bereits besuchter Links geändert wird, um zu verhindern, dass Benutzer verfolgt werden. In solchen Fällen müssen Sie möglicherweise alternative Methoden verwenden, um die besuchten Links auf Ihrer Website zu verfolgen.
Verwenden von externen Stilen zum Ändern der Referenzfarbe
Um externe Stile zu verwenden, müssen Sie eine separate CSS-Datei erstellen, in der Sie die Designregeln für Links definieren können. Hier ist ein Beispiel für eine solche Datei:
strong em
In diesem Beispiel werden Links in einem Tag eingeschlossen , haben eine blaue Farbe und einen Unterstrich und Links, die in einem Tag eingeschlossen sind Sie haben eine rote Farbe und eine Kursivschrift.
Um eine externe CSS-Datei an ein HTML-Dokument anzuhängen, müssen Sie dem Abschnitt folgenden Code hinzufügen head Dokumentes:
In diesem Beispiel befindet sich eine Datei mit externen Stilen im selben Ordner wie das HTML-Dokument und dessen Name - styles.css.
Nachdem Sie externe Stile eingefügt haben, haben alle Links, die in den entsprechenden Tags eingeschlossen sind, ein bestimmtes Erscheinungsbild gemäß den in der CSS-Datei angegebenen Parametern.
Mit externen Stilen können Sie die Farbe eines Links leicht ändern, ohne den HTML-Code neu schreiben zu müssen. Es genügt, Änderungen an der CSS-Datei vorzunehmen, und alle Links, auf die die entsprechenden Stile angewendet werden, aktualisieren automatisch ihr Erscheinungsbild.
Daher ist die Verwendung externer Stile eine effektive Möglichkeit, die Farbe eines Links in einem HTML-Dokument zu ändern, was eine flexible und komfortable Verwaltung des Designs ermöglicht.
Zusätzliche Styling-Elemente für Referenzen
Die Möglichkeiten, Links zu stylen, sind nicht nur auf Farbänderungen beschränkt. Es gibt eine Reihe anderer Elemente, mit denen Sie auch das Erscheinungsbild des Links ändern können. Im Folgenden sind die beliebtesten aufgeführt:
- text-decoration - Ermöglicht das Hinzufügen oder Entfernen von dekorativem Zeichnen eines Links, z. B. Unterstreichen, Linie über dem Link und Durchstreichen.
- font-weight - ermöglicht die Einstellung der Schriftsättigung im Link, was für die Hervorhebung besonders wichtiger Informationen nützlich sein kann.
- border-radius - ermöglicht das Hinzufügen von abgerundeten Kanten des Links, wodurch ein weicheres und angenehmeres Aussehen entsteht.
- padding - ermöglicht das Festlegen von Einrückungen um den Linktext, was nützlich sein kann, um ein geräumiges und besser lesbares Aussehen zu erzeugen.
Zusätzlich zu diesen Elementen gibt es noch viele andere CSS-Eigenschaften, die Sie auf Links anwenden können, um ihren Stil einzigartiger zu gestalten. Beachten Sie, dass Sie bei der Auswahl von Stilen für Links den Kontrast berücksichtigen müssen, damit der Text für alle Benutzer lesbar und zugänglich bleibt.
Verwenden eines Tags zum Ändern der Farbe eines Teils eines Links
Um die Farbe eines Teils eines Links zu ändern, müssen Sie spezielle Attribute dieses Tags verwenden. Einer von ihnen - style. Mit diesem Attribut können wir eine Farbe für einen bestimmten Teil des Links angeben. Hier ist ein Beispiel für die Verwendung eines Tags mit einem Attribut style:
In diesem Beispiel haben wir die Farbe festgelegt blauen für den Linktext "Hier ist der Link". Wenn der Benutzer auf einen Link navigiert, kann sich seine Farbe entsprechend den angegebenen Stilen ändern.
Alternativ können Sie auch andere Stileigenschaften verwenden, z. B. background-color, font-size, font-family und andere, um das Aussehen des Links zu ändern.
Hier ist ein Beispielcode, der die Hintergrundfarbe, Schriftart und Größe für eine Referenz ändert:
