CSS -Grenze kollaps

CSS -Code:
Wir wenden einige Eigenschaften auf die Überschrift an, um unsere Überschrift attraktiver zu machen. Wir ändern seine „Schriftfamilie“ und setzen es auf „Arial“. Der Stil dieses Übergangstextes ist „kursiv“ und die Farbe dieser Überschrift ist „blau“. Jetzt gehen wir zur Tabelle und setzen den Rand der Tabelle als „1PX“ in Breite, „Fest“ in Typ und „schwarz“ in Farbe. Das Hauptkonzept wird hier verwendet, das „Grenzkollapse“ ist. Wir verwenden diese Eigenschaft und setzen diesen „Grenzkollapse“ auf „Zusammenbruch“.

Ausgang:
Schauen wir uns das folgende Bild an, in dem die Ausgabe angezeigt wird. Sie können sehen, dass der Rand der Tabelle Single ist.

Beispiel #2
In diesem Fall bearbeiten wir die vorherige Tabelle ein wenig. Hier fügen wir der vorherigen Tabelle zwei weitere Spalten hinzu und verwenden die Eigenschaft „Grenzkollapse“ in dieser neuen Tabelle erneut.

CSS -Code:
Im CSS-Code verwenden wir eine andere Eigenschaft, die die Eigenschaft „Grenzabteilung“ darstellt. Sie werden sehen.

Wir bearbeiten die „Schriftfamilie“ der Überschrift. Diesmal verwenden wir "Calibri" als "Schriftfamilie" der Überschrift. Die „Farbe“, die wir hier für die Überschrift verwenden, ist "rot". Wenden Sie nun die Eigenschaft „Grenze“ erneut für den Tisch, die Zelle und die Überschrift der Tabelle an. Der Rand all dieser Eigenschaften ist auf "2px" mit einer "festen" Art und "grünen" Farbe eingestellt. Die Eigenschaft "Grenzkollapse" wird auf "Zusammenbruch" eingestellt. Dann verwenden wir den „Grenzabstand“, um Platz zwischen dem Rand der Tabelle und den Zellen der Tabelle zu geben. Wir setzen es auf "20px".

Ausgang:

Hier zeigt der Ausgang keinen Unterschied in der Grenze der Tabellen und Zellen. Es erscheint genauso wie in der vorherigen Abbildung. Dies bedeutet, dass die Eigenschaft „Grenzabteilung“ den Tischgrenzraum nicht ändert.

Beispiel #3
Hier erstellen wir zwei verschiedene Tabellen auf die gleiche Weise wie zuvor in unserem ersten Beispiel. Wir erstellen zwei Tabellen, damit wir erfahren können, wie diese „Grenzkollapse“ -Reität anders funktioniert als die „separate“ Grenzeigenschaft.

CSS -Code:
Die „Schriftfamilie“ der Überschriften ist „Times New Roman“ mit einer „blauen“ Farbe. Der "Rand" beider Tabellen ist auf die "orange" Farbe und "2PX" des "soliden" Typs eingestellt. Wir verwenden die Eigenschaft „Grenzkollapse“ in Tabelle 1. Wir verwenden auch die andere „Grenzkollapse“ in Tabelle 2, aber dieses Mal setzen wir diese Eigenschaft als „getrennt“,.

Ausgang:
Hier haben wir zwei Tabellen in der Ausgabe. Die erste Tabellengrenze ist die gleiche wie in unseren vorherigen Beispielen. Aber die zweite Tabellengrenze ist anders, weil wir das „getrennte“ mit dem „Grenzkollapse“ verwendet haben. Der Rand der Tabelle ist vom Rand der Zellen in einer Tabelle getrennt.

Beispiel #4
Hier haben wir wieder zwei Tische, die wir in Beispiel 3 entworfen haben. Jetzt ändern wir einige Stile dieser Tabellen, verwenden die Eigenschaft „Grenzabteilung“ auf beiden Tabellen und überprüfen den Unterschied in beiden Tabellen.

Diesmal ist die „Schriftfamilie“ der Überschriften „algerisch“ und die Farbe ist „kastanienbraun“. Der Tischrand ist „Magenta“ in Farbe. Tabelle 1 verwendet den "Zusammenbruch" mit dem "Grenzkollapse" mit einem "Grenzbereich" von "10px". Für Tabelle zwei verwenden wir einen „separaten“ Rand und der „Grenzbereich“ ist auch „10px“. Der Ausgang zeigt den Unterschied.

Ausgang:
Im Ausgang können Sie leicht den Unterschied zwischen Tabelle 1 und Tabelle zwei erkennen. Dies zeigt, dass der „Grenzabstand“, wenn wir den „Grenzkollaps: Grenze“ verwenden. Wenn wir jedoch den „Grenzkollapse: getrennt“ verwenden, können wir den Abstand der Grenze zwischen den Zellen und der Tabelle nach unserer Wahl festlegen.

Beispiel Nr. 5
Hier wenden wir die drei Eigenschaften der Tischgrenze an. Zunächst verwenden wir die Eigenschaft "Grenzkollapse" in Tabelle 1, die als "Zusammenbruch" festgelegt ist. In der zweiten Eigenschaft ändern wir die Farbe der Grenze in „mittelgroße Meeresgrün“. In der dritten Eigenschaft verwenden wir den „Grenzbereich: 10px“. Danach verwenden wir die gleichen Eigenschaften in Tabelle 2, verwenden jedoch die "getrennte" anstelle von "Zusammenbruch" in der Eigenschaft "Grenzkollapse". Außerdem setzen wir die Farbe des Randes auf „lila“ und verwenden den gleichen „Grenzabstand“. Schauen Sie nun, wie es funktioniert.

In Tabelle 1 ändert sich keine Änderung. Es gibt keinen Abstand zwischen dem Rand der Tabelle und den Zellen. Die Farbe des Tisches ist die gleiche. Die Eigenschaft „Grenzfarben“ wirkt sich nicht auf die Tabelle aus, da wir den Rand der „Zusammenbruch“ in Tabelle 1 verwenden. In Tabelle 2 können Sie jedoch sehen, dass die Farbe des Tabellenrandes und der Zellrand unterschiedlich sind. Außerdem gibt es einen Abstand von „10px“ zwischen der Rand der Zelle und der Grenze der Tabelle.

Abschluss

In diesem Tutorial haben wir die Eigenschaft „Grenzkollapse“ verwendet und den Unterschied gelernt, wenn wir mit der Eigenschaft „Grenzkollapse“ „getrennt“ und „Zusammenbruch“ verwendeten. Wir werden auch den Ausgang gezeigt, in dem der Unterschied sowohl in "getrennt" als auch "Zusammenbruch" sichtbar ist. Sie können dieses Konzept leicht darüber erhalten, wie sich beide Eigenschaften voneinander unterscheiden. Sie haben gelernt, was passiert, wenn wir das „getrennte“ und „Zusammenbruch“ mit der Eigenschaft „Grenzkollapse“ in CSS verwenden.

• « CSS Attr
• CSS Grenz-links-Eigentum »