Endre fargen på knappene i et html-dokument (med bilder)

Innhold

Trinn
- Metode 1 av 2: Bruke HTML
- Metode 2 av 2: Bruk av CSS

Denne opplæringen vil lære deg hvordan du endrer fargen på en knapp i HTML.Du kan endre fargen på en knapp ved å bruke vanlig HTML eller bruke CSS (Cascading Style Sheets) i HTML5.

Trinn

Metode 1 av 2: Bruke HTML

1. type i hoveddelen av HTML-en din.Dette er begynnelsen på knappekoden til HTML-koden din.Brødteksten i HTML-en din er området mellom

2. type stil= etter "knapp" i knappen din.Dette indikerer at det er stilelementer i knappe-taggen.Alle stilelementer ligger bak "=" skilt oppsatt.

3. Legg til et sitat (") etter likhetstegnet (=).Alle stilelementer i HTML-knappkoden må være omgitt av anførselstegn.

4. typebakgrunnsfarge:inne i sitatene etter "stil=". Dette elementet brukes til å endre bakgrunnsfargen på knappen.

5. Skriv inn et fargenavn eller heksadesimal kode etter"bakgrunnsfarge:".Du kan skrive inn navnet på en farge (f.eks. blå) eller skriv inn en heksadesimal farge.

For å finne en heksadesimal kode, gå til https://www.Google.no/søk?q=farge+velger i en nettleser.Bruk glidebryteren nederst for å velge en farge.Bruk sirkelen i vinduet for å velge en farge.Marker og kopier den sekssifrede koden (inkludert pundtegnet) i sidefeltet til venstre og lim den inn i knappekoden din.

Du kan også "gjennomsiktig" bruk som bakgrunnsfarge

6. Skriv inn et semikolon (;) etter bakgrunnsfargen.Bruk et semikolon for å skille de forskjellige stilelementene i HTML-knappen.

7. typegrensefarge: inne i sitatene etter "stil=".Dette elementet brukes til å bestemme fargen på kanten rundt knappen.Du kan plassere stilelementer i hvilken som helst rekkefølge innenfor anførselstegnene etter "stil=" sted. Hvert element må skilles med semikolon (;).

8. Skriv inn et fargenavn eller heksadesimal kode for rammelinjefargen.Fargenavnet eller den heksadesimale koden for kantlinjen kommer etter elementet "grensefarge:" element.

Hvis du vil fjerne rammen, skriv inn grense: ingen i stedet for det "grensefarge:" element å bruke.

9. Skriv inn et semikolon (;) etter kantfargen.Bruk semikolon for å skille de forskjellige stilelementene i HTML-knappkoden.

10. typefarge:inne i sitatene etter "stil=". Dette elementet brukes til å endre tekstfargen i knappen.Du kan plassere stilelementer i hvilken som helst rekkefølge innenfor anførselstegnene etter "stil=" sted. Hvert element må skilles med semikolon (;).

11. Skriv inn navnet på en farge eller heksadesimal kode.Dette kommer etterpå "farge:" i stilelementet.Dette bestemmer fargen på teksten i knappen.

12. Skriv inn et anførselstegn (") etter hvert stilelement.Hvert stilelement må omsluttes av anførselstegn etter "stil=" være i knappen.Når du er ferdig med å legge til et stilelement, skriv inn et sitat (") på slutten for å lukke stilelementet.

1. 3. type > etter stilelementet.Dette er en sluttkode.

14. Skriv inn knappeteksten etter knappens utheving.Når du er ferdig med åpningstaggen til knappen din, skriv inn teksten som kommer inne i knappen etter taggen.

15. type etter knappeteksten.Dette er den avsluttende taggen for knappen din.Knappen er nå fullført.HTML-koden skal se slik ut.

Metode 2 av 2: Bruk av CSS

1. type øverst i HTML-dokumentet.Dette lager en overskrift for HTML-dokumentet ditt.Overskriften på dokumentet er hvor informasjonen går som ikke er synlig på nettsiden.Dette inkluderer metadata, sidetittel og stilark.

2. type .Denne taggen legger til en plassering på en nettside for cascade style sheets (CSS).Denne delen vises i overskriften til et HTML-dokument.

Noen HTML-dokumenter bruker et eksternt stilark.I så fall må du vite plasseringen til den eksterne CSS-filen og redigere stilarkene til knappene i det dokumentet.

3. type .knapp { på egen linje etter stildelen.Dette vil åpne stilarket for en knapp du lager en stil for.

Du kan også endre fargen på knappen når du holder musepekeren over knappen ved å lage et eget stilark med .button:hover { som åpningsmerke.

4. type bakgrunnsfarge:. Denne koden vil være på en egen linje i stilarket til knappene. Dette elementet kontrollerer bakgrunnsfargen til knappen.

5. Skriv inn navnet på en farge eller heksadesimal kode etterfulgt av et semikolon (;).Skriv dette etter elementet "bakgrunnsfarge:" i stilarket til knappene.Dette indikerer bakgrunnsfargen til knappen.

Du kan også "gjennomsiktig" skriv inn som bakgrunnsfarge for å gjøre bakgrunnen usynlig.

6. type grensefarge:. Elementet bestemmer fargen på kanten rundt knappen.Skriv dette på en egen linje i stilarket for knappen.

7. Skriv inn navnet på en farge eller heksadesimal kode etterfulgt av et semikolon (;).Dette bestemmer fargen på kanten rundt knappen. Dette kommer etter elementet "grensefarge:" i stilarket til knappen.

Hvis du vil fjerne grensen, bruk grense:ingen; i stedet for elementet "kant-farge: fargenavn".

8. type farge:. Skriv dette på en egen linje i stilarket. Dette elementet kontrollerer fargen på teksten i knappen.

9. Skriv inn navnet på en farge eller heksadesimal kode etterfulgt av et semikolon (;).Dette bestemmer fargen på teksten i knappen.Dette kommer etter "farge:"-element i knappens stilark.