Share
Alltför många nybörjare inser inte CSS-designers vikten av att skapa en "reset.css" -filen. När du har en miljö där varje webbläsare har sin egen "standard" styling, kommer du ofta att hitta dig själv och döda din skalle när du frågar dig själv, "varför finns det ett mellanrum här?" För att rädda dig själv av några huvudvärk som du utan tvekan kommer att uppleva måste du skapa din egen enkla återställningsfil. Problemet med att använda en av de många befintliga ramarna är att de inte skräddarsys specifikt för dig. Till exempel använder jag aldrig det föråldrade "mitt" -elementet i mina projekt. Följaktligen behöver jag inte lägga den i min standard styling. Men andra kan behöva göra det - även om de skulle förtjäna ett slag på handleden ... eller skinkorna om du är så benägen.
Som standard lägger webbläsarna marginaler till många element. Till exempel finns typiskt cirka sex pixlar av marginaler på kroppselementet. Som designer ska du vara den som anger dessa siffror! (Förutom kanske när det gäller teckenstorlek - vilket är ett helt annat ämne som ska debatteras i längden.) Låt oss nu nollställa en massa av dessa element!
ht, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td marginal: 0; vaddering: 0; gräns: 0; kontur: ingen;
Du kanske har märkt att dina element varierar i storlek från webbläsare till webbläsare. Du kan ändra detta genom att ställa in standardstorleken till 100%.
h1, h2, h3, h4, h5, h6 fontstorlek: 100%;
Därefter måste vi definiera marginalerna och vadderingen för våra rubrikelement. Jag kommer också att ta bort listestypstypen från mina listelement. Slutligen ställer jag in en basstorlek för kroppsdelen.
kropp linjehöjd: 1; typsnittstorlek: 88%; h1, h2, h3, h4, h5, h6 fontstorlek: 100%; vaddering: .6em 0; marginal: 0 15px; ul, ol listestil: none; img border: 0;
Jag brukar vilja inkludera några vanliga klasser som jag använder i alla mina projekt. Du kan eller kanske inte välja att använda dessa själv.
.floatLeft float: left; vaddering: .5em .5em .5em 0; .floatRight float: right; vaddering: .5em 0, 5em .5em;
ht, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td marginal: 0; vaddering: 0; gräns: 0; kontur: ingen; kropp linjehöjd: 1; fontstorlek: 88% / * Bestäm själv om du vill inkludera detta. * /; h1, h2, h3, h4, h5, h6 fontstorlek: 100%; vaddering: .6em 0; marginal: 0 15px; ul, ol listestil: none; en färg: svart; text-dekoration: ingen; a: svävar text-decoration: underline; .flateLeft float: left; vaddering: .5em .5em .5em 0; .floatRight float: right; vaddering: .5em 0, 5em .5em;
Åtminstone för mig är detta allt jag behöver för att komma igång med en ny hemsida. För dina egna projekt borde du expandera på vad jag har här så att det passar dig bäst. Du bör noggrant ange marginalerna på flera av dina vanliga element, till exempel stycketiketten.
Om du vill ha en 100% återställd fil rekommenderar jag att du hänvisar till Eric Meyers populära "Återställ CSS" -fil. Alternativt kan du kolla in YUI Reset CSS. Vi ses på måndag!
Accentsconagua