Z tego artykułu dowiesz się, jak zmienić kolor tła strony internetowej, jeśli edytujesz swój kod HTML.

Kroki

Metoda 1 z 4:

Jak przygotować się do edycji kodu HTML

jeden. Określ kolor tła, którego chcesz użyć. W HTML kolory są ustawiane według kodów określających różne odcienie. Użyj darmowego narzędzia Picker Color W3Schools HTML, aby znaleźć potrzeby żądanych kolorów:

Idź do strony https: // W3schools.Com / kolory / kolory_picker.ŻMIJA W przeglądarce internetowej.
Wybierz kolor podstawowy, którego chcesz użyć w sekcji "Wybierz kolor".
Wybierz cień po prawej stronie strony.
Zapisz kod, który zostanie wyświetlony po prawej stronie wybranego cienia.

2. Otwórz plik HTML w edytorze tekstu. Pamiętaj, że w atrybucie HTML5 Nie jest już obsługiwany. Dlatego kolor tła i ustawienia stylu innych stron są ustawiane za pomocą CSS.

Dokument HTML można otworzyć w Notepad ++ lub Notatniku (Windows), a także w Textedit lub Bothedit (Mac).

3. Dodaj nagłówek HTML do dokumentu. Wszystkie parametry stylu strony, w tym kolor tła, muszą być między tagami :

cztery. Utwórz pusty ciąg między tagami w stylu. Na tej linii, która powinna być pod tagiem I ponad tagiem , Wprowadzisz niezbędne informacje.

6. Dodaj element "ciało". Wprowadź następujący kod między tagami :

Ciało {}

Wszystko, co zostanie zakończone wewnątrz elementu "Ciało" w CSS wpłynie na całą stronę.

Pomiń ten krok, jeśli chcesz utworzyć tło gradientowe.

Metoda 2 z 4:

Jak utworzyć monofoniczny tło

jeden. Znajdź nagłówek HTML. Powinien być na górze dokumentu.

2. Dodaj właściwość "Kolor tła" w elemencie "Body". Wchodzić Kolor tła: W nawiasach kręconych wewnątrz elementu "Ciało". Poniższy kod powinien się okazać:

Ciało {kolor tła:}

Należy pamiętać, że w tym kodzie należy użyć słowa "kolor", a nie "kolorowy".

3. Dodaj żądany kolor tła do właściwości "kolor tła". Po prawej stronie "koloru tła:" Wprowadź kod numeryczny wybranego koloru, a następnie wprowadź średnik (-). Na przykład, aby tła partii różowej, napisz następujący kod:

Ciało {kolor - kolor: # d24dff-}

cztery. Przejrzyj informacje w tagu "Style". Na tym etapie nagłówek twojego dokumentu HTML powinien wyglądać tak:

 {kolor tła: # d24dff}

pięć. Użyj "koloru tła", aby ustawić kolor tła innych elementów (nagłówki, akapity i tym podobne). Na przykład, aby ustawić kolor tła głównego nagłówka (

) lub akapit (
), Napisz następujący kod:

 {kolor tła: # 93b874-} H1 {kolor - kolor: # 00b33C-} p {tła-kolor: #fffffffffffffffffffffffffffffffffffffffffffffffffffffferTytuł
 Na zielonym tleUstęp
 na białym tle

Metoda 3 z 4:

Jak utworzyć tło gradientowe

jeden. Znajdź nagłówek HTML. Powinien być na górze dokumentu.

2. Pamiętaj główną składnię tego procesu. Aby utworzyć gradient, musisz znać dwie ilości: punkt wyjścia / kąt i szereg kolorów, które przesuną jeden w innym. Możesz wybrać kilka kolorów, aby jechali do siebie; możesz również określić kierunek lub kąt przejścia.

Tło: gradient liniowy (kierunek / kąt, kolor1, kolor2, kolor3 i tak dalej)-

3. Utwórz gradient pionowy. Jeśli nie określisz kierunku, gradient przejdzie od góry do dołu. Aby utworzyć taki gradient, wprowadź następujący kod między tagami :

HTML {min-wysokość: 100% -} Ciała {Tło: -Webkit-liniowy gradient (# 93B874, # C9DCB9) - -Background: -o-liniowy gradient (# 93B874, # C9DCB9) - background: -moz-liniowy -Gradient (# 93B874, # C9DCB9) - background: liniowy gradient (# 93B874, # C9DCB9) - kolorground-kolor: # 93b874-}

W różnych przeglądarkach funkcja gradientu jest implementowana inaczej, więc musisz dodać wiele wersji kodu.

cztery. Utwórz gradient skierowany. Jeśli nie chcesz, aby gradient pójdzie pionowo, określ kierunek przejścia kolorów. Aby to zrobić, wprowadź następujący kod między tagami :

HTML {min-wysokość: 100% -} Body {Tło: -Webkit-liniowy-gradient (lewy, # 93b874, # C9DCB9) - -Background: -o-liniowy gradient (prawy, # 93b874, # C9DCB9) - -Moz-liniowy gradient (prawy, # 93b874, # C9DCB9) - -Background: liniowy gradient (do prawej, # 93b874, # C9DCB9) - kolorground-kolor: # 93b874-}

Jeśli chcesz, zatrzymaj słowa "Left" (po lewej) i "Right" (po prawej), aby eksperymentować z różnymi kierunkami gradientu.

pięć. Użyj innych właściwości, aby ustawić gradient. Z nim możesz zrobić więcej niż wydaje się.

Na przykład po każdym kolorze możesz wprowadzić numer w procentach. Więc określasz, która przestrzeń zajmie każdy segment kolorów. Oto przykładowy kod z takimi parametrami:

Tło: liniowy gradient (# 93b874 10%, # C9DCB9 70%, # 000000 90%)-

Dodaj przezroczystość do koloru. W tym przypadku będzie stopniowo zniknąć. Aby osiągnąć efekt tłumienia, użyj tego samego koloru. Aby ustawić kolor, potrzebujesz funkcji Rgba (). Ta ostatnia wartość określi przezroczystość: 0 - nieprzezroczysty kolor i jeden - przeźroczysty kolor.

Tło: gradient liniowy (do prawej, RGBA (147,184,116,0), RGBA (147,184,116,1))-

6. Wyświetl kod. Kod do tworzenia gradientu kolorów jako tło strony będzie wyglądać w ten sposób:

 {min-wysokość: 100% -} Ciało {Tło: -Webkit-liniowy gradient (w lewo, # 93b874, # C9DCB9) - -Background: -o-liniowy gradient (prawo, # 93b874, # C9DCB9) - - Moz-liniowy gradient (prawo, # 93b874, # C9DCB9) - -Background: liniowy gradient (do prawej, # 93b874, # C9DCB9) - kolorburg-kolor: # 93B874-}

Metoda 4 z 4:

Jak utworzyć zmieniające się tło

jeden. Znajdź nagłówek HTML. Powinien być na górze dokumentu.

2. Dodaj właściwość animacji do elementu "Ciało". Wprowadź następujący kod po "Ciało {" i do klamra zamykającego:

-Webkit-Animation: Colorchange 60. Nieskończona animacja: Colorchange 60s Infinite-

Górna linia tekstu jest przeznaczona do przeglądarek opartych na chromach, a dolna linia tekstu - dla innych przeglądarek.

3. Dodaj kolory do nieruchomości "Animation". Użyj reguły "@keyframes", aby ustawić kolory tła, które zmieni się cyklicznie, a także czas, w którym każdy kolor będzie wyświetlany na stronie. Nie zapomnij wprowadzić innego kodu dla różnych przeglądarek. Wprowadź następujący kod pod klamtorem zamykającym elementu ciała:

@ -Webkit-keyframe colorchange {0% {tło: # 33ffff3-} 25% {tło: # 78281f-} 50% {Tło: # 117A65-} 75% {Tło: # DC7633-} 100% {Tło: # 9B59B6 -}} @ keyframe colorchange {0% {tło: # 33ffff3-} 25% {Tło: # 78281F-} 50% {Tło: # 117A65-} 75% {Tło: # DC7633-} 100% {Tło: # 9B59B6 -}}

Należy pamiętać, że dwie zasady (@ -Webkit-brelokframe i @Keyframes) mają takie same kolory tła i zainteresowania. Odbywa się to w celu zmiany tła poprawnie przepracowanego w dowolnej przeglądarce.

Zainteresowanie (0%, 25% I tak dalej) wskazać udział w czasie (60 S). Gdy strona jest załadowana, jego tło będzie kolorowe # 33FFF3. Gdy 15 ° C (25% 60 s), tło zostanie zmienione na kolor # 7821f itp.

Zmienić czas i kolor, aby pasowały do pożądanego rezultatu.

cztery. Wyświetl kod. Kod do tworzenia zmieniającego się tła powinien wyglądać tak:

 {-Webkit-animacja: Colorchange 60s Infinite-Animation: Colorchange 60s Infinite - @ - Webkit-Keyframe ColorChange {0% {Tło: # 33ffff3-} 25% {Tło: # 78281F-} 50% {Tło: # 117a65- } 75% {Tło: # DC7633-} 100% {Tło: # 9B59B6 -}} @ keyframe colorchange {0% {tło: # 33fff3-} 25% {tło: # 78281f-} 50% {tło: # 117a65- } 75% {Tło: # DC7633-} 100% {Tło: # 9B59B6-}}

Rada

Jeśli chcesz użyć głównych kolorów w kodzie HTML, możesz wprowadzić nazwy kolorów (bez symbolu #), a nie ich kodeksów numerycznych. Na przykład, aby utworzyć pomarańczowe tło, wprowadź Tło-kolor: pomarańczowy-.
Jako strona internetowa można zainstalować obrazek.

Ostrzeżenie

Sprawdź zmiany wprowadzone do kodu strony przed ich publikowaniem.

Kroki

) lub akapit (), Napisz następujący kod:

Tytuł

Rada

Ostrzeżenie

) lub akapit (
), Napisz następujący kod: