Nwlapcug.com


Come sbarazzarsi di un bordo blu dalle immagini in HTML

Quando un browser rileva un tag di immagine circondato da un link nel codice sorgente HTML di una pagina, se nessuna proprietà border è impostata, il browser esegue il rendering di un bordo blu di un pixel attorno all'immagine. Questo indica chiaramente al visitatore che un'immagine è anche un link e quando cliccato porterà il visitatore a un'altra pagina. È possibile interrompere il bordo blu venga visualizzato se non si adatta con il disegno complessivo della pagina. Aggiungere uno stile CSS alla pagina per rimuovere il bordo per tutti i collegamenti di immagine.

Istruzioni

1

Aprire un'applicazione Web design o un editor di testo, quindi aprire la pagina HTML che si desidera lavorare su.

2

Controllare per vedere se la pagina utilizza già un foglio di stile CSS. Cercare una riga simile a questa:

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

Questo indica che la pagina utilizza un foglio di stile esterno, quindi Apri file di riferimento CSS per aggiungere il nuovo stile.

3

Aggiungere le seguenti righe tra il codice HTML "< head >" e tag "< / head >" se non c'è nessun foglio di stile in uso, per definire un foglio di stile locale per la pagina:

< style type = "text/css" >

< / stile >

4

Aggiungere il seguente foglio di stile nella parte superiore del foglio di stile esterno, o tra il "< style >" e "< / stile >" tag definisce il foglio di stile locale:

a img {

border: none;

}

Questo dice il browser Web che non ci dovrebbe essere nessun bordi intorno alle immagini contenute in un link. Stili successivi possono eseguire l'override di questo stile nel foglio di stile per consentire determinate immagini di avere un bordo personalizzato, se necessario.

5

Salvare la pagina e il foglio di stile esterno, se applicabile, quindi caricare i file sul server Web. Visualizza la pagina in un browser Web per visualizzare le immagini in link che appaiono senza un bordo.

Consigli & Avvertenze

  • Molti tutorial suggeriamo di impostare l'attributo di img "border" a zero per disattivare il bordo dell'immagine, ma l'attributo è stato deprecato a partire dal momento della pubblicazione, quindi utilizzare uno stile CSS.