Hvor å skjule et objekt med CSS

Cascading Style Sheets (CSS) har gitt Webdesignere nye evner og større kontroll over utseendet på sine nettsider. En av disse nye ferdigheter er å kunne skjule elementer, slik som i kombinasjon med et skriptspråk som Javascript, kan du gi en illusjon av animasjon. Det er tre måter å skjule et objekt med CSS: in-line stiler, interne stilark og eksterne stilark. Vårt eksempel vil lede deg gjennom de to første, og vil dreie seg om en div (en kode som definerer en avdeling i en HTML eller XHTML-dokument) med innhold "Hello world".

Bruksanvisning

Ved hjelp av en in-line stil

1 Finn koden for elementet du ønsker å skjule. I dette tilfelle koden vil bli

Hei verden.

2 Sett inn følgende kode mellom slutten av åpningen tag av elementet, men før den avsluttende hakeparentes.

style = "visibility: hidden;"

Så, i vårt eksempel, ville våre div bli:

Hei verden

Ved hjelp av en intern Style Sheet

3 Finn tag i koden på websiden. Hodet taggen skal være mot toppen av koden din.

4 Flytt tagge ned en linje. Dersom tag ligger på en linje med annen kode, flytte den ned slik at det er på en egen linje, og deretter flytte den ned én mer.

5 Sett inn følgende kode på linjen over stikkord:

6 Finn koden for elementet som du ønsker å skjule.

7 Sett inn følgende kode mellom slutten av åpningen tag av elementet, men før den avsluttende hakeparentes.

class = "usynlig"

Så, i vårt eksempel, ville våre div bli:

Hei verden

Hint

  • Bruk linjestiler hvis du bare ønsker å skjule ett element.
  • Bruk interne stilark hvis du vil skjule mer enn ett element. I dette tilfellet ville du gi class = "usynlig" attributt til hvert element du ville skjult. Ved å gjøre dette, kan du legge til andre CSS koder til de "usynlige" class elementer uten å endre det på hvert element, bare på toppen av dokumentet.
  • Du kan også bruke eksterne stilark ved å sette inn koden fra innsiden interne ark (det vil si kodene ) I et eget dokument. Så, i stedet for å sette dem tags før tag, sette: FILENAME.css er filnavnet til den nye ark fil. Dette gjør at du kan bruke samme ark for en rekke sider, noe som er flott hvis du ønsker å bruke de samme stilene i alle sidene dine!
  • Hvis du faktisk ønsker å skjule et element i respons til en bruker, må du bruke Javascript, noe som er utenfor omfanget av denne veiledningen.
  • En seer kan ikke kommunisere med en skjult element mens det er skjult. Innholdet i et skjult element er ikke bare skjult, de er faktisk borte mens de er skjult.