CSS alternative Reihenfarbe
Syntax:
Die Syntax des Style -Selektors zum Ändern der Farbe alternativer Zeilen ist wie folgt:
: n-Kind (ausgeglichen oder ungerade)CSS -Erklärung;
Beispiel Nr. 1: Ändern Sie die Farbe gleicher Zeilen
Erstellen Sie die HTML -Datei zum Erstellen von Tabellen mit Zeilen und Spalten und ändern Sie die Farbe der alternativen Zeilen mithilfe des CSS -Style -Selektors. Die Software, mit der wir diese Beispiele durchführen, ist Visual Code Studio. Wir müssen die HTML -Datei generieren und den Code des HTML eingeben, mit dem wir die Tabelle erstellen können. Sie können den Code zum Erstellen der Tabelle in HTML sehen, und diese Datei muss mit der “gespeichert werden.HTML ”Dateierweiterung.
Hier entwerfen wir eine Tabelle und fügen die Daten in die Zeilen und Spalten der Tabelle hinzu. Der "
”Mit den Kopfzeilenzellen. Dann fügen wir die Daten in diesen Zellen innerhalb der “hinzu“
Wenn diese Tabelle erstellt wird, stylen wir diese Tabelle und ändern die Farbe der alternativen Zeilen. Dafür entwerfen wir die CSS -Datei in diesem folgenden Visual Studio -Code:
CSS -Code:
Dieser Code dient zum Färben der alternativen Zeilen der von uns erstellten Tabelle. Diese Datei wird mit dem "gespeichert" gespeichert.CSS ”Dateierweiterung. Wir werden die CSS -Datei verwenden, um den CSS -Style -Selektor anzuwenden, um die alternative Farbe der Zeilen zu ändern.
Wir stylen die Tabelle mit der Eigenschaft „Grenzkollapse“, die definiert, ob der Rand der Tabelle in einen einzelnen Rand zusammenbricht oder getrennt ist. Hier setzen wir es als "Zusammenbruch". Durch die Verwendung dieser Eigenschaft haben wir einen einzelnen Rand der Tabelle. Die Breite dieser Tabelle ist auf "100%" eingestellt. Dann kommt "th" und "td", die die Kopfzeilenzellen und die einfachen Zellen darstellen. Jetzt stylen wir diese, indem wir das „Text-Align“ verwenden, der den Text in den Zellen auf die „links“ ausrichtet, während wir ihn auf die „links“ einstellen. Anschließend verwenden wir den Style -Selektor von CSS, um die Farbe der alternativen Zeilen zu ändern. Wir wenden das „: n-Child ()“ an, damit es die Farbe der gleichmäßigen Zeilen der Tabelle ändert. Wir platzieren die „hellgrüne“ Farbe als Hintergrundfarbe der gerade Zeilen mit der CSS-Hintergrund-Farben-Eigenschaft.
Ausgang:
Die Ausgabe wird auf dem Bildschirm durch Drücken von „Alt+B“ in der zuvor erstellten HTML -Datei gerendert. Die Ausgabe zeigt die grüne Farbe für alle gleichmäßigen Zeilen, während wir den Stilauswahl auf die gleichmäßigen Zeilen der Tabelle anwenden.
Beispiel Nr. 2: Ändern Sie die Farbe von ungeraden Zeilen
In diesem Beispiel werden wir die Farbe der ungeraden Zeilen der vorherigen Tabelle ändern, die wir im ersten Beispiel entworfen haben.
CSS -Code:
Die Tischgrenze wird hier zusammengebrochen, sodass sie als einzelne Rand erscheint. Die Breite der Tabelle beträgt "110%". Die „Textausrichtung“ wird zur Ausrichtung des Textes verwendet. Es platziert den Text in die gewünschten Zellen. Wir setzen die „Textausrichtung“ auf das „Zentrum“, dann wird der Text in der Mitte der Zelle platziert. Die „Polsterung“ erzeugt den Raum zwischen dem Rand der Tabelle und dem in der Tabelle geschriebenen Inhalt. Diese „Polsterung“ ist „10px“, daher wird sie verwendet, um einen „10px“ -Raum zwischen dem Inhalt der Tabelle und dem Rand zu erzeugen. Wir geben dann „seltsam“ an den Stilwählers. Wir setzen die „rosa“ Farbe als Hintergrund der ungeraden Reihen, und die Farbe der ungeraden Zeilen wird als „rosa“ gerendert. Lassen Sie uns die folgende Ausgabe überprüfen:
Ausgang:
Hier sehen wir, dass die Hintergrundfarbe der ungeraden Zeilen rosa wird, weil wir die Farbe der alternativen Reihen verändert haben.
Beispiel 3: Ändern Sie die Farbe von gleichmäßigen und ungeraden Zeilen
In unserem dritten Beispiel werden wir die Farben sowohl von gleichmäßigen als auch von ungeraden Zeilen mit demselben Stilwähler von CSS ändern, den wir auch in den vorherigen Beispielen verwendet haben. Aber hier werden wir auf der einzelnen Tabelle sowohl gleiche als auch seltsame verwenden.
CSS -Code:
Die Breite wird als "100%" ausgewählt. Die Grenze soll "zusammenbrechen". Die Polsterung wird als "7PX" ausgewählt. Der „Grenze“ ist in der Farbe „schwarz“, über „2px“ in der Breite, und der erstellte Grenztyp ist „solide“, „solide“. Zunächst setzen wir die Zeilenhintergrundfarbe als „Pink“, aber wenn wir den Stilwähler verwenden, ändert sich die Farbe der Zeilen. Wir wenden den Style -Selektor auf die „ungerade“ Anzahl von Zeilen an. Dies ändert die Farbe der ungeraden Zeilen in unserer Tabelle. Wir möchten die Hintergrundfarbe der ungeraden Zeilen in hellblau ändern. Wir verwenden also die Eigenschaft „Hintergrundfarbe“, die vom CSS bereitgestellt wird, und stellen die „Farbe“ auf „hellblau“ ein. Dann ändern wir auch die Farbe der "gleichmäßigen" Zeilen in "gelbgrün" ". Wir verwenden denselben Stilwähler wieder und diesmal verwenden wir sie, um die Farbe der geraden Reihen zu ändern. Indem Sie die Farbe „gelbgrün“ für sogar Zeilen setzen.
Ausgang:
In dieser Ausgabe zeigen die alternativen Zeilen unterschiedliche Farben. Die seltsamen Reihen sind hellblau und die gleichmäßigen Reihen sind gelbgrün. Dies ist der Weg, um die Farbe der alternativen Zeilen mit dem CSS -Stil zu ändern.
Abschluss
In diesem Leitfaden wurde das Konzept der Änderung der alternativen Zeilenfarben mit dem CSS N-ten-child () -Selector angezeigt. Wir haben erklärt, wie es mit der ungeraden Anzahl von Zeilen und auch mit der gleichmäßigen Anzahl von Zeilen und wie sie die Farbe mithilfe der Hintergrundfarbe ändert. In diesem Handbuch haben wir den N-ten-child () -Schild () verwendet und verschiedene Farben auf die alternativen Zeilen angewendet und jeden Code im Detail erläutert. Wir haben den HTML sowie den CSS -Code zusammen mit seiner jeweiligen Ausgabe bereitgestellt.