Spalteneigenschaften in CSS | Erklärt
- Säulenzähleigenschaft
- Säule-Fill-Eigenschaft
- Eigenschaft Säulenlücken
- Säulenregeleigenschaft
- Säulenregel-Farben-Eigenschaft
- Eigenschaft im Säulenregel
- Säulenregelweite
- Säulen-Span-Eigenschaft
- Säulenbritteigenschaft
- Spalteneigenschaft
Lassen Sie uns sie ausführlich lernen.
Säulenzähleigenschaft
Um den Inhalt zu teilen, das ein Element in die Anzahl der angegebenen Spalten enthält, wird diese Eigenschaft verwendet.
Syntax
Säulenzählung: Auto | Nummer | initial | erben;Parameter erklärt
Auto: Dies ist ein Standardwert, der die Anzahl der Spalten anhand anderer Eigenschaften wie Spaltenbreite bewertet.
Nummer: Dieser Wert unterteilt den Inhalt in die angegebene Anzahl von Spalten.
Beispiel
Nehmen wir an, Sie möchten Ihren Inhalt in zwei Spalten teilen und dann dem folgenden Beispiel folgen möchten.
Im obigen Beispiel haben wir einen langen Absatz genommen und ihn in einen Div-Behälter gelegt. Mit der Säulenzähleigenschaft haben wir den Absatz in zwei Spalten aufgeteilt.
Säule-Fill-Eigenschaft
Die Eigenschaft, die feststellt.
Syntax
Spalten-Fill: Auto | Gleichgewicht | initial | erben;Parameter erklärt
Auto: Dieser Wert füllt die Spalten so aus.
Gleichgewicht: Dieser Wert unterteilt den Inhalt gleichermaßen in jede Spalte.
Beispiel
Das folgende Beispiel zeigt den Gleichgewichtsparameter der zu diskutierenden Eigenschaft.
Hier haben wir die Säulenzählung als 3 definiert und dem Div-Behälter eine gewisse Höhe zur Verfügung gestellt. Jetzt teilt der Saldo-Parameter der Säulen-Fill-Eigenschaft den Absatz in jeder Spalte gleichermaßen auf.
Eigenschaft Säulenlücken
Um die Lücke zwischen jeder Spalte zu definieren, wird die Säule-Lücke-Eigenschaft verwendet.
Syntax
Säulenlücke: Normal | Länge | initial | erben;Parameter erklärt
normal: Dies ist ein Standardwert, der eine normale Lücke zwischen den Spalten angibt.
Länge: Dieser Wert gibt die Lücke zwischen den Spalten in Form der Länge an.
Beispiel
Betrachten Sie ein Beispiel, um zu verstehen, wie die Säulenklammeigenschaft funktioniert.
Im obigen Beispiel verwenden wir den Längenparameter der Säulenvergütungseigenschaft und haben sie auf 30% festgelegt.
Säulenregel-Farben-Eigenschaft
Um der Spaltenregel etwas Farbe bereitzustellen, wird diese Eigenschaft verwendet.
Syntax
Säulenregelfarbe: Farbe | initial | erben;Parameter erklärt
Farbe: Dieser Wert gibt die Farbe der Regel an.
Beispiel
Angenommen, Sie möchten Regel eine blaue Farbe mit einem soliden Stil geben.
Das obige Beispiel besagt, dass der Absatz in drei Spalten unterteilt werden muss, wobei eine Regel eine blaue Farbe und einen soliden Stil hat. Verwenden Sie die Eigenschaft der Säulenregelfarbe zusammen mit der Eigenschaft im Spaltenregelstil, um ihre Wirkung zu sehen.
Eigenschaft im Säulenregel
Wie der Name schon sagt, gibt die Eigenschaft im Spaltenregelstil einen gewissen Stil für die Regel zwischen verschiedenen Spalten.
Syntax
Säulenregelstil: Keine | gepunktet | versteckt | gestrichelt | solide | doppelt | Groove | Einschub | Outset | Kamm | initial | erben;Parameter erklärt
keiner: Dies ist ein Standardwert, der keinen Stil angibt.
gepunktet: Dieser Wert gibt einen gepunkteten Stil an.
versteckt: Es gibt einen versteckten Stil an.
gestrichelt: Es gibt einen gestrichelten Regelstil an.
solide: Es beschreibt einen soliden Stil.
doppelt: Es gibt einen doppelten Regelstil an.
Rille: Es gibt einen 3D gerillten Regelstil an.
Einsatz: Es gibt einen 3D -Inset -Stil an.
Anfang: Es gibt einen 3D -Vorgang -Regelstil an.
Grat: Es gibt eine gerichtete Regel in 3D an.
Beispiel
Lassen Sie uns der Regel einen gestrichelten Stil geben.
Das obige Beispiel zeigt den gestrichelten Stil der Regel. Sie können andere Werte der Eigenschaft im Spaltenregelstil nach Ihrem Wunsch verwenden.
Säulenregelweite
Diese Eigenschaft bietet der Regel zwischen mehreren Spalten eine gewisse Breite.
Syntax
Säulenregelbreite: Länge | Medium | dünn | dick | initial | erben;Parameter erklärt
Länge: Dieser Wert gibt die Breite der Regel in Zahlen an.
Mittel: Dies ist ein Standardwert, der die Breite der Regel auf Medium festlegt.
dünn: Es definiert eine dünne Breite der Regel.
dick: Es definiert eine dicke Breite der Regel.
Beispiel
Das folgende Beispiel zeigt, wie die Eigenschaft der Spaltenregelweite funktioniert.
Wir haben die Breite der Regel auf 5px mit einem soliden Stil im obigen Code eingestellt. Verwenden Sie sie mit der Eigenschaft im Säulenregel-Stil, um den Effekt der Eigenschaft der Spaltenregelweite zu sehen.
Säulenregeleigenschaft
Zum Zweck der Bereitstellung einer Breite, des Stils und der Farbe der Regel zwischen verschiedenen Spalten wird die Eigenschaft Spaltenregel verwendet. Dies ist ein Kurzeigeneignis für die folgenden Immobilien.
1. Säulenregelfarbe
2. Säulenregelbreite
3. Säulenregelstil
Syntax
Säulenregel: Spaltenregelfarbe | Säulenregelweite | Säulenregel-Stil | initial | erben;Parameter erklärt
Säulenregelfarbe: Dieser Parameter gibt die Regelfarbe an.
Säulenregelbreite: Dieser Wert gibt die Regelbreite an.
Säulenregel-Stil: Dieser Wert gibt den Stil der Regel an.
Beispiel
Wenden Sie sich an das nachstehende Beispiel, um die zu diskutierende Eigenschaft zu verstehen.
Im obigen Beispiel haben wir definiert, dass die Breite der Regel 5px mit einem gepunkteten Stil und einer rosa Farbe sein sollte.
Säulen-Span-Eigenschaft
Die Eigenschaft, die die Anzahl der Spalten beschreibt, um die sich ein Element erstrecken sollte, wird als Spalten-Span-Eigenschaft bezeichnet.
Syntax
Säulen-Span: Keine | alle | initial | erben;Parameter erklärt
keiner: Dies ist ein Standardwert, der angibt, dass das Element über eine einzelne Spalte erstreckt.
alle: In diesem Wert wurde angegeben, dass das Element über jede Spalte überspannt wird.
Beispiel
Mal sehen, wie der Niemand der Säulen-Span-Eigenschaft funktioniert.
Um das Konzept der Säulen-Span-Eigenschaft zu demonstrieren, haben wir zuerst eine Überschrift im Div-Container gemacht und dann die Säule-Span-Eigenschaft der Überschrift auf keine festgelegt. Daher wird die Überschrift in einer der Säulen eingestellt. Der All -Parameter platziert jedoch die Überschrift über den solchen Spalten.
Die Überschrift wurde mit dem Allparameter von den Säulen getrennt.
Säulenbritteigenschaft
Wie der Name schon sagt, bietet die Eigenschaft der Spaltenbreite die Spaltenbreite.
Syntax
Spaltenbreite: Auto | Länge | initial | erben;Parameter erklärt
Auto: Dies ist ein Standardwert, der angibt, dass die Breite der Spalte vom Webbrowser ausgewertet wird.
Länge: Dieser Wert definiert die Spaltenbreite in Zahlen.
Beispiel
Angenommen, Sie möchten den Spalten eine gewisse Breite Ihrer eigenen Wahl geben und dann den Längenparameter verwenden.
Hier haben wir die Spaltenbreite auf 100px gesetzt.
Spalteneigenschaft
Dies ist eine Abkürzungseigenschaft für Säulenzähl- und Spaltenbreiteneigenschaften.
Syntax
Spalten: Auto | Säulenzählung | Säulenbreite | initial | erben;Parameter erklärt
Auto: Dies ist ein Standardwert, der sowohl die Anzahl als auch die Breite der Spalten liefert
Säulenzählung: Dieser Wert gibt die maximale Anzahl der Spalten an
Spaltenbreite: Dieser Wert beschreibt die minimale Breite der Spalten.
Beispiel
Betrachten Sie das Beispiel, um die Eigenschaft der Spalten zu verstehen.
Wir haben die Spaltenzahl auf 2 mit einer Breite von 100px festgelegt.
Abschluss
Teilen des Inhalts, der auf einer Website in Spalten angezeigt wird, und diese Spalten zu geben, kann ein bestimmter Stil mit verschiedenen CSS -Eigenschaften durchgeführt werden, die unter die Kategorie der Spalteneigenschaften fallen. Es gibt eine Reihe von Spalteneigenschaften wie Spaltenzählern, Spaltenregel, Spalten-Span, Spaltenbreite, Spaltenregelfarbe usw. Jede dieser Eigenschaften dient einem anderen Zweck, den wir zusammen mit Hilfe relevanter Beispiele demonstriert haben.