Passen Sie die Reihenfolge der CSS-Typen an, um den Link-Scrolling-Effekt_CSS/HTML zu ändern

Sie haben vielleicht bemerkt, dass Sie CSS-Bildlaufeffekte erzeugen können, indem Sie für jeden Link unterschiedliche Stile angeben, einschließlich normaler Link (normal), Zugriff, Umdrehen und Aktivierung. Sie wissen möglicherweise auch, dass die Reihenfolge der CSS-Typen einen Unterschied in der Leistung machen kann. Nachbestellungsstile von CSS-Code ersetzen Vorbestellungsstile für dasselbe Element. Die Reihenfolge, in der die Arten von Rolleffekten erstellt werden, ist sehr wichtig.
Sehen wir uns nun an, wie man die Verbindungsstatustypen anordnet, um normale Umwälzeffekte zu unterstützen, ohne Konflikte zu verursachen, und wie man die Reihenfolge dieser Typen neu anordnet, um unterschiedliche Umwälzeffekte zu erzielen.

Linkstatus

Typische CSS-Bildlaufeffekte basieren auf unabhängigen Typen von einem von vier Zuständen in einem Hyperlink. Der Typ (Hyperlink) kann mit einer CSS-Vorklasse erstellt werden, um den Linkstatus anzugeben:

a:link – normaler, nicht zugänglicher Hyperlink

a:visited——Besuchter Hyperlink

a:hover – der Link, wenn der Besucher die Maus durch

bewegt

a:aktiv – Klicken Sie auf den Link

Damit der typische CSS-Bildlaufeffekt ordnungsgemäß funktioniert, ist die Reihenfolge der CSS-Typen im CSS-Code sehr wichtig, unabhängig davon, ob es sich um eine externe Typtabelle oder eine in die Titelleiste einer HIML-Seite eingebettete Typregel handelt.

Der Typ a:link erscheint am frühesten, da er auf alle Links angewendet werden kann. Der Typ a:visited kommt an zweiter Stelle und ersetzt das a:link-Format jedes Links. (Wenn auf den Typ a:link ein a:visited folgt, kann a:link den Typ a:visited ersetzen.) Gefolgt vom Typ a:hover sollte dieser Typ nur für den Zugriff auf Links unter der Maus verwendet werden. Schließlich gibt es noch a:active. Wenn also auf den Link geklickt wird, ersetzt dieser alle anderen Typen.

a:link {

Farbe: #0000FF;

Textdekoration: unterstreichen;

Schriftstärke: normal;

Schriftstil: normal;

}

a:besuchte {

Farbe: #3399FF;

Textdekoration: unterstreichen;

Hintergrundfarbe: #FFFFFF;

Schriftstärke: normal;

Schriftstil: kursiv;

}

a:hover {

Farbe: #0000FF;

Textdekoration: unterstreichen;

Hintergrundfarbe: #FFFF00;

Schriftstärke: fett;

Schriftstil: normal;

}

a:aktiv {

Farbe: #FF0000;

Textdekoration: keine;

Hintergrundfarbe: #CCCCCC;

Schriftstärke: fett;

Schriftstil: normal;

}

Die Reihenfolge der Typen im CSS-Code bestimmt, wie jeder Typ andere Typen ersetzt, d. h. es können mehr Typen auf ein bestimmtes Element angewendet werden. Normalerweise folgt der Typ „a:hover“ den Typen „a:link“ und „a:visited“, sodass der Typ „hover state“ auf reguläre und besuchte Links angewendet werden kann. Dies muss jedoch nicht so sein, Sie können die Reihenfolge der Typen ändern, um unterschiedliche Effekte zu erzielen.

Angenommen, Sie möchten den Scroll-Effekt auf nicht besuchte Links verwenden, möchten aber keine Auswirkungen auf andere besuchte Links haben. Vielleicht denken Sie darüber nach, diese Darstellungsänderung durch Code zu handhaben, müssen aber eine Neuorganisation durchführen der CSS-Code.

Das Entfernen des Scrolleffekts von besuchten Links kann einfach durch Entfernen des Typs a:visited erfolgen.

Beachten Sie, dass der Typ a:visited Regeln zum Angeben aller gleichen Attribute wie a:hover enthält. Andernfalls werden alle Attribute des Typs a:hover angezeigt, die nicht durch a:visited ersetzt werden, wenn die Maus des Besuchers über einen Besuchslink fährt Der Typ wird weiterhin angezeigt.

Quelle: Web Teaching Network