Vor kurzem entschied ich, dass ich eine Auffrischung in den verschiedenen CSS-Kurzschreibeigenschaften benötigte. Der beste Weg, etwas zu lernen, ist es zu lehren, also hier ist mein Versuch genau das.
Heute lernen wir, wie man CSS-Kürzel für Hintergründe, Ränder und Füllungen, Rahmen, Schriftarten, Listenstile und Übergänge verwendet.
Hintergrund
CSS-Hintergrundbilder sind eine der häufigsten Stellen, an denen CSS-Abkürzungen implementiert werden. Hier kann es jedoch etwas mehr Funktionalität geben, als von den Menschen genutzt wird. Beginnen wir mit einem typischen Beispiel für die normale Deklaration eines Hintergrunds.
Hintergrund: Der lange Weg
Hintergrund-Kürzel
Von hier aus können die meisten von uns wissen, wie sie diese drei Eigenschaften nehmen und in das Hintergrundobjekt werfen können. Prüfen Sie, wie viel Platz dies spart.
Befestigung und Position
Zwei andere Eigenschaften, die Sie in der Abkürzung nicht oft sehen, sind Position und Anhang. Als Auffrischung wollen wir uns einmal ansehen, was diese beiden sind.
Hintergrund-Anhang bezieht sich darauf, ob das Hintergrundbild mit der Seite verschoben wird oder nicht. Der Standardwert ist scrollenDas bedeutet, dass Sie das Bild aus den Augen verlieren, wenn Sie auf der Seite nach unten scrollen, genau wie beim restlichen Inhalt. Wenn Sie dies ändern FestDer Hintergrund bleibt an der Stelle, an der er sich befindet, während der Rest des Inhalts über den oberen Rand blättert.
Hintergrundposition bezieht sich darauf, wo das Bild innerhalb des Elements platziert wird. Sie können etwas generisches verwenden, z. B. links oben, unten rechts oder in der Mitte oder etwas spezifischeres, beispielsweise einen Prozentwert oder einen Pixelwert.
Hier ist die lange Version mit diesen beiden.
Beachten Sie die Bestellung hier, da wir in der Kurzfassung dieselbe Reihenfolge verwenden:
- Hintergrundfarbe
- Hintergrundbild
- Hintergrund Wiederholung
- Hintergrundanhang
- Hintergrundposition
Hintergrund-Kürzel mit allen fünf Werten
Hier werfen wir all dies in Bezug auf die Reihenfolge, die wir gerade umrissen haben. Fühlen Sie sich frei, einen von ihnen auszulassen, um die Standardeinstellungen wiederherzustellen.
Margin und Padding
Ein weiterer Ort, an dem Sie zweifellos eine Abkürzung gesehen haben, ist der Randbereich und das Polster. Hier funktioniert dies auf dieselbe Weise für beide, also gebe ich nur Beispiele für die Marge und Sie können es selbst auf die Polsterung anwenden.
Margin: Der lange Weg
Hier haben wir den üblichen Weg, Ihre Margen einzustellen. Ich habe jeden auf einen willkürlichen Wert gesetzt. Die wichtigsten Punkte, die zu beachten sind, sind die Reihenfolge und die Tatsache, dass sie alle unterschiedlich sind. Beides wirkt sich auf die Abkürzung aus.
Margin Shorthand
Das Definieren von Rändern in einer Abkürzung ist eine ziemlich vielseitige Technik, die viel Platz spart, egal wie Sie das tun. Grundsätzlich werfen Sie einfach alle Ihre Werte direkt in die Margin-Eigenschaft.
Die Reihenfolge hier ist sehr wichtig. Um sich daran zu erinnern, wie das funktioniert, denken Sie nur an eine Uhr. Es beginnt oben und dreht sich im Uhrzeigersinn und trifft auf jede Kante. Zuerst ist der obere Rand, dann der rechte Rand, der untere Rand und der linke Rand.
Noch einfacher ist es, alle Margin-Eigenschaften als gleich zu deklarieren. Wenn Sie nur einen Wert eingeben, gilt dies für jede Eigenschaft. Der nachstehende Code ergibt auf jeder Seite einen Rand von 10px.
Angenommen, Sie haben wirklich nur zwei verschiedene Werte, mit denen Sie arbeiten möchten. Das bedeutet, dass der obere und der untere Rand einen Wert haben und der linke und der rechte Rand einen anderen. Wenn Sie den oberen Rand der Kurzschrift deklarieren, stimmt der untere Rand überein. Wenn Sie den rechten Rand der Kurzschrift deklarieren, entspricht der linke Rand.
Dies gilt auch, wenn Sie drei Werte angeben. Der folgende Code setzt also den oberen, rechten und unteren Rand manuell, während der linke automatisch von rechts ergriffen wird.
Grenze: Der lange Weg
Der Rahmen verfügt über drei Haupteigenschaften: Breite, Stil und Farbe. Diese werden einzeln wie folgt ausgeschrieben:
Sie können die Reihenfolge dieser Eigenschaften ein wenig beeinflussen, wenn Sie zur Kurzversion wechseln. Um eine vollständige Kompatibilität zu gewährleisten, sollten Sie die Standardreihenfolge jedoch beibehalten.
Border-Kürzel
Hier ist die Kurzfassung dieser drei Rahmeneigenschaften.
Eine andere Sache, die Sie mit Grenzen machen können, ist, jede Seite der Grenze anders zu erklären. Hier sehen wir die Abkürzung für die Abkürzung der Umrandung immer noch einzeln.
Alternativ können Sie eine der drei Begrenzungseigenschaften anvisieren und diese im Uhrzeigersinn anwenden, genau wie bei der Abkürzung margin. Beachten Sie, wie die Deklaration der zweiten Breite die erste überschreibt.
Im Folgenden erhalten Sie eine durchgehende rote Umrandung mit 2 Pixeln oben, 4 Pixeln rechts, 8 Pixeln unten und 16 Pixeln links.
In ähnlicher Weise erhalten Sie einen 5px-Rahmen, der oben und unten blau und links und rechts rot ist.
Kurzform umreißen
Ich möchte nicht zu viel Zeit auf dem Outline-Grundstück verbringen, nur weil der Support nicht so gut ist und Sie ihn wahrscheinlich kaum nutzen. Der Vorteil ist, dass im Gegensatz zum Rahmen Konturen Ihr Layout nicht beeinflussen. Wenn Sie jemals eine Gliederung verwenden, ist die Syntax der für die Grenzen ziemlich ähnlich.
Das Folgende repräsentiert die Werte für Umrissbreite, Umriss-Stil und Umrissfarbe in dieser Reihenfolge.
Schrift: Der lange Weg
Es gibt eine Reihe verschiedener Schrifteigenschaften, mit denen Sie das Erscheinungsbild Ihrer Typografie ändern können. Infolgedessen kann sich Ihr Stylesheet schnell mit Stilblöcken füllen (siehe unten).
Schriftkürzel
Schriftkurzschrift ist ein wirklich schwerer Hitter, sofern Platz gespart wird. Wir können alle oben genannten Informationen in eine kurze und überraschend leicht lesbare Zeile packen.
Die meiste Zeit sind Sie wahrscheinlich viel kürzer, weil Sie nicht alle diese Styling-Optionen benötigen. Sie können den Schriftstil, die Variante und die Gewichtung festlegen und einfach eine schnelle Schriftgröße, Zeilenhöhe und Schriftfamilie angeben.
Listen: Der lange Weg
Die Abkürzung in der Liste ist wirklich interessant, da ich sowieso nur selten jemanden mit diesen Eigenschaften durcheinander sehe. Wenn Sie ein Listenmaster sind, können Sie jedoch die drei unten aufgeführten Eigenschaften des Listenstils verwenden.
List Abkürzung
Dieses ist ziemlich vorhersehbar, einfach diese drei Eigenschaften in "Listen-Stil" und du bist gut zu gehen.
CSS3-Übergänge: Der lange Weg
CSS3-Übergänge sind offensichtlich noch recht neu und daher ist die Unterstützung bei Browsern unterschiedlich. Hier werden wir verwenden Übergang aber Sie würden wahrscheinlich ausbrechen -Webkit-Übergang, -Moz-Übergang, und -o-Übergang auch.
Hier sind die grundlegenden Eigenschaften einzeln aufgeführt:
CSS-Übergangskurzschrift
Dies ist eine Eigenschaft, bei der Sie fast immer die verwendete Abkürzung anstelle der langen Version sehen. Wenn Sie jemals CSS-Übergänge durchgeführt haben, sind Sie mit der folgenden Syntax wahrscheinlich besser vertraut.
Und wie bereits erwähnt, müssen Browser, da wir immer noch nicht recht einheitlich sind, diese unangenehmen kleinen Herstellerpräfixe einfügen. Hier ist ein typisches Beispiel für den Code, den Sie für einen Übergang mit maximaler Kompatibilität verwenden würden (IE wird immer noch ausgelassen).
Fazit
CSS Abkürzung ist ein großartiges Werkzeug, um Zeit und Platz zu sparen. Wenn Sie mit der Syntax vertraut sind, könnten Sie argumentieren, dass die Abkürzung tatsächlich lesbarer ist als die lange Version. Für Neulinge ist es jedoch viel einfacher, beschriftete Eigenschaften zu lesen. Denken Sie also daran, was Ihr Ziel und Ihre Zielgruppe für ein bestimmtes Projekt sind. Wenn Sie ein Tutorial schreiben, möchten Sie vielleicht einzelne Werte auflisten oder zumindest Ihre Abkürzung erläutern, obwohl die Verkürzung perfekt ist.
Hinterlassen Sie einen Kommentar und teilen Sie uns mit, für welche Eigenschaften Sie im Allgemeinen die Abkürzung verwenden und ob Sie aus den obigen Beispielen etwas gelernt haben.