Pri usporiadaní webovej stránky je niekedy potrebné skryť niektoré prvky, ktoré sú na nej umiestnené. Napríklad ak chcete, aby návštevník nevidel tlačidlá na odoslanie formulára, kým nevyplníte všetky povinné polia. Alebo ak návštevník nemá toto tlačidlo vôbec použiť, ale skript umiestnený na tejto stránke by ho mal „kliknúť“.
Inštrukcie
Krok 1
Vlastnosťou display kaskádových štýlov (CSS) môžete vypnúť alebo zapnúť zobrazenie požadovaných prvkov stránky. Podľa medzinárodných štandardov je možné tejto vlastnosti priradiť viac ako jeden a pol tucta hodnôt, ktoré určujú rôzne spôsoby zobrazenia. Iba štyri však používajú rôzne prehliadače (t. J. Fungujú vo všetkých hlavných prehľadávačoch). Medzi týmito štyrmi je žiadna hodnota, ktorú potrebujete, ktorá vám umožní skryť požadovaný prvok stránky.
Krok 2
Vytvorte požadovanú skupinu pokynov pre CSS. V najjednoduchšej podobe môže vyzerať takto: button {display: none;} V takom prípade sa na stránke nezobrazia všetky tlačidlá pomocou značky….
Krok 3
Ak chcete skryť iba jedno tlačidlo alebo konkrétnu skupinu tlačidiel, do pokynov v triede pridajte označenie. Napríklad pomenujte takúto triedu HideBtns a pridajte tento názov do vyhlásenia CSS: button. HideBtns {display: none;} Pridajte atribút triedy k požadovanému tlačidlu v HTML kóde stránky a priraďte mu hodnotu HideBtns: skryté tlačidlo
Krok 4
Ak chcete napríklad skryť nielen tlačidlo, ale aj ďalšie prvky webového formulára, použite vlastnosť display s hodnotou none na nadradený prvok. Formulár sa považuje za „rodič“všetkých prvkov umiestnených medzi značkami a. Napríklad:
Tu je vo vnútri formulára umiestnené textové pole a tlačidlo na zadanie zadanej hodnoty. Formulár je priradený k triede s názvom HideForm, takže aby ste skryli vstupné pole aj tlačidlo, musíte zmeniť príkaz CSS takto: form. HideForm {display: none;}
Krok 5
Pripravený kód umiestnite do príkladu vyššie do hlavičky webového dokumentu (medzi značky a). Aby sme prehľadávaču návštevníka povedali, že ide o kód CSS, musí byť uvedený medzi úvodnou a záverečnou značkou štýlu HTML:
button. HideBtns {display: none;}
