CSS: Pseudo-Elemente und Pseudo-Klassen

Manchmal scheint es, dass um zu überlebenDie moderne Welt, Sie müssen wissen, wie man Websites erstellt. Selbst in Schulen lehren sie die Grundlagen von HTML. Dies reicht jedoch nicht aus, um eine Qualitätsressource zu schaffen. Sie müssen immer noch die Grundlagen des Cascading Stylesheets kennen, insbesondere Pseudo-Klassen und CSS-Pseudo-Elemente.

Was ist das?

Nach dem unausgesprochenen Gesetz, alle Stile, dieDer Web-Assistent wird in CSS-Markup eingefügt, das für die Elemente der Struktur verwendet wird, die im Quellcode angezeigt werden. Es gibt jedoch Gruppen von Elementen, die nicht im HTML-Dokument vorgeschrieben sind, aber sie müssen auch Stile angeben.

Zum Beispiel gibt es in der HTML-Datei kein einziges Tagwäre verantwortlich für die Gestaltung des Großbuchstabens eines neuen Absatzes oder eines neuen Absatzes, der vor einem bestimmten Element steht. Und Tags können keine Verknüpfungsaktivität anzeigen oder das Bild ändern, wenn der Mauszeiger darauf zeigt. Um diese und viele andere Werte zu erhalten, gibt es CSS-Selektoren: Pseudo-Klassen und Pseudo-Elemente.

Pseudoklassen werden Selektoren genannt, die sich auswirkenauf vorhandenen Elementen des Dokuments. Pseudo-Elemente spezifizieren und ändern normalerweise den Bereich, der ursprünglich in der Quelldatei fehlte. Pseudo-Elemente setzen einfach neue Seitenbereiche, die nicht im HTML-Markup sind, und Pseudo-Klassen definieren den Zustand von Objekten unter bestimmten Bedingungen.

Nachher: ​​nachher

Das erste, worauf Sie achten sollten, istPseudo-Elemente CSS vorher und nachher, da jede Ressource, die sie selbst respektiert, sie benutzt, um das Aussehen, die Lesbarkeit und Attraktivität der Seite zu verbessern. Diese Elemente bieten die Möglichkeit, neue Bereiche, Beschriftungen und Stile vor oder nach dem Originaldokument hinzuzufügen.

Jeder hat wahrscheinlich mindestens einmal auf einigen gesehenSite-Ankündigungen von Publikationen, gefolgt von den Worten: "Neuheit", "Neu" oder "Schock", "Favoriten", "Beste", "Super", etc. Diese Objekte wurden mit dem CSS nach Pseudo-Element angegeben.

Um eine solche Position zu erstellen, müssen Sie dem Cascading Stylesheet den folgenden Code hinzufügen:

Hier spezifiziert das Wort new den Namen der neuen Klasse,Bevor Sie den notwendigen Absatz im HTML-Markup eingeben, müssen Sie Folgendes eingeben: class = "new". Der Klassenname muss zwischen der Klammer des öffnenden Tags stehen. Wenn alles richtig gemacht ist, wird nach dem Ende des Absatzes auf der Seite des Browsers die Inschrift "etwas neu" erscheinen.

Im Beispiel wird natürlich ein Skript für ein einfaches gesetztInschriften, aber niemand sagte, dass Sie die Größe, Farbe und Positionierung nicht ändern können. Alle notwendigen Parameter können in der neuen Klasse nach dem Inhalt eingegeben werden. Trennen Sie sie mit einem Semikolon und schließen Sie am Schluss die Klammer.

Vorher: vorher

Praktisch identische Eigenschaften habenPseudo-Element CSS vor. Mit einem kleinen Unterschied: Es wurde entwickelt, um die notwendigen Elemente vor dem Objekt hinzuzufügen. Es ist genau so geschrieben wie nach, nur mit dem Wort davor.

Vor dem nächsten Absatz des Textes können Sie hinzufügenWörter, die Aufmerksamkeit erregen, oder Sie können einfach ein Bild oder ein Unicode-Element vor dem Text platzieren. Zum Beispiel das Öffnen von Anführungszeichen oder Einzügen. Um dies zu implementieren, müssen Sie dem CSS-Markup eine neue Klasse hinzufügen und die erforderlichen Merkmale angeben. Die einfachste Lösung würde so aussehen:

Um das Ende des Dokuments einzurücken, müssen Sie eine After-Pseudoklasse erstellen und statt Inhalt: offen schreibe Inhalt: schließen, ändern Sie sich entsprechendPositionierung. Wenn es in der Pseudoklasse vor dem Einzug vom linken Rand war, dann muss es in der Nachklasse von rechts sein. Auch im Markup können Sie ein Bild (etwa die gleichen Anführungszeichen) hinzufügen, und der Text sieht nicht mehr wie ein langweiliges Blatt aus.

Die Epische Saga: zuerst

Sehr beliebt bei der Erstellung neuer Projekteverwendet das erste CSS-Pseudoelement. Dies betrifft insbesondere Projekte mit unterhaltsamen und märchenhaften Themen sowie Web-Ressourcen von historischer und wissenschaftlicher Ausrichtung.

Dieses CSS-Pseudoelement hat zwei Eigenschaften - Zeile und Buchstabe:

• Brief - ändert den ersten Buchstaben dieses Fragments des Textes zuzu dem es hinzugefügt wird. Somit bildet es einen Drop-Drop - ein Element, bei dem die Grundlinie mehrere Zeilen niedriger ist als der Haupttext. Um diesen Parameter im Cascading Stylesheet festzulegen, müssen Sie die Merkmale für den Absatz festlegen. Zum Beispiel P: Anfangsbuchstabe {***} - und schon zwischen den Klammern angeben, alles NotwendigeParameter wie Farbe, Schriftart, Größe. Wenn der Anfangsbuchstabe nur für den ersten Absatz erstellt werden soll, wird eine neue Klasse erstellt (wie im Beispiel mit neu: nach).
• Linie - Diese Position ändert die erste Zeile komplettAbsatz. Es ist sehr praktisch in wissenschaftlichen Publikationen zu verwenden, wenn Sie wichtige Informationen hervorheben möchten. Es ist genauso wie andere Beispiele geschrieben. Aber hier ist es wichtig zu bedenken, dass das Pseudo-Element keinen Satz, sondern einen String auswählt. Je nachdem, welchen Browser der Benutzer verwendet, kann die erste Zeile länger oder kürzer sein. Daher ist es wichtig, dass diese Auswahl nicht lächerlich aussieht. In solchen Fällen wurde in CSS ein Pseudoelement des Zeilenumbruchs erstellt.

Neue Zeile

In der Tat wird dieses Element selten verwendet, weiles ersetzt erfolgreich das <br>-Tag. Es gibt jedoch Situationen, in denen es erforderlich ist, einen Zeilenumbruch nach Pseudo-Elementen anzugeben. Für diese Zwecke können Sie dasselbe nachher verwenden. Dazu wird der folgende Code geschrieben: nach {Inhalt: "A"; Leerzeichen: pre;}. Der Name der Klasse sollte zwischen den Klammern des öffnenden Tags geschrieben werden, sobald er geschlossen wird, danach folgt der Zeilenumbruch.

Diese Option benötigt mehr Zeit beim Erstellen von lesbarem Inhalt. Wenn Sie nicht mit anormal unerforschten Browsern arbeiten müssen, ist es besser, das Tag auf zu beschränken.

Pseudoklassen-Syntax

Wie bereits erwähnt, definieren Pseudo-Klassender Zustand der Elemente, mit denen der Benutzer interagiert. Im Gegensatz zu CSS-Pseudoelementen, die unsichtbare Strukturmerkmale angeben, orientieren sich imaginäre Klassen an Verhaltensfaktoren. Um es deutlicher zu machen, können wir ein kleines Beispiel geben. Nehmen wir an, die Seite hat eine Liste von nützlichen Links, der Benutzer navigiert durch sie, liest die Informationen, trifft aber nach einer Weile auf den Inhalt, den er bereits gesehen hat. Er ist gerade wieder auf diese Seite gegangen, weil es viele Links gibt, und sie sind nicht anders. Um dies zu verhindern, fügen die Webmaster eine Pseudo-Klasse hinzu, die die Farbe des referenzierten Links ändert, dann weiß der Benutzer genau, was er gelesen hat und wohin er nicht gegangen ist.

Alle Pseudo-Klassen werden mit einer einfachen und überprüften Syntax in eine Tabelle von Cascading Styles geschrieben:

• Selektor: Pseudoklasse {Stilmerkmale: Farbe, Größe, Einzug, Positionierung usw.}

Diese Klassen können in drei Hauptgruppen unterteilt werden:

• Diejenigen, die den Zustand des Elements bestimmen;
• diejenigen, die zu Pseudoelementen gehören;
• fiktive Klassen, die die Sprache des Inhalts definieren.

Pseudoklassen und Zustand der Elemente

Betrachten Sie dasselbe in der Reihenfolge, was sein kannPseudoklassen. Die erste Unterart ist durch eine Änderung des Zustands des Elements gekennzeichnet, abhängig von seinem Zustand in einem bestimmten Moment. So war es im obigen Beispiel: Wenn der Link übergeben wird, ändert sich die Farbe. Dies beinhaltet solche Pseudo-Klassen:

• :aktiv. Wenn Sie diese Pseudoklasse anwenden, wird sie aktiv, wenn Sie den Mauszeiger über ein separates Fragment halten. Dies führt zu einer Farbänderung, einer Vergrößerung oder einer Animation.
• :Link. Grundsätzlich gilt für Links, die der Benutzer noch nicht besucht hat. Sie bleiben unverändert.
• : Fokus. Am häufigsten für Textdokumente verwendet,Wenn der Benutzer durch Setzen des Cursors auf das Feld die Farbe des Textes ändern kann. Manchmal wird es für Bilder verwendet. Zum Beispiel belichten sie ein Bild schattiert, aber wenn es klickt, erhält es eine natürliche Farbe.
• :schweben. Wenn ein Benutzer einfach über ein bestimmtes Objekt schwebt, kann er die Farbe oder Form ändern, und er muss nicht klicken.
• :besucht. Grundsätzlich ist diese Pseudo-Klasse für besuchte Links gedacht, die standardmäßig ihre Farbe auf violett setzen.

Anfänger nehmen fälschlicherweise an, dass diese Pseudo-Klassen nur für Referenzen sind, aber mit dem richtigen Wunsch und der Fantasie können Sie jedes Element der Site ändern.

Speziell für CSS-Pseudo-Elemente

Zu dieser Gruppe von Selektoren gehören Pseudoklassen, die Pseudoelemente ändern können. Eine solche Pseudo-Klasse ist : erstes Kind. Im Cascading Stylesheet müssen Sie eine neue Klasse für erstellen : erstes Kind und legen Sie die Farbe des Textes oder seine Größe fest. Das Ergebnis sieht folgendermaßen aus:

• B: erstes Kind {Farbe: rot; }

Meistens wird dies bei Bedarf getanWählen Sie mehrere Textfragmente fett und nur der Anfang des Absatzes sollte anders sein. Daher wird eine Klasse genauso benannt wie das Tag, das für Fettdruck zuständig ist. Wenn Sie dies in der Praxis anwenden, dann wird dank der Pseudo-Klasse nur das erste fett gedruckte Fragment eine rote Farbe haben, die restlichen Wörter werden die Standardfarbe schwarz sein.

Auch : erstes Kind Stattdessen wird der Einzug im ersten Absatz entfernt Farbe: rot; muss schreiben Text-Gedankenstrich: 0;und ersetzen Sie B durch P (auch durch das Tag gekennzeichnet, das für den Beginn des Absatzes verantwortlich ist).

Inhaltssprache

Pseudoklasse : lang Grundsätzlich gilt für Texte dasin verschiedenen Sprachen verfasst. Wenn der Artikel beispielsweise Zitate in der Originalsprache enthält, können Sie für sie individuelle Merkmale festlegen. Die Syntax für diesen Cluster lautet wie folgt:

• Klassenname: lang (Sprache) {Textmerkmale (Farbe, Schriftart, Typ usw.)}

Die Position "Sprache" wird angegebennach anerkannten Standards. Zum Beispiel Englisch - en, Russisch - ru, Deutsch - de usw. Dank dieser Pseudoklasse können Sie den Stil eines Fremdtexts im gesamten Dokument ändern.

Schlussfolgerungen

Pseudo-Klassen und Pseudo-Elemente sind CSSdiese kaskadierenden Style-Sheet-Fragen, die Schwierigkeiten beim Verständnis verursachen. Es gibt jedoch nichts Kompliziertes. Die Hauptsache ist zu verstehen, dass eine Pseudoklasse ein bestimmter Zustand ist, der unter den zuvor angegebenen Bedingungen erfüllt ist. Zum Beispiel, wenn Sie den Mauszeiger bewegen oder auf klicken. Ein Pseudoelement ist ein unabhängiger Teil eines Dokuments, der nicht Teil des HTML-Markups ist, aber möglicherweise einen eigenen Stil hat. Man könnte sogar sagen, dass dies virtuelles HTML ist. Wenn Sie die Situation aus dieser Perspektive betrachten, wird alles sehr einfach und verständlich, und mit diesem Wissen können Sie bereits mit der Erstellung von Websites beginnen.