Zmień kolor tagu HR CSS
”Tag za pomocą CSS. „„
”Tag w HTML służy do reprezentowania przerwy tematycznej między dwoma akapitami w HTML. Wygląda jak pozioma linia między akapitami. Zmienimy kolor tego znacznika HR za pomocą CSS w tym przewodniku. Używamy różnych właściwości do zmiany koloru tego znacznika. Musisz przejść przez te przykłady, które są opracowane w tym przewodniku, aby lepiej to zrozumieć.
Właściwości zmieniającego się koloru:
Użyjemy tutaj dwóch właściwości do zmiany koloru znacznika HR:
- Właściwość koloru tła.
- Nieruchomość graniczna.
Przykład nr 1: Korzystając z właściwości koloru tła
Otwórz nowy plik HTML, w którym używamy „
„Tag, a następnie zmień kolor tego
znacznik w pliku CSS. Wykonujemy podane kody w studio kodu wizualnego. Musimy utworzyć plik HTML do zapisywania kodu HTML. Ten plik należy zapisać za pomocą „.rozszerzenie html ”. Kod HTML służy do projektowania
Tag między dwoma akapitami. Jeśli pracujesz nad kodem Visual Studio do tworzenia plików HTML, otwórz nowy plik i napisz „!" ocena. Następnie naciśnij ENTER TAGI HTML są wbudowane w tym wizualnym Studio kodu, które jest wyświetlane na ekranie. Musisz napisać ciało i umieścić znacznik linku na danym szablonie.
Zdefiniuj typ tego dokumentu, który jest „html” tutaj. Otwórz i tag. Następnie znacznik „Meta” jest tutaj zdefiniowany jako „Charset = UTF-8”. Oznacza to, że pozwala nam używać wielu znaków w naszym dokumencie. I obsługuje wiele języków. Ustawiliśmy tytuł za pomocą znacznika otwierania i zamykania „”. Ponieważ chcemy połączyć ten plik HTML z plik CSS w celu zmiany koloru „
„Tag, używamy tagu„ ”i zamykamy nasz tag„ ”. Musimy napisać dwa akapity i umieścić
Tag między tymi dwoma akapitami, abyśmy mogli zmienić kolor tego znacznika. Piszemy akapit między tagami „”. Mamy "
„Tag po pierwszym akapicie. Następnie napisz drugi akapit i zamknij tagi „” i „”.
Plik CSS do stylizacji i zmiany koloru:
Po zapisaniu powyższego pliku HTML, utwórz plik o nazwie wymienionej w linku pliku HTML. Tutaj zmienimy kolor tagu HR, który tworzymy w pliku HTML.
Najpierw piszemy HR, a wewnątrz kręconych aparatów HR, nadajemy styl naszemu tagi HR. Dajemy wysokość tego „
„Tag równy„ 4px ”, więc wysokość naszego znacznika HR wynosi około 4px. Używamy tutaj właściwości koloru tła. Ta właściwość służy do zmiany koloru elementu HR w CSS. Ustawiliśmy kolor linii HR jako niebieski. Więc ustawiamy na to niebieski „kolor tła”. Granica tego nie jest, ponieważ nie chcemy umieszczać wokół niej żadnej granicy.
Otrzymujemy dane wyjściowe, po prostu naciskając Alt+B na pliku HTML lub również naciskając prawy przycisk myszy i wybierając otwarcie w domyślnej przeglądarce. Otrzymamy dane wyjściowe w przeglądarce.
Tutaj granica między akapitami jest renderowana „niebieska”, ponieważ ustawiamy kolor tego znacznika HR „niebieski”. Jest to jeden ze sposobów zmiany koloru znacznika „HR” za pomocą „CSS”.
Przykład nr 2: Korzystając z właściwości granicznej
W tym przykładzie używamy właściwości „border-top” w CSS. Ta właściwość pomaga również zmienić kolor.
Tutaj po prostu zmieniamy link do pliku CSS w poprzednim pliku HTML, ponieważ utworzyliśmy nowy plik CSS do użycia innej właściwości do zmiany koloru. Więc nie musimy ponownie wyjaśniać tego kodu.
Plik CSS do zmiany koloru:
Rozpoczynamy ten kod CSS w ten sam sposób, używając HR w pierwszym wierszu i otwierając kręcony wspornik.
Ustawiamy wyświetlacz jako „blok”. Ten blok wypełni całą linię. Następnie wysokość tej linii to „2px”. Granica tego jest zerowa „0”. Teraz używamy tutaj właściwości „border-top”. Ta właściwość pomaga zmienić kolor znacznika HR w CSS. Tutaj „5px” określa szerokość, „solidny” określa „styl linii”, a „czerwony” jest używany do koloru znacznika HR. W ten sposób ustawiamy szerokość, styl linii i kolor tagu HR w CSS. Margines stworzy przestrzeń „2EM”. A wyściółka tutaj to „0”.
Ponieważ do tworzenia dodatkowej przestrzeni między elementami używana jest wyściółka, linia nie zawiera elementów, więc ustawiamy ją na zero. Na koniec zamykamy kręcony wspornik i oszczędzamy go. Połączyliśmy ten plik do naszego pliku HTML, aby wszystkie te stylowania zostaną zastosowane do pliku HTML. Możesz sprawdzić wyjście na obraz, ponieważ obraz jest również podany.
Przykład nr 3:
W tym przykładzie używamy dwóch tagów HR w naszym pliku HTML i używamy obu metod zmiany koloru znacznika HR. Tutaj dajemy jednocześnie dwa kolory tagu lub linii HR. Spójrzmy na ten przykład.
Tutaj tworzymy trzy akapity osobno za pomocą trzech par „
”Ogłoszenie akapitu otwierające i zamykające. Po każdym akapicie umieszczamy tag HR. Tak więc w tym kodzie mamy dwa tagi HR. Połącz także ten plik HTML do nowego pliku CSS, który utworzymy dla stylizacji tych tagów HR.
Plik CSS do zmiany koloru:
W tym przykładzie używamy dwóch różnych właściwości do zmiany koloru na tej samej linii. W pierwszym HR otwieramy kręcone aparaty ortodontyczne i będziemy korzystać z nieruchomości granicznej. W tym wysokość wynosi „2px”, a właściwość graniczna jest używana. Ustawiamy szerokość na „5px” i styl linii, która jest „solidna”, a także zmienia kolor na „zielony”. Następnie zamknij to i utwórz nowy „HR”, w którym użyjemy właściwości „koloru w tle”. Więc tutaj wysokość jest „4px”, a kolor tła to „pomarańczowy”. Tak więc linia będzie miała dwa kolory, które są „zielone” i „pomarańczowe”.
Tutaj możesz zauważyć, że możemy podać więcej niż jeden kolor do naszego znacznika HR, używając tych właściwości.
Wniosek:
W tym przewodniku nauczyliśmy się zmienić kolor tagu HR za pomocą właściwości CSS. W tym przewodniku opracowaliśmy trzy różne kody. Zmieniliśmy kolor linii HR, stosując atrybut „koloru tła”. W następnym przykładzie użyliśmy innej właściwości, która jest właściwością „graniczną” do zmiany koloru. Zapewniamy również zrzuty ekranu wyjścia po uruchomieniu wszystkich kodów i pokazujemy wyjście w przeglądarce. Mam nadzieję, że nauczysz się zmienić kolor linii HR w CSS po przeczytaniu tego przewodnika.