Share
Nu prea mulți designeri CSS de novici nu își dau seama de importanța creării unui "reset.css" fișier. Atunci când aveți un mediu în care fiecare browser are propriul său stil "implicit", vă veți găsi adesea înfricoșându-vă craniul așa cum vă întrebați: "De ce există aici o distanțare?" Pentru a vă salva câteva dintre durerile de cap pe care le veți avea, fără îndoială, va trebui să creați propriul fișier simplu de resetare. Problema cu utilizarea unuia dintre multele cadre existente în prezent este că acestea nu sunt adaptate în mod special pentru dvs. De exemplu, nu folosesc niciodată elementul "central" depreciat în proiectele mele. În consecință, nu trebuie să pun în stilul meu implicit. Cu toate acestea, alții ar putea avea nevoie să facă acest lucru - deși ar merita o palmă pe încheietura mâinii ... sau pe fese dacă sunteți atât de înclinată.
Implicit, browserele vor adăuga marje la mai multe elemente. De exemplu, de obicei există aproximativ șase pixeli de margini pe elementul corpului. Ca designer, ar trebui să fii cel care specifică aceste cifre! (Cu excepția poate atunci când vine vorba de mărimea fontului - care este un alt subiect care urmează să fie dezbătut în lungime.) Deci, să zero zero dintr-o mulțime de aceste elemente!
html, ht, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, td marja: 0; umplutura: 0; frontieră: 0; contur: nici unul;
Este posibil să fi observat că elementele dvs. variază de la un browser la altul. Puteți schimba acest lucru prin setarea dimensiunii implicite a fontului la 100%.
h1, h2, h3, h4, h5, h6 font-size: 100%;
Apoi, va trebui să definim margini și umplutură pentru elementele de titlu. De asemenea, voi elimina tipul de listă din elementele mele de listă. În sfârșit, voi stabili o dimensiune de bază a fontului pentru elementul corpului.
corp linie-înălțime: 1; font-size: 88%; h1, h2, h3, h4, h5, h6 font-size: 100%; padding: .6em 0; margine: 0 15px; ul, ol style-style: none; img frontieră: 0;
De obicei, îmi place să includ câteva clase comune pe care le folosesc în toate proiectele mele. Puteți sau nu să alegeți să le utilizați singuri.
.floatLeft float: left; padding: .5em .5em .5em 0; .floatRight float: right; umplutură: .5em 0 .5em .5em;
html, ht, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, td marja: 0; umplutura: 0; frontieră: 0; contur: nici unul; corp linie-înălțime: 1; font-size: 88% / * Decideți-vă dacă doriți să includeți acest lucru. * /; h1, h2, h3, h4, h5, h6 font-size: 100%; padding: .6em 0; margine: 0 15px; ul, ol style-style: none; a culoare: negru; text-decoration: nici unul; a: hover text-decorare: subliniere; .floatLeft float: left; padding: .5em .5em .5em 0; .floatRight float: right; umplutură: .5em 0 .5em .5em;
Cel puțin pentru mine, acest lucru este tot ce trebuie să încep cu un nou site web. Pentru proiectele proprii, trebuie să vă extindeți la ceea ce am aici pentru a vă potrivi cel mai bine. Ar trebui să specificați marjele pe mai multe elemente utilizate în mod obișnuit, cum ar fi eticheta paragrafului.
Dacă doriți să aveți un fișier de resetare de 100%, vă recomandăm să consultați fișierul popular "Reset CSS" al lui Eric Meyer. Alternativ, puteți verifica resetarea CSS a YUI. Ne vedem luni!
Accentsconagua