Slik feilsøker en CSS Roll

Cascading Style Sheets, eller CSS, er ideelt for å lage velt fordi den bruker mindre kode enn tradisjonelle språk, slik som Javascript, og fungerer i alle de store nettleserne. Imidlertid kan det hende at rollstilregler noen ganger mangler grunnleggende attributter eller har skrevet feil syntaks som gjør rollover bilder og tekst ikke vises riktig. Ta en titt på koden for å feilsøke CSS og fikse vanlige feil for å gjøre din roll skjermen akkurat.

Bruksanvisning

1 Start en tekst editor program og åpne dokumentet som inneholder CSS roll kode.

2 Sjekk CSS stil som inneholder URL-adresse for roll bildet for å se hvorfor det ikke vises. Kontroller at adressen er riktig skrevet - ". Rollover.gif" for eksempel "images / rollover.gif" i stedet for Pass på at CSS syntaks legges inn på riktig måte, som i følgende eksempel:

roll {background-image: url ( 'images / rollover.gif'); }

3 Kontroller at du har skjermen attributtet tildelt "block", slik at roll teksten ikke vises med en utilsiktet innrykk. For eksempel:

roll {display: block; }

4 Se på bredde og høyde attributter i din stil for å sikre at roll dimensjoner vises som du ønsker. For eksempel:

roll {width: 105px; height: 20px; }

5 Sørg for at du har en egen hover stil regel for å sikre noe som skjer når betrakteren posisjonerer sin musen over rollover. Vanlige egenskaper inkluderer stiler for bakgrunns posisjonering eller farge. Skriv inn navnet på din roll regelen, for eksempel "#rollover", og følg denne med ": hover" som så:

roll: hover {inn dine attributter her}

6 Gjennomgå HTML-kode for å sørge for at den utpekte roll innhold har CSS ID tildelt, som gjelder reglene stil. Gjør dette ved å sørge for "id =" etterfulgt av CSS stil regelnavnet er i startkoden, som i dette eksempelet:

<a id="rollover" href="URL address"> Roll Tekst </a>

7 Lagre dokumentet og forhåndsvise det i din nettleser for å sørge for at roll fungerer.

8 Last opp filen til din Web vert å publisere rettelser.

Hint

• En roll er et bilde som bytter sin bilde når en besøkende svever henne musen over det å la henne vite å klikke på denne funksjonen. Den første bildet av roll er kjent som "hvile" tilstand, og bildet den endres til er "sveve" tilstand.
• En vanlig metode for å lage CSS rollover bilder er å gjøre hvile og hover bilder i en enkelt GIF-bilde. Lag hover staten under hviletilstand slik at de vises oppå hverandre.