Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.
Rahmenlinien gestalten mit border: Breite, Stil und Farbe – Tutorial zu CSS
Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen
Rahmenlinien gestalten mit border: Breite, Stil und Farbe
Jetzt soll es um die Border gehen, um die Rahmenlinie, die man sehr, sehr flexibel und vielseitig gestalten kann. Ich habe hier die Übungsdatei zu diesem Film in den Übungsordner kopiert und im Chrome geöffnet. Links ist article infobox markiert. Sie sehen, die Gestaltung ist recht simpel Hintergrundfarbe, Padding, Margin. Und jetzt soll es hier zusätzlich ein Border geben. Und zwar hat Border eigentlich immer drei Werte. Eine Breite mit widths, ein Stil, einen Style – und der häufigste ist wahrscheinlich solid – und zum Schluss eine Farbe, die man selbst definieren kann. Das ist so eine typische Borderangabe. Border ist short hand und gilt rund herum. Das sieht man auf den ersten Blick. Short hand heißt Kurzschreibweise, und wir werden sehen, da gibt es noch andere Möglichkeiten, eine Rahmenlinie zu definieren. Oftmals hat man dünne Rahmlinien, man kann aber auch die Dicke selbst bestimmen. Hier 100 oder 10 oder so. Wenn ich das mal wegnehme hier, dann sieht man den Rahmen besser…
Inhalt
-
-
-
-
-
-
-
-
(Gesperrt)
Die Breite begrenzen: width, min-width und max-width4 Min. 14 Sek.
-
(Gesperrt)
Abstand zwischen Text und Rand: padding3 Min. 49 Sek.
-
(Gesperrt)
Rahmenlinien gestalten mit border: Breite, Stil und Farbe4 Min. 40 Sek.
-
(Gesperrt)
Abstände zwischen den Elementen mit margin3 Min. 16 Sek.
-
(Gesperrt)
Collapsing margins und wie man sie vermeidet4 Min. 57 Sek.
-
(Gesperrt)
Das intuitivere Box-Modell: box-sizing: border-box4 Min. 59 Sek.
-
(Gesperrt)
Challenge: das Box-Modell für Inline-Boxen1 Min. 22 Sek.
-
(Gesperrt)
Solution: Box-Modell3 Min. 27 Sek.
-
(Gesperrt)
-
-
-