Vor CSS - original, praktisch, praktisch

CSS-Pseudoelemente und Pseudoklassen: vor, nach, schweben, aktiv usw. - eine effektive Möglichkeit, die Ausführung der Website qualitativ zu verbessern und zu vereinfachen, ohne Javascript-Handler für offensichtliche Entwurfsentscheidungen, Elementereignisse, Dialoge und Besucheraktionen, die keine komplexen Reaktionen erfordern, in den Code aufzunehmen.

Pseudoelemente sind bequem, multifunktional,besitzen signifikante und multivariate Eigenschaften, um einfache und komplexe Autorenideen zu erfüllen: wie man auf originelle Weise Aufmerksamkeit erregt, Handlungen unmerklich verdeutlicht, den notwendigen Hinweis an der richtigen Stelle anzeigt.

Gute Aussichten eröffnen sich, wenn Sie inurl () wird durch den Inhalt des Pseudoelements angegeben. In der Tat eröffnet diese Option neue Horizonte, sowohl was das Herunterladen von Inhalten auf die Seite der Website als auch die mögliche Aktivierung von Inhalten an einem bestimmten Ort betrifft

Besonderheit von Pseudoelementen

Pseudoelemente (:: vor CSS, ::after) unterscheiden sich von Elementen, Selektoren und Pseudoklassen dadurch, dass sie zunächst nicht im Dokumentenbaum existieren. In der Praxis ist dies vielleicht nicht besonders wichtig. Wenn wir jedoch das Problem der Platzierung von Inhalten auf den Seiten der Website in Betracht ziehen, ist es für die Suchmaschine nicht sinnvoll, der Eigenschaft content zu vertrauen.

Pseudoelement ::Mit before CSS können Sie Inhalte vor einem Element und :: after - after hinzufügen. Der Inhalt kann in Bezug auf CSS-Eigenschaften von einfachem Text bis zu komplexer Formatierung reichen, nicht jedoch in Bezug auf HTML-Tags. Das Pseudoelement kann absolut innerhalb des Elements positioniert werden, an das es angehängt ist, daher ist die Bedeutung von Vorher und Nachher relativ und beweglich. Sie können nicht nur die Position, sondern auch die Größen, Farben, den Hintergrund und die Schriftarten angeben und andere CSS-Eigenschaften verwenden.

Wie CSS-Pseudoklassen davor und danachdavor ein ":", aber CSS :: empfiehlt "::". Das Testen einer bestimmten Verwendung auf einer Seite wird niemals überflüssig: Einige Browser oder ihre Versionen bemerken dieses oder jenes Pseudoelement möglicherweise einfach nicht.

Allgemeine Nutzungsbedingungen

Indem Sie zum Beispiel ein div-Element mit der description class = "scElement" und dem Inhalt von "Element" auf der Seite platzieren und die CSS-Beschreibung im Stylesheet angeben:

.scElement {
POSITION ...;
z-Index ...;
...

},

Sie können die Pseudoklasse ": hover" und das Pseudoelement ":: before" CSS darauf anwenden:

.scElement: hover :: before {content: "prefix"; Farbe ...; Hintergrundfarbe ...;}.

Wenn Sie dann mit der Maus über das Wort "Element" fahren, wird das Wort "Präfix" angezeigt, in dem sich die Farbe der Buchstaben und des Hintergrunds ändert.

Inhaltsoptionen für Pseudoelemente

Wenn Sie im Pseudoelement keine Eigenschaften angeben, werden diese angegebenbleibt das gleiche wie das Hauptelement - scElement. Sie können eine URL angeben, und dann zeigt die Eigenschaft content: url ("/scBox/rm-v/sc-rights.png") ein Bild auf dem Element, wenn Sie den Mauszeiger darüber halten. Bei Inhalten: "\ 03B1" wird das mathematische Symbol "alfa" angezeigt, es werden jedoch Sonderzeichen verwendet: "", "<", "& laquo;", "& raquo;" und andere sollten nicht - sie werden so angezeigt, wie sie sind.

Viele Optionen zum Angeben von Inhalten sind zulässig.Pseudoelemente: einfacher "Text", url (), eine Folge hexadezimaler Zeichen, Notation: offenes Zitat / nahes Zitat oder nicht offenes Zitat / nicht nahes Zitat usw. Da es dann möglich ist, die absolute Position des Inhalts mit Hilfe von Stileigenschaften anzugeben Durch die vorherige Anwendung von CSS können Sie das Pseudoelement an einer beliebigen Stelle in dem Element platzieren, an das es angehängt ist.

Sie können die gleichzeitige Nutzung kombinierenvorher und nachher. Durch die Verwendung von CSS vor Inhaltszeichen können Sie verschiedene Effekte erzielen und durch die Kombination verschiedener Pseudoklassen und Pseudoelemente den Besucher überraschen, ohne ein einziges Byte Javascript-Code auszugeben.

Pseudoelementmerkmale

Das Symbol "wird für ihre Bezeichnung akzeptiert:", sowie zur Bezeichnung von Pseudoklassen, aber in CSS3 ist es üblich, den Unterschied zwischen Pseudoelementen als" :: "zu bezeichnen. Browser, die dies verstehen, akzeptieren beide Notationen. Im Datensatz sind keine Leerzeichen zulässig. Die Zeile, in der die Pseudoklasse und (oder nur) das Pseudoelement geschrieben wird, wird zusammen geschrieben :

scElement: hover :: before {content: "prefix"; ...}

scElement: active: after {content: "Suffix"; ...}

Es ist wichtig, nicht zu vergessen: CSS vor arbeitet außerhalb des Seiteninhalts. Stile hängen nicht mit dem Seiteninhalt zusammen. Pseudoelemente sind keine Ausnahme. Sie sind in der DOM-Struktur nicht vorhanden und sollten nicht in wichtigen Abschnitten der Website verwendet werden. Sie werden nicht in den Inhalt aufgenommen.

Die Verwendung von ":" und "::" wird von mobilen Plattformen und modernen Browsern unterstützt, es ist jedoch häufig nicht überflüssig, den Betrieb älterer Versionen zu überprüfen.

Pseudoelement-Inhalt ist nicht im Inhalt enthaltenWebsite. Suchmaschinen werden ihn nicht sehen. Die Verwendung dieser Tatsache hängt von der jeweiligen Situation ab. Die Möglichkeit, CSS vor, nach oder unabhängig voneinander oder in einem Komplex zu verwenden, ist jedoch interessant, wenn der Inhalt url () ist. Durch die direkte Verwendung des Inhalts des Pseudoelements als Link zur Website können Sie eine Datei herunterladen, z. B. ein Bild.

Möglichkeit, Stildateien auf der Site zu ändern(Cascading Stylesheet-Dateien sind keine Ausnahme) beeinträchtigt nicht die Bildung und Verwendung von Pseudoelementen, die zu einem bestimmten Zeitpunkt am richtigen Ort des Algorithmus in Abhängigkeit von den Aktionen des Besuchers angebracht sind.