▸ Home / Tipps & Tricks /

CSS Shorthand Properties

CSS Shorthand Properties (auf Deutsch »Kurzschreibweisen«) ermöglichen es, mehrere verwandte CSS-Eigenschaften in einer einzigen Anweisung festzulegen. Sie tragen dazu bei, den Code übersichtlich zu halten und die Dateigröße zu reduzieren. Mit Shorthand Properties wie padding, flex oder background lassen sich CSS-Eigenschaften effizient bündeln. Sie erfordern jedoch ein genaues Verständnis der Reihenfolge und Syntax, um Fehler zu vermeiden.

Padding oder Margin


.margin .padding {
	margin-top: 30px;
	margin-right: 10px;
	margin-bottom: 40px;
	margin-left: 20px;
	/*kurz: Reihenfolge im 
	Uhrzeigersinn - top right 
	bottom left*/
	margin: 30px 10px 40px 20px;
	/*wenn mehrere Werte gleich*/
	margin: 30px 10px;
}

Border


.border {
	border-width: 5px;
	border-style: solid;
	border-color: #666;
	/*kurz: Reihenfolge 
	border:[border-width]
	[border-style][border-color]*/
	border: 5px solid #666;
}

Outline


.outline {
	/*outline-Breite wird nicht 
	zum Element dazu addiert*/
	outline-width: thin;
	outline-style: dotted;
	outline-color: #FF0;
	/*kurz: Reihenfolge outline:
	[outline-width][outline-style]
	outline-color]*/
	outline: thin dotted white;
}

Font


.font {
	font-style: normal;
	font-variant: normal;
	font-weight: 300;
	font-size: 1.4em;
	line-height: 1.5;
	font-family: arial, sans-serif;
	/*kurz*/
	font: normal normal 300 1.4em/1.5 
	arial, sans-serif;
}

Background


.background {
	background-color: #066;
	background-image: url(img.jpg);
	background-repeat: repeat;
	/*immer von horizontal-vertikal-
	Reihenfolge ausgehend*/
	background-position: left top;
	background-attachment: fixed;
	/*kurz Reihenfolge immer:
	[background-color]
	[background-image]
	[background-repeat]
	background-position]
	[background-attachment]
	[background-size], egal wenn 
	ein Wert fehlt*/
	background: #066 url(img.jpg) 
	repeat fixed left top;
	/*Mehrere Hintergrundbilder*/
	background: url(img.jpg) center/cover 
	no-repeat fixed, url('overlay.png') 
	center/contain no-repeat;
}

Flex


.flexbox {
	/* Wachstum erlaubt */
	flex-grow: 1;
	/* Kein Schrumpfen erlaubt */
	flex-shrink: 0;
	/* Basisgröße entspricht Inhalt*/
	flex-basis: auto;
	/*kurz: Reihenfolge flex-grow, 
	flex-shrink und flex-basis*/
	flex: 1 0 auto;
	/*oder nur Angabe flex-grow und 
	flex-basis, Flex-shrink wird 
	automat auf Standartwert 1 ges*/
	flex: 1 auto;
	/*nur ein Wert: flex-grow und 
	flex-shrink entspr 1, flex-basis 
	entspr auto. Der Container wächst 
	damit proportional mit anderen 
	Flex-Elementen und nimmt so viel 
	Platz wie möglich ein.*/
	flex: 1;
}