Share
Troppi novizi I designer CSS non si rendono conto dell'importanza di creare un file "reset.css". Quando hai un ambiente in cui ogni browser ha il proprio stile "predefinito", ti troverai spesso a battere il tuo cranio mentre ti chiedi: "Perché c'è uno spazio qui?" Per farti risparmiare alcuni dei mal di testa che farai senza dubbio esperienza, dovrai creare il tuo semplice file di reset. Il problema con l'utilizzo di uno dei tanti framework attualmente esistenti è che non sono fatti su misura per te. Ad esempio, non uso mai l'elemento "center" deprecato nei miei progetti. Di conseguenza, non ho bisogno di inserirlo nello stile predefinito. Tuttavia, altri potrebbero aver bisogno di farlo - anche se meriterebbero uno schiaffo al polso ... o i glutei se sei così inclinato.
Per impostazione predefinita, i browser aggiungeranno margini a molti elementi. Ad esempio, in genere ci sono circa sei pixel di margini sull'elemento del corpo. Come designer, dovresti essere quello che specifica queste figure! (Tranne forse quando si tratta di dimensioni del carattere - che è un argomento completamente diverso da discutere a lungo.) Quindi azzeriamo un gruppo di questi elementi!
corpo, html, div, blockquote, img, etichetta, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, forma, a, fieldset, input, th, td margin: 0; padding: 0; confine: 0; contorni: nessuno;
Potresti aver notato che i tuoi elementi variano in dimensioni dal browser al browser. Puoi cambiare questo impostando la dimensione del carattere predefinito al 100%.
h1, h2, h3, h4, h5, h6 dimensione carattere: 100%;
Successivamente, dovremo definire i margini e il riempimento per i nostri elementi di direzione. Sto anche andando a rimuovere il tipo di stile lista dai miei elementi di elenco. Infine, imposterò una dimensione del font di base per l'elemento body.
body line-height: 1; dimensione carattere: 88%; h1, h2, h3, h4, h5, h6 dimensione carattere: 100%; riempimento: .6em 0; margine: 0 15px; ul, ol list-style: none; img border: 0;
In genere mi piace includere alcune classi comuni che uso in tutti i miei progetti. Puoi o meno scegliere di usarli tu stesso.
.floatLeft float: left; padding: .5em .5em .5em 0; .floatRight float: right; riempimento: .5em 0 .5em .5em;
corpo, html, div, blockquote, img, etichetta, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, forma, a, fieldset, input, th, td margin: 0; padding: 0; confine: 0; contorni: nessuno; body line-height: 1; font-size: 88% / * Decidi tu se vuoi includere questo. * /; h1, h2, h3, h4, h5, h6 dimensione carattere: 100%; riempimento: .6em 0; margine: 0 15px; ul, ol list-style: none; a colore: nero; decorazione del testo: nessuna; a: hover text-decoration: underline; .floatLeft float: left; padding: .5em .5em .5em 0; .floatRight float: right; riempimento: .5em 0 .5em .5em;
Almeno per me, questo è tutto ciò di cui ho bisogno per iniziare con un nuovo sito web. Per i tuoi progetti, dovresti espandere ciò che ho qui in modo che sia più adatto a te. Probabilmente dovresti specificare i margini su più elementi comunemente usati, come il tag del paragrafo.
Se desideri avere un file di ripristino del 100%, ti consiglio di fare riferimento al popolare file "Reset CSS" di Eric Meyer. In alternativa, puoi controllare lo YUI Reset CSS. Ci vediamo lunedì!
Accentsconagua