Endre tekstfarge på Mouse

October 27

En måte å fange oppmerksomheten til en besøkende til websiden din er å gjøre ordene på siden skifter farge når de flytter musen over. Cascading Style Sheets gir en løsning for å oppnå denne oppgaven med den pseudo-klassen heter hover.

Sette opp HTML

Endre tekstfarge med CSS begynner med å velge en HTML-kode i kroppen av dokumentet. (Hvis du surfer på Internett ved hjelp av Internet Explorer 7 eller lavere, vil denne teknikken fungerer bare hvis du bruker <a> lappen. Hvis du bruker Internet Explorer 8 eller Firefox 3, disse instruksjonene vil fungere på alle HTML-kode.)

Bruk "span" tag å endre ord i setningen. Her er et eksempel:

Jeg vil bare spise is hvis det har <span> karamell </ span> <span> sjokolade </ span> eller <span> hot fudge </ span>.

Legg til følgende klassenavn i begynnelsen "span" koder for å skille hver iskrem topping:

Jeg vil bare spise is hvis det har <span class = "karamell"> karamell </ span> <span class = "sjokolade"> sjokolade </ span> eller <span class = "fudge"> hot fudge </ span >.

Klasse navnene er både brukes til å identifisere hvilke ord vi skal påvirke våre stil regler og å bidra til å holde oversikt over hva vi er i endring.

Sette opp stil

CSS kan settes opp en av tre måter: lokale, interne og eksterne. Denne spesielle prosessen, men kan bare oppnås enten internt eller eksternt.

En lokal stilark består av begynnelsen og slutten <style> </ style> -kodene og et sett med instruksjoner mellom dem. Stilen kodene kan bare plasseres mellom <head> </ head> taggene på toppen av dokumentet. En lokal stilark påvirker bare sider der det er plassert.

Skriv inn begynnelsen og slutten <style> </ style> -kodene mellom <head> </ head> taggene på toppen av HTML-dokumentet. Deretter skriver du inn ordet "span" mellom dem. Legg til følgende kode etter "span" som vist:
<Style>
span {color: blue;}
</ Style>

Legg tre mer "span" etter den første "span", etterfulgt av en periode og klasse navn på hver iskrem topping, som vist:

<Style>
span {color: blue;}
span.caramel
span.chocolate
span.fudge
</ Style>

Legg et kolon, pluss pseudo-klassen "svever" etter hver topping navn:

<Style>
span {color: blue;}
span.caramel: hover
span.chocolate: hover
span.fudge: hover
</ Style>

Legg en venstre klammeparentes, deretter "farge", et kolon og en annen farge for hver smak. Avslutt uttalelsene med et semikolon og høyre klammeparentes, som vist:

<Style>
span {color: blue;}
span.caramel: hover {color: red;}
span.chocolate: hover {color: green;}
span.fudge: hover {color: pink;}
</ Style>

Ekstern Style Sheet

Et eksternt stilark er rett og slett en tekstfil lagret med en CSS forlengelse. Kopiere stilen regler som er mellom <style> </ style> -kodene i ovennevnte uttalelse, da, legger du til følgende kode mellom <head> </ head> taggene:

Når du plasserer musepekeren over teksten, ordet "karamell" blir rød, "sjokolade" blir grønn og "fudge" blir rosa.