Sådan ændrer du knapfarven i HTML (med billeder)

ThisTeaches dig, hvordan du ændrer en knapfarve i HTML. Du kan ændre en knapfarve ved hjælp af almindelig HTML eller ved hjælp af CSS (Cascading Style Sheets) i HTML5.

Trin

Metode 1 af 2:

Brug HTML

1. Skriv i kroppen af dig html. Dette er starten på knappen Tag på din HTML-kode. Kroppen af din HTML er området imellem og Tags. Kroppen er, hvor de synlige elementer på en webside placeres ved hjælp af HTML.

2. Type Style = efter "knap" I din knap tag. Dette indikerer, at der er stilelementer til knapmærket. Alle stilelementer vil blive placeret efter "=" skilt.

3. Tilføj et citatmærke (") Efter ligestilling (=) tegn. Alle stilelementer i din HTML-knap tag skal placeres inden for citatmærker.

4. Type baggrundsfarve:i citatmærkerne efter "Style =". Dette element bruges til at ændre baggrundsfarven på knappen.

5. Indtast et farve navn eller hexadecimal kode efter "baggrundsfarve:". Du kan skrive navnet på en farve (I.e, blå) eller en hexadecimal farve.

For at finde en hexadecimal kode, gå til https: // Google.com / Search?q = farve + picker I en webbrowser. Brug skyderen i bunden for at vælge en farve. Brug cirklen i vinduet til at vælge en farvetone. Fremhæv og kopier den 6-cifrede kode (inklusive pundskiltet) i sidebjælken til venstre og indsæt det i dit knapmærke.

Du kan også bruge "gennemsigtig" Som en baggrundsfarve

6. Skriv en semi-colon (-) efter baggrundsfarven. Brug et semi-colon til at adskille de forskellige stilelementer i HTML-knappen.

7. Type Border-Farve: i citatmærkerne efter "Style =". Dette element bruges til at bestemme farven på grænsen omkring knappen. Du kan placere stilelementer i enhver rækkefølge i citatmarkørerne efter "Style =". Hvert element skal adskilles af et semi-colon (-).

8. Skriv et farve navn eller hexidecimal kode til grænsen farve. Farveavnet eller hexidecimalkoden for grænsen går efter "Border-Farve:" element.

Hvis du ønsker at fjerne grænsen, skriv Border: Ingen I stedet for "Border-Farve:" element.

9. Type A Semi-Colon (-) efter grænsekarven. Brug et semi-colon til at adskille de forskellige stilelementer i HTML-knappen.

10. Type farve:i citatmærkerne efter "Style =". Dette element bruges til at ændre tekstfarven i knappen. Du kan placere stilelementer i enhver rækkefølge i citatmarkørerne efter "Style =". Hvert element skal adskilles af et semi-colon (-).

11. Indtast navnet på en farve eller hexadecimal kode. Dette går efter "farve:" I stilelementet. Dette bestemmer farven på teksten i knappen.

12. Indtast et citatmærke (") Efter alle dine stilelementer. Alle dine stilelementer skal være i citatmærker efter "Style =" I knapmærket. Når du er færdig med at tilføje alle dine stilelementer, skal du skrive et citatmærke (") i slutningen for at lukke stilelementerne.

13. Type > Efter stilelementerne. Dette lukker åbningsknappen.

14. Indtast din knaptekst efter knappen Tag. Når du er færdig med at oprette åbningskoden til din knap, skal du skrive den tekst, du vil gå i knappen efter mærket.

15. Skriv efter din knap tekst. Dette er slutmagnet for din knap. Din knap er færdig. Din HTML-kode skal se sådan ud.

Metode 2 af 2:

Ved hjælp af CSS

1. Skriv øverst på dit HTML-dokument. Dette skaber et hoved til dit HTML-dokument. Hovedet for dit dokument er, hvor oplysninger, der ikke er synlige på din webside, er placeret. Dette omfatter meta data, titlen på siden og stilark.

2. Type . Dette mærke tilføjer en placering på din webside for Cascading Style Sheets (CSS). Dette afsnit går i hovedet på dit HTML-dokument.

Nogle HTML-dokumenter bruger et eksternt stilark. Hvis dette er tilfældet, skal du finde placeringen af den eksterne CSS-fil og redigere knappens stilark på dette dokument.

3. Type .knappen { på en separat linje efter stil sektionen. Dette åbner stilarket for en knap, du skaber en stil til.

Du kan også gøre knappen farveændring, når du placerer musemarkøren over knappen ved at oprette et separat stilark med .Button: Hover { Som åbningsmærket.

4. Type baggrundsfarve:. Dette gælder en separat linje i knappens stilark. Dette element styrer baggrundsfarven på knappen.

5. Indtast navnet på en farve eller hexadecimal kode efterfulgt af et semi-colon (-). Skriv dette efter "baggrundsfarve:" element i knappens stilark. Dette angiver baggrundsfarven på knappen.

Du kan også skrive "gennemsigtig" Som baggrundsfarven for at gøre baggrunden usynlig.

6. Type Border-Farve:. Elementet styrer grænsen på grænsen omkring knappen. Indtast dette på en separat linje i stilarket for knappen.

7. Indtast navnet på en farve eller hexadecimal kode efterfulgt af et semi-colon (-). Dette bestemmer grænsen på grænsen omkring knappen. Dette går efter "Border-Farve:" element i knappens stilark.

Hvis du ønsker at fjerne grænsen, skriv Border: Ingen- I stedet for "Border-Farve: Colorname" element.

8. Type farve:. Skriv dette på en separat linje i stilarket. Dette element styrer farven på teksten i knappen.

9. Indtast navnet på en farve eller hexadecimal kode efterfulgt af et semi-colon (-). Dette bestemmer farven på teksten inde i knappen. Dette går efter "farve:" element i knappens stilark.

10. Type } på en separat linje. Dette lukker stilarket til din knap. Du kan oprette flere knap stilark, så længe du giver hver knap et unikt navn.

11. Type, når du er færdig med din CSS. Når du er færdig med at oprette alle dine stilark, skriver du "" på en separat linje for at lukke stilafsnittet i dit HTML-dokument.

12. Type . Dette lukker hovedet på dit HTML-dokument.

13. Type Knappen Text I kroppen af dit HTML-dokument. Dette tilføjer en knap til den synlige del af din HTML ved hjælp af de stilark, der er angivet i stilafsnittet i dit HTML-dokument. Erstatte "URL" Med webadressen links til. Kroppen af dit HTML-dokument går ind mellem og Tags af dit HTML-dokument. Du HTML-kode skal se sådan ud:

Del på sociale netværk :

Sådan ændres knapfarven i html

Trin