CSS alternatywny kolor wiersza

Możemy dodać kolor do alternatywnych wierszy, aby nasz tabela była bardziej zrozumiała dla użytkownika, aby użytkownik mógł łatwo zeskanować dane. Możemy zmienić kolor alternatywnych wierszy za pomocą CSS, aby zwrócić większą uwagę użytkownika. W CSS mamy selektor stylów do zmiany alternatywnych wierszy. Bardzo łatwo jest zmienić kolor alternatywnych rzędów za pomocą selektora stylu CSS. Ma selektor nth-child (), który dostaje równe lub dziwne wiersze jako parametr, a następnie wykorzystuje właściwość koloru tła w tym selektorze stylu do zmiany koloru. W tym przewodniku pokażemy, jak korzystać z selektora stylu CSS do zmiany koloru alternatywnych wierszy. W tym przewodniku zmienimy kolor równych i dziwnych wierszy.

Składnia:

Składnia selektora stylu do zmiany koloru alternatywnych wierszy jest następująca:

: nth-child (nawet lub nieparzysty)
Deklaracja CSS;

Przykład nr 1: Zmień kolor równych wierszy

Utwórz plik HTML do tworzenia tabel zawierających wiersze i kolumny oraz zmień kolor alternatywnych wierszy za pomocą selektora stylu CSS. Oprogramowanie, których używamy do wykonania tych przykładów, to Visual Code Studio. Musimy wygenerować plik HTML i wpisać kod HTML, którego używamy do utworzenia tabeli. Możesz zobaczyć kod do tworzenia tabeli w HTML, a ten plik musi być zapisany za pomocą „.rozszerzenie pliku html ”.

Tutaj zaprojektujemy tabelę i dodamy dane w wierszach i kolumnach tabeli. „„”Służy do zdefiniowania komórek nagłówka w tabeli. „„”Służy do zdefiniowania wierszy w tabeli. I „”Ma na celu utworzenie komórki danych w rzędach. Dodajemy sześć rzędów i trzy kolumny do tabeli. Pierwszy rząd to wiersz nagłówka, więc używamy „

---

”Z komórkami nagłówka. Następnie dodajemy dane w tych komórkach wewnątrz „”Tag. Te "”Tagi są wewnątrz„”, Który reprezentuje rząd. Następnie dodajemy dane we wszystkich wierszach.

Po utworzeniu tej tabeli układamy tę tabelę i zmieniamy kolor alternatywnych wierszy. W tym celu zaprojektujemy plik CSS w następującym kodzie Visual Studio:

Kod CSS:

Ten kod służy do barwienia alternatywnych wierszy stworzonej przez nas tabeli. Ten plik zostanie zapisany z „.rozszerzenie pliku CSS ”. Użyjemy pliku CSS do zastosowania selektora stylu CSS do zmiany alternatywnego koloru wierszy.

Stylowa tabela za pomocą właściwości „kołysanie granicy”, która określa, czy granica tabeli zapada się na jedną granicę, czy też jest oddzielona. Tutaj ustawiamy to jako „upadek”. Korzystając z tej właściwości, mamy jedną granicę tabeli. Szerokość tej tabeli jest ustawiona na „100%”. Potem pojawia się „th” i „td”, które reprezentują komórki nagłówka i proste komórki. Teraz stylizujemy je za pomocą „align tekstu”, który wyrównuje tekst wewnątrz komórek do „lewej”, gdy ustawiamy go na „lewy”. Następnie używamy selektora stylów CSS do zmiany koloru alternatywnych wierszy. Zastosujemy „: nth-child ()”, więc zmieni kolor równomiernych wierszy tabeli. Umieszczamy kolor „jasnozielony” jako kolor tła równych wierszy za pomocą właściwości koloru tła CSS.

Wyjście:

Wyjście jest renderowane na ekranie, naciskając „Alt+B” wewnątrz pliku HTML, który wcześniej utworzyliśmy. Wyjście pokazuje zielony kolor dla wszystkich równych wierszy, gdy nakładamy selektor stylowy do równych rzędów tabeli.

Przykład nr 2: Zmień kolor dziwnych wierszy

W tym przykładzie zmienimy kolor dziwnych rzędów poprzedniej tabeli, którą zaprojektowaliśmy w pierwszym przykładzie.

Kod CSS:

Granica stołu jest tutaj zawalona, ​​więc pojawia się jako pojedyncza granica. Szerokość tabeli wynosi „110%”. Do wyrównania tekstu używane jest „align tekstowy”. Umieszcza tekst w żądanych komórkach. Ustawiliśmy „Ulicz tekstu” na „środkowy”, a następnie tekst jest umieszczony na środku komórki. „Wyściółka” generuje przestrzeń między granicą tabeli a zawartością zapisaną w tabeli. Ta „wyściółka” jest „10px”, więc służy do generowania przestrzeni „10px” między zawartością tabeli a granicą. Następnie przekazujemy „dziwne” do selektora stylu. Ustawiamy „różowy” kolor jako tło dziwnych wierszy, a kolor dziwnych wierszy zostanie renderowany jako „różowy”. Sprawdźmy następujące dane wyjściowe:

Wyjście:

Widzimy tutaj, że kolor tła dziwnych wierszy staje się różowy, ponieważ zmieniliśmy kolor alternatywnych wierszy.

Przykład nr 3: Zmień kolor zarówno równych, jak i dziwnych wierszy

W naszym trzecim przykładzie zmienimy kolory zarówno równych, jak i nieparzystych rzędów za pomocą tego samego selektora stylu CSS, którego również użyliśmy w poprzednich przykładach. Ale tutaj użyjemy zarówno równego, jak i nieparzystego na pojedynczej tabeli.

Kod CSS:

Szerokość jest wybierana jako „100%”. Granica ma się „upaść”. Wyściółka jest wybierana jako „7px”. „Granica” ma kolor „czarny”, o szerokości o „2px”, a stworzony typ granicy jest „solidny”. Najpierw ustawiamy kolor tła wiersza jako „różowy”, ale kiedy używamy selektora stylu, kolor wierszy się zmieni. Stosujemy selektor stylów do „dziwnej” liczby wierszy. To zmieni kolor dziwnych wierszy w naszym stole. Chcemy zmienić kolor tła dziwnego na jasnoniebieski, więc używamy właściwości „koloru tła”, która jest dostarczana przez CSS i ustawiamy „kolor” na „jasnoniebieski”. Następnie zmieniamy również kolor rzędów „nawet” na „żółto-zielony”. Ponownie używamy tego samego selektora stylu i tym razem używamy go do zmiany koloru równych wierszy. umieszczając kolor „żółty-zielony” dla równych wierszy.

Wyjście:

W tym wyjściu alternatywne wiersze wyświetlają różne kolory. Dziwne rzędy są jasnoniebieskie, a równomierne rzędy są żółto-zielone. To jest sposób na zmianę koloru alternatywnych rzędów za pomocą selektora stylu CSS.

Wniosek

Ten przewodnik wyjaśnił pojęcie zmiany alternatywnych kolorów rzędów za pomocą selektora CSS NTH-Child (). Wyjaśniliśmy, jak to działa z nieparzystą liczbą wierszy, a także z parzystą liczbą wierszy i jak zmienia kolor za pomocą właściwości koloru tła. W tym przewodniku wykorzystaliśmy selektor nth-Child () i zastosowaliśmy różne kolory do alternatywnych wierszy i szczegółowo wyjaśniliśmy każdy kod. Zapewniliśmy HTML, a także kod CSS wraz z jego odpowiednim wyjściem.