This page has been robot translated, sorry for typos if any. Original content here.

Formatieren eines Blocks von Pseudoklassen und Pseudoelementen

Formatierung blockieren

Ein Block in kaskadierenden Stylesheets wird als ein Fragment der Seite oder seines vollständigen Volumens angesehen, das in den Containern <P> und <DIV> und <BODY> (wenn die Seite als Ganzes steht) platziert wird. Formatieren des Blocks ist, um seine Parameter zu ändern, wie zum Beispiel: Blockbreite und -höhe, äußere und innere Einrückungen von seinen Grenzen, Farbe und Aussehen Zuweisung als separate Linien (Grenzen) und allgemeinen Hintergrund.

Dimensionen des Blocks in Stilen werden in den Eigenschaften width und height angegeben , während, wie überall in solchen Fällen, keine negativen Werte angegeben werden können. In einigen Fällen ist es für das Design der Seiten notwendig, auf variable Blockdimensionen zurückzugreifen. Dazu stellt CSS die Eigenschaften min-width , min-height (minimale Breite und Höhe des Blocks) und max-widht / max-height (maximale Werte) zur Verfügung.

Äußere Einzüge aus dem Block diktieren die Parameter: Rand , Rand links , Rand rechts , Rand oben und Rand unten . In ähnlicher Weise wird die Padding- Eigenschaft gefunden.

Wenn Sie den Hintergrund des Div- Blocks angeben , müssen Sie die Eigenschaft background-color anwenden, wobei die Auswahl des Wertes nicht von der allgemeinen Farbanwendung zu unterscheiden ist. Wenn Sie ein Bild als Hintergrund verwenden möchten, wenden Sie die Eigenschaft background-image an , während Sie im Wert die Adresse und den Dateinamen des gewünschten Bildes angeben. Begrenzen Sie die Wiederholung des Bildes im Hintergrund des Blocks mit der Eigenschaft background-repeat und dessen Werten: repeat-x (Wiederholung auf der X-Achse), repeat-y (auf der Y-Achse) und No-repeat (ohne Wiederholungen). Wenn nötig, fixiere das Hintergrundbild, damit es beim Scrollen nicht bewegt wird, verwende den in der Eigenschaft background-attachment fixierten Wert.

Um die Blockrahmenparameter zu ändern , werden Eigenschaften verwendet, die mit dem Wort BORDER beginnen. Mit Hilfe der border-width können also für alle vier Grenzen des Blocks die gleichen Werte gesetzt werden, und in den Werten border-left-width , border-right-width , border-top-width und border-bottom-width wird eine bestimmte Grenze beschrieben. In einer ähnlichen Ansicht gilt: border-color (die Farbe der Grenze des Blocks) und border-style (das Aussehen der Linien). Über die letzte Eigenschaft muss hinzugefügt werden, dass sie mehrere Werte haben, die wir noch nicht gelernt haben:

  • solid, groove, ridge, double - die Rahmenlinien sind jeweils massiv, dented, convex und double.
  • Einschub - der Block ist vollständig niedergedrückt.
  • Anfang - eine volumetrische Blockansicht.
  • keine - keine Zeilen.

Aus dem Obigen können wir annehmen, dass der Stil des Blocks die folgende Form haben kann:

.box {Breite: 200px; Höhe: 100px; Rand links: 5px; Rand rechts: 5px; Rand oben: 10px; Rand unten: 15px; Auffüllen: 5px; Randbreite-links: 1px; Rahmenbreite-rechts: 0px; border-width-top: 0px; Randbreite-unten: 5px; Rahmenfarbe: # 202020; Umrandungsstil: fest}

Formatieren von Pseudo-Klassen und Pseudo-Elementen

Diese Kategorie enthält Elemente von Webseiten, die gewöhnlichen Elementen schwer zuzuordnen sind. Pseudo-Klassen sind Links , First-Child und Lang (Sprache). In der CSS 2.0-Spezifikation werden sie wie folgt beschrieben:

  • a: link - Eigenschaften der normalen Verbindung.
  • a: active - Eigenschaften der aktiven Verbindung.
  • a: besucht - die Eigenschaften des besuchten Links.
  • a: hover - die Eigenschaften des Links, wenn Sie die Maus darüber bewegen.
  • a: Fokus - Link-Eigenschaft im Fokus
  • first-child - wählt das erste Element unter den folgenden aus.
  • lang - Formatierung von Elementen abhängig von der Verwendung von Sprachen auf der Seite.

In Cascading Style Sheets gelten beim Formatieren von Links die gleichen Werte wie für normalen Text. Bei der Beschreibung anderer Pseudoklassen in CSS werden dem Symbol ">" ihre Werte vorangestellt.

Pseudo-Elemente in Stilen enthalten Eigenschaften:

  • Anfangsbuchstabe - Formatiert das erste Zeichen für die erste Zeile.
  • erste Zeile - eine separate Formatierung der ersten Zeile des Textblocks wird zugewiesen.
  • after - weist den Ort des Objekts nach dem aktuellen Element zu.
  • before - weist dem aktuellen Element den Standort des Objekts zu.