Din acest articol veți învăța cum să modificați culoarea fundalului paginii web, dacă editați codul HTML.

Pași

Metoda 1 din 4:

Cum se pregătește pentru editarea codului HTML

unu. Determinați culoarea de fundal pe care doriți să o utilizați. În HTML, culorile sunt stabilite prin coduri care determină diverse nuanțe. Utilizați instrumentul HTML de color HTML gratuit online pentru a găsi nevoile culorilor dorite:

Mergi la pagina https: // w3schools.Com / culori / culori_picker.ASP Într-un browser web.
Selectați culoarea de bază pe care doriți să o utilizați în secțiunea "Pick A Color".
Alegeți o umbră din partea dreaptă a paginii.
Înregistrați codul care va fi afișat în partea dreaptă a umbra selectată.

2. Deschideți un fișier HTML într-un editor de text. Amintiți-vă că în atributul HTML5 Nu mai sunt acceptate. Prin urmare, culoarea de fundal și alte setări de stil de pagină sunt setate utilizând CSS.

Documentul HTML poate fi deschis în Notepad ++ sau Notepad (Windows), precum și în TEXTEDIT sau BBEDIT (MAC).

3. Adăugați antetul HTML la document. Toate parametrii stilului de pagini, inclusiv culoarea fundalului, trebuie să fie între etichete :

4. Creați un șir gol între etichetele de stil. Pe această linie, care ar trebui să fie sub etichetă Și peste etichetă , Veți introduce informațiile necesare.

6. Adăugați un element "corp". Introduceți următorul cod între etichete :

CORP {}

Tot ce va fi încheiat în interiorul elementului "corp" din CSS va afecta întreaga pagină.

Săriți acest pas dacă doriți să creați un gradient de fundal.

Metoda 2 din 4:

Cum se creează un fundal monofonic

unu. Găsiți antetul HTML. Ar trebui să fie în partea de sus a documentului.

2. Adăugați proprietatea "fundal-culoare" în elementul "corp". introduce Culoare de fundal: În paranteze curbate în interiorul elementului "corp". Următorul cod ar trebui să se dovedească:

Corp {fundal-culoare:}

Rețineți că în acest cod este necesar să utilizați cuvântul "culoare" și nu "Color".

3. Adăugați culoarea de fundal dorită la proprietatea "fundal-color". În partea dreaptă a "culorii de fundal:" introduceți codul numeric al culorii selectate, apoi introduceți semicolonul (-). De exemplu, pentru a face fundalul paginilor roz, scrieți următorul cod:

Corp {fundal-culoare: # d24df-}

4. Examinați informațiile din cadrul Tag "Stil". În acest stadiu, antetul documentului dvs. HTML ar trebui să arate astfel:

 {fundal-culoare: # d24dff}

cinci. Utilizați "culoarea de fundal" pentru a seta culoarea de fundal a altor elemente (anteturi, paragrafe și altele asemenea). De exemplu, pentru a seta culoarea de fundal a antetului principal (

) sau paragraf (
), scrieți următorul cod:

 {fundal-culoare: # 93b874-} H1 {fundal-culoare: # 00b33c-} p {fundal-culoare: #fffffffffsed) -}Titlu
 Pe fundal verdeParagraf
 pe fundal alb

Metoda 3 din 4:

Cum se creează un fundal de gradient

unu. Găsiți antetul HTML. Ar trebui să fie în partea de sus a documentului.

2. Amintiți-vă principala sintaxă a acestui proces. Pentru a crea un gradient, trebuie să cunoașteți două cantități: punctul de plecare / unghiul și un număr de culori care se vor mișca unul în altul. Puteți alege câteva culori astfel încât să meargă unul la celălalt; puteți specifica și direcția sau unghiul de tranziție.

Fundal: Gradient liniar (direcție / unghi, culoare1, culoare2, culoare3 și așa mai departe)-

3. Creați un gradient vertical. Dacă nu specificați direcția, gradientul va trece de sus în jos. Pentru a crea un astfel de gradient, introduceți următorul cod între etichete :

HTML {min-înălțime: 100% -} corp {fundal: -webit-linear-gradient (# 93b874, # C9dcb9) -Ground: -O-Linear-Gradient (# 93b874, # C9dcb9) -background: -moz-linear -Gradient (# 93b874, # C9DCB9) -Ground: Linear-Gradient (# 93b874, # C9dcb9) -back-culoare: # 93b874-}

În diferite browsere, funcția de gradient este implementată diferit, deci trebuie să adăugați mai multe versiuni de cod.

4. Creați un gradient direcționat. Dacă nu doriți ca gradientul să meargă vertical, specificați direcția de tranziție a culorilor. Pentru aceasta, introduceți următorul cod între etichete :

Html {min-înălțime: 100% -} corp {fundal: -webit-linear-gradient (stânga, # 93b874, # C9dcb9) -Ground: -O-Linear-Gradient (dreapta, # 93b874, # C9DCB9) -Ground: -Moz-linear-gradient (dreapta, # 93b874, # C9DCB9) -Ground: Gradient linear (la dreapta, # 93b874, # C9dcb9) -Background-culoare: # 93b874-}

Dacă doriți, opriți cuvintele "stânga" (stânga) și "dreapta" (dreapta) pentru a experimenta cu diferite direcții ale gradientului.

cinci. Utilizați alte proprietăți pentru a seta gradientul. Cu el poți face mai mult decât pare.

De exemplu, după fiecare culoare puteți introduce un număr în procente. Deci, specificați ce spațiu va ocupa fiecare segment de culoare. Iată un exemplu de cod cu astfel de parametri:

Fundal: Gradient linear (# 93b874 10%, # C9DCB9 70%, # 000000 90%)-

Adăugați transparență la culoare. În acest caz, el va dispărea treptat. Pentru a atinge efectul de atenuare, utilizați aceeași culoare. Pentru a seta culoarea, veți avea nevoie de o funcție RGBA (). Ultima valoare va determina transparența: 0 - Culoarea opacă și unu - Culoare transparentă.

Fundal: Gradient linear (la dreapta, RGBA (147,184,116,0), RGBA (147,184,116,1))-

6. Vizualizați codul. Codul pentru crearea unui gradient de culoare ca fundal de pagină va arăta așa:

 {min-înălțime: 100% -} corp {fundal: -webit-linear-gradient (stânga, # 93b874, # C9dcb9) -Ground: -O-Linear-Gradient (dreapta, # 93b874, # C9DCB9) -Ground: - Moz-linear-gradient (dreapta, # 93b874, # C9DCB9) -Ground: Gradient linear (la dreapta, # 93b874, # C9dcb9) -Background-culoare: # 93b874-}

Metoda 4 din 4:

Cum se creează un fundal în schimbare

unu. Găsiți antetul HTML. Ar trebui să fie în partea de sus a documentului.

2. Adăugați proprietatea animației la elementul "corp". Introduceți următorul cod după "corpul {" și la brațul de închidere:

-Webkit-animație: colorchange 60s infinit-animație: colorchange 60s infinit-

Linia de sus a textului este proiectată pentru browserele bazate pe crom și linia inferioară a textului - pentru alte browsere.

3. Adăugați culori la proprietatea "Animație". Utilizați regula "@keyframes" pentru a seta culorile de fundal care se vor schimba ciclic, precum și timpul în care fiecare culoare va fi afișată pe pagină. Nu uitați să introduceți un cod diferit pentru diferite browsere. Introduceți următorul cod în conformitate cu brațul de închidere al elementului corporal:

@ -Webkit-Keyframes ColorChange {0% {fundal: # 33fff 3-} 25% {fundal: # 78281f-} 50% {fundal: # 117A65-} 75% {fundal: # DC7633-} 100% {Fundal: # 9B59B6 . -}}

Rețineți că două reguli (@ -Webkit-Keyframes și @Frame) au aceleași culori fundal și interes. Acest lucru se face pentru schimbarea corectă a fundalului în orice browser.

Interes (0%, 25% Și așa mai departe) indică o parte a timpului (60 S). Când pagina este încărcată, fundalul său va fi culoarea # 33ff3. Când 15 ° C (25% din 60 s), fundalul va fi schimbat la culoare # 7821f etc.

Schimbați timpul și culoarea, astfel încât acestea să corespundă rezultatului dorit.

4. Vizualizați codul. Codul pentru crearea unui fundal în schimbare ar trebui să arate astfel:

 {-Webkit-animație: colorchange 60s infinite-animație: colorchange 60s infinit -} @ - Webkit-Keyframes colorchange {0% {fundal: # 33ffff3-} 25% {fundal: # 78281f-} 50% {Fundal: # 117A65- } 75% {Fundal: # DC7633-} 100% {fundal: # 9b59b6 -}} @ Keyframes Colorchange {0% {fundal: # 33ff3-} 25% {fundal: # 78281f-} 50% {fundal: # 117A65- } 75% {Fundal: # DC7633-} 100% {Fundal: # 9B59B6-}}

sfaturi

Dacă doriți să utilizați culorile principale din codul HTML, puteți introduce numele culorilor (fără simbol #) și nu codurile lor numerice. De exemplu, pentru a crea un fundal portocaliu, introduceți Culoare fundal: portocaliu-.
Ca o pagină web, puteți instala imagine.