Unterstreichen Sie Blockelemente wie Tags

kann auf zwei Arten erfolgen. Stellen Sie beispielsweise die Linie unter dem Text auf die gesamte Breite des Blocks ein, unabhängig von der Textmenge. Und unterstreichen Sie auch nur den Text. Als nächstes werden wir beide Optionen betrachten.

Linie unter dem Text über die gesamte Breite des Blocks

Um eine Linie unter dem Text zu erstellen, sollten Sie dem Element die Stileigenschaft border-bottom hinzufügen; ihr Wert ist sowohl die Dicke der Linie als auch ihr Stil und ihre Farbe (Beispiel 1).

Beispiel 1. Linie in voller Breite

HTML5 CSS 2.1 IE Cr Op Sa Fx

Beispieltext

Der Abstand zwischen der Linie und dem Text kann angepasst werden, indem die Eigenschaft „padding-bottom“ zum H1-Selektor hinzugefügt wird. Ergebnis dieses Beispiel in Abb. dargestellt. 1.

Text unterstreichen

Um nur den Text zu unterstreichen, müssen Sie die Eigenschaft text-decoration mit dem Wert underline verwenden und ihn erneut zum H1-Selektor hinzufügen (Beispiel 2).

Beispiel 2. Zeilen-zu-Text-Breite

HTML5 CSS 2.1 IE Cr Op Sa Fx

Beispieltext

Die schwarze Überschrift erregt Aufmerksamkeit, obwohl sie schwarz und nicht weiß ist.

Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 2.

Bei Verwendung der Eigenschaft text-decoration ist die Linie fest mit dem Text verbunden, sodass ihre Position und ihr Stil nicht bestimmt werden können.

Ich präsentiere kurze Fragmente von CSS-Code (Snippet), um die Hervorhebung von Linkankern mit sanfter Unterstreichung beim Hover zu implementieren.
Warum Sie den Text vom allgemeinen Durcheinander trennen müssen, ist ein Kinderspiel. Es gibt eine große Vielfalt an Möglichkeiten und Arten der Linkgestaltung, alles ist nur durch die Vorstellungskraft des Meisters begrenzt.
Mit Hilfe der Pseudoklasse:hover und magic können Sie fast jeden Effekt auf standardmäßige, langweilig gestaltete zyanotische Links anwenden.
Die Lösungen, die heute diskutiert werden, sind nichts besonders Erstaunliches oder Ungewöhnliches. Alles ist einfach, ohne besonderen Schnickschnack, nur die farbliche Hervorhebung des Links und die leichte Animation der Unterstreichung.

Ich beschreibe im Detail nur den CSS-Code, da auf der HTML-Seite keine Änderungen oder Ergänzungen erforderlich sind.

CSS

Verwenden Sie zunächst die Eigenschaft „line-height“: Legen Sie den Zeilenabstand abhängig von der Grundlinie der Schriftart fest. Ihr Wert kann unterschiedlich sein. Machen wir den Link zu einem Block-Zeilen-Link, eingebettet in die Textstruktur, indem wir seine Anzeigeeigenschaft auf inline-block setzen. Lassen Sie uns die Standardunterstreichung loswerden, indem wir text-decoration:none; schreiben. und füllen Sie den Link mit der Farbe, die wir brauchen.

a (Zeilenhöhe: 1; Anzeige: Inline-Block; Farbe: #ffeb3b; Textdekoration: keine; Cursor: Zeiger;)

a ( Zeilenhöhe: 1; Anzeige: Inline-Block; Farbe: #ffeb3b; Textdekoration: keine; Cursor: Zeiger; )

Dann verwenden wir das Pseudoelement:after, damit wir hinzufügen können zusätzliches Element, in unserem Fall handelt es sich um eine Linie, und wir definieren einen einfachen Übergangseffekt in der Übergangseigenschaft: . Die Linienstärke wird zunächst auf Null eingestellt. Breite: 0 %; , die Höhe wird in bestimmt 2px. Die Linienfarbe kann beliebig sein; im Beispiel bin ich nicht zu kreativ geworden und habe die Linktextfarben entsprechend eingestellt.

a: after ( display: block; content: "" ; height: 2px; width: 0%; background- color: #ffeb3b; Transition: width . 3s easy- in- out; )

a:after ( Anzeige: Block; Inhalt: „“; Höhe: 2 Pixel; Breite: 0 %; Hintergrundfarbe: #ffeb3b; Übergang: Breite .3s Ease-In-Out; )

Jetzt müssen wir nur noch ein wenig Bewegung in unseren Link bringen. Dazu verwenden wir einige Pseudoklassen: hover und: focus . Der erste bestimmt den Stil des Links, wenn man mit der Maus darüber fährt, der zweite funktioniert, wenn der Cursor „fest“ auf dem Link platziert wird. Hier ändern wir den Breitenwert und setzen ihn auf 100 %.
Wenn der Benutzer nun mit der Maus über einen Link fährt oder sich darauf konzentriert, wird dem Benutzer eine stilisierte Unterstreichung angezeigt, reibungslos und mit einer kaum wahrnehmbaren Verzögerung, deren Zeit wir zuvor in der Übergangseigenschaft umsichtig definiert haben: .

a: schweben: danach, a: Fokus: danach (Breite: 100 %;)

a:hover:after, a:focus:after ( width: 100 %; )

Als Ergebnis erhalten wir folgendes Bild:

Der gesamte zusammengesetzte Code sieht folgendermaßen aus:

a (Anzeige: Inline-Block; Farbe: #ffeb3b; Zeilenhöhe: 1; Textdekoration: keine; Cursor: Zeiger;) a: nach (Hintergrundfarbe: #ffeb3b; Anzeige: Block; Inhalt: ""; Höhe: 2px; Breite: 0%; -webkit-transition: Breite .3s Easy-In-Out; -moz--transition: Breite .3s Easy-In-Out; Übergang: Breite .3s Easy-In-Out; ) a: schweben: danach, a: Fokus: danach (Breite: 100 %;)

a ( display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none;cursor: pointer; ) a:after (background-color: #ffeb3b; display: block; content: ""; Höhe: 2px; Breite: 0%; -webkit-transition: Breite .3s Easy-In-Out; -moz--transition: Breite .3s Easy-In-Out; Übergang: Breite .3s Easy-In-Out; ) a:hover:after, a:focus:after ( width: 100 %; )

Dies ist natürlich nur eine der einfachsten und bescheidensten Möglichkeiten der Linkgestaltung. Experimentieren Sie mehr, fügen Sie Farben hinzu, verwenden Sie Animationen, bewegen Sie sich nach rechts oder links, erstellen Sie zum Beispiel umgekehrte Links usw. usw. Die Hauptsache ist, es nicht zu übertreiben, alles sollte mit Gefühl, Sinn und Anordnung geschehen .

Aktualisierung und Ergänzungen vom 22.10.2017

In den Kommentaren gab es Fragen dazu, wie man eine Unterstreichung von der Mitte des Linktextes mit einer sanften Dehnung zu den Seiten macht. Wenn es eine Nachfrage gibt, dann wird es ein Angebot geben))).

Alles ist ganz einfach, Sie müssen nur ein paar neue Eigenschaften hinzufügen, das heißt, für das Hauptelement a definieren Sie die Positionierung als relative Position: relative; und für das Pseudoelement a:after absolute position:absolute; mit Abstand vom linken Rand des übergeordneten Elements left:50%; und außerdem die Eigenschaft transform verwenden, um die horizontale Verschiebung des Elements um den angegebenen Wert transform:translateX(-50%) zu bestimmen.

Als Ausgabe erhalten wir dieses Ergebnis:

Alles zusammengebaut CSS-Code, um den Link von der Mitte aus glatt zu unterstreichen, sollte etwa so aussehen:

a (Anzeige: Inline-Block; Farbe: #ffeb3b; Zeilenhöhe: 1; Textdekoration: keine; Cursor: Zeiger; Position: relativ;) a: nach (Hintergrundfarbe: #ffeb3b; Anzeige: Block; Inhalt : "" ; Höhe: 2px; Breite: 0%; links: 50%; Position: absolut; -webkit-transition: Breite .3s Easy-In-Out; -moz--Transition: Breite .3s Easy-In-Out ; Übergang: Breite .3s, einfaches Ein-Aus; -webkit-transform: TranslateX(-50 %); -moz-transform: TranslateX(-50 %); Transform: TranslateX(-50 %); a: Hover: nach, a: Fokus: nach (Breite: 100 %;)

a ( display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none;cursor: pointer; position:relative; ) a:after (background-color: #ffeb3b; display: block; content : ""; Höhe: 2px; Breite: 0%; links: 50%; Position: absolut; -webkit-transition: Breite .3s Easy-In-Out; -moz--Transition: Breite .3s Easy-In-Out ; Übergang: Breite .3s easy-in-out; -webkit-transform:translateX(-50 %); -moz-transform:translateX(-50 %); transform:translateX(-50 %); ) a:hover: danach, a:focus:after ( width: 100%; )

Heute, wenn man das alles bedenkt moderne Browser Sie unterstützen zunehmend Eigenschaften aus dem CSS3-Clip, es gibt praktisch keine Einschränkungen für die originelle Gestaltung von Links, im Großen und Ganzen hängt alles von Ihrer Fantasie ab und es gibt im Internet viele vorgefertigte Lösungen, wenn Sie möchten, Sie können, wie sie sagen, für jeden Geschmack und jede Farbe etwas finden.

Bei allem Respekt, Andrew

Es gibt eine Menge verschiedene Wege unterstreichendes Design. Sie erinnern sich vielleicht an Marcin Vicharis Artikel „Link-Unterstreichungen erstellen“ auf Medium. Die Medium-Entwickler versuchen nichts Verrücktes zu machen, sie wollen nur eine schöne Linie unter dem Text erstellen.

Dies ist der einfachste Unterstrich, aber er hat die richtige Größe und überlappt nicht die Anfangsbuchstaben der Buchstaben. Und es ist definitiv besser als der Standard-Unterstrich in den meisten Browsern. Medium musste sich Herausforderungen stellen, um seinen Stil im Web durchzusetzen. Zwei Jahre später fällt es uns immer noch schwer, schöne Unterstreichungen zu schaffen.

Ziele

Was ist falsch an der üblichen text-decoration: underline ? Wenn wir reden über Im Idealfall sollte der Unterstrich Folgendes bewirken:

• Position unterhalb der Grundlinie;
• Hinweistexte überspringen;
• Ändern Sie die Farbe, Dicke und den Stil der Linie.
• mit mehrzeiligem Text arbeiten;
• Arbeiten Sie auf jedem Hintergrund.

Ich glaube, dass dies alles vernünftige Anforderungen sind, aber meines Wissens gibt es keine intuitive Möglichkeit, dies mithilfe von CSS zu erreichen.

Ansätze

Was ist das also? verschiedene Wege, mit dem wir Unterstreichungen im Web implementieren können?

Hier sind diejenigen, die ich in Betracht ziehe:

• Textdekoration;
• border-bottom ;
• Box Schatten ;
• Hintergrundbild ;
• SVG-Filter;
• Underline.js(canvas);
• Textdekoration-* .

Schauen wir uns diese Methoden einzeln an und sprechen über die Vor- und Nachteile jeder einzelnen Methode.

Textdekoration

Textdekoration ist die offensichtlichste Art, Text zu unterstreichen. Sie wenden eine Eigenschaft an und das reicht. Bei kleinen Schriftgrößen sieht das vielleicht gut aus, aber wenn man die Schriftgröße vergrößert, sieht die Unterstreichung unangenehm aus.

Das größte Problem bei der Textdekoration ist die mangelnde Individualisierung. Sie sind auf die Farbe und Schriftgröße des Textes beschränkt und es gibt keine browserübergreifende Möglichkeit, dies zu ändern. Wir werden später ausführlicher darüber sprechen.

• Einfach zu verwenden;
• unterhalb der Grundlinie positioniert;
• überspringt Callouts standardmäßig in Safari und iOS;
• betont mehrzeiligen Text;
• Funktioniert auf jedem Hintergrund.

• überspringt in allen anderen Browsern keine Fußzeilen;
• erlaubt Ihnen nicht, die Farbe, Dicke oder den Stil der Linie zu ändern.

Rand unten

border-bottom schafft eine gute Balance zwischen Einfachheit und Anpassbarkeit. Dieser Ansatz nutzt die gute alte CSS-Rahmeneigenschaft, sodass Sie Farbe, Dicke und Stil problemlos ändern können.

So sieht border-bottom für Inline-Elemente aus.

Der Hauptnachteil ist der Abstand der Unterstreichung zum Text; sie liegt vollständig unterhalb der Legenden. Sie können dies beheben, indem Sie die Elemente auf „inline-block“ setzen und „line-height“ verringern. Dann verlieren Sie jedoch die Möglichkeit, Text umzubrechen. Gut für einzelne Linien, aber nirgendwo anders geeignet.

Darüber hinaus können wir text-shadow verwenden, um den Teil der Linie neben den Inline-Elementen zu verdecken und dies zu simulieren, indem wir dieselbe Farbe wie der Hintergrund verwenden. Das heißt, diese Technik funktioniert nur auf einem einfachen einfarbigen Hintergrund ohne Farbverläufe, Muster oder Bilder.

Derzeit nutzen wir bereits bis zu vier Objekte für die Gestaltung einer Linie. Es ist viel mehr Arbeit als nur das Hinzufügen von Textdekorationen.

• kann Beschriftungen mit text-shadow überspringen;
• kann Farbe, Stärke und Linienstil ändern;
• ermöglicht die Verwendung von Übergängen und Animationen in Farbe und Stärke;
• funktioniert mit mehrzeiligem Text, sofern kein Inline-Block angewendet wird;
• Funktioniert auf jedem Hintergrund, solange Sie text-shadow nicht verwenden.

• Zu tief positioniert und schwierig zu bewegen;
• viele zusätzliche Eigenschaften werden für verwendet ordnungsgemäße Bedienung;
• Bei Verwendung von Textschatten sieht das Hervorheben von Text hässlich aus.

Box Schatten

box-shadow zeichnet eine Unterlinie mit zwei inneren Schatten: Einer erstellt ein Rechteck und der zweite verbirgt einen Teil davon. Das bedeutet, dass Sie einen einfarbigen Hintergrund benötigen, damit dies funktioniert.

Sie können den gleichen Trick mit text-shadow verwenden, um die Lücken zwischen Unterstreichungen und Beschriftungen zu füllen. Wenn sich die Unterstreichungsfarbe jedoch von der Textfarbe unterscheidet – oder einfach nur dünn genug ist – kollidiert die Linie nicht so stark mit Beschriftungen wie bei text-decoration .

• ermöglicht Ihnen, die Farbe und Stärke der Linie zu ändern;
• Funktioniert mit mehrzeiligem Text.

• erlaubt Ihnen nicht, den Unterstreichungsstil zu ändern;
• Funktioniert auf keinem Hintergrund.

Hintergrundbild

Die Hintergrundbildmethode kommt unseren Wünschen am nächsten und weist die geringsten Nachteile auf. Die Idee besteht darin, linear-gradient und background-position zu verwenden, um ein Bild zu erstellen, das sich unter Textzeilen wiederholt.

Damit dieser Ansatz funktioniert, muss der Text in der Standardanzeige vorliegen: inline; .

Die nächste Option verzichtet auf linear-gradient, für Effekte kann man ein eigenes Hintergrundbild hinzufügen.

• kann unterhalb der Grundlinie positioniert werden;
• kann Callout-Elemente mit text-shadow überspringen;
• funktioniert mit benutzerdefinierten Bildern;
• bricht mehrere Textzeilen um;
• Funktioniert auf jedem Hintergrund, solange Sie text-shadow nicht verwenden.

• Die Bildgröße kann je nach Bildschirmauflösung, Browser und Vergrößerung variieren.

SVG-Filter

Ich habe ziemlich viel mit dieser Methode gespielt. Sie können einen SVG-Linienfilter erstellen, der eine Linie zeichnet und dann den Text erweitert, um den Teil der Linie auszublenden, der transparent sein soll. Sie können dem Filter dann eine ID geben und ihn in CSS referenzieren, etwa filter: url('#svg-underline') .

Der Vorteil dieses Ansatzes besteht darin, dass Transparenz ohne die Verwendung von text-shadow erreicht wird, was bedeutet, dass wir Beschriftungen auf jedem Hintergrund erscheinen lassen, einschließlich Farbverläufen und Hintergrundbilder! Dies funktioniert nur bei einer einzelnen Textzeile. Denken Sie also daran.

So sieht es in Chrome und Firefox aus:

Die Unterstützung in IE, Edge und Safari ist problematisch. Es ist schwierig, die SVG-Filterunterstützung in CSS zu testen. Sie können die @supports-Direktive mit filter verwenden, aber dadurch wird nur die Funktionalität des Filterlinks überprüft, nicht die Funktionalität des Filters selbst. Meine Versuche endeten mit einer mühsamen Ermittlung der Fähigkeiten des Browsers; dies ist ein spürbarer Nachteil der Methode.

• kann unterhalb der Grundlinie positioniert werden;
• kann Erweiterungselemente überspringen;
• ermöglicht Änderungen der Linienfarbe, -stärke und -stil;
• Funktioniert auf jedem Hintergrund.

• funktioniert nicht mit mehrzeiligem Text;
• funktioniert nicht in IE, Edge und Safari, aber Sie können Textdekoration als Fallback verwenden, es sieht in Safari anständig aus.

Underline.js (Canvas)

Underline.js ist faszinierend. Ich finde es beeindruckend, was Wenting Zhang mit ihren JavaScript-Kenntnissen und ihrer Liebe zum Detail geleistet hat. Wenn Sie die Tech-Demo von Underline.js noch nicht gesehen haben, hören Sie auf zu lesen und nehmen Sie sich eine Minute Zeit. Es gibt auch einen neunminütigen Vortrag von ihr zur Funktionsweise, aber ich fasse mich kurz: Die Unterstreichung wird mithilfe von Elementen gezeichnet . Das ist ein neuer Ansatz, der überraschend gut funktioniert.

Trotz des eingängigen Namens ist Underline.js nur eine technische Demo. Das bedeutet, dass Sie es nicht einfach in Ihr Projekt einbinden können, ohne den Code zu ändern.

Ich dachte, ich würde dies als Proof of Concept erwähnen hat das Potenzial, großartige interaktive Unterstreichungen zu erstellen, aber Sie müssen Ihr eigenes JavaScript schreiben, damit es funktioniert.

Neue Textdekorationseigenschaften

Sie erinnern sich, dass ich versprochen habe, mehr über Textdekoration zu sprechen. Die Zeit ist gekommen.

Diese Eigenschaft funktioniert alleine hervorragend, aber Sie können einige experimentelle Eigenschaften hinzufügen, um sie zu optimieren Aussehen unterstreichen.

• Textdekorationsfarbe
• Textdekoration-Überspringen
• Textdekorationsstil

Aber seien Sie nicht zu aufgeregt ... Der Browser-Support ist wie immer verfügbar. So geht es.

Textdekorationsfarbe

Mit der Eigenschaft text-decoration-color können Sie die Unterstreichungsfarbe getrennt von der Textfarbe ändern. Die Unterstützung für diese Eigenschaft ist besser als Sie vielleicht erwarten – sie funktioniert in Firefox und mit dem Präfix in Safari. Hier ist der Haken: Wenn Sie Beschriftungen haben, platziert Safari eine Unterstreichung über dem Text.

Textdekoration-Überspringen

Die Eigenschaft text-decoration-skip ermöglicht das Überspringen von Beschriftungen in unterstrichenem Text.

Diese Eigenschaft ist nicht standardmäßig und funktioniert derzeit nur in Safari mit dem Präfix -webkit-. Safari aktiviert diese Eigenschaft standardmäßig, sodass Beschriftungen nicht immer durchgestrichen werden.

Wenn Sie Normalize verwenden, beachten Sie dies bitte letzte Version Deaktivieren Sie diese Eigenschaft, um ein konsistentes Browserverhalten zu gewährleisten. Und wenn Sie möchten, dass sich die Unterstreichung nicht auf Beschriftungen auswirkt, müssen Sie sie manuell aktivieren.

Textdekorationsstil

Die Eigenschaft „text-decoration-style“ bietet dieselben Stiloptionen wie die Eigenschaft „border-style“, zusätzlich jedoch einen Wellenstil.

Hier ist eine Liste der verfügbaren Werte:

• gestrichelt
• gepunktet
• doppelt
• solide

Derzeit funktioniert die Eigenschaft „text-decoration-style“ nur in Firefox. Hier ist ein Screenshot davon:

Was fehlt

Die Eigenschaftsreihe text-decoration-* ist viel intuitiver zu verwenden als andere CSS-Eigenschaften für die Unterstreichungsdekoration. Aber wenn wir genauer hinsehen, gibt es nicht genügend Möglichkeiten, die Dicke oder Position der Linie so einzustellen, dass sie unseren Bedürfnissen entspricht.

Nach ein wenig Recherche, ich habe noch ein paar weitere Eigenschaften gefunden:

• Textunterstreichungsbreite
• Textunterstreichungsposition

Dabei handelt es sich offenbar um frühe CSS-Entwürfe, die jedoch aufgrund mangelnden Interesses nie in Browsern implementiert wurden.

Schlussfolgerungen

Wie unterstreicht man also am besten?

Für kleinen Text empfehle ich die Verwendung von text-decoration mit optimistischem Hinzufügen von text-decoration-skip . In den meisten Browsern sieht es etwas kitschig aus, aber Unterstreichungen waren in Browsern schon immer so und die Leute werden es einfach nicht bemerken. Außerdem besteht immer die Möglichkeit, dass die Unterstreichung eines Tages gut aussieht, wenn Sie Geduld haben, ohne dass Sie etwas ändern müssen, wie es bei Browsern der Fall ist.

Für den Fließtext ist es sinnvoll, ein Hintergrundbild zu verwenden. Dieser Ansatz funktioniert, sieht gut aus und es gibt Sass-Mixins dafür. Grundsätzlich können Sie text-shadow überspringen, wenn die Unterstreichung dünn ist oder eine andere Farbe als der Text hat.

Für einzelne Textzeilen verwenden Sie border-bottom zusammen mit allen zusätzlichen Eigenschaften.

Und wenn Beschriftungen vor einem Farbverlauf oder Bildhintergrund hervorstechen sollen, versuchen Sie es mit SVG-Filtern. Oder vermeiden Sie einfach die Verwendung von Unterstrichen.

Wenn die Browserunterstützung in Zukunft besser wird, wird die einzige Antwort der Eigenschaftssatz text-decoration-* sein.

Ich empfehle außerdem, einen Blick auf den Artikel „CSS Underlines Suck“ von Benjamin Woodroffe zu werfen, der die gleichen Probleme anspricht.

Mit dem Aufkommen von CSS3, HTML5 und der Einbeziehung von Web-Schriftarten sind Websites im Entwicklungsprozess dynamischer, schöner und technologisch fortschrittlicher geworden. Viele Leute mögen es nicht, Links zu unterstreichen, und bis zu einem gewissen Grad verstehe ich sie. Ziemlich dicke Linien helfen dem Benutzer jedoch dabei, sich auf der Website zurechtzufinden und einen Link vom normalen Text zu unterscheiden. Aber sie erschweren das Lesen etwas.

Mit dem Aufkommen des Formats RGBA(Rot Grün Blau Alpha) in CSS3 berücksichtigt werden dieses Problem gelöst. Durch die Verwendung eines fortschrittlichen Farbdarstellungsformats haben Webdesigner jetzt die Möglichkeit, Alpha-Transparenz für Farben zu verwenden.

Im Gegensatz zur Opazitätseigenschaft kann sie auf die Schriftart, die Ränder und den Hintergrund eines Blocks angewendet werden, ohne die Transparenz des Blockinhalts zu verändern. RGBA-Farbwerte sind eine Erweiterung der RGB-Farbwerte mit nur einem Alphakanal – der die Deckkraft eines Objekts bestimmt.

Syntax

Farbe: rgba(0,96,160); / * blaue Farbe */ Farbe: rgba (0,96,160,0,2 ); / *blaue Farbe mit Transparenz */

Der RGBA-Farbwert ist gegeben durch: RGBA (Rot, Grün, Blau, Alpha).
Der Alpha-Parameter stellt eine Zahl dar ab 0,0(völlig transparent) bis 1,0(völlig undurchsichtig).

Kompatibilität

RGBA-Farbwerte werden von folgenden Browsern unterstützt: IE9+, Firefox 3+, Chrome, Safari und Opera 10+.

Wer hat umgesetzt

Lebedev Studio, Artyom Gorbunov Design Bureau, Ilya Birman nutzten diese Gelegenheit sofort... Auf ihren Websites blieb die Unterstreichung von Links bestehen, sie wurde jedoch eleganter.

Patpitchaya/

MIT mit HTML Der Text kann angegeben werden schönes Design. Das Unterstreichungselement ist sehr beliebt, aber nicht bei allen regelmäßige Benutzer wissen, wie man es benutzt.

Unterstreichen in HTML

Wie unterstreicht man also? In HTML wird es mit einem Tag formatiert . Es wird in allen HTML- und XHTML-Spezifikationen verwendet, jedoch nur unter der Übergangsbedingung , da die Browserversion des Markups angegeben werden muss. In diesem Fall besteht das Dokument die Validierung erfolgreich. Das Element muss als Standard, also ganz oben auf der Seite, angegeben werden.

Etikett Abschluss, es muss begleitet werden. Sie müssen es wie folgt zum Markup hinzufügen:

1. Schlagzeile Nummer eins

Unser Text in einem Absatz

Das Wort „Text“ wird unterstrichen.

Sie können auch einen einzelnen Buchstaben in einem Wort hervorheben:

1. Überschrift Nummer zwei

Unsere Zu st im Absatz

Traditionell in HTML-Markup Unterstrichene Links werden angezeigt, wenn Sie mit der Maus oder sogar im stationären Zustand darüber fahren. Dies geschieht standardmäßig in allen Browsern. Setzen Sie daher das Etikett ein auf fortlaufender Basis wird dringend davon abgeraten.

Darüber hinaus wird der Code durch Schreibstile in CSS kompakter, was bedeutet, dass die Seite schneller geladen wird.

Am häufigsten wenden Layoutdesigner Stile an, indem sie Rahmen oder Unterstreichungen zum HTML hinzufügen oder sie in einer separaten CSS-Datei platzieren.

Unterstreichen in CSS

Das Verzieren von Texten mit CSS ist eine bequeme und praktische Möglichkeit. Am meisten einfache Wege solche Hervorhebung: mit text-decoration oder border-bottom.

Um Text mit Textdekoration hervorzuheben, muss die Eigenschaft der gewünschten Klasse hinzugefügt werden.

• Wunschklasse (
• Textdekoration: unterstreichen;

Es ist zu beachten, dass Klassennamen immer in lateinischer Sprache geschrieben werden.

Die Dekoration kann auch mit Bordüren erfolgen. Mit Rahmen können Sie sowohl eine regelmäßige (durchgezogene) Unterstreichung als auch eine gepunktete Unterstreichung erstellen. Dazu werden die notwendigen Randeigenschaften angegeben, die Textdekorationseigenschaft wird jedoch entfernt.

• Wunschklasse (
• Textdekoration: keine;

Der Text wird dann mit der folgenden Eigenschaft dekoriert:

• .gewünschte-Klasse (
• Textdekoration: keine;
• Rand unten: 2 Pixel gestrichelt schwarz;

So kommt die Verzierung zustande: Um sie massiv zu machen, wird statt „gestrichelt“ „solid“ verwendet. Wer Text gerne mit punktierter Unterstreichung verzieren möchte, kann es mit „gepunktet“ versuchen.

Rahmenstile werden in einer Zeile geschrieben. Zusätzlich zum Unterstreichungstyp müssen Sie auch die Stärke und Farbe der Unterstreichung angeben. Sie können mit der Größe experimentieren, aber normalerweise reichen 1 oder 2 Pixel aus. Die Textfarbe kann auch auf die Unterstreichungsfarbe eingestellt werden:

• Wunschklasse (
• Textdekoration: keine;
• Rand unten: 1 Pixel blau gepunktet;
• Farbe blau;

Dadurch wird blauer Text mit blauer Dekoration erstellt. Um einen Stil an HTML anzuhängen, müssen Sie dem Markup eine Klasse hinzufügen.

• Dritter Titel

Unser Text in einem Absatz

Das sind die Grundlagen der Unterstreichung in HTML.