Verander die kleur van knoppies in 'n HTML-dokument (met beelde)

Inhoud

Trappe
- Metode 1 van 2: Gebruik HTML
- Metode 2 van 2: Gebruik CSS

Hierdie handleiding sal jou leer hoe om die kleur van `n knoppie in HTML te verander.Jy kan die kleur van `n knoppie verander deur gewone HTML of CSS (Cascading Style Sheets) in HTML5 te gebruik.

Trappe

Metode 1 van 2: Gebruik HTML

1. tipe in die liggaam van jou HTML.Dit is die begin van die knoppie-merker van jou HTML-kode.Die liggaam van jou HTML is die area tussen die

2. tipe styl= na "knoppie" in jou knoppie-etiket.Dit dui aan dat daar stylelemente in die knoppie-merker is.Alle stylelemente is agter die "=" teken geplaas.

3. Voeg `n kwotasie by (") na die gelyke teken (=).Alle stylelemente in jou HTML-knoppiemerker moet in aanhalingstekens ingesluit word.

4. tipeagtergrondkleur:binne die aanhalingstekens na "styl=". Hierdie element word gebruik om die agtergrondkleur van die knoppie te verander.

5. Tik `n kleurnaam of heksadesimale kode na"agtergrondkleur:".Jy kan die naam van `n kleur invoer (bv. blou) of tik `n heksadesimale kleur in.

Om `n heksadesimale kode te vind, gaan na https://www.google.com/soek?q=kleur+kieser in `n webblaaier.Gebruik die skuifbalk aan die onderkant om `n kleur te kies.Gebruik die sirkel in die venster om `n kleur te kies.Merk en kopieer die sessyferkode (insluitend die pondteken) in die sybalk aan die linkerkant en plak dit in jou knoppie-merker.

Jy kan ook "deursigtig" gebruik as agtergrondkleur

6. Tik `n kommapunt (;) na die agtergrondkleur.Gebruik `n kommapunt om die verskillende stylelemente in die HTML-knoppie-hoogtepunt te skei.

7. tiperand-kleur: binne die aanhalingstekens na "styl=".Hierdie element word gebruik om die kleur van die rand rondom die knoppie te bepaal.Jy kan stylelemente in enige volgorde binne die aanhalings na plaas "styl=" plek. Elke element moet geskei word deur `n kommapunt (;).

8. Voer `n kleurnaam of heksadesimale kode vir die raamlynkleur in.Die kleurnaam of heksadesimale kode vir die grens kom na die element "rand-kleur:" element.

As jy die rand wil verwyder, tik grens: geen in plaas daarvan "rand-kleur:" element om te gebruik.

9. Tik `n kommapunt (;) na die randkleur.Gebruik `n kommapunt om die verskillende stylelemente in die HTML-knoppie-merker te skei.

10. tipekleur:binne die aanhalingstekens na "styl=". Hierdie element word gebruik om die tekskleur in die knoppie te verander.Jy kan stylelemente in enige volgorde binne die aanhalings na plaas "styl=" plek. Elke element moet geskei word deur `n kommapunt (;).

11. Tik die naam van `n kleur of heksadesimale kode.Dit kom daarna "kleur:" in die stylelement.Dit bepaal die kleur van die teks in die knoppie.

12. Tik `n aanhalingsteken (") na elke stylelement.Elke stylelement moet agterna in aanhalingstekens ingesluit word "styl=" wees in die knoppie-etiket.Wanneer jy klaar is met die byvoeging van `n stylelement, tik `n aanhaling (") aan die einde om die stylelement toe te maak.

13. tipe > na die stylelement.Dit is `n eindmerk.

14. Tik die knoppie teks na die knoppie hoogtepunt.Wanneer jy klaar is met die openingmerker van jou knoppie, tik die teks wat binne-in die knoppie ná die merker kom.

15. tipe na die knoppie teks.Dit is die sluitingsmerker vir jou knoppie.Die knoppie is nou voltooi.Die HTML-kode moet so lyk.

Metode 2 van 2: Gebruik CSS

1. tipe aan die bokant van die HTML-dokument.Dit skep `n kopskrif vir jou HTML-dokument.Die kop van die dokument is waarheen die inligting gaan wat nie op die webblad sigbaar is nie.Dit sluit metadata, bladsytitel en stylblaaie in.

2. tipe .Hierdie merker voeg `n ligging op `n webblad by vir cascade style sheets (CSS).Hierdie afdeling sal in die kopskrif van `n HTML-dokument verskyn.

Sommige HTML-dokumente gebruik `n eksterne stylblad.Indien wel, moet jy die ligging van die eksterne CSS-lêer ken en die stylblaaie van die knoppies in daardie dokument wysig.

3. tipe .knoppie { op `n aparte reël na die stylafdeling.Dit sal die stylblad oopmaak vir `n knoppie waarvoor jy `n styl skep.

Jy kan ook die kleur van die knoppie verander wanneer jy oor die knoppie beweeg deur `n aparte stylblad te skep met .knoppie:sweef { as opening tag.

4. tipe agtergrondkleur:. Hierdie kode sal op `n aparte reël in die stylblad van die knoppies wees. Hierdie element beheer die agtergrondkleur van die knoppie.

5. Tik die naam van `n kleur of heksadesimale kode gevolg deur `n kommapunt (;).Tik dit na die element "agtergrondkleur:" in die stylblad van die knoppies.Dit dui die agtergrondkleur van die knoppie aan.

Om `n heksadesimale kode te vind, gaan na https://www.google.com/soek?q=kleur+kieser in `n webblaaier.Gebruik die skuifbalk aan die onderkant om `n kleur te kies.Gebruik die sirkel in die venster om `n kleur te kies.Merk en kopieer die ses-syfer kode (met die skutteken) in die sybalk aan die linkerkant.

Jy kan ook "deursigtig" tik as agtergrondkleur, om die agtergrond onsigbaar te maak.

6. tipe rand-kleur:. Die element bepaal die kleur van die rand rondom die knoppie.Tik dit op `n aparte reël in die stylblad vir die knoppie.

7. Tik die naam van `n kleur of heksadesimale kode gevolg deur `n kommapunt (;).Dit bepaal die kleur van die rand rondom die knoppie. Dit kom na die element "rand-kleur:" in die stylblad van die knoppie.

As jy die grens wil verwyder, gebruik grens: geen; in plaas van die element "grens-kleur: kleurnaam".

8. tipe kleur:. Tik dit op `n aparte reël in die stylblad. Hierdie element beheer die kleur van die teks in die knoppie.

9. Tik die naam van `n kleur of heksadesimale kode gevolg deur `n kommapunt (;).Dit bepaal die kleur van die teks in die knoppie.Dit kom na die "kleur:"-element in die knoppie se stylblad.

10. tipe } op `n aparte lyn.Maak die stylblad vir die knoppie toe.Jy kan veelvuldige knoppie-stylblaaie skep, solank jy elke knoppie `n unieke naam gee.