Slik Kombiner HTML-knappen Farger Med Font

Slik Kombiner HTML-knappen Farger Med Font


Før CSS, webdesignere blandet fonter og farger i samme koden som utgjorde deres web sideelementer. En HTML-knapp, for eksempel, kan ha inneholdt "input" tag som definerer knappen, samt en "font" tag å sette knappens skrift. Savvy utviklere nå bruke Cascading Style Sheets å skille koden som skaper en webside element fra koden som forteller nettlesere hvordan å vise det. Når du trenger å legge til et snev av stil til en webside, style dine knappen fonter og farger ved hjelp av CSS-klasser.

Bruksanvisning

1 Åpne Notepad eller en HTML editor. Kopier koden nedenfor og lim den inn i body-delen av en ny HTML-dokument:

<Input class = "style1" type = "button" value = "Knapp 1" />

<Input class = "style2" type = "button" value = "Knapp 2" />

Denne koden oppretter to knapper som refererer til to CSS klasser som heter "style1" og "style2." Disse klassene kontrollere hvordan knapper vises på websiden.

2 Lim inn følgende kode i "hodet" -delen av dokumentet:

.style1 {color: red; background-color: gul; font-size: 2em; font-weight: bold; font-family: "Times New Roman", Arial, serif;}

.style2 {{color: blue; font-size: 0.8em; font-weight: bold; font-family: Georgia, Helvetica, Arial;}

Denne CSS-kode skaper "style1" og "style2" klasser referert av knappene i forrige trinn. Merk attributtene til hver klasse. Fargen egenskap setter knappens forgrunnen tekstfarge. Bakgrunnen-attributtet styrer knappen bakgrunnsfarge. Font-size-attributtet, satt til 2em enheter i første klasse, bestemmer knappens skriftstørrelse. Den font-family attributtet forteller nettlesere for å forsøke å bruke listen over skrifter som vises i den rekkefølgen de vises. Sett parentes rundt skriftnavn som inneholder mellomrom, for eksempel "Times New Roman".

3 Lagre dokumentet og vise det i alle nettlesere. De to knappene vil vise farge og font egenskaper som er definert i CSS klassedefinisjoner. Den andre knappen har ingen bakgrunnsfarge fordi style2 klassen som den refererer ikke satte den egenskapen.

Hint

  • Det er lurt å angi en liste over ønskede skriftnavn i CSS font-family attributt fordi noen brukere ikke kan ha ønsket skrift installert på sine datamaskiner. I slike tilfeller vil deres nettlesere ignorere at skriften og forsøke å bruke den neste på listen.
  • Ved å eksperimentere med ulike CSS-kombinasjoner, kan du lage en rekke tilpassede ser for alle HTML-knapper.