CSS-Einstellung a

王林
Freigeben: 2023-05-27 12:54:37
Original
1386 Leute haben es durchsucht

CSS ist eine Stilsprache für Webdesign. Sie kann verschiedene Details wie Layout, Schriftarten, Farben usw. von Webseiten steuern. Unter diesen ist das Festlegen des Hyperlink-Stils auch eine der am häufigsten verwendeten Techniken in CSS.

Hyperlinks sind häufig verwendete interaktive Elemente auf Webseiten. Sie können auf andere Webseiten, Anker auf derselben Seite, E-Mail-Adressen, Telefonnummern usw. verweisen. In CSS kann ein Tag nicht nur das Erscheinungsbild des Links festlegen, sondern auch den Stil des Links in verschiedenen Zuständen steuern.

Im Folgenden stellen wir vor, wie Sie mit CSS den Stil eines Tags festlegen, einschließlich der Farbe des Links, der Unterstreichung, des Hintergrunds usw.

1. Ändern Sie die Farbe des Hyperlink-Textes

Hyperlink-Text ist standardmäßig blau, aber wir können CSS verwenden, um ihn in andere Farben wie Rot, Grün usw. zu ändern .

Um die Textfarbe eines Links zu ändern, können Sie den folgenden Code verwenden:

a {
    color: #ff0000;
}
Nach dem Login kopieren

In diesem Beispiel setzen wir die Farbe des Linktextes auf Rot. Alternativ können Farben über Farbnamen (z. B. Rot, Grün, Blau usw.) oder RGB-Werte definiert werden.

2. Entfernen Sie die Unterstreichung des Hyperlinks.

Standardmäßig befindet sich unter dem Hyperlinktext eine Unterstreichung. Wenn Sie diese Unterstreichung nicht möchten, können Sie den folgenden CSS-Code verwenden:

a {
    text-decoration: none;
}
Nach dem Login kopieren

Dieser Code setzt den Unterstreichungsstil des Links auf „Keine“, was bedeutet, dass keine Unterstreichung erfolgt. Wenn Sie alternativ nur die Unterstreichung des Links beim Hover entfernen möchten, können Sie den folgenden Code verwenden:

a:hover {
    text-decoration: none;
}
Nach dem Login kopieren

Dieser Code setzt den Unterstreichungsstil des Links beim Hover auf „Keine“.

3. Legen Sie die Farbe des Links fest, wenn Sie mit der Maus darüber fahren

Einige Websites hoffen, dass sich die Farbe des Hyperlinks ändert, wenn Sie mit der Maus darüber fahren, damit Benutzer den Link besser identifizieren können. Um diesen Effekt zu erzielen, können Sie den folgenden CSS-Code verwenden:

a:hover {
    color: #ff0000;
}
Nach dem Login kopieren

Dieser Code setzt die Textfarbe des Links beim Mouseover auf Rot. Ebenso können Farben über Farbnamen oder RGB-Werte definiert werden.

4. Legen Sie die Hintergrundfarbe des Links fest.

Manchmal möchten wir dem Link eine Hintergrundfarbe hinzufügen, um ihn auffälliger zu machen. Um diesen Effekt zu erzielen, können Sie den folgenden CSS-Code verwenden:

a {
    background-color: #ff0000;
    color: #ffffff;
    padding: 5px;
}
Nach dem Login kopieren

Dieser Code setzt die Hintergrundfarbe des Links auf Rot, die Textfarbe auf Weiß und fügt 5 Pixel Abstand um den Link hinzu. Das Füllattribut in diesem Codeblock kann auch entsprechend den tatsächlichen Anforderungen festgelegt werden.

5. Legen Sie den Stil des Links fest, nachdem darauf geklickt wurde.

Einige Websites möchten einen anderen Stil anzeigen, nachdem auf den Link geklickt wurde, um anzuzeigen, dass der Link besucht wurde. Um diesen Effekt zu erzielen, können Sie den folgenden CSS-Code verwenden:

a:visited {
    color: #999999;
    text-decoration: line-through;
}
Nach dem Login kopieren

Dieser Code setzt die Textfarbe des Links nach dem Klicken auf Grau und fügt einen durchgestrichenen Stil hinzu (text-decoration: line-through). ). Es ist zu beachten, dass dieser Code erst wirksam wird, nachdem der Link tatsächlich angeklickt wurde.

Oben finden Sie einige Tipps und Beispiele für die Verwendung von CSS zum Festlegen eines Tags. Durch diese Codes können wir den Stil von Hyperlinks anpassen, um die Webseite schöner und benutzerfreundlicher zu gestalten. Wenn Sie eine Website entwerfen, nutzen Sie unbedingt CSS, um den Stil Ihrer Links zu steuern.

Das obige ist der detaillierte Inhalt vonCSS-Einstellung a. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage