Ändra färgen på knappar i ett html-dokument

Denna handledning kommer att lära dig hur du ändrar färgen på en knapp i HTML.Du kan ändra färgen på en knapp med vanlig HTML eller med CSS (Cascading Style Sheets) i HTML5.

Steg

Metod 1 av 2: Använd HTML

Bild med titeln 11147764 1
1. typ i brödtexten i din HTML.Detta är början på knapptaggen för din HTML-kod.Brödtexten i din HTML är området mellan
Bild med titeln 11147764 2
2. typ stil= efter "knapp" i din knapptagg.Detta indikerar att det finns stilelement i knapptaggen.Alla stilelement ligger bakom "=" skylt uppsatt.
Bild med titeln 11147764 3
3. Lägg till ett citat (") efter likhetstecknet (=).Alla stilelement i din HTML-knapptagg måste omges av citattecken.
Bild med titeln 11147764 4
4. typbakgrundsfärg:inuti citaten efter "stil=". Detta element används för att ändra bakgrundsfärgen på knappen.
Bild med titeln 11147764 5
5. Skriv ett färgnamn eller hexadecimal kod efter"bakgrundsfärg:".Du kan ange namnet på en färg (t.ex. blå) eller skriv en hexadecimal färg.
  • För att hitta en hexadecimal kod, gå till https://www.Google.se/sök?q=färg+väljare i en webbläsare.Använd skjutreglaget längst ner för att välja en färg.Använd cirkeln i fönstret för att välja en färg.Markera och kopiera den sexsiffriga koden (inklusive pundtecknet) i sidofältet till vänster och klistra in den i din knapptagg.
  • Du kan också "transparent" använd som bakgrundsfärg
    Bild med titeln 11147764 6
  • 6. Skriv ett semikolon (;) efter bakgrundsfärgen.Använd semikolon för att separera de olika stilelementen i HTML-knappmarkeringen.
    Bild med titeln 11147764 7
    7. typgräns färg: inuti citaten efter "stil=".Detta element används för att bestämma färgen på kanten runt knappen.Du kan placera stilelement i valfri ordning inom citattecken efter "stil=" plats. Varje element måste separeras med semikolon (;).
    Bild med titeln 11147764 8
    8. Ange ett färgnamn eller hexadecimal kod för ramlinjens färg.Färgnamnet eller hexadecimalkoden för kanten kommer efter elementet "gräns färg:" element.
    Om du vill ta bort gränsen, skriv gräns: ingen istället för det "gräns färg:" element att använda.
    Bild med titeln 11147764 9
    9. Skriv ett semikolon (;) efter kantfärgen.Använd semikolon för att separera de olika stilelementen i HTML-knapptaggen.
    Bild med titeln 11147764 10
    10. typFärg:inuti citaten efter "stil=". Detta element används för att ändra textfärgen i knappen.Du kan placera stilelement i valfri ordning inom citattecken efter "stil=" plats. Varje element måste separeras med semikolon (;).
    Bild med titeln 11147764 11
    11. Skriv namnet på en färg eller hexadecimal kod.Detta kommer efter "Färg:" i stilelementet.Detta bestämmer färgen på texten i knappen.
    Bild med titeln 11147764 12
    12. Skriv ett citattecken (") efter varje stilelement.Varje stilelement måste omges av citattecken efter "stil=" vara i knapptaggen.När du är klar med att lägga till ett stilelement, skriv ett citat (") i slutet för att stänga stilelementet.
    Bild med titeln 11147764 13
    13. typ > efter stilelementet.Detta är en slutbricka.
    Bild med titeln 11147764 14
    14. Skriv knapptexten efter knappmarkeringen.När du är klar med öppningstaggen för din knapp, skriv texten som kommer inuti knappen efter taggen.
    Bild med titeln 11147764 15
    15. typ efter knapptexten.Detta är den avslutande taggen för din knapp.Knappen är nu klar.HTML-koden ska se ut så här.

    Metod 2 av 2: Använda CSS

    Bild med titeln 11147764 16
    1. typ överst i HTML-dokumentet.Detta skapar en rubrik för ditt HTML-dokument.Rubriken på dokumentet är där informationen går som inte är synlig på webbsidan.Detta inkluderar metadata, sidtitel och stilmallar.
    Bild med titeln 11147764 17
    2. typ .Den här taggen lägger till en plats på en webbsida för cascade style sheets (CSS).Det här avsnittet kommer att visas i rubriken på ett HTML-dokument.
    Vissa HTML-dokument använder en extern stilmall.Om så är fallet måste du veta platsen för den externa CSS-filen och redigera stilmallarna för knapparna i det dokumentet.
    Bild med titeln 11147764 18
    3. typ .knapp { på en separat rad efter stilavsnittet.Detta öppnar formatmallen för en knapp som du skapar en stil för.
    Du kan också ändra färgen på knappen när du håller muspekaren över knappen genom att skapa en separat stilmall med .button:hover { som öppningsbricka.
    Bild med titeln 11147764 19
    4. typ bakgrundsfärg:. Den här koden kommer att finnas på en separat rad i stilmallen för knapparna. Detta element styr bakgrundsfärgen på knappen.
    Bild med titeln 11147764 20
    5. Skriv namnet på en färg eller hexadecimal kod följt av ett semikolon (;).Skriv detta efter elementet "bakgrundsfärg:" i knapparnas stilmall.Detta indikerar knappens bakgrundsfärg.
  • För att hitta en hexadecimal kod, gå till https://www.Google.se/sök?q=färg+väljare i en webbläsare.Använd skjutreglaget längst ner för att välja en färg.Använd cirkeln i fönstret för att välja en färg.Markera och kopiera den sexsiffriga koden (med pundtecknet) i sidofältet till vänster.
  • Du kan också "transparent" skriv som bakgrundsfärg för att göra bakgrunden osynlig.
    Bild med titeln 11147764 21
  • 6. typ gräns färg:. Elementet bestämmer färgen på kanten runt knappen.Skriv detta på en separat rad i stilmallen för knappen.
    Bild med titeln 11147764 22
    7. Skriv namnet på en färg eller hexadecimal kod följt av ett semikolon (;).Detta bestämmer färgen på kanten runt knappen. Detta kommer efter elementet "gräns färg:" i knappens stilmall.
    Om du vill ta bort gränsen, använd border:ingen; istället för elementet "border-color:colorname".
    Bild med titeln 11147764 23
    8. typ Färg:. Skriv detta på en separat rad i stilmallen. Detta element styr färgen på texten i knappen.
    Bild med titeln 11147764 24
    9. Skriv namnet på en färg eller hexadecimal kod följt av ett semikolon (;).Detta bestämmer färgen på texten i knappen.Detta kommer efter "Färg:"-element i knappens stilmall.
    Bild med titeln 11147764 25
    10. typ } på en separat rad.Stänger stilmallen för knappen.Du kan skapa flera knappstilmallar, så länge du ger varje knapp ett unikt namn.
    Bild med titeln 11147764 26