Cascading Style Sheets (CSS) hanno dato i Web designer nuove abilità e un maggiore controllo sull'aspetto delle loro pagine Web. Una di queste nuove abilità è essere in grado di nascondere gli elementi in modo che, quando combinato con un linguaggio di scripting come JavaScript, si può dare l'illusione di animazione. Ci sono tre modi per nascondere un oggetto con i CSS: stili in linea, fogli di stile interni e fogli di stile esterni. Il nostro esempio vi guiderà attraverso i primi due e ruoterà intorno ad un div (un tag che definisce una divisione all'interno di un documento HTML o XHTML) con il contenuto "Ciao mondo".

istruzione

L'utilizzo di un In-Line Style

1 Trovare il codice per l'elemento che si desidera nascondere. In questo caso il codice sarà

Ciao mondo.

2 Inserire il seguente codice tra la fine del tag dell'elemento apertura, ma prima della parentesi quadra di chiusura.

style = "visibility: hidden;"

Così, nel nostro esempio, il nostro div diventerebbe:

Ciao mondo

L'utilizzo di un foglio di stile interno

3 Trovare il tag nel codice della pagina Web. Il tag testa deve essere verso la parte superiore del vostro codice.

4 Muovi il tag basso di una riga. Se la tag è situato su una linea con altro codice, spostarla verso il basso in modo che sia sulla propria riga e quindi spostare verso il basso un altro.

5 Inserire il codice seguente nella riga sopra la etichetta:

6 Trovare il codice per l'elemento che si desidera nascondere.

7 Inserire il seguente codice tra la fine del tag dell'elemento apertura, ma prima della parentesi quadra di chiusura.

class = "invisibile"

Così, nel nostro esempio, il nostro div diventerebbe:

Ciao mondo

Consigli e avvertenze

• Utilizzare stili in linea, se solo si desidera nascondere un elemento.
• Utilizzare i fogli di stile interni se si desidera nascondere più di un elemento. In questo caso, si dovrebbe dare l'attributo class = "invisibile" per ogni elemento si voleva nascosto. In questo modo, è possibile aggiungere altri tag CSS per gli elementi di classe "invisibili" senza cambiarla ad ogni elemento, proprio nella parte superiore del documento.
• È inoltre possibile utilizzare i fogli di stile esterni inserendo il codice da dentro il foglio interno (cioè, i tag ) In un documento separato. Quindi, invece di mettere quelli tag prima tag, mettere: FILENAME.css è il nome del nuovo file del foglio. Ciò consente di utilizzare lo stesso foglio per un certo numero di pagine, che è grande se si desidera utilizzare gli stessi stili in tutte le pagine!
• Se si vuole realmente nascondere un elemento in risposta ad un utente, è necessario utilizzare JavaScript, che va oltre gli scopi di questa guida.
• Un visualizzatore non può interagire con un elemento nascosto mentre è nascosto. I contenuti di un elemento nascosto non solo sono nascosti alla vista, sono in realtà andati mentre sono nascosti.