CSS podkreśla kolor
Przykład 1
Utwórz plik HTML do rozpoczęcia tego kodu. Zaczniemy od utworzenia nowego pliku, a następnie wybrania HTML jako języka w kodzie Visual Studio. Wreszcie dodajemy „!„Do pliku, który właśnie wygenerowaliśmy. Ten plik zawiera wszystkie podstawowe tagi HTML. Wszystko, co musimy teraz zrobić, to wpisać korpus HTML i link pliku CSS do „głowy.„W ciele umieszczamy nagłówek i akapit w tym kodzie. W tym kodzie tworzymy również odważny tekst. Teraz poruszamy się, aby utworzyć plik CSS, w którym podkreślamy nagłówek i akapit, a następnie zmienić kolor tego podkreślenia. Wszystko to zostanie zrobione przy użyciu właściwości CSS.
Wyrównujemy wszystkie elementy ciała HTML tutaj w „centrum” za pomocą właściwości „Ulicz tekstu”. Następnie używamy właściwości „Dekoracja tekstu” i umieszczamy słowo kluczowe „Podkreśl” dla wartości tej właściwości. Używamy tej właściwości tutaj do generowania podkreślenia nagłówka. Ustawiamy również kolor tego podkreślenia, wykorzystując właściwość „w kolorze tekstowym”.
Tutaj ustawiamy kolor tego podkreślenia na „czarny.„Generujemy również kolejne podkreślenie przy użyciu tej samej właściwości„ dekoracji tekstu ”i tym razem wygenerujemy to podkreślenie akapitu. Zmieniamy kolor tego podkreślenia na „Zielony”, wykorzystując właściwość „w kolorze tekstowym”. Mamy również odważny tekst, więc wygenerujemy podkreślenie tego odważnego tekstu za pomocą właściwości „dekoracji tekstu”, a także zmieniamy jej kolor na „czerwony” za pomocą właściwości „derekcji tekstu”.
Wyjście jest tutaj i można zauważyć, że kolor podkreślenia nagłówka wydaje się „czarny”, tekst akapitu pojawia się w „zielonym”, a podkreślenie odważnego tekstu jest w „czerwonym."
Przykład nr 2
Używamy tego samego kodu HTML przykładu 1. Najpierw używamy właściwości „Alignaj tekstu” dla wszystkich elementów ciała, a „rozmiar czcionki” elementu ciała to „24px”. „Podkreślamy” wszystkie elementy osobno za pomocą „dekoracji tekstu” i zmieniamy kolor podkreśla.„Tutaj używamy koloru„ RGB ”jako wartości tej właściwości„ kolorowego tekstu ”. W przypadku „H1” ustawiamy „RGB (13, 128, 13)”, który jest używany do „zielonego” odcienia. Następnie mamy „P”, w którym używamy „RGB (40. 40, 184) ”, który reprezentuje kolor„ niebieski ”. Do ostatniego odważnego tekstu „B” używamy „RGB (216, 69, 15)”, który reprezentuje „Orange."
Wynik pokazano poniżej i widać, że kolor podkreślenia nagłówka jest „zielony”, tekst akapitu jest „niebieski”, a odważny tekst to „pomarańczowy."
Przykład nr 3
Ponownie używamy kodu HTML przykładu 1 i łączymy ten plik CSS z plik HTML z przykładu 1. Cały tekst ciała HTML wyrównuje się do „środka” i „24px” „wielkości czcionki.„Podkreślamy wszystkie elementy, akapit i odważny tekst w taki sam sposób, jak opisaliśmy w powyższym przykładzie. Tutaj zmieniamy kolor tych podkreśleń, używając „kolorowego tekstu” i przypisywania wartości koloru w formie „HSL”. „HSL (0, 100%, 50%)”, którego używamy tutaj do podkreślenia nagłówka pokazuje kolor „czerwony”. Następnie używamy „HSL (133, 86%, 47%)” dla podkreślenia akapitu, który pojawia się jako „jasnozielony”, a dla Bold używamy „HSL (327, 85%, 33%)”, który jest dla koloru „magenta”.
Wynik podano poniżej, z kolorem „czerwony” dla podkreślenia nagłówka, „jasnozielona” dla tekstu akapitu i „Magenta” dla odważnego tekstu.
Przykład nr 4
W tym przykładzie zmienimy powyższy kod HTML, dodając link tutaj w tym pliku. Teraz mamy jeden nagłówek, jeden akapit, odważny tekst w tym akapicie, a także link. Teraz zamierzamy je wszystkie podkreślić, a następnie zastosować różne kolory podważają dla wszystkich w CSS.
Tworzymy podkreślenie nagłówka, wykorzystując właściwość „dekorację tekstu” i zmieniając jej kolor na „pomarańczowy” za pomocą „koloru dekoracji tekstu.„Po tym używamy właściwości„ dekoracja tekstu ”do wygenerowania odważnego tekstu i„ kolorowego tekstu ”, aby zmienić kolor na„ niebieski.„Ustawiliśmy„ rozmiar czcionki ”akapitu na„ 22px ”. Aby wspomnieć o linku, używamy tutaj „A” z „zawieszonym”, a następnie zmieniamy kolor podkreślenia na „czerwony”, aby zmienił kolor podkreślenia linku, gdy unosimy mysz na ten link i Zmienia także „wielkość czcionki” na unoszeniu się na „20px”.
Na pierwszym wyjściu właśnie podkreślamy nagłówek i odważny tekst. Podkrecie nagłówka pojawia się w kolorze „pomarańczowym”, a podkreślenie Bold Tekst pojawia się tutaj w „Blue."
Na drugim obrazie możesz zobaczyć kolor podważany linku. Kiedy unosimy kursor na tym linku, kolor podkreślenia łącza pojawia się w „czerwonym”, ponieważ ustawym go w naszym kodzie CSS, więc zmienia kolor na zawisie.
Przykład nr 5
Tutaj mamy jeden nagłówek i dwa różne akapity z nazwiskami „P1” i „P2”. Mamy również odważny tekst i „div”, a także element „rozpiętości”. Będziemy wygenerować podkrej dla tych wszystkich, a także zmienić kolor tych podwozia.
Używamy „align tekstu”, a dla wartości tej właściwości ustawiamy tutaj „Center” dla wszystkich elementów obecnych w ciele. Zwiększyliśmy również „rozmiar czcionki” i ustawiliśmy go na „25px”. Korzystamy z właściwości „dekoracji tekstu” dla wszystkich elementów, które utworzyliśmy w pliku HTML, używając ich nazwisk. Następnie używamy również właściwości „w kolorze tekstowym” w nazwach wszystkich tych elementów tutaj. Używamy tutaj nazw kolorów, koloru RGB, a także kolorów HSL. W przypadku nagłówka i pierwszego akapitu „P1” używamy koloru podkreślenia w „RGB”, do drugiego akapitu „P2” i Bold „B”, używamy koloru „HSL” dla podkreślenia i dla ” Div ”i„ Span ”, używamy nazw kolorów we właściwości„ Wysokość tekstu ”. W ten sposób generujemy podkreślenie i zmieniamy kolor podkreślenia wszystkich elementów.
Na zrzucie ekranu poniżej podkreślenie wszystkich elementów renderuje w różnych kolorach, ponieważ ustawiamy te kolory w powyższym pliku CSS.
Wniosek
Napisaliśmy ten samouczek wyjaśniający, jak zmienić kolor podkreślenia w CSS. Omówiliśmy własność CSS, która jest wykorzystywana do zmiany koloru podkreślenia. Wyjaśniliśmy szczegółowo, że właściwość „w kolorze tekstowym” jest wykorzystywana do zmiany koloru podkreślenia. Opracowaliśmy tutaj różne przykłady, w których wykorzystaliśmy tę właściwość i wyjaśniliśmy kod, a także wyjście dla lepszego zrozumienia. Po starannym nauce tego samouczka, wykorzystasz tę właściwość w swoich kodach.