Kuidas muuta HTML-is nuppude värvi

See Selgitatud õpetab, kuidas HTML-is nupuvärvi muuta. Nupu värvi saate muuta tavalise HTML-i või HTML5-s CSS-i (Cascading Style Sheets) abil.

1
Tippige HTML-i sisusse ja vaheline ala. Keha on koht, kuhu HTML-i abil paigutatakse veebilehe nähtavad elemendid.

2
Tippige nupumärgendisse sõna “button” järele style=. See näitab, et nupusildil on stiilielemente. Kõik stiilielemendid paigutatakse märgi “=” järele.

3
Lisage võrdusmärgi (=) järele jutumärk (“). Kõik HTML-i nupumärgendi stiilielemendid tuleks paigutada jutumärkidesse.

4
Sisestage “style=”” järel olevasse jutumärkidesse tekst background-color:. Seda elementi kasutatakse nupu taustavärvi muutmiseks.

5
Tippige pärast “taustavärv:” värvi nimi või kuueteistkümnendkood. Võite sisestada värvi nime (nt sinine) või kuueteistkümnendsüsteemi värvi. Kuueteistkümnendkoodi leidmiseks minge veebibrauseris aadressile https://www.google.com/search?q=color+picker. Kasutage värvi valimiseks allosas olevat liugurit. Kasutage värvitooni valimiseks aknas olevat ringi. Tõstke esile ja kopeerige 6-kohaline kood (sh naelamärk) vasakpoolsel külgribal ning kleepige see oma nupusildile. Taustavärvina saab kasutada ka “läbipaistvat”.

6
Tippige taustavärvi järele semikoolon (;). Kasutage HTML-nupu märgendi erinevate stiilielementide eraldamiseks semikoolonit.

7
Tippige “style=”” järel olevasse jutumärkidesse border-color:. Seda elementi kasutatakse nuppu ümbritseva äärise värvi määramiseks. Saate paigutada stiilielemente suvalises järjekorras jutumärkidesse pärast “style=”. Iga element peab olema eraldatud semikooloniga (;).

8
Tippige äärise värvi värvinimi või kuueteistkümnendkood. Piiri värvinimi või kuueteistkümnendkood järgneb elemendile “border-color:”. Kui soovite äärise eemaldada, tippige elemendi “border-color:” asemele border:none.

9
Tippige äärise värvi järele semikoolon (;). Kasutage HTML-nupu märgendi erinevate stiilielementide eraldamiseks semikoolonit.

10
Sisestage “style=”” järel olevasse jutumärkidesse color:. Seda elementi kasutatakse nupu teksti värvi muutmiseks. Saate paigutada stiilielemente suvalises järjekorras jutumärkidesse pärast “style=”. Iga element peab olema eraldatud semikooloniga (;).

11
Tippige värvi nimi või kuueteistkümnendkood. See läheb stiilielemendis pärast sõna “värv:”. See määrab nupul oleva teksti värvi.

12
Sisestage kõigi stiilielementide järele jutumärk (“). Kõik stiilielemendid peaksid olema nupumärgendis sõna “style=” järel jutumärkides. Kui olete kõigi stiilielementide lisamise lõpetanud, tippige jutumärk (“) aadressile otsa stiilielementide sulgemiseks.

13
Tippige stiilielementide järele >. See sulgeb avamisnupu sildi.

14
Sisestage nupu tekst pärast nupu märgendit. Kui olete oma nupule avamärgendi loomise lõpetanud, tippige märgendi järel olevasse nupusse tekst, mida soovite minna.

15
Tippige nupu teksti järele . See on teie nupu sulgev silt. Teie nupp on valmis. Teie HTML-kood peaks välja nägema umbes selline. Nupu tekst

16
Tippige HTML-dokumendi ülaossa. See loob teie HTML-dokumendi pea. Teie dokumendi pea on koht, kuhu paigutatakse teave, mida teie veebilehel ei kuvata. See hõlmab metaandmeid, lehe pealkirja ja laadilehti.

17
Tippige

. Kui olete kõigi stiililehtede loomise lõpetanud, tippige HTML-dokumendi stiilijaotise sulgemiseks eraldi reale “

“.

27
Tippige. See sulgeb teie HTML-dokumendi pea.

28
Sisestage oma HTML-dokumendi sisusse nupu tekst. See lisab nupu HTML-i nähtavale osale, kasutades HTML-dokumendi jaotises Stiil määratud laadilehti. Asendage “url” veebiaadressiga, millele nupp viitab. Teie HTML-dokumendi põhiosa jääb teie HTML-dokumendi siltide ja vahele. Teie HTML-kood peaks välja nägema umbes selline:

Avaleht