CSS ist keine übermäßig komplexe Sprache. Aber selbst wenn Sie seit vielen Jahren CSS geschrieben haben, stoßen Sie wahrscheinlich immer noch auf neue Dinge - Eigenschaften, die Sie noch nie verwendet haben, Werte, die Sie nie in Betracht gezogen haben, oder Spezifikationsdetails, von denen Sie nie wussten.
In meinen Nachforschungen stoße ich die ganze Zeit auf neue kleine Tidbits, also dachte ich, ich würde einige von ihnen in diesem Beitrag teilen. Zugegeben, nicht alles in diesem Beitrag hat eine Menge unmittelbarer praktischer Wert, aber vielleicht können Sie einige davon für spätere Verwendung mental abgeben.
Schauen Sie sich die Demo unten an:
Siehe den Stift CTWFG von sitepoint (@sitepoint) auf CodePen.
Beachten Sie im CSS, nur eine Farbeigenschaft wird auf dem Körperelement verwendet und es in Gelb setzt. Wie Sie sehen können, ist alles auf der Seite gelb, einschließlich:
Der Alt -Text, der auf einem fehlenden Bild angezeigt wird
Diese Eigenschaft beschreibt die Vordergrundfarbe des Textes eines Elements
Inhalt. Außerdem wird es verwendet, um einen potenziellen indirekten Wert
bereitzustellen … Für alle anderen Eigenschaften, die Farbwerte akzeptieren.
Ich kann mir nichts anderes vorstellen, das sich als „Vordergrund“ qualifizieren würde, aber wenn Sie dies tun, lassen Sie es uns in den Kommentaren wissen.
Sie haben wahrscheinlich hunderte Male die Sichtbarkeitseigentum verwendet. Die am häufigsten verwendeten Werte sind sichtbar (die Standardeinstellung für alle Elemente) und versteckt, was ein Element verschwindet, während er es noch zulässt, als ob es dort wäre (was anders als Anzeige ist: keine).
Ein dritter und selten verwendeter Wert für die Sichtbarkeitseigenschaft ist ein Zusammenbruch. Dies funktioniert genauso wie in allen Elementen, mit Ausnahme von Tabellenzeilen, Tabellenzeilengruppen, Tabellenspalten und Tabellenspaltengruppen versteckt. Bei diesen tabellbasierten Elementen soll ein Kollapswert ähnlich wie Anzeige funktionieren: Keine, so dass der von der zusammengebrochene Zeile/Spalte besetzte Raum durch andere Inhalte besetzt werden kann.
Leider ist die Art und Weise, wie Browser mit dem Zusammenbruch umgehen, nicht konsistent. Versuchen Sie die folgende Demo:
Siehe die Sichtbarkeit der Stift: Kollaps von sitepoint (@sinepoint) auf CodePen.
Die CSS-Tricks Almanac rät aufgrund der Browser-Inkonsistenzen niemals, dies zu verwenden.
aus meinen Beobachtungen:
zugegebenermaßen wird dieser Wert wahrscheinlich selten verwendet, aber er existiert. Wenn Sie also noch nicht davon wussten, denke ich, dass Sie jetzt in einer seltsamen Weise intelligenter sind.
In CSS2.1 enthielt die Eigenschaft im Hintergrund 5 Longhandwerte-Hintergrundfarbe, Hintergrund-Image, Hintergrundrepeat, Hintergrund-Einbindung und Hintergrundposition. In CSS3 und darüber hinaus enthält es jetzt drei weitere für insgesamt bis zu 8. So sind die Werte geordnet:
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
Beachten Sie den Vorwärtsschräger, ähnlich wie die Kurzschrift und der Grenzradius geschrieben werden können. Mit dem Schrägstrich können Sie nach der Position in den unterstützenden Browsern einen Wert für Hintergrundgröße einfügen.
Zusätzlich haben Sie bis zu zwei optionale Deklarationen für Hintergrundorientier und Hintergrund-Clip.
Also sieht die Syntax so aus:
<span><span>.example</span> {
</span> <span>background: aquamarine <span>url(img.png)</span>
</span> no-repeat
scroll
center center <span>/ 50%
</span> content-box content-box<span>;
</span><span>}</span>Testen Sie es in Ihrem Browser mit dieser Demo:
Siehe den Stift Neuen Hintergrund -Kurzwerte von SitePoint (@sinepoint) auf CodePen.
Was den Browserunterstützung angeht, scheinen diese neuen Werte in allen modernen Browsern gut zu funktionieren, aber es ist wahrscheinlich, dass Sie gute Fallbacks für nicht unterstützende Browser bereitstellen müssen, damit es sich anmutig verschlechtert.
Wenn Sie von Hintergrund-Clip sprechen, haben Sie wahrscheinlich auch Clip gesehen. Es sieht so aus:
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
Dies wird das Element an den angegebenen Orten (hier erklärt) "klappen". Die einzige Einschränkung ist, dass das Element, auf das Sie Clip auftragen, unbedingt positioniert werden muss. Sie müssen das also tun:
<span><span>.example</span> {
</span> <span>background: aquamarine <span>url(img.png)</span>
</span> no-repeat
scroll
center center <span>/ 50%
</span> content-box content-box<span>;
</span><span>}</span>Sie können sehen, wie Clip in der folgenden Demo deaktiviert ist, wenn Position: Absolute umgeschaltet ist:
Siehe den Stift Sifju von sitepoint (@sitepoint) auf CodePen.
Sie können das Element auch auf Position setzen: Behoben, da nach den Spezifikationselementen auch festgelegte Elemente als „absolut positionierte“ Elemente gilt.
Dieser ist zunächst ein bisschen verwirrend, über das ich zuvor geschrieben habe. Während Sie vielleicht wissen, dass die prozentualen Breite basierend auf der Breite des Behälters berechnet werden, werden die Prozentsätze für Eigenschaften wie die Ober- und Bodenpolsterung sowie die oberen und unteren Ränder auch basierend auf der Breite des Behälters und nicht der Höhe berechnet.
Hier ist ein Beispiel, das Sie mit einem Range Slider einstellen können, sodass Sie den Effekt sehen können:
Siehe den Stift QLNPM von SitePoint (@sitepoint) auf CodePen.
Beachten Sie, dass in der Innenkiste (obere und untere Polsterung und unterer Rand) 3 „vertikale“ Prozentsätze vorliegen. Wenn sich der Schieberegler bewegt, ändert er nur die Containerbreite. Die anderen Werte ändern sich jedoch, wie die Ausgabe auf der Seite zeigt, dass diese Werte, wenn sie als Prozentsätze deklariert werden, auf der Containerbreite basieren.
wir haben das alle irgendwann gemacht:
<span><span>.example</span> {
</span> <span>clip: rect(110px, 160px, 170px, 60px);
</span><span>}</span>Das Grenzeigentum ist ein Kurzeigeneignis, das Grenzstil, Grenzbreit und Grenzfarbe festlegt-alles in einer einzigen Erklärung.
Aber vergessen Sie nicht, dass jede der Eigenschaften, die die Grenzeigenschaft darstellt, selbst ein Kurzeigeneignis ist. So kann allein grenzüberschreitend deklariert werden:
<span><span>.example</span> {
</span> <span>position: absolute;
</span> <span>clip: rect(110px, 160px, 170px, 60px);
</span><span>}</span>Dies setzt für jede der vier Grenzen unterschiedliche Breiten. Das Gleiche gilt für Grenzfarben und Grenzstil, wie in dieser schrecklichen Demo gezeigt:
Siehe den Stift mehrere Grenz -Kurzwälder von sitepoint (@sinepoint) auf CodePen.
Zusätzlich kann jede dieser Eigenschaften mit Grenz-Links-Stil, Grenzbreite, Grenzbodenfarbe usw. noch weiter abgebaut werden.
Aber der Haken ist, dass Sie die reguläre Grenz -Kurzform nicht verwenden können, um verschiedene Werte für verschiedene Seiten festzulegen. Es ist also Kurzform in der Kurzform in der Kurzform, aber nicht genau.
Ich wusste, dass etwas auf dieser Liste dich umhauen würde.
Dies ist jetzt Standard gemäß der Spezifikation:
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
Diese Eigenschaft repräsentiert jetzt 3 Eigenschaften: Textdekorationslinie, Textdekoration und Textdekoration.
Leider ist Firefox der einzige Browser, der diese neuen Eigenschaften unterstützt, und (ich nehme an, für die Rückwärtskompatibilität), unterstützt sie noch nicht in der Kurzform.
Versuchen Sie die Demo unten in Firefox:
Siehe den Stift von SitePoint (@sitepoint) auf CodePen.
Die Demo verwendet dazu die Langhandwerte. Dies wird letztendlich schwierig sein, da derzeit jeder Browser, der einen zusätzlichen Wert in der Textabteilung sieht
8. Die Rand-Breiten-Eigenschaft akzeptiert Keyword-Wertein der Tat ist der Anfangswert der Rand-Breiten-Eigenschaft „mittel“. Die folgende Demo verwendet "dick":
Siehe das Schlüsselwort "Dicke" von SitePoint (@sinepoint) auf CodePen.
Wenn Browser diese Schlüsselwortwerte rendern, erfordert die Spezifikation nicht, dass sie sie auf bestimmte Längenwerte zuordnen, aber nach dem, was ich sehen kann, scheinen alle Browser 1px, 3px und 5px zu verwenden.
9. Niemand verwendet Grenzbild
Es scheint eine wirklich ordentliche Funktion zu sein, die es Ihnen ermöglicht, Grenzbilder zu erstellen, die flüssig sind. Verwenden Sie den Größengriff in dieser Demo, um sie zu testen:
Siehe die Demo von SitePoint (@sinepoint) auf CodePen.
Leider scheint das Grenzbild eine Neuheit zu sein, die nicht viele Menschen verwenden. Aber vielleicht irre ich mich. Wenn Sie Beispiele für das in einem echte Projekt verwendete Grenzbild kennen, oder wenn Sie es verwendet haben, teilen Sie uns dies bitte in den Kommentaren mit und ich werde gerne zugeben, dass ich mich geirrt habe.
10. Es gibt eine Eigenschaft mit leeren Zellen
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
Wie Sie wahrscheinlich herausgefunden haben, wird es für HTML -Tabellen verwendet. Es sagt dem Browser, ob er Tabellenzellen anzeigen oder verbergen soll, die keinen Inhalt enthalten. Versuchen Sie die Schaltfläche "Umschalten" in dieser Demo, um den Effekt des Änderns des Wertes der Eigenschaft mit leeren Zellen zu sehen:
Siehe den Stift leere Zellen von SitePoint (@sinepoint) auf CodePen.
In diesem Fall musste ich sicherstellen, dass die Grenzen sichtbar waren und nicht zusammengebrochen waren und ich einen gewissen Abstand zwischen den Zellgrenzen hinzufügen musste. In einigen Fällen hätte diese Eigenschaft keinen visuellen Effekt, da auf der Tabelle etwas sichtbar ist, um einen Unterschied zu machen.
Fast jedes Mal, wenn Sie die Eigenschaft im Schriftart sehen, wird sie entweder mit einem Wert von "normal" oder "kursiv" verwendet. Sie können ihm aber auch einen Wert von „schrägen“ geben:
Siehe den Stift Italic vs. Schräg von sitepoint (@sinepoint) auf CodePen.
Aber was genau bedeutet das? Und warum sieht es genauso aus wie kursiv?
Die Spezifikation erklärt, dass der Wert „schräg“…
"… Wählt eine Schriftart aus, die als schräge Gesicht oder kursives Gesicht bezeichnet wird, wenn man es nicht ist."
Die Beschreibung von „kursiv“ in der Spezifikation ist im Grunde dasselbe. Das Wort „schräg“ ist ein typografischer Begriff, der im Grunde genommen einen schrägen Text darstellt, aber kein wahrer Kursiv.
Aufgrund der Art und Weise, wie CSS schrägen Text umgeht, ist er kursiv austauschbar, es sei denn (wie die Spezifikation erklärt) die verwendete Schrift hat ein Gesicht, das als schräg identifiziert wird.
Ich habe noch nie von einer Schrift gehört, die tatsächlich ein schräge Gesicht hat, aber vielleicht irre ich mich. Aus den Forschungen, die ich durchgeführt habe, scheint es für eine Schriftart falsch zu sein, sowohl kursiv als auch schräge Gesichter anzubieten, da Schräge eine fauxe Version von Italic auf Schriftarten sein soll, die keine wahre Italic haben.
Wenn ich mich nicht irre, bedeutet dies, wenn eine Schriftart kein echtes kursives Gesicht hat und das CSS in Schriftstil stellt: Italic wird die Schriftart tatsächlich als Schriftstil angezeigt: schräg.
Die Word-Wrap-Eigenschaft wird nicht zu oft verwendet, ist jedoch unter bestimmten Umständen sehr nützlich. Ein oft verwendetes Beispiel ist es, lange, ungebrochene Textzeichen (wie URLs) zu helfen, zu wickeln, anstatt aus ihrem Behälter auszubrechen. Hier ist ein Beispiel:
Siehe die Demo der Stift-Word-Wrap von SitePoint (@sinepoint) auf CodePen.
Da dies ursprünglich eine Microsoft -Erstellung war, wird diese Eigenschaft in allen Browsern, einschließlich des Internet Explorer, bis zu IE5.5 unterstützt.
Trotz des Querbrowsers und nach dem, was ich sehen kann, entschied sich der W3C, die Wortschrift durch Überlaufschreiber zu ersetzen-ich vermute, dass der frühere Name als Fehlbezeichnung angesehen wird. Die Überlaufschaltung hat die gleichen Werte wie Word-Wrap, und Word-Wrap wird jetzt als "alternative Syntax" für Überlaufschreiber betrachtet.
Während ein paar neue Browser über die Überlauf-Wrap unterstützen, scheint es sinnlos zu sein, sich darum zu kümmern, da alte Browser mit Wortschreiber gut umgehen, und alle Browser müssen aus Legacy-Gründen weiterhin auf unbestimmte Zeit unterstützen.
..
Wir können über die Überlaufschaltung beginnen, wenn alle in den Gebrauchsgebrauch automatischen Browser aktualisieren.Hast du etwas aus diesem Beitrag gelernt? Ich hoffe es. Wahrscheinlich kannten die meisten erfahrenen CSS -Entwickler viele, wenn nicht alle der oben genannten Punkte. Aber wahrscheinlich würden die neueren zu CSS mehr davon profitieren.
Es wäre interessant zu sehen, wie viele dieser Punkte für unsere Leser neu waren. Veröffentlichen Sie einen Kommentar unten, der uns mitteilt, wie viele für Sie neu waren (z. B. 6/12, 4/12 oder was auch immer).
Nehmen Sie Lasten mehr CSS -Hinweise und Tipps mit einer lernbaren Mitgliedschaft auf. Sie erhalten Zugang zu Dutzenden von Büchern und Kursen, darunter Bestseller wie Sprung Start CSS , Die CSS-Anthologie und mehr.
Können CSS verwendet werden, um Animationen zu erstellen? Mit der Immobilie "Animation" in CSS können Sie fast jede Immobilie animieren. Sie können die Dauer, die Zeitfunktion, die Verzögerung, die Anzahl der Iteration, die Richtung, den Füllmodus und den Spielstatus der Animation steuern. Dies kann ein leistungsstarkes Tool zur Verbesserung der Benutzererfahrung auf einer Website sein. Dies kann in Situationen nützlich sein, in denen Sie eine Konsistenz über Elemente hinweg sicherstellen möchten oder wenn Sie Ihren CSS -Code durch Reduktion der Redundanz vereinfachen möchten.
Wie funktioniert die Eigenschaft "Float" in CSS? Dies kann nützlich sein, um Text-Wraps um Bilder oder zum Erstellen von Multi-Säulen-Layouts zu erstellen.
Können CSS zum Erstellen von Gradienten verwendet werden? Mit den Funktionen „Linear-Gradient“ und „radial-Gradient“ in CSS können Sie glatte Übergänge zwischen zwei oder mehr Farben erstellen. Dies kann ein leistungsstarkes Werkzeug sein, um die Ästhetik einer Website zu verbessern. Zum Beispiel werden die Pseudo-Elemente ":: vor" und ":: After" verwendet, um Inhalte vor oder nach dem Inhalt eines Elements einzufügen. Dies kann nützlich sein, um einer Website dekorative Funktionen hinzuzufügen.
Das obige ist der detaillierte Inhalt von12 wenig bekannte CSS-Fakten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
