Bergbau der SitePoint CSS -Referenz

Die meisten von uns, die CSS kennen, werden selbst gelehrt. Das Problem beim Unterrichten ist, dass Sie die meiste Zeit damit verbringen, nur die Dinge zu lernen, die Sie jeden Tag brauchen, und kleine Löcher in Ihrem Wissen hinterlassen - schwache und staubige Ecken, die von dunklen Fakten bewohnt werden, die Sie selten verwenden, aber möglicherweise nützlich sein können.

Während der Bearbeitung der SitePoint -CSS -Referenz stieß ich auf viele wertvolle Nuggets von CSS -Wissen; Dinge, die ich nur teilweise verstanden habe oder die ich mir nicht bewusst war. Hier sind einige Beispiele.

Terminologie: Regel v Deklaration

In CSS wird die Begriffsregel oft missbraucht. Manchmal sehen Sie Folgendes in der Regel:

padding: 1em;

Es ist jedoch eine Erklärung. Hier ist eine CSS -Regel:

body {
  padding: 1em;
  background-color: #fff;
}

Eine Deklaration gibt einen Wert für eine einzelne Eigenschaft an. Eine Regel kann eine oder mehrere Deklarationen in einem Block enthalten, der von einem Selektor vorausgeht.

Prozentwerte Werte für obere oder untere Polsterung oder Marge

Wenn Sie einen prozentualen Wert für die obere oder untere Polsterung oder Marge angeben, stellt der prozentuale Wert einen Prozentsatz der Breite des Blocks und nicht der Höhe dar, wie Sie vielleicht erwarten.

Mehrere Werte für die Textdekoration

Wussten Sie, dass die textdekorationale Eigenschaft mehrere platz getrennte Werte annehmen kann? Zum Beispiel können Sie dies tun:

a:hover, a:focus {
  text-decoration: underline overline;
}

eine Länge oder einen prozentualen Wert für vertikaler Align

Bei Inline-Boxen (nicht in Tabellenzellen) kann die vertikale Eigenschaft eine Länge oder einen prozentualen Wert annehmen. Der Effekt besteht darin, die Position des Inline -Elements in Bezug auf seinen Linienbox zu erhöhen oder zu senken. Ein prozentualer Wert stellt einen Prozentsatz der Linienhöhe des Elements dar.

Prozentwerte Werte für Hintergrundposition

Wenn Sie sich jemals gefragt haben, warum Ihr Hintergrundbild begonnen hat, sich bei der Verwendung von Prozentwerten für die Hintergrundposition verrückt zu verhalten, haben Sie sich möglicherweise nicht bewusst, wie prozentuale Werte tatsächlich mit der Immobilie funktionieren. Ein prozentualer Wert bezieht sich sowohl auf eine Position innerhalb des Elements als auch auf eine Position innerhalb des Bildes. Eine Hintergrundposition, die von der Oberseite eines Elements auf 50% eingestellt ist

Das ist normal, weil es das Bild im Element effektiv zentriert. Wenn Sie jedoch ungewöhnliche prozentuale Werte wie 66%verwenden, scheint die Position des Bildes überall unerwartet zu wechseln. Alex hat einen ausgezeichneten Blog-Beitrag über die Hintergrundpositionseigenschaft geschrieben, die das Verhalten erklärt.

TABLE-LAYOUT und Leistung

Mit der Tisch-Layout-Eigenschaft können Sie angeben, dass der feste Layoutalgorithmus vom Browser verwendet werden sollte, um die Spalte und die Tabellenbreiten zu berechnen. Im Standard -Tabellenlayoutalgorithmus werden die Spaltenbreiten durch den Inhalt der Zellen beeinflusst, auch wenn Sie eine Breite angeben. Sie könnten sagen, dass die Angabe einer Breite in dieser Situation eher eine Richtlinie als eine tatsächliche Regel ist.

Sie können angeben, dass der feste Layout-Algorithmus verwendet werden sollte, indem Tabellenvermessung auf den Wert festgelegt wird: behoben. Mit diesem Algorithmus ignoriert der Browser den Inhalt der Zellen und verwendet die verfügbaren Breitenspezifikationen, um die Breiten der Tabellenspalten zu berechnen, auch wenn der Inhalt nicht passt. In der Referenz können Sie im Tabellenformatierungsthema mehr darüber erfahren.

Der Nutzen des festen Tabellenlayouts ist eine bessere Leistung, insbesondere für große Tabellen mit vielen Spalten. Wenn Sie eine große Tabelle haben und die Spaltenbreiten mithilfe von Tabellen-Layout sicher angeben können: behoben; Ermöglicht es dem Browser, die Tabelle schneller anzuzeigen.

Häufig gestellte Fragen zum Abbau des SitePoint CSS -Referenz

Was ist die SitePoint -CSS -Referenz? Es enthält Definitionen von CSS-Eigenschaften, Werten, Selektoren und AT-Rules sowie Beispiele und Browser-Kompatibilitätsinformationen. Diese Referenz soll sowohl Anfänger als auch erfahrene Entwickler helfen, CSS in ihren Webdesign- und Entwicklungsprojekten effektiv zu verstehen und zu verwenden. Es bietet eine Fülle von Informationen zu CSS-Eigenschaften, Werten, Selektoren und Rülen. Sie können diesen Referenz verwenden, um verschiedene CSS-Elemente kennenzulernen, zu verstehen, wie sie funktionieren, und Beispiele dafür sehen, wie sie in realen Szenarien verwendet werden können. Dies kann Ihnen helfen, ein tieferes Verständnis von CSS zu entwickeln und Ihre Webdesign- und Entwicklungsfähigkeiten zu verbessern. Es bietet einen umfassenden Leitfaden für CSS und macht es sowohl für Anfänger als auch für erfahrene Entwickler zu einer wertvollen Ressource. Es enthält detaillierte Informationen zu CSS-Eigenschaften, Werten, Selektoren und AT-Rules sowie Beispiele und Browser-Kompatibilitätsinformationen. Dies kann Ihnen helfen, CSS effektiver zu verstehen und zu nutzen und Ihre Webdesign- und Entwicklungsfähigkeiten zu verbessern.

Wie ist der SitePoint -CSS -Referenz mit anderen CSS -Referenzen verglichen? Es deckt eine breite Palette von CSS -Elementen ab und liefert detaillierte Informationen zu jedem einzelnen sowie Beispiele und Browser -Kompatibilitätsinformationen. Dies macht es zu einer wertvollen Ressource für Anfänger und erfahrene Entwickler. Während andere CSS-Referenzen auch nützliche Informationen liefern können, bietet die SitePoint-CSS-Referenz eine umfassendere und umfassendere Anleitung für CSS. Es enthält detaillierte Informationen zu CSS-Eigenschaften, Werten, Selektoren und AT-Rülen sowie Beispiele und Browser-Kompatibilitätsinformationen. Dies kann Ihnen helfen zu verstehen, wie CSS funktioniert und wie Sie es effektiv in Ihren Webdesign- und Entwicklungsprojekten verwenden können. Dies stellt sicher, dass die bereitgestellten Informationen aktuell und relevant sind, was es zu einer zuverlässigen Ressource für das Erlernen von CSS macht. Es enthält detaillierte Informationen zu CSS-Eigenschaften, Werten, Selektoren und AT-Rülen sowie Beispiele und Browser-Kompatibilitätsinformationen. Durch das Studium dieser Referenz können Sie ein tieferes Verständnis von CSS entwickeln und lernen, wie Sie sie in Ihren Projekten effektiver einsetzen. Es enthält Definitionen von CSS-Eigenschaften, Werten, Selektoren und AT-Rules sowie Beispiele und Browser-Kompatibilitätsinformationen. Jedes CSS -Element wird in einem separaten Abschnitt dargestellt, sodass die Informationen, die Sie benötigen, leicht zu finden. Es enthält detaillierte Informationen zu CSS-Eigenschaften, Werten, Selektoren und AT-Rülen sowie Beispiele und Browser-Kompatibilitätsinformationen. Dies kann Ihnen helfen zu verstehen, wie Sie CSS in Ihren Projekten effektiv verwenden können. Es ist online verfügbar und kann von jedem zugegriffen werden, der sich über CSS interessiert. Dies macht es zu einer wertvollen Ressource für Anfänger und erfahrene Entwickler.

Das obige ist der detaillierte Inhalt vonBergbau der SitePoint CSS -Referenz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!