CSS Kurzschreibweisen

CSS Kurzschreibweisen

18.09.2020 | in: Webdesign | von: elico

font

font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

(Quelle: W3C, Punkt 15.8 Font Shorthand Property)

Beispiel:

font-style: italic;
font-variant:small-caps;
font-weight:bold;
font-size:1.4em;
line-height:1.5;
font-family:Georgia, serif;

Kurzschreibweise:

font: italic small-caps bold 1.4em/1.5 Georgia, serif;

CSS-Eigenschaften, welche den Standardwert (normal) behalten sollen, kannst du in der Reihenfolge einfach auslassen, z.B.:

font: bold 1.4em/1.5 Georgia, serif;

2. margin und padding

Die Reihenfolge der Werte ist:

margin: [abstand oben][abstand rechts][abstand unten][abstand links]

Beispiel:

margin-top: 30px;
margin-right: 10px;
margin-bottom: 40px;
margion-left: 20px;

Kurzschreibweise:

margin: 30px 10px 40px 20px;

 

3. background

Die Reihenfolge der Werte ist:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

(Quelle: W3C, Punkt background)

Beispiel:

background-color:#066;
background-image: url(„bg.png“);
background-repeat:repeat;
background-attachment: fixed;
background-position:top left;

Kurzschreibweise:

background:#066 url(„bg.png“) repeat fixed top left;

Auch bei der Background-Eigenschaft kannst du nicht benötigte Werte weglassen, es wird dann automatisch der Standardwert genutzt.

4. list-style

Außerdem ist es noch sinnvoll, die CSS-Eigenschaften list-style-type (Art des Listenelements), list-style-position (Position des Listenelements) und list-style-image (Bild für Listenelement) in der einzelnen list-style Eigenschaft zusammen zu fassen.

Die Reihenfolge der list-style Eigenschaften lautet:
list-style: [list-style-type] [list-style-position] [list-style-image];

(Quelle: W3C, list-style property)

Beispiel:

list-style-type: square;
list-style-position: outside;
list-style-image: none;

Kurzschreibweise:

list-style: square outside;

5. border

Platzsparend und übersichtlich ist auch die Kurzschreibweise für border (Rahmen). Hier kannst du die Eigenschaften border-width (Rahmenbreite), border-style (Stil des Rahmens, z.B. als Fläche, gestrichelt, gepunktet usw.) und border-color (Rahmenfarbe) vereinen.

Die Reihenfolge der CSS-Eigenschaften bei border:
border: [border-width] [border-style] [border-color];

Beispiel:

border-width: 5px;
border-style: solid;
border-color: #666;

Kurzschreibweise:

border: 5px solid #666;

6. outline

Auch die drei CSS-Eigenschaften für die die Gestaltung von Outlines (Konturen) outline-width (Kontur-Breite), outline-style (Art der Kontur) und outline-color (Farbe der Kontur) können, ähnlich wie bei der border-Eigenschaft, in einer kürzeren Schreibweise geschrieben werden. Der Unterschied von outline im Gegensatz zu border ist übrigens, dass die Breite der outline nicht zum Element dazu addiert wird, sondern die Kontur quasi über dem Element liegt.

Die Reihenfolge der outline-Eigenschaften lautet:
outline: [outline-width] [outline-style] [outline-color];

Beispiel:

outline-width:thick;
outline-style:dotted;
outline-color:#FF0;

Kurzschreibweise:

outline: thick dotted #FF0;

7. transition

Die Reihenfolge der transition-Eigenschaften lautet zusammen geschrieben:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

Beispiel:

transition-property: opacity;
transition-duration: 3s;
transition-timing-function: ease-in;
transition-delay: 1s;

wird in der Abkürzung zu:

transition: opacity 2s ease 1s;

Damit die transition-Eigenschaft in Webkit-Browsern (Chrome und Safari) und Firefox funktioniert, musst du allerdings noch die Eigenschaften -webkit-transition und -moz-transition hinzufügen:

Kurzschreibweise:

transition: opacity 2s ease 1s;
-moz-transition: opacity 2s ease 1s;
-webkit-transition: opacity 2s ease 1s;

Weitere hilfreiche Tipps

Um deinen CSS-Code möglichst sauber, übersichtlich und klein zu halten kannst du außerdem das Online-Tool „Clean CSS“ nutzen. In den Einstellungen kannst du genau festlegen, welche Werte du gekürzt, zusammen gefasst und sortieren möchtest. Da beim Komprimieren des Stylesheets auch schnell einmal etwas schief gehen kann, solltest du aber vorab immer eine Sicherheitskopie deines Stylesheets machen.

Möchtest du dir ein CheatSheet mit den wichtigsten Kurzschreibweisen für CSS ausdrucken, kannst du die CSS-Kurzschreibweisen CheatSheets bei Dr.Web nutzen.

Quelle : https://www.elmastudio.de/praktische-css-kurzschreibweisen/