CSS und HTML werden kombiniert, um eine Website zu entwerfen, indem der HTML -Inhalt erstellt und ihnen Stil hinzugefügt wird. CSS ermöglicht mehrere Stile in den HTML -Inhalt. Eine davon ist es, den dekorativen Effekt anzuwenden. Dieser Effekt gilt hauptsächlich für das Textelement. Ein einfacher HTML -Text wird auch in Überschriften, Absätzen, Listen und Links verwendet. Die Effekte, die von der CSS angewendet werden, dekorieren Texteigenschaften. In diesem Artikel werden wir darüber sprechen, wie wir die Unterstreichungseigenschaft aus dem Text entfernen können, der in Links verwendet wird. Der Link -Inhalt enthält standardmäßig den Unterstart -Effekt.
HTML -Link:
Ein Link ist der HTML -Inhalt, der verwendet wird, wenn zwei oder mehr Webseiten angehängt werden müssen. Wenn wir die Adresse einer anderen Webseite oder einer Website auf unserer Standardseite angeben möchten, verwenden wir 'Link', um einen Link zwischen den Seiten zu erstellen. Zu diesem Zweck wird HTML -Anker -Tag verwendet.
Die unterstrichene Eigenschaft besteht darin, den Text des Links hervorzuheben oder prominent hervorzuheben. Diese unterstrichene Funktion ist integriert, wenn wir zu den Links kommen.
Beispiel 1: Verwenden von Textdekorationseigenschaften:
Meistens stoßen wir auf die Websites, auf denen die Links, die in die Webseiten eingebettet sind. Wir haben also ein einfaches Beispiel verwendet, in dem wir einen ursprünglichen Link mit einem unterstrichenen Effekt und demselben Link ohne unterstrichene Eigenschaft von CSS verwenden werden. Dies geschieht durch die SMS-Decoration-Eigenschaft.
Textdekoration Eigenschaft:
Eine CSS -Eigenschaft wird auf den HTML -Inhalt zur Dekoration angewendet. Diese Dekorationseffekte umfassen Textfarbe, Untersteuereffekt, Fettdruck, Kursiv, Ausrichtung und viele andere Eigenschaften.
Die grundlegende Syntax dieser Eigenschaft lautet:
1 | Textdekoration: Wert; // Dekorationstyp Wert |
Aber für den Fall, in dem wir alle Effekte entfernen möchten, wird keine Wertschöpfung verwendet.
Wenn wir in den Code kommen, haben wir ein Inline -Styling verwendet, um die gesamten HTML -Inhalte auszurichten, die wir im Körper erwähnen werden, auf die Mitte der Webseite. Der erste HTML -Inhalt ist die Überschrift
1 |
Eine weitere Überschrift wird verwendet, die zeigt, dass der nach dieser Überschrift erwähnte Link der ursprüngliche mit einem unterstrichenen Effekt ist.
Ein Link wird immer über ein Anker -Tag von HTML erstellt. Die 'HREF' -Funktion ist als Referenz. Es ist die Quelle oder die Adresse der Webseite, die beim Drücken des Links geöffnet wird. Da wir die Adresse nicht hinzufügen, lassen Sie die Funktion vorerst leer sein.
1 | Klicken Sie auf mich, Link1 |
Nach diesem Link werden wir die verwenden
Break Tag, um eine leere Zeile zu erstellen. Dann wird eine Überschrift, die zeigt, dass der nächste Link nicht unterstrichen wird. Ein Ankeretikett wird erneut verwendet. Aber diesmal haben wir die CSS -ID verwendet, um die Auswirkungen dieser ID auf den Link angewendet zu haben. Während die gesamten verbleibenden Verbindungsfunktionen die gleichen sind.
1 | Klicken Sie auf mich, Link2 |
Jetzt verwenden wir die Beschreibung des internen Stils im Kopfabschnitt. Nach dem Hinzufügen des Titel -Tags verwenden wir die Style -Anweisung mit der Beschreibung der ID, die wir erstellt haben.
Die IDs und Klassen interner und externer CSS enthalten die Effekte, die nur die HTML -Elemente festlegen, in denen wir die Namen der IDs und Klassen verwendet haben. Zum Beispiel wird die eine Klasse, die die Eigenschaft hat, den Text nicht zu unterstreichen.
1 2 3 4 5 | #eins Textdekoration: Keine; |
Die ID enthält den Textdekorationseffekt mit dem Wert "None". Dieser Wert beseitigt alle Auswirkungen des HTML.
Schließen Sie nun alle Tags und speichern Sie die Datei mit der HTML -Erweiterung, um die Datei im Browser auszuführen.
Bei der Ausführung der Datei sehen Sie, dass zwei Überschriften mit zwei Links auf der Webseite angezeigt werden. Ein Link, der auf Standardfaktoren erstellt wird, ohne den CSS -ID -Effekt anzuwenden, wird unterstrichen. Der zweite ist jedoch ein Link ohne Unterstreich, da wir alle Effekte durch die textdekorationale Eigenschaft entfernt haben.
Beispiel 2: Hover -Eigenschaft:
In diesem Beispiel wird eine Hover -Eigenschaft verwendet, um den Effekt des unterstrichenen Textes zu entfernen. HOVER ist der Ansatz zur Navigation der Maus zu einem Link. Auch hier wird die Eigenschaft zur Textabteilung zum Code hinzugefügt, diesmal jedoch bei Verwendung des Schwebeffekts.
Im Körperabschnitt des Codes wird der Körper wieder auf das Zentrum ausgerichtet, indem das Inline -CSS angewendet wird. Die Überschrift wird verwendet und dann wird ein Anker -Tag angewendet.
1 | < a href = "#"> Hallo, ich bin ein Link |
Jetzt werden wir die interne CSS -Beschreibung des Links verwenden. Dieses Mal haben wir Effekte direkt auf den Link angewendet, anstatt die CSS -ID zu verwenden. Durch die Verwendung des Ankers 'a' wird ein Verbindungseffekt und der Schwebeffekt angewendet. Für das "a" als Link wird die Textdekoration mit dem Unterstartwert angewendet.
1 2 3 4 5 | eine Verbindung Textdekoration: Unterstreichung; |
Während wir für die Hover -Eigenschaft den Wert der Textdekoration als "keine" verwenden werden. Auf diese.
1 2 3 4 5 | A: Hover Textdekoration: Keine; |
Durch die Anwendung der beiden Effekte verfügt die Seite auf der Last über den Unterstreckenverbindungslink. Wenn der Untersteuereffekt jedoch schwebt, wird es jedoch entfernt.
Video Playerhttps: // LinuxHint.com/wp-content/uploads/2022/07/css-no-unterline-open-me.MP400: 0000: 0000: 08use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.Die Ausgabe des Konzepts zur Entfernung des Unterstrahlungseffekts wird im Video angezeigt. Wir haben einen kleinen Abschnitt hinzugefügt, in dem der Link mit unterstreichenden Effekten erstellt wird. Wenn die Maus zum Link navigiert wird oder wenn wir auf dem Link schweben, wird der Unterstarkeffekt der Verbindung entfernt. Auch hier erscheint der Link, wenn die Maus navigiert hat.
Anstelle von Links, die standardmäßig unterstrichen sind .
Abschluss:
Der Artikel „CSS No Underline“ ist eine vollständige Anleitung zur Erläuterung des Ansatz. Wir haben mit einer kurzen Einführung in HTML -Links begonnen. Zwei CSS -Ansätze werden verwendet. Der erste ist die direkte Verwendung von Textdekorationseigenschaften. Die zweite Methodik umfasst die Verwendung einer schwebenden Eigenschaft, die indirekt mit der Dekorationseigenschaft verknüpft ist, um den unterstreichenden Effekt auf den Link anzuzeigen oder anzuzeigen. Beide Konzepte werden anhand der Beispiele erläutert, um die CSS zu zeigen, die für Unterstufe verwendet werden.