Alternatywny kolor wiersza CSS

Możemy pokolorować alternatywne wiersze, aby nasza tabela była bardziej przyjazna dla użytkownika i umożliwić użytkownikowi szybkie przeglądanie danych. Możemy użyć właściwości CSS do modyfikacji koloru alternatywnych wierszy, aby zwrócić na nich uwagę użytkownika. Do zmiany alternatywnych wierszy służy do zmiany alternatywnych wierszy. Za pomocą selektora stylu CSS możesz łatwo zmodyfikować kolor alternatywnych wierszy. Selektor nth-Child () w CSS przyjmuje parametr równego lub nieparzystego, a następnie zmienia kolor za pomocą właściwości koloru tła w tym selektorze stylu. W tym samouczku zmodyfikujemy kolor równych i dziwnych wierszy na kilka sposobów.

Składnia:

Przykład 1:

Utwórz plik HTML, aby utworzyć tabele z wierszami i kolumnami. Użyj selektora stylu CSS, aby zmienić kolor alternatywnych wierszy. Kod Visual Studio to oprogramowanie, którego używamy do uruchamiania tych przykładów. W rezultacie musimy utworzyć plik HTML i wprowadzić kod HTML, aby stworzyć tabelę. Kod HTML do budowy tabeli może być tutaj widoczny, a plik należy zapisać za pomocą „.rozszerzenie html ”.

Tutaj tworzymy tabelę i wypełniamy jej wiersze i kolumny danymi. „„”Służy do zdefiniowania komórek nagłówka stołu,„”Służy do zdefiniowania wierszy tabeli i„”Służy do tworzenia komórki danych w rzędach. Następnie w „„”Tag, dodajemy dane do tych komórek i te„”Tagi są wewnątrz„„Tag, który reprezentuje rząd. Zapełniamy wszystkim wierszom danymi. Po wygenerowaniu tej prostej tabeli musimy go stylizować i zmodyfikować kolor alternatywnych wierszy za pomocą selektora stylów.

Dany kod służy do pokolorowania alternatywnych wierszy wygenerowanej przez nas tabeli. Ponieważ jest to nasz plik CSS, w którym wykorzystujemy selektor stylu CSS, aby zmienić alternatywny kolor wierszy, jest zapisywany za pomocą „.rozszerzenie pliku CSS ”. Używamy właściwości „kołysanie granicy”, aby najpierw stylizować tabelę, która kontroluje, czy granica tabeli zapada się na jedną granicę, czy też jest podzielona. W tym przypadku konfigurujemy go do „zawalenia się”. W wyniku wykorzystania mamy teraz pojedynczą granicę. Szerokość tej tabeli jest ustawiona na „100 procent."

Następnie istnieją „TH” i „TD”, które reprezentują odpowiednio nagłówek i proste komórki. Teraz stygnij je, stosując właściwość „align tekstu”, która wyrównuje tekst wewnątrz komórek do „lewej”, gdy go ustawiamy. Ustawiliśmy również „wyściółkę” na „8px”. Po tym, aby zmienić kolor alternatywnych wierszy, używamy selektora stylu CSS, który podajemy właściwości „: nth-Child ()”. Dlatego zmienia się kolor równych wierszy. Właściwość „koloru tła” jest tutaj wykorzystywana do zmiany koloru równego rzędu na „jasnoszary”, a kod tego koloru to „#F2F2F2”.

Naciskając „Alt+B” wewnątrz pliku HTML, który wcześniej przygotowaliśmy, wyjście jest wyświetlane na ekranie. Równie rzędy pojawiają się w innym kolorze, ponieważ stosujemy selektor stylów do równych rzędów tabeli.

Przykład nr 2:

W tym przykładzie modyfikujemy kolor dziwnych wierszy poprzedniej tabeli, którą skonstruowaliśmy w pierwszym przykładzie. Nie zmieniamy stołu; po prostu zmieniamy kolor wiersza dziwnych wierszy tutaj. Szerokość stołu wynosi „100 procent.„Następnie mamy„ TH ”i„ TD ”. Ustawiamy „align tekstowy” na „lewy.„Tekst wewnątrz komórek tabeli jest ustawiony po lewej stronie komórki. „Wyściółka” tworzy przestrzeń między granicą tabeli a danymi wpisanymi w komórkach tabeli.

Tak więc ta „wyściółka” jest ustawiona na „10px”. Jest wykorzystywany do tworzenia bufora „10px” między treścią tabeli a granicą. Teraz dostosowujemy kolor „dziwnych” wierszy stołu. Używamy więc właściwości „NTH-Child ()” tutaj. Kolor równomiernych wierszy zmienia się, jeśli damy je właściwości „: nt-child ()”. Tutaj właściwość „koloru tła” służy do zmiany koloru równego wiersza na „jasnoszary” za pomocą kodu kolorów „#F2F2F2."

Widać, że kolor dziwnych wierszy zmienia się w tym wyjściu, ponieważ zmienia się kolor alternatywnych „dziwnych” wierszy. A kolor tła tylko dziwnych wierszy staje się szary.

Przykład nr 3:

W naszym trzecim przykładzie używamy tego samego selektora stylu CSS, którego użyliśmy w poprzednich kodach do modyfikowania kolorów zarówno równych, jak i dziwnych wierszy. Używamy jednak jednego stołu i zmieniamy kolor nawet, a także dziwne wiersze. Tutaj kolor „granicy” jest „czarny”. Szerokość granicy jest mniej więcej „2px”. A rodzaj wytworzonej granicy jest solidny w „granicy” właściwości CSS.

Ponadto granica jest „zawalona”, więc pojawia się jako pojedyncza granica. „100%” jest wybierane jako „szerokość”. Następnie mamy „TH” i „TD” i wyrównujemy jego tekst do „środka” za pomocą „Alignaj tekstu”. Używamy do nich wyściółki „6px”. Ponownie, granica nagłówka i komórek jest ustawiona na „2px” „szerokość”, typ „solid” i „czarny”. Kolor wierszy zmienia się, gdy używamy selektora stylu. Selektor stylu jest stosowany do „równej” liczby wierszy. Początkowo ustawiamy kolor tła rzędu dla równych wierszy na „żółto-zielony”. Chcemy również zmienić kolor „dziwnych” wierszy, więc ponownie używamy tego selektora stylów i tym razem stawiamy „dziwne” jako parametr selektora „nth-child ()” i ustawiamy „tło-- kolor ”do„ jasnozielony ”. W rezultacie kolor dziwnych wierszy zmienia się w „jasnozielony”.

Alternatywne rzędy w tym wyjściu są kolorowe inaczej. Równomierne rzędy są żółto-zielone, podczas gdy dziwne rzędy są jasnozielone. Korzystając z selektora stylu CSS, możesz zmienić kolor alternatywnych wierszy.

Przykład nr 4:

To jest nasz ostatni przykład i utworzymy nową tabelę zawierającą cztery kolumny i sześć wierszy. Teraz używamy dwóch selektorów tutaj w tym kodzie, aby zmienić kolor równomiernego wiersza, a także dziwny kolor wiersza.

Tutaj nieco stylizujemy nagłówek, wykorzystując właściwość „Aligację tekstu” i ustawiając ją w „środku”. Ustawiliśmy także czcionkę „Font Family” na „Algierską”. Czcionka „kolor” tego nagłówka jest „czerwony”. Czcionka „Tabela” jest ustawiona na „Arial”, a w tym przykładzie ustawia się również na „zwinięte”. „Szerokość” jest ustawiona na „100px”. Właściwości użyte tutaj dla „th” i „td” są takie same jak w poprzednich przykładach. Tutaj „nawet” kolor rzędu jest ustawiony na „jasnozielony”, a „dziwny” kolor rzędu jest ustawiony na „jasnozielony zielony”, wykorzystując selektor „NTH-Child ()”.

Wyjście jest renderowane poniżej i zauważysz, że równomierne rzędy są w tym samym kolorze, a dziwne rzędy są również tych samych kolorów. Jest to wynikiem wykorzystania selektora „NTH-Child ()” w naszym kodzie CSS.

Wniosek

Ten przewodnik pokazał, jak zmienić alternatywne kolory rzędów, wykorzystując selektor CSS NTH-Child (). Omówiliśmy, jak to działa z nieparzystą liczbą wierszy, a także z parzystą liczbą wierszy. Użyliśmy właściwości „koloru tła”, która służy do modyfikacji koloru wierszy. Wykorzystaliśmy selektor nth-Child () do zastosowania różnych kolorów do alternatywnych wierszy w tym przewodniku, i dogłębnie przekroczyliśmy każdy kod. Dołączyliśmy również kod HTML i CSS, a także wyjście. W rezultacie zyskujesz dużo wiedzy na temat koncepcji CSS polegającej na zmianie koloru alternatywnych wierszy.