Come sbarazzarsi di un bordo blu da immagini in HTML

May 24

Quando un browser Web incontra un tag immagine circondata da un collegamento nel codice sorgente HTML per una pagina, se non proprietà border è impostata, il browser rende un bordo blu di un pixel intorno all'immagine. Questo indica chiaramente al visitatore che un'immagine è anche un link, e se cliccato porterà il visitatore a un'altra pagina. Si consiglia di fermare il bordo blu di apparire se non si adatta con il disegno complessivo della pagina. Aggiungere uno stile CSS alla pagina per rimuovere il bordo per tutti i link di immagine.

istruzione

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

2 Verificare se la pagina utilizza già un foglio di stile CSS. Cercare una riga simile a questa:

<Link href = "main.css" rel = "stylesheet" type = "text / css" />

Questo indica che la pagina utilizza un foglio di stile esterno, in modo da aprire il file CSS di riferimento per aggiungere il nuovo stile.

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

<Style type = "text / css">

</ Style>

4 Aggiungere il seguente stile per la parte superiore del foglio di stile esterno, o tra il "<style>" e "</ style>" tag che definiscono il foglio di stile locale:

un img {

border: none;

}

Questo dice al browser Web che non ci dovrebbero essere bordi intorno immagini contenute in un link. stili successivi possono ignorare questo stile nel foglio di stile per permettere certe 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. Visualizzare la pagina in un browser Web per vedere le immagini in link che appaiono senza un confine.

Consigli e avvertenze

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