Klicken Sie auf ein Ereignis in reinem CSS ohne:target. Hyperlink – was es ist, wie man einen Link erstellt und Code in HTML einfügt (href, Zielleerzeichen und andere Attribute des a-Tags) Standardwert

Mit der Pseudoklasse:target können Sie viele Tutorials ganz einfach im Internet finden. Lassen Sie uns jedoch nicht dem Code eines anderen folgen, sondern versuchen, ihn zu verstehen und zu verstehen, wie er funktioniert? Natürlich können wir nicht ohne Beispiele auskommen.

Was ist:Ziel?

In CSS:target ist dies eine Pseudoklasse, die es Ihnen ermöglicht, einen ganzen „Teil“ Ihres HTML-Dokuments auszuwählen, an dem eine Aktion ausgeführt wird. Dies kann beispielsweise ein Textabschnitt oder eine Überschrift sein.

Pseudoklassen sollten nicht mit Pseudoelementen verwechselt werden, die nur einen bestimmten Teil eines Elements auswählen können, beispielsweise den ersten Buchstaben oder die erste Zeile eines Absatzes.

Pseudoklassen:

• a:link(Farbe:#111)
• a:hover(color:#222)
• div:first-child(color:#333)

• p::first-letter(color:#444)
• p::first-line(color:#555)

Fragment-IDs

Kurz gesagt, das ist eine Sache, an die unsere Pseudoklasse gebunden ist. Dabei handelt es sich um einen Hashtag mit einem Wort oder einer Phrase, der am Ende der Adresse platziert wird. Es sieht aus wie das:

Diese Technik kann für Übergänge innerhalb eines Artikels verwendet werden. Beispielsweise erstellen Sie am Anfang des Artikels ein kleines Inhaltsverzeichnis. Wenn Sie auf ein Element klicken, wird eine Person zu dem Abschnitt weitergeleitet, zu dem der Link führt. Dem Abschnitt muss eine Kennung hinzugefügt werden.

Es funktioniert in reinem HTML, es sind keine Tricks erforderlich. Kleine Identifikatoren.

Behandeln eines Klicks mit:target

Versuchen wir nun sicherzustellen, dass sich der Titelstil ändert und anzeigt, welcher Absatz gerade aktiv ist, wenn Sie in unserem improvisierten Menü auf den gewünschten Abschnitt klicken.

H1 (Schriftart: 30px Arial sans-serif;) h1:target (Schriftgröße: 50px; Textdekoration: Unterstreichung; Farbe: #37aee4;)

Der Code ist sehr einfach: Beim Anklicken ändert der Titel seine Größe und Farbe und wird unterstrichen. Sie können Leben hinzufügen (Ruslan, hallo) und eine Animation zum Ändern der Titelfarbe erstellen:

H1 (Schriftart: 30px Arial Sans-Serif; -webkit-transition: Farbe 0,5 Sekunden Leichtigkeit; -moz-Transition: Farbe 0,5 Sekunden Leichtigkeit; -o-Transition: Farbe 0,5 Sekunden Leichtigkeit; -ms-Transition: Farbe 0,5 Sekunden Leichtigkeit; Übergang: Farbe 0,5s Leichtigkeit; )

Das Hervorheben des aktiven Titels ist eine gute Sache, aber was ist, wenn Sie das Design des darauf folgenden Textes ändern müssen? CSS bietet uns diese Möglichkeit. Es sieht aus wie das:

H1:target + p (Hintergrund: #eaeaea; Polsterung: 10px;)

In diesem Fall bedeutet das Pluszeichen, dass der Stil auf den Absatz nach der Überschrift angewendet werden soll. Auf diese Weise, Wenn sich der aktive Header ändert, ändern wir auch das Abschnittsdesign mit dem Text, der ihm „gehört“.

Browserunterstützung

Die Ziel-Pseudoklasse gehört zur dritten Edition von CSS und wird von allen Browsern außer IE, die älter als Version 9 sind, perfekt unterstützt. Daher sollten Sie sie nicht implementieren, wenn Ihre Zielgruppe diesen Browser verwendet. Es gibt jedoch einen Ausweg – das ist Selectvizr, eine JS-Bibliothek, mit der Sie den IE mit CSS3 zum Laufen bringen können. Wir fügen einfach das Skript hinzu und fertig, es funktioniert.

Das Einzige ist, wenn Sie JQuery oder MooTools nicht verwenden, müssen Sie es verbinden, damit dieses Skript funktioniert. Auf der offiziellen Website gibt es eine Tabelle, die zeigt, welche Bibliotheken was unterstützen. Wenn Sie interessiert sind, lesen Sie es. Das .

Abschluss

Die Verwendung von Pseudoklassen mag kompliziert erscheinen, aber wenn Sie erst einmal verstanden haben, wie sie funktionieren, können Sie erstaunliche Dinge tun, indem Sie nur CSS und nichts anderes verwenden. Pseudoklasse:Ziel- hervorragende Bestätigung dafür. Mit seiner Hilfe können Sie die Interaktion einer Seite mit einem Besucher radikal verändern. Das obige Beispiel ist das einfachste, fügt der Seite jedoch dennoch ein wenig Interaktivität hinzu. Aber das sind nur ein paar Codezeilen.

Übertreiben Sie es nicht mit Schönheit und Browserunterstützung und alles wird gut.

Einen schönen Tag noch

Heute werden wir über die wichtigsten damit verbundenen Funktionen sprechen mit Pseudoklasse :Ziel und wie Sie damit erstaunliche Effekte mit reinem CSS erstellen können, erfahren Sie, wie Sie damit Diashows erstellen CSS-Hilfe und vieles mehr.

Was ist: Ziel?

h1 (Schriftart: fett 30px/1,5 „Helvetica Neue“, Arial, Helvetica, Genf, serifenlos;) h1: Ziel (Schriftgröße: 50px; Textdekoration: unterstrichen; Farbe: #37aee4;)

Fügen wir eine Animation hinzu

Lassen Sie uns unseren Effekt aufpeppen und etwas Animation hinzufügen, etwa einen netten kleinen Übergang, um die Farbe zu ändern. Sehen, wie es funktioniert.

h1 (Schriftart: fett 30px/1,5 „Helvetica Neue“, Arial, Helvetica, Genf, serifenlos; -webkit-transition: Farbe 0,5 s Leichtigkeit; -moz-transition: Farbe 0,5 s Leichtigkeit; -o-transition: Farbe 0,5 s Leichtigkeit; -ms-Transition: Farbe 0,5 Sekunden Leichtigkeit; Übergang: Farbe 0,5 Sekunden Leichtigkeit; ) h1:target ( Schriftgröße: 50 Pixel; Textdekoration: Unterstreichung; Farbe: #37aee4; )

Verwaltung von Nicht-Zielobjekten

Nehmen wir an, wir möchten den Stil des Absatzes ändern, der nach der ausgewählten Überschrift kommt.

Dies geht ganz einfach mit dem folgenden Code. Sehen Sie sich die Demo an.

h1: Ziel + p (Hintergrund: #f7f7f7; Polsterung: 10px;)

Erstellen einer einfachen Diashow mit CSS

Entwickler haben unzählige Anwendungen entwickelt, die Pseudoklassen verwenden : Ziel. Dieser Pseudoselektor kann beim Erstellen von Registerkarten oder sogar Diashows nützlich sein. Mal sehen, wie Letzteres umgesetzt werden kann.

Lassen Sie uns eine ungeordnete Liste erstellen. Jedes Listenelement enthält einen Tag-Anker, der auf die Snippet-ID verweist, und ein Bild mit der entsprechenden ID.

• Eins
• Zwei
• Drei
• Vier
• Fünf

Jetzt fügen wir unsere Stile hinzu:

* ( margin: 0px; padding: 0px; ) #slideshow ( margin: 50px auto; position: relative; width: 400px; ) ul ( list-style: none; ) li ( float: left; overflow: versteckt; margin: 0 20px 0 0; ) li a ( Farbe: #222; Textdekoration: keine; Schriftart: 15px/1 Helvetica, serifenlos; -webkit-transition: Farbe 0,5 Sekunden Leichtigkeit; -moz-Übergang: Farbe 0,5 Sekunden Leichtigkeit; -o-transition: Farbe 0,5 s Leichtigkeit; -ms-transition: Farbe 0,5 s Leichtigkeit; Übergang: Farbe 0,5 s Leichtigkeit; ) li a:hover ( Farbe: #50b0df; ) li img ( Position: absolut; oben: 50px; links: 0; Z-Index: -1; -webkit-transition: Opazität 1s Easy-In-Out; -moz-Transition: Opazität 1s Easy-In-Out; -o-Transition: Opazität 1s Easy-In-Out; -ms-transition: opacity 1s easy-in-out; Transition: opacity 1s easy-in-out; ) li img:target ( z-index: 1; ) li img:not(:target) ( opacity: 0; )

Fügen wir zunächst etwas hinzu float:links alle Elemente auf unserer Liste. Wir haben für die Elemente absolute und relative Positionierung verwendet.

Als nächstes lasst uns installieren Z-Index: -1 für alle Bilder und dann einstellen Z-Index: 1 für Zielbilder. Dadurch ändert sich das Bild, wenn Sie auf ein Listenelement klicken. Um den Übergang glatter zu gestalten, legen wir den Deckkraftwert für die anderen Bilder fest 0 .

Sehen Sie sich die reine CSS-Diashow-Demo an.

Cross-Browser-Kompatibilität

Pseudoklasse : Ziel ist ein CSS-Selektor der dritten Ebene, was bedeutet, dass er in fast jedem Browser unterstützt wird, außer (Sie werden es nie erraten) ... IE. Der gute alte Esel unterstützt CSS3-Selektoren nur in den Versionen 9 und 10.

Wie jedes andere Problem bei der Anzeige von CSS3-Selektoren im IE lässt sich auch dieses mit Selectivizr relativ einfach beheben.

Dank dieses Plugins und etwas Voodoo-Magie werden die erforderlichen CSS3-Selektoren sogar im IE6 unterstützt.

Abschluss

Die Verwendung von Pseudoklassen mag auf den ersten Blick kompliziert erscheinen, aber Sie werden verstehen, wie sie Ihnen die Arbeit erleichtern und Ihre Website interessanter machen können. Pseudo-Selektor

:Ziel- ein gutes Beispiel dafür. Achten Sie nur darauf, dass Sie es mit den Stilen nicht übertreiben.

Ein weiterer interessanter Anwendungsfall :Ziel

Hallo, liebe Leser der Blogseite. Ich habe beschlossen, die heutige Veröffentlichung dem wichtigsten Aspekt des Webmasterings zu widmen, wobei ich versuchen werde, im Detail zu erklären, was ein Hyperlink ist, der untrennbar damit verbunden ist, was wiederum ohne Übertreibung die Grundlage des Internets ist.

Um jedoch Hyperlinks korrekt zu erstellen und in den Code von Webseiten (z. B. Ihrer Website) einzufügen, müssen Sie den entsprechenden Bereich der Hypertext-Auszeichnungssprache () studieren, da diese Elemente mithilfe von HTML gebildet werden ein Tag, das die Möglichkeit bietet, den Link auf die gewünschte Art zu aktualisieren.

Deshalb schauen wir uns heute an, aus welchen Teilen ein Hyperlink besteht, wie die Verwendung des Attributs „target blank“ das Öffnen einer Seite in einem neuen Fenster (Tab) ermöglicht, wie man ein beliebiges Bild in einen Link umwandelt und viele andere wichtige Details. Diese Informationen werden Sie unter anderem beim Erlernen der HTML-Sprache weiterbringen.

Was ist ein Hyperlink und kann er als Link bezeichnet werden?

Zur Beantwortung der im Titel gestellten Frage möchte ich sagen, dass der Begriff „Link“ ein breiteres semantisches Spektrum hat (Link zu Sibirien, Bankwesen zur Identifizierung des Zahlers, Text in einem Buch usw.), einschließlich der dem Konzept von innewohnenden Bedeutung „Hyperlink“, der nur mit Hypertext verbunden ist und die nichtlineare Wahrnehmung von Informationen ermöglicht.

Auf diese Weise, Ein Hyperlink ist ein Sonderfall eines Links Daher ist es durchaus möglich, sie in den heutigen Themen gleichberechtigt zu verwenden. Dies werde ich im heutigen Beitrag zu meinem Vorteil nutzen und beide Begriffe verwenden, um unnötigen Keyword-Spam zu vermeiden.

Es gibt aber auch unsichtbare Dienste, die mit erstellt werden und befindet sich darin, dessen Aufgabe es ist, zahlreiche Signale und Befehle an Browser zu senden, um eine bestimmte Funktion auszuführen.

Mithilfe von Service-Hyperlinks ist es beispielsweise möglich, ein Symbol anzuzeigen. Sie sind nur als Teil des HTML-Codes sichtbar (klicken Sie dazu auf eine beliebige im Browser geöffnete Seite):

Lassen wir die Service-Links vorerst in Ruhe und betrachten wir das allgemeine Muster beim Erstellen von Hyperlinks. Was sie alle gemeinsam haben, ist, dass sie es alle haben erforderliches href-Attribut, dessen Wert die Dokumentadresse () ist. Ein HTML-Link kann entweder zu einer internen Seite der Website oder zu einem externen Dokument führen.

Noch ein wichtiger Hinweis. Die Verwendung des href-Attributs macht Hyperlinks anklickbar, d. h. es ermöglicht Benutzern, durch Anklicken automatisch auf die entsprechende Seite der Website zu gelangen.

So erstellen Sie mit href einen Hyperlink in HTML

Wir wissen also bereits, dass zum Erstellen eines Links das Tag a und das Attribut href erforderlich sind, deren Parameter URLs verschiedener Typen sein können. Weil das A dies, dann zwischen der Öffnung und schließen enthält den Inhalt, der auf der Webseite angezeigt wird.

Das Der Inhalt wird Anker genannt und kann in Form von Text oder Bild präsentiert werden (wir werden weiter unten mehr darüber sprechen, wie man aus einem Bild einen Link macht). Wie ich bereits erwähnt habe, ist der Anker anklickbar. Schauen wir uns ein Beispiel für einen Hyperlink mit Textinhalt an. So wird sein Design im HTML-Code aussehen:

ein wenig über Anker

Zusätzlich zu HTTP kann das sichere HTTPS-Protokoll verwendet werden. Der Link muss nicht unbedingt zu einer Webseite führen. Es hängt alles vom href-Wert ab, der der Pfad zu einer Datei sein kann:

//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

Herunterladen

Auf der Webseite sieht dieser Link wie folgt aus:

Der Browser „versteht“, dass ein Objekt mit der Erweiterung .zip nur zum Herunterladen vorgesehen sein kann, wozu der Benutzer aufgefordert wird.

Übrigens wird der Pfad zu einer beliebigen Datei manchmal über FTP() angegeben. Dann sollten Sie in der URL, die als href-Attributparameter verwendet wird, einfach das HTTP-Protokoll (HTTPS) durch FTP ersetzen. Der Dateilink sieht folgendermaßen aus:

vom Server herunterladen

Aber das ist nicht alles. Auf eine ähnliche Art und Weise Ein E-Mail-Link wird mithilfe des Mailto-Pseudoprotokolls erstellt So greifen Sie schnell auf das Briefschreibtool zu:

Briefe schreiben

Nachdem Sie auf einen solchen Link geklickt haben, sollte ein Fenster des Standard-E-Mail-Clients erscheinen, in dem Sie den Text der Nachricht verfassen und an die bereits angegebene Adresse senden können, die, wie Sie wahrscheinlich erraten haben, aus dem href stammt.

In der Praxis wurden Hyperlinks zu E-Mails früher sehr oft von Webmastern und Eigentümern großer Ressourcen verwendet, um den Komfort für Benutzer und Kunden zu gewährleisten, die mit einem Klick auf das E-Mail-Formular zugreifen konnten.

Diese Art der Kommunikation auf Webressourcen erfreut sich jedoch nicht mehr so ​​großer Beliebtheit (insbesondere, da sie beispielsweise installiert werden kann), da auf diese Weise geöffnete E-Mail-Adressen aktiv von Software abgefangen und von Spammern verschiedener Art genutzt werden.

Als Beispiel habe ich nur die gängigsten Protokolle genannt, die Teil der URL sind, die wiederum ein Parameter des href-Attributs beim Bilden eines Hyperlinks ist. Neben HTTP (HTTPS), FTP und Mailto gibt es weitere zur Lösung speziellerer Probleme. Vielleicht werden wir sie in anderen Publikationen genauer betrachten.

Arten von Hyperlinks

Versuchen wir nun, Links nach bestimmten Kriterien zu klassifizieren.

Nach ihrem Umfang:

1. Extern– zu Seiten führen, die sich außerhalb der Website befinden, auf der sie veröffentlicht werden;

2. Inländisch– Webseiten verbinden, die sich innerhalb derselben Webressource befinden.

Nach Format:

2. Grafisch e – in diesem Fall ist der Anker des Hyperlinks ein Bild (einschließlich einer Miniaturansicht), ein Banner, eine Schaltfläche usw.

Nach Typ der URL, die als Wert des href-Attributs dient:

1. Absolut, die einen expliziten Hinweis auf das Datenübertragungsprotokoll (z. B. HTTP) und den Domänennamen der Site (in allem über Domänen) enthalten.

Solche Links werden am häufigsten verwendet, wenn auf Seiten externer Ressourcen verwiesen wird. In diesem Fall enthält der href-Wert den vollständigen Pfad zur gewünschten Datei oder Webseite. Hier ist ein Beispiel für einen absoluten Hyperlink:

Kontext – was ist das?

2. Relativ, eine der Optionen zum Erstellen, bei der es sich um den Pfad handelt, der relativ zum Stammordner der Website angegeben wird (daher der Name dieses Hyperlink-Typs). In diesem Fall werden das Protokoll (HTTP) und die Site-Domain aus der URL entfernt:

Kontext – was ist das?

Relative Hyperlinks auf einer Webseite können Links zu internen Seiten bereitstellen. In dieser Form sind sie kürzer, was den HTML-Code einfacher macht. Natürlich ist nicht alles so einfach und erfordert eine umfassendere Abdeckung, die Sie sehen können, wenn Sie dem angegebenen Link folgen.

Attribute des a-Tags

Sehen wir uns nun an, welche weiteren Attribute außer dem erforderlichen href vorhanden sind und wie sie sich auf die Erstellung eines Hyperlinks auswirken können. Die umfassendsten Daten hierzu, sozusagen „aus erster Hand“, finden Sie auf der offiziellen Website des International W3C Consortium, wo aktuelle Informationen am schnellsten erscheinen.

Sie sind völlig identisch und veranlassen das Öffnen einer Webseite im aktuellen Tab. Wenn Sie möchten, dass Seiten beim Folgen von Links in einem neuen Tab geöffnet werden, sollten Sie dies beim Erstellen eines Links hinzufügen Zielattribut mit leerem Parameter:

Kontext – was ist das?

Obwohl einige Webmaster und SEO-Spezialisten der Meinung sind, dass es besser ist, wenn dem Besucher die Möglichkeit gegeben wird, eine Auswahl zu treffen (also kein Zielfeld anzugeben), kann die Seite bei Bedarf über das Kontextmenü (Verschieben) in einem neuen Tab geöffnet werden Bewegen Sie den Cursor auf den Link, klicken Sie mit der rechten Maustaste und klicken Sie auf die entsprechende Stelle):

Wie Sie sehen, hat der Benutzer in diesem Fall außerdem den Vorteil, dass er die Webseite nicht nur in einem neuen Tab öffnen kann, sondern auch in einem neuen Fenster(Diese Option kann nicht über HTML implementiert werden, sondern nur über Skripte.)

Ich glaube jedoch, dass nicht alle unerfahrenen Benutzer mit den Funktionen und Einstellungen gängiger Browser () vollständig vertraut sind. Es ist sehr wahrscheinlich, dass ein Leser, der einem externen Hyperlink gefolgt ist und die Quellseite aus den Augen verloren hat (stattdessen erscheint das Empfängerdokument), den Tab einfach aus Frustration schließt.

Somit kann es durchaus sein, dass der Besitzer einer Webressource nicht nur einen vielversprechenden Besucher verliert, sondern auch eine Verschlechterung der Verhaltensfaktoren () erleidet, was zu einem Verlust der Seitenposition im Ranking führt.

Darüber hinaus ist das Öffnen einer Seite in einem angrenzenden Tab aus Sicht der Benutzerfreundlichkeit sehr praktisch (). Der Benutzer folgt einem Hyperlink zu einer Webseite, erhält zusätzliche Informationen und studiert weiter, als wäre nichts passiert, das Hauptmaterial.

Um ein objektives Bild zu vermitteln, sollte hinzugefügt werden, dass die Verwendung von „target="_blank"“ auf externe Links mit einigen Sicherheitsrisiken behaftet ist. Wenn es jemanden interessiert, können Sie lesen, wo Empfehlungen zur Behebung von Problemen bei der Verwendung von Target Blank sowie alternative Möglichkeiten zur Umsetzung der Aufgabe, eine Webseite in einem neuen Tab zu öffnen, gegeben werden.

Es scheint, dass ich alle Vor- und Nachteile der Verwendung des leeren Werts zum Öffnen eines Hyperlinks in einem neuen Tab bemerkt habe. Wenn Sie Artikel auf meinem Blog lesen, haben Sie wahrscheinlich bereits meine Einstellung zu diesem Zielattributparameter erraten.

Im Moment überwiegen für mich die Vorteile und ich bin ein bedingungsloser Befürworter. Basierend auf den oben genannten Fakten können Sie sich zu diesem Thema eine eigene Meinung bilden. Obwohl ... unter Berücksichtigung der Entstehung neuer Umstände kann sich dies ändern.

Wie erstellt man Hash-Links, Anker und warum werden sie benötigt?

Als nächstes möchte ich Ihre Aufmerksamkeit auf eine andere Art von Hyperlinks lenken, die nützlich sein können, wenn das auf einer Webseite befindliche Material sehr umfangreich ist und zur Verbesserung der Navigation strukturiert sein soll.

Sie müssen nicht lange nach einem Beispiel suchen, schauen Sie sich einfach das Inhaltsverzeichnis dieser Veröffentlichung ganz am Anfang an. Sehen Sie, dass es eine Liste der Abschnitte des Artikels gibt? Hyperlinks zu diesen Abschnitten sind lediglich Hash-Links. Nachdem Sie auf einen davon geklickt haben, scrollt der Browser die Seite bis zu der Stelle, an der der entsprechende Teil beginnt.

Solche Links werden ganz einfach erstellt. Zuerst müssen Sie erstellen Anker indem an der gewünschten Stelle auf der Seite ein entsprechendes Label in Form einer ID platziert wird, die eines der globalen Attribute ist, die auf jedes HTML-Tag angewendet werden.

Dank der Universalität von ID können solche Ankertags fast überall auf einer Webseite installiert werden. Da Texte normalerweise in Absätze unterteilt sind, können sie auch auf angewendet werden. Ich habe hauptsächlich Anker angebracht, mit denen Artikel in logische Teile unterteilt werden:

Nachdem wir alle notwendigen Stellen im HTML-Code markiert haben, erstellen wir anschließend Hyperlinks zu diesen. Dazu schreiben wir am Ende nach dem letzten Schrägstrich „/“ in der URL (der, wie Sie bereits wissen, der Wert des href-Attributs ist), nacheinander das Nummernzeichen „#“ und den Labelnamen (ID). ):

Wie bildet man Hash-Links und Anker?

Wenn außerdem ein solcher Ankerlink auf derselben Seite wie die Anker platziert wird, kann ein Teil der URL bis einschließlich des letzten Schrägstrichs vor dem Hash weggelassen werden und nur „#“ plus der ID-Name als href-Parameter verwendet werden (Im Wesentlichen ist dies eine der Optionen für relative Links):

Wie bildet man Hash-Links und Anker?

Das heißt, wenn Sie ein Inhaltsverzeichnis für ein Handbuch zur Optimierung von HTML-Code erstellen, können Sie diese einfache Option problemlos verwenden. Wenn Sie als URL nur ein Hash-Zeichen ohne den Namen der Kennung angeben, scrollt die Seite von der Stelle, an der sich ein solcher Link befindet, ganz nach oben:

Spitze

Tatsächlich ist dies die einfachste Option, die wiederum einen zusätzlichen Vorteil für die Benutzerfreundlichkeit der Ressource darstellt, da sie ihren Besuchern das Leben erleichtert. Sie können ein attraktives Bild als Anker zum Erstellen einer Schaltfläche verwenden.

So entfernen Sie die Unterstreichung und ändern die Linkfarbe

HTML-Entwickler haben fast alle Nuancen durchdacht, die bei der Optimierung dieses oder jenes Aspekts helfen können, dasselbe gilt für Hyperlinks. Wenn der Benutzer beispielsweise einem Hyperlink zu einer anderen Webseite folgt und dann zurückkehrt, wird er feststellen, dass sich die Farbe des Hyperlinks geändert hat.

Wenn er solche Aktionen wiederholt wiederholen muss, kann er schnell feststellen, welche Links er bereits angeklickt hat und welche nicht. Diese Option ist in fast jedem Browser enthalten. Wie praktisch das ist und wie viel Zeit es spart, muss nicht erklärt werden.

Standard- und Nicht-CSS-Hyperlinks hervorgehoben durch Unterstreichung und drei Farboptionen, von denen jedes sein eigenes Attribut hat für:

• Link – legt die Farbe des Hyperlinks auf der Webseite fest (standardmäßig blau, mit der Bezeichnung #0000ff);
• alink – die Farbe des aktiven Hyperlinks für den Zeitraum, in dem er vom Webbrowser verarbeitet wird (rot #ff0000);
• vlink – die Farbe des vom Benutzer besuchten Links (lila, #800080).

Wie können Sie die Farben der Links ändern, die Browser für Ihre Website anzeigen? Nun, für eine einfache HTML-Site, auf der Seiten manuell erstellt werden (und ich denke, dass es in der modernen Realität praktisch keine voll funktionsfähigen Ressourcen dieser Art mehr gibt, außer vielleicht einfachen Tagebüchern und Landingpages), müssen Sie nur das öffnende Tag finden und geben Sie die notwendigen Parameter dafür an (übrigens können Sie seinen Namen verwenden, um eine Farbe anzugeben), zum Beispiel:

Wenn Sie ein Content-Management-System () zur Verwaltung Ihrer Webressource installiert haben, müssen Sie unabhängig von der Art der von Ihnen verwendeten Engine die Datei, die für die Anzeige des Headers (Header) verantwortlich ist, zum Bearbeiten öffnen, wo sich ein öffnendes Tag befindet .

Wenn auf Ihrer Ressource WordPress ausgeführt wird, können Sie diese Idee zur praktischen Umsetzung als Werkzeug zum automatischen Einfügen eines Bildes in einen Hyperlink verwenden, wobei Sie zunächst das gewünschte Bild aus der Bibliothek auswählen oder herunterladen und in den Text einfügen:

Wählen Sie dann den resultierenden Bildcode aus und klicken Sie auf die Schaltfläche „Link“ des Editors. Anschließend fügen Sie den gewünschten kopierten Hyperlink in das angezeigte Fenster ein:

Die Pseudoklasse:target wählt das Element im Dokument aus, auf das das URL-Fragment zeigt. Dieser Text wird beispielsweise in ein Element eingeschlossen mit der ID #target-test . Wenn Sie dem Link folgen, wird dieses Element zum Ziel und die Pseudo-class:target-Stile werden wirksam.

Letztes Jahr habe ich im Artikel 5 wenig genutzte CSS-Selektoren (und wie man sie verwendet) über die Pseudoklasse:target geschrieben. Das erste Beispiel war die Verwendung der Pseudoklasse:target, um den Abschnitt der Seite hervorzuheben, zu dem navigiert wurde. Dies könnte beispielsweise das Hinzufügen einer Hintergrundfarbe oder eines Rahmens sein, wie im Beispiel mit .

Aber ich bin kürzlich zu dem Schluss gekommen, dass wir die Pseudoklasse:target besser nutzen können, indem wir interaktive Elemente auf der Seite ohne JavaScript erstellen.

Beispiel Nr. 1: Inhalte ausblenden und anzeigen

Ein einfaches Beispiel für die Verwendung der Pseudoklasse:target wäre das Ausblenden und Anzeigen des Inhalts, auf den wir abzielen. In einem Blog können wir so einen Kommentarbereich anzeigen, nachdem ein Benutzer darauf klickt. Dies geschieht, indem das Element einfach ausgeblendet wird, bis es unter:target fällt.

Kommentare anzeigen #comments:not(:target) ( display: none; ) #comments:target ( display: block; )

Beispiel Nr. 2: Ausziehbare Navigation

Das nächste Beispiel ist die Erstellung einer verschiebbaren Navigationsleiste. Wir platzieren die Navigationsleiste relativ zum Bereich fest, um sicherzustellen, dass es nach dem Klicken des Benutzers nicht zu Sprüngen kommt.

#nav ( Position: fest; oben: 0; Höhe: 100 %; Breite: 80 %; maximale Breite: 400 Pixel; ) #nav:not(:target) ( rechts: -100 %; Übergang: rechts 1,5 s; ) #nav:target ( rechts: 0; Übergang: rechts 1s; )

Beispiel Nr. 3: Modales Popup-Fenster

Wenn wir diese Idee weiterführen, können wir ein modales Fenster erstellen, das die gesamte Seite ausfüllt.

#modal-container ( Position: fest; oben: 0; links: 0; Breite: 100 %; Höhe: 100 %; Hintergrund: rgba(0,0,0,0.8); Anzeige: Flex; Justify-Content: Center; align-items: center; ) .modal ( width: 70%; background: #fff; padding: 20px; text-align: center; ) #modal-container:not(:target) ( opacity: 0; sichtbarkeit: versteckt; Übergang: Deckkraft 1s, Sichtbarkeit 1s; ) #modal-container:target ( Deckkraft: 1; Sichtbarkeit: sichtbar; Übergang: Deckkraft 1s, Sichtbarkeit 1s; )

Beispiel Nr. 4: Globale Stile ändern

Das letzte Beispiel kann semantisch nicht als korrekt bezeichnet werden, es handelt sich um die Anwendung der Pseudoklasse:target auf ein Element Anschließend werden Stile oder Seitenlayouts geändert.

#body:not(:target) ( main ( width: 60%; ) aside ( width: 30%; ) .show-sidebar-link ( display: none; ) ) #body:target ( main ( width: 100%; ) aside ( display: none; ) .hide-sidebar-link ( display: none; ) )

Wie sieht es mit Semantik und Zugänglichkeit aus?

Wie ich bereits im Artikel „Links oder Buttons“ erwähnt habe, bei der Verwendung des Elements Der Browser wartet darauf, zu einer anderen Seite oder einem anderen Abschnitt der Seite zu wechseln. In meinen Beispielen (außer dem letzten) passiert genau das. Der einzige Trick besteht darin, dass das gestaltete Element im Normalzustand ausgeblendet ist und nur im Zielzustand dynamisch angezeigt wird.