Joskus verkkosivua asettaessa on tarpeen piilottaa joitain siihen sijoitettuja elementtejä. Jos esimerkiksi haluat, että kävijä ei näe lomakkeen lähetyspainikkeita, ennen kuin kaikki vaaditut kentät on täytetty. Tai jos painiketta ei ole tarkoitettu vierailijan käytettäväksi ollenkaan, mutta tälle sivulle sijoitetun komentosarjan tulisi "napsauttaa" sitä.
Ohjeet
Vaihe 1
Sammuta CSS (CSS) -näyttöominaisuus kytkeäksesi haluamasi sivuelementit pois päältä tai päälle. Kansainvälisten standardien mukaan tälle ominaisuudelle voidaan antaa yli puolitoista tusinaa arvoja, jotka määrittelevät eri näyttötavat. Kuitenkin vain neljä on selainten välinen (eli toimii kaikissa suurimmissa selaimissa). Näiden neljän joukossa ei ole tarvitsemaasi arvoa, jonka avulla voit piilottaa halutun sivuelementin.
Vaihe 2
Luo vaadittu joukko CSS-ohjeita. Yksinkertaisimmassa muodossaan se voi näyttää tältä: painike {display: none;} Tässä tapauksessa sivu ei näytä kaikkia painikkeita, jotka käyttävät… -tagia.
Vaihe 3
Lisää ohjeet luokan nimeen, jos haluat piilottaa vain yhden painikkeen tai tietyn painikeryhmän. Esimerkiksi nimeä tällainen luokka HideBtns ja lisää tämä nimi CSS-käskyyn: button. HideBtns {display: none;} Lisää luokan attribuutti haluttuun painikkeeseen sivun HTML-koodissa ja anna sille arvo HideBtns: hidden-painike
Vaihe 4
Käytä näyttöominaisuutta arvolla none pääelementtiin, jos haluat esimerkiksi piilottaa paitsi painikkeen myös verkkolomakkeen muut elementit. Lomaketta pidetään kaikkien "-" -tagien väliin sijoitettujen elementtien "vanhempana". Esimerkiksi:
Tässä tekstikenttä ja painike syötetyn arvon lähettämiseksi sijoitetaan lomakkeen sisään. Lomake on määritetty luokalle nimeltä HideForm, joten piilottaaksesi sekä syöttökentän että painikkeen, sinun on vaihdettava CSS-käsky seuraavasti: form. HideForm {display: none;}
Vaihe 5
Sijoita valmis koodi yllä olevan esimerkin verkkodokumentin otsikkoon (ja -tagien väliin). Jos haluat kertoa kävijän selaimelle, että tämä on CSS-koodi, se on liitettävä avaavan ja sulkevan HTML-tyylitagin väliin:
button. HideBtns {display: none;}
