Come rimuovere lo spazio linea dal tag H1 in CSS

October 1

I browser Web impostati spaziatura predefinita per gli elementi di testo HTML come intestazioni e paragrafi. Dal momento che le impostazioni predefinite variano da browser a browser, è meglio impostare margini e padding in un foglio di stile. Molti web designer usano "reset" fogli di stile che impostano tutto il testo a guardare lo stesso, non importa il tag utilizzato, e quindi aggiungere nuovi stili dopo. Questo prende il congetture di capire che cosa la spaziatura sarà in vari elementi. È anche possibile usare un po 'di Cascading Style Sheet codice (CSS) per impostare il margine del tag <h1> a zero se è necessario modificare solo un'unica voce.

istruzione

1 Avviare il editor di codice e aprire il file CSS del foglio di stile esterno per il tuo sito. Dal momento che gli stili di reset richiedono un grande pezzo di codice, non è una buona idea aggiungere il direttamente nei file HTML. Creare un file CSS vuoto se il vostro sito non ha ancora un foglio di stile esterno, e aggiungere questa riga sotto il tag <title> per ogni pagina Web nel sito:

<Link rel = "stylesheet" type = "text / css" href = "path / to / yourstyle.css" />

Sostituire il percorso del file con quella appropriata per voi. Se si utilizza più di un foglio di stile esterno, assicurarsi che quello che si aggiungono gli stili di reset per il primo tag <link> in modo browser letto che una prima. Gli stili inclusi dopo il ripristino di loro avrà la precedenza, che è quello che si vuole.

2 Copia e incolla una serie di stili di reset nella parte superiore del foglio di stile esterno. È possibile ottenere gli stili di reset da MeyersWeb o Developer Network Yahoo!. Entrambi sono ben rispettati dagli sviluppatori e spesso utilizzati in progetti professionali. Salvare i file e controllare il vostro sito web in un browser. Se non è stato aggiunto stili dopo il ripristino, verrà visualizzata una pagina bianca con testo in chiaro senza alcuna distanza.

3 Aggiungere un ID ad una specifica tag <h1> o aggiungere i nomi delle classi a più tag <h1>. Il codice HTML simile a questo:

<h1 id = "my-intestazione" class = "header"> mio header </ h1>

Aggiungere il seguente codice CSS sotto gli stili di reset:

h1 {margin-top: 0px; }

Tipo ".headers" o "# mio-header" (senza virgolette) dopo la "H1" nel codice precedente di indirizzare <h1> tag di nome della classe o ID. In questo modo, alcuni tag <h1> otterrà la spaziatura margine superiore allo zero, e altri saranno resi con qualunque distanza si dà ai tag generali <h1>.

Consigli e avvertenze

  • Impostare un foglio di stile pre-riempite con gli stili di reset e di un file HTML semplice con il <link> codice necessario e utilizzarla come boilerplate per accelerare i tuoi nuovi progetti di siti web. È inoltre possibile trovare il download gratuito di modelli per i quali gli sviluppatori hanno già creato i file e il codice necessari.