Grazie ai fogli di stile CSS (CSS), nascondendo le immagini selezionate in una pagina web è generalmente indolore e veloce. Semplicemente aggiungere una regola di stile al foglio di stile, collegare il foglio di stile alla pagina, fare riferimento la regola di stile e si è pronti ad andare. Questo metodo consente di nascondere una singola immagine, un gruppo di immagini o ogni singola immagine sulla tua pagina.

Istruzioni

Come nascondere le immagini in una pagina Web

1

Aprire o creare il vostro foglio di stile. Se la pagina web dispone già di un foglio di stile, è possibile aprirlo nel programma di modifica del testo. Nel blocco note, ad esempio, selezionare File dal menu nella parte superiore dello schermo, quindi fare clic su "Apri". Per impostazione predefinita, il programma apre solo i file con estensione txt formattato, ma è in grado di leggere qualsiasi file di testo normale, tra cui fogli di stile CSS. Per visualizzare questi file, trovare il menu a discesa che legge "Documenti di testo (txt)" e fare clic su esso, quindi selezionare tutti i file. Trovare il tuo foglio di stile esistente e aprirlo. Per creare un nuovo foglio di stile, fare clic su File e quindi selezionare "Nuovo".

2

Aggiungere una regola al foglio di stile. Immagini sulle pagine web vengono generalmente visualizzate utilizzando il tag di immagine, codificato come < img >. La regola di stile in questo esempio influirà questo tag e si presuppone che si desidera impedire la visualizzazione nella pagina web, non tutti di una singola immagine. Sembra che questo:

IMG.Remove {visibilità: nascosto}

Copiare e incollare questo codice esatto ovunque nel vostro nuovo foglio di stile, o nella parte inferiore del foglio di stile esistente. Il codice indica il browser per trovare un tag di immagine con un nome di "Rimuovi" (classe) e per renderla invisibile quando il browser Visualizza la pagina. Siete pregati di notare che questo metodo lascerà spazio vuoto dove l'immagine viene visualizzata normalmente. Se si desidera che l'immagine e spazio in bianco per scomparire del tutto, utilizzare la seguente regola:

IMG.Remove {display: none}

3

Salvare il foglio di stile. Se si lavora da un file CSS esistente, selezionare File, quindi fare clic su "Salva" e il tuo foglio di stile sarà pronto all'uso. Se è stato creato un nuovo foglio di stile, selezionare il File, fare clic su "Salva". Per impostazione predefinita, il blocco note Salva tutti i file come file di testo, con estensione txt. Volete un'estensione di file con estensione CSS. Per effettuare questa operazione, fare clic sul menu a discesa che legge "Documenti di testo (txt)" e selezionare tutti i file. Quindi, nella casella nome file, dare il tuo foglio di stile un nome come "Styles. css" (senza virgolette). Assicurarsi di salvare il file nella directory principale del tuo sito Web.

4

Collegare il foglio di stile al tuo codice HTML. Se si utilizza un foglio di stile esistente, il tuo file CSS già collegherà al codice, pertanto è possibile saltare questo passaggio.

Per collegare un foglio di stile appena creato, prima di aprire la pagina web utilizzando il blocco note. Selezionare File dal menu nella parte superiore dello schermo, quindi fare clic su "Apri". Ricordiamo che, per impostazione predefinita, il programma apre solo i file con estensione txt formattato, ma in realtà può aprire qualsiasi file di testo normale; Questo include documenti HTML. Per visualizzare questi file, trovare il menu a discesa che legge "Documenti di testo (txt)" e fare clic su esso, quindi selezionare tutti i file. Trovare la tua pagina web esistente e aprirlo.

Individuare la riga nella parte superiore della pagina che inizia con < title >. Spostare il cursore alla fine di questa riga e premete invio. Nella riga vuota sottostante, copiare e incollare la seguente riga di codice:

< link href="styles.css" rel = "stylesheet" type = "text/css" >

Questo spiega la tua pagina web per caricare il foglio di stile che appena creato. Selezionare File dal menu in alto e fare clic su "Salva" per aggiornare la pagina. Tenere aperto il programma di modifica del testo.

5

Trovare l'immagine che si desidera nascondere nel codice HTML della tua pagina. Se siete nuovi alla costruzione di pagine web, il codice che vedete nel vostro editor di testo è probabilmente confuso, e non si può sapere che cosa cercare. In questo caso useremo la funzione trova del vostro redattore per individuare l'immagine che si desidera nascondere. Fare clic su modifica dal menu nella parte superiore della pagina, quindi selezionate "Trova". Immettere il nome del file dell'immagine che si desidera nascondere (ad esempio MyImage. jpg) nella finestra di dialogo che si apre. Premere "Invio". Questo consente di visualizzare la prima riga di codice che contiene il nome di file specificato.

6

Aggiungere un riferimento del foglio di stile per l'immagine che si desidera nascondere. Il codice per l'immagine che si desidera nascondere probabilmente sarà simile a questo:

< img src="myimage.jpg" >

Per nasconderla, tutto quello che dovete fare ora è riferimento la regola creata nel passaggio 2. Ricordare che hai dato questa regola un nome di "remove" nel foglio di stile. L'aggiunta del riferimento, il codice HTML risulterà ora come questo:

< img src="myimage.jpg" class = "Rimuovi" >

Salva la pagina HTML, aggiorna il tuo browser, e l'immagine non viene più visualizzato sulla tua pagina web.