Eine der effektivsten Möglichkeiten, CSS zu schreiben, ist die Verwendung von Abkürzungen. Durch die Verwendung von Abkürzungen können Sie Ihre CSS-Dateien kleiner und besser lesbar machen. Das Verständnis der Abkürzungen von CSS-Eigenschaften gehört ebenfalls zu den Grundkenntnissen von Front-End-Entwicklungsingenieuren. Heute fassen wir die Abkürzungen der CSS-Eigenschaften systematisch zusammen.
Farbabkürzung
Die Abkürzung für Farbe ist die einfachste. Wenn der Farbwert hexadezimal ist und der Wert jeder Farbe gleich ist, kann er wie folgt geschrieben werden:
| Farbe: #113366 |
kann abgekürzt werden als
| Farbe: #136 |
Abkürzungen können überall dort verwendet werden, wo hexadezimale Farbwerte verwendet werden, z. B. Hintergrundfarbe, Rahmenfarbe, Textschatten, Boxschatten usw.
Kastengröße
Hier werden hauptsächlich zwei Attribute verwendet: Rand und Polsterung. Wir nehmen den Rand als Beispiel, und Polsterung ist dasselbe. Das Feld hat vier Richtungen: oben, unten, links und rechts, und jede Richtung hat einen Rand:
| margin-top:1px; margin-right:1px; margin-botton:1px; margin-left:1px; |
Diese vier Werte können zusammen abgekürzt werden:
| Rand: 1px 1px 1px 1px; |
Die Reihenfolge der Abkürzungen ist oben->rechts->unten->links. Im Uhrzeigersinn. Wenn die Werte der gegenüberliegenden Seiten gleich sind, können sie weggelassen werden:
| margin:1px;// Die Ränder in den vier Richtungen sind gleich, was margin:1px 1px 1px 1px entspricht; margin:1px 2px;//Der obere und der untere Rand sind beide 1 Pixel groß, und der linke und rechte Rand sind beide 2 Pixel groß, was margin:1px 2px 1px 2px entspricht margin:1px 2px 3px;// Der rechte Rand und der linke Rand sind gleich, was margin:1px 2px 3px 2px entspricht; margin:1px 2px 1px 3px;//Beachten Sie, dass hier keine Abkürzungen verwendet werden können, obwohl der obere und untere Rand hier jeweils 1 Pixel betragen. |
Grenze
Border ist ein relativ flexibles Attribut. Es verfügt über drei Unterattribute: border-width, border-style und border-color.
| Rahmenbreite: Zahl + Einheit; Randstil: keine ||. gestrichelter Rand ||. Rahmenfarbe: Farbe; |
Es kann in der Reihenfolge von Breite, Stil und Farbe abgekürzt werden:
| Grenze:5px solide #369; |
Manchmal kann der Rand einfacher geschrieben werden und einige Werte können weggelassen werden, aber achten Sie bitte darauf, welche notwendig sind. Sie können es auch testen:
| border:groove red; // Ratet mal, wie breit dieser Rand ist? border:solid; //Wie würde das aussehen? border:5px; //Ist das in Ordnung? border:5px red; //Ist das in Ordnung? ? border:red; //Ist das in Ordnung? ? ? |
Wie Sie dem obigen Code entnehmen können, beträgt die Standardbreite des Rahmens 3 Pixel und die Standardfarbe ist Schwarz. Bei der Abkürzung „border“ ist „border-style“ erforderlich.
Sie können für jede Kante auch Abkürzungen verwenden:
| border-top:4px solid #333; border-right:3px solid #666; border-bottom:3px solid #666; border-left:4px solid #333; |
Sie können für jedes Attribut auch Abkürzungen verwenden:
| border-width: 1px 2px 3px; // Es können bis zu vier Werte verwendet werden. Die Abkürzungsregeln ähneln der Abkürzung für die Boxgröße, die gleichen wie unten Randstil: durchgezogene gestrichelte gepunktete Rille; Randfarbe: rot blau weiß schwarz; |
Gliederung
Der Umriss ähnelt dem Rand. Der Unterschied besteht darin, dass der Rand das Boxmodell beeinflusst, der Umriss jedoch nicht.
| Umrissbreite: Zahl + Einheit; Umrissstil: keine ||. gestrichelter Rand ||. Umrissfarbe: Farbe; |
Kann abgekürzt werden als:
| Umriss: 1 Pixel durchgehend rot; |
In ähnlicher Weise ist bei der Abkürzung „outline“ auch „outline-style“ erforderlich, und die anderen beiden Werte sind optional. Der Standardwert ist derselbe wie „border“.
Hintergrund
Hintergrund ist eine der am häufigsten verwendeten Abkürzungen und enthält die folgenden Eigenschaften:
| Hintergrundfarbe: Farbe ||. #hex ||. Hintergrundbild:url(); Hintergrundwiederholung: Wiederholung ||. Wiederholung-x ||. Hintergrundposition: XY ||. (oben||unten||Mitte) (links||rechts||Mitte); Hintergrundanhang: scrollen || behoben; |
Die Abkürzung von Hintergrund kann die Effizienz von CSS erheblich verbessern:
| Hintergrund:#fff url(img.png) no-repeat 0 0; |
Auch die Abkürzung für Hintergrund hat einige Standardwerte:
| Hintergrund: transparent, keiner, wiederholen Sie den Bildlauf oben links; |
Die Werte der Hintergrundeigenschaften werden nicht vererbt. Sie können nur einen davon deklarieren und der Standardwert wird auf die anderen Werte angewendet.
Schriftart
Die Schriftartenabkürzung ist auch die am häufigsten verwendete und eine der Möglichkeiten, effizientes CSS zu schreiben.
Schriftart enthält die folgenden Eigenschaften:
| Schriftstil: normal ||. schräg ||. Schriftartvariante:normal ||. Schriftstärke: normal ||. fetter ||. Schriftgröße: (Zahl+Einheit) || (xx-klein - xx-groß); Zeilenhöhe: normal || (Zahl+Einheit); Schriftfamilie:Name,"mehr Namen"; |
Jedes Attribut der Schriftart hat auch einen Standardwert. Es ist relativ wichtig, sich diese Standardwerte zu merken:
| Schriftstil: normal; Schriftartvariante:normal; Schriftstärke: normal; Schriftgröße: erben; Zeilenhöhe: normal; Schriftfamilie: erben; |
Tatsächlich ist die Abkürzung der Schriftart diejenige, die unter diesen Abkürzungen die größte Vorsicht erfordert. Eine leichte Nachlässigkeit kann daher unerwartete Folgen haben. Daher sind viele Menschen mit der Verwendung der Schriftartabkürzung nicht einverstanden.
Aber hier ist eine kleine Anleitung, ich glaube, sie wird Ihnen helfen, die Abkürzung der Schriftart besser zu verstehen:
Listenstil
Das vielleicht am häufigsten verwendete Attribut von Listen ist:
| Listenstil: keiner |
Es löscht alle Standardlistenstile, wie z. B. Zahlen oder Punkte.
list-style hat außerdem drei Attribute:
| list-style-type:none ||. Kreis || Listenstilposition: innerhalb ||. außerhalb || list-style-image: (url) || keines || |
Die Standardattribute des Listenstils lauten wie folgt:
| list-style:disc außerhalb keiner |
Es ist zu beachten, dass, wenn Bilder im Listenstil definiert sind, die Priorität der Bilder höher ist als im Listenstiltyp, zum Beispiel:
| Listenstil: Kreis innerhalb der URL (../img.gif) |
Wenn in diesem Beispiel img.gif vorhanden ist, wird das zuvor festgelegte Kreissymbol nicht angezeigt.
PS: Tatsächlich gibt es in list-style-type viele nützliche Stile
Randradius (Eckenradius)
Border-radius ist ein neu hinzugefügtes Attribut in CSS3, das zur Implementierung abgerundeter Ränder verwendet wird. Der aktuelle Nachteil dieses Attributs besteht darin, dass es von jedem Browser unterschiedlich unterstützt wird. Gecko (Firefox) und Webkit (Safari/Chrome) müssen die privaten Präfixe -moz- bzw. -webkit- verwenden. Was noch verwirrender ist, ist, dass Sie eine große Anzahl privater Attribute schreiben müssen, wenn das Attribut „border-radius“ einer einzelnen Ecke in den beiden Browsern unterschiedlicher geschrieben wird:
| -moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; border-bottom-left-radius:6px; border-top-left-radius:6px; border-top-right-radius:6px; |
Äh, bist du schon geblendet? Dies dient lediglich dazu, die Situation zu erreichen, in der die obere linke Ecke nicht abgerundet ist und die anderen drei Ecken abgerundet sind. Für den Grenzradius empfiehlt Shenfei daher dringend die Verwendung der Abkürzung:
| -moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; Randradius:0 6px 6px; |
Das ist viel einfacher. PS: Leider unterstützt das neueste Safari (4.0.5) diese Abkürzung noch nicht ... (Danke @fireyy)
Das ist alles. Gibt es noch andere Attribute, die abgekürzt werden können? Jeder ist herzlich willkommen, gemeinsam darüber zu diskutieren.