CSS kann auf den ersten Blick schwierig wirken, wenn du neu darin bist. Vielleicht bist du verwirrt über die verschiedenen CSS-Properties, was sie tun und wofür sie da sind. Keine Sorge, ich habe alles für dich.
Aber Kennst du die 80/20-Regel, die besagt, dass 80 % der Ergebnisse mit 20 % des Aufwands erzielt werden? So ist es auch in CSS. Deshalb werde ich in diesem Beitrag über die am häufigsten verwendeten CSS-Properties sprechen, die du unbedingt kennen musst.
Es wird ein Beitrag voller Informationen sein. Lasst uns loslegen.
A) Die korrekte Anzeige
Ein Display kann viele verschiedene Werte annehmen, aber nur 4 werden am häufigsten verwendet.
div {
display: block;
display: inline-block;
display: inline;
display: none;
}
block: Viele HTML-Elemente werden von den Stylesheets der Browser auf diese Art der Darstellung eingestellt. Dazu gehören <div>, <ul> und Textblöcke wie <p>. Elemente der Blockebene nehmen standardmäßig so viel Platz wie möglich ein und können nicht auf derselben horizontalen Linie mit anderen Darstellungsmodi platziert werden, einschließlich anderer Blockelemente. (Ausnahme: wenn sie nicht schwebend sind)
Mit Blockelementen hast du die Möglichkeit, die Breite und Höhe des Elements nach deinen Wünschen zu verändern, weshalb sie für Layouts verwendet werden
inline: Der Inline-Modus umschließt viele HTML-Elemente eng und ist die Standardeinstellung für alle Elemente, die nicht mit anderen Anzeigewerten angegeben sind. Als Inline-Elemente können Elemente nebeneinander in der gleichen Zeile platziert werden. Denk an den <strong>-Tag, der Elemente fett macht, den <em>-Tag, der kursiv macht, und <a>-Tags, mit denen du auf andere Webseiten verlinken kannst. Dies sind alles Beispiele für Inline-Elemente. Du kannst die Breite und Höhe eines Inline-Elements nicht ändern.
inline-block: Dies ist ein Anzeigewert, der die Eigenschaften von Blockelementen und Inline-Elementen kombiniert. Du kannst eine Höhe und Breite festlegen und das Element kann auf derselben horizontalen Linie wie andere Elemente erscheinen.
none: Mit dem Anzeigewert none wird das Element auf der Website ausgeblendet und nicht angezeigt. Dies ist sehr nützlich für CSS-Dropdown-Menüs, bei denen zusätzliche Optionen angezeigt werden, wenn du mit dem Mauszeiger über Navigationsmenüs fährst. Der Grund dafür ist, dass Elemente zunächst auf den Anzeigewert none gesetzt werden und der Anzeigewert bei Hover auf block geändert wird.
B) Die Breite und die Höhe
Die Eigenschaften Breite und Höhe werden zusammen mit display:block und display:inline verwendet, um die Breite und Höhe von HTML-Elementen bei der Erstellung einer Website festzulegen. Gängige Einheiten für Breite und Höhe sind:
px – Pixel.
em – Eine Maßeinheit, wobei 1 em = aktuelle Schriftgröße ist.
rem – Wurzel-Em. Dieselbe Maßeinheit wie em, macht das Leben aber viel einfacher ohne das Problem der Vererbung.
% – Prozentsätze.
auto – sehr nützliche Einheit, wird weiter unten erklärt.
Andere Maßeinheiten findest du auf der W3 Schools Website. Wenn du dich über den Unterschied zwischen px, em und rem wunderst, sieh dir diesen tollen Artikel von Jonathan Snook über die Schriftgröße mit rem an
Äußerst nützliche Eigenschaften wie max-width, min-width, max-height und min-height kommen ebenfalls ins Spiel, wenn du responsive Websites erstellst. Hier ist ein Beispiel dafür, wie auto und max-width verwendet werden können, um sicherzustellen, dass Bilder eng und genau in den verfügbaren Platz passen:
img {
max-width: 100%;
height: auto;
}
C) Ränder und Auffüllungen
Ränder und Auffüllungen sind Dinge, die auf jeden Fall vorkommen werden. Zu wissen, wie diese Dinge funktionieren, ist beim Schreiben von CSS sehr hilfreich.
Ränder und Abstände legen die Abstände zwischen den Elementen auf deiner Website fest. Sie sind sehr ähnlich und haben die gleichen Einheiten wie die oben erwähnten Breiten und Höhen.
Der einzige Unterschied zwischen Rändern und Abständen ist der Bereich, auf den sie Einfluss nehmen. Ränder wirken sich auf den Bereich außerhalb der Grenzen aus, während Auffüllungen den Bereich innerhalb der Grenze betreffen. Es ist sinnvoll, sich das folgende Box-Modell anzusehen:
CSS-Box-Modell
Normalerweise werden Ränder auf diese Weise geschrieben:
div{
margin-top: 20px;
margin-bottom: 20px;
margin-right: 10px;
margin-left: 10px
}
Sie können in Kurzschrift geschrieben werden, um die Codezeilen zu vereinfachen und sie leichter lesbar zu machen. Tatsächlich sind Kurzschriften die Standardpraxis und du solltest sie kennen. Hier ist eine kurze Erklärung:
div{
margin: 20px 10px 20px 10px;
/* Diese Abkürzung steht für Oben, Rechts, Unten, Links. Es ist einfacher, sich eine Uhr bei 12, 3, 6 bzw. 9 vorzustellen */
margin: 20px 10px 20px;
/* Dies bezieht sich auf Oben, Links und Rechts, Unten */
margin: 20px 10px;
/* Dies bezieht sich auf Oben und Unten, Links und Rechts */
margin: 20px;
/* Dies bezieht sich auf einen Rand von 20px auf allen 4 Seiten */
}
Extra-Tipp: Ränder mit auto auf der linken und rechten Seite werden verwendet, um ein Element mit dem Anzeigewert block zu zentrieren. Das wird einfach so geschrieben:
div {
margin: 0 auto;
}
D) Umrandung
Umrandungen sind… Umrandungen. Ich bin mir ziemlich sicher, dass du keine Erklärung brauchst, was Ränder sind.
Rahmen haben 3 verschiedene Eigenschaften, um die du dich kümmern musst:
border-width – Breite des Rahmens. Dieselben Einheiten wie width und height
border-style – Stil des Rahmens. Übliche Werte sind durchgezogen und gestrichelt. Eine vollständige Liste findest du auf der W3 Schools Website
border-color – Farbe des Rahmens. Es können Hex- und Rgb-Werte verwendet werden.
Anstatt die längere Version zu schreiben, kannst du den Rahmen auch so deklarieren:
div{
border: 1px solid black;
/* Breite, Stil und Farbe des Rahmens */
}
Ähnlich wie bei margins und paddings beziehen sich border auf alle 4 Seiten. Wenn du nur 1 oder 2 Seiten umranden willst, verwende ich im Allgemeinen lieber border-top, border-bottom, border-left oder border-right.
E) Schwebende Elemente
Schwebeflächen sind eines der wichtigsten Elemente auf einer modernen Website. Wenn du zwei Textspalten nebeneinander siehst, eine Seitenleiste mit Inhalt, wie du sie in meinem Blog siehst, und dein Browserfenster größer als 800 Pixel ist, hast du Floats in Aktion gesehen. Ein weiterer häufig genutzter Bereich für Floats sind Navigationselemente.
Kurz gesagt: Floats positionieren den Rand des gewünschten HTML-Inhalts am Rand einer Seite des übergeordneten Containers. Nachfolgende Floats werden dann an der Kante deines ersten floatenden Inhalts platziert. (je nachdem, ob du sie links oder rechts platzierst)
Floats haben 3 grundlegende Eigenschaften, die du oft verwenden wirst:
- links
- rechts
- keine – entfernt den Float
F) Floats löschen
Auch wenn Floats sehr nützlich sind, bereiten sie manchmal Kopfschmerzen, wenn sie nicht richtig gelöscht werden. Im Allgemeinen können 2 Arten von Problemen auftreten:
Float-Probleme
Es gibt 3 Hauptmethoden, um Floats zu löschen:
clear: Die Clear-Eigenschaft nimmt 3 Werte an: links, rechts oder beides. Wie du vielleicht schon vermutet hast, löscht clear:left; einfach alle Floats auf der linken Seite, clear:right; löscht Floats auf der rechten Seite und clear:both; sorgt dafür, dass alle Floats gelöscht werden.
overflow:hidden: Diese Methode eignet sich hervorragend, um sicherzustellen, dass das übergeordnete Element nicht wie in Problem 2 zusammenfällt. overflow:hidden; wird auf das übergeordnete Element gesetzt, um das Problem zu bekämpfen.
clearfix: Zweifellos hast du schon von clearfix gehört oder es in Tutorials gesehen. Es wird ebenfalls auf das übergeordnete Element gesetzt, um sicherzustellen, dass keine float-Probleme auftreten. Der Grundgedanke hinter dem clearfix-Hack ist, einen Inhalt (einen Punkt) nach dem Elternelement einzufügen, um das Elternelement zu zwingen, sich selbst zu löschen, da es nach den Floats einen Inhalt gibt.
In diesem Beitrag von Chris Coyier findest du tolle Schnipsel über den clearfix hack. Mehr über den Clearfix-Hack erfährst du auf den Seiten, auf die er verlinkt, oder du gehst ganz nach unten und holst dir die neueste Version.
G) Die Farbe
Farbe bezieht sich hier auf die Textfarbe. Sie nimmt einen #hex-Wert oder einen rgb-Wert wie bei den Rahmenfarben an.
H) Hintergrund
Background bezieht sich auf den Hintergrund des HTML-Elements. Wie viele CSS-Eigenschaften hat auch background eine Kurzbezeichnung.
body {
background:transparent image-url(‚image.png‘) left top no-repeat;
/* Alle Hintergrunddefinitionen sind optional, aber mindestens eine muss angegeben werden. Die oben genannten Werte sind Standardwerte für background, wenn du etwas nicht definiert hast */
}
Hier sind die Erläuterungen zu den Hintergrundeigenschaften in der Reihenfolge von links nach rechts:
background-color: Farbe des Hintergrunds. Nimmt den #hex-Wert oder einen rgb-Wert an
background-image: url(URI). Nimmt den Pfad zu deinem Bild an. Verwende das obige Beispiel, wenn sich das Bild im selben Ordner befindet.
Um einen Ordner tiefer zu gehen, gibst du einfach den Dateinamen vor image.png ein. Beispiel: css/image.png.
Um einen Ordner höher zu gehen, gibst du den Dateinamen mit „…/“ ein. Beispiel: …/css/image.png
background-repeat: ob du möchtest, dass der Hintergrund wiederholt wird, wenn die Breite die Hintergrundgröße überschreitet. Andere Werte sind repeat, repeat-x und repeat-y.
background-position: Position des Hintergrunds relativ zum HTML-Element. Hier werden zwei Werte benötigt, X und Y, wobei X für den Versatz von links und Y für den Versatz von oben steht. Nimmt entweder Einheits-Werte an (wie bei width und height) oder left,center,right und top,center,bottom für links bzw. rechts.
I) Schriftarten
Schriftarten beziehen sich im Allgemeinen auf das Aussehen des Textes auf deiner Website. Es gibt ein paar Dinge, auf die du achten solltest. Wie andere Eigenschaften hat auch die Schriftart eine Kurzbezeichnung. Beachte, dass das Kürzel für die Schriftart in der Regel nur einmal in der gesamten CSS-Datei vorkommt. Es ist üblich, die verschiedenen Eigenschaften an anderen Stellen zu verwenden:
- body {
font: italic small-caps bold 20px/1.5 „Proxima Nova“, helvetica, arial, sans-serif;
/* Schriftartenkurzschrift */
}
Hier sind die Erklärungen für die Schrifteigenschaften in der Reihenfolge von links nach rechts: - font-style: Stil der Schriftart. Gültige Werte sind entweder kursiv oder normal. Die Voreinstellung ist normal. Optionale Eigenschaft in der Schriftart-Verknüpfung
- font-variant: Variante der Schriftart. Gültige Werte sind normal und Kapitälchen. Der Standardwert ist normal. Optionale Eigenschaft in der Schriftartenkurzschrift und wird nicht oft verwendet
- font-weight: Gewicht der Schrift. Bestimmt, ob der Text fett ist. Gültige Werte sind normal, bold, bolder oder 100 – 900. Optionale Eigenschaft in der Schriftartenkurzschrift
- font-size: Größe der Schrift. Nimmt einen Wert an, der dem der Breite und Höhe entspricht.
- line-height: Bestimmt den Abstand über und unter dem Text. Sehr wichtig, um eine gute Lesbarkeit zu gewährleisten. Nimmt die gleichen Werte wie font und auch einen einheitenlosen Wert an. Wenn ein einheitenloser Wert verwendet wird, bedeutet das, dass die Zeilenhöhe ein Vielfaches des angegebenen Wertes ist.
- font-family: Hier kannst du die Schriftarten und den Fontstack angeben, die du verwenden möchtest.
Mein kurzes Fazit
Das war’s – ich habe dir DIE CSS-Eigenschaften aufgelistet, die du unbedingt kennen musst. Was dir jetzt noch bleibt, ist, diese Seite irgendwo als Backup aufzubewahren, falls du dir unsicher bist, welche wichtigen CSS-Eigenschaften du dir merken musst. Wenn du diesen Beitrag nützlich fandest, tu mir bitte den Gefallen und teile ihn mit anderen über Instagram oder per Mail!
