Share
Altfor mange nybegynner CSS-designere ikke innser betydningen av å skape en "reset.css" -filen. Når du har et miljø hvor hver nettleser har sin egen "standard" styling, vil du ofte finne deg selv å dumpe din hodeskalle når du spør deg selv, "Hvorfor er det et avstand her?" For å redde deg noen av hodepineene som du utvilsomt vil oppleve, må du opprette din egen, enkle nullstillingsfil. Problemet med å bruke en av de mange eksisterende rammebetingelsene er at de ikke er skreddersydd spesielt for deg. For eksempel bruker jeg aldri det utdaterte "senter" -elementet i mine prosjekter. Derfor trenger jeg ikke å sette det inn i standard styling. Imidlertid kan andre måtte gjøre det - selv om de ville fortjener et slag på håndleddet ... eller baken hvis du er så tilbøyelig.
Som standard vil nettleserne legge til marginer til mange elementer. For eksempel er det typisk rundt seks piksler marginer på kroppselementet. Som designer bør du være den som spesifiserer disse tallene! (Unntatt kanskje når det kommer til skriftstørrelse - som er et helt annet tema som skal debatteres i lengden.) Så la oss ut en masse av disse elementene!
ht, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, skjema, a, fieldset, input, th, td margin: 0; polstring: 0; grense: 0; oversikt: ingen;
Du har kanskje lagt merke til at elementene dine varierer i størrelse fra nettleser til nettleser. Du kan endre dette ved å sette standard skriftstørrelse til 100%.
h1, h2, h3, h4, h5, h6 skriftstørrelse: 100%;
Deretter må vi definere margene og utfyllingen for våre overskriftselementer. Jeg skal også fjerne listestilen-typen fra listelementene mine. Til slutt vil jeg sette en grunn skrifttype for kroppselementet.
kropp linjehøyde: 1; skriftstørrelse: 88%; h1, h2, h3, h4, h5, h6 skriftstørrelse: 100%; polstring: .6em 0; margin: 0 15px; ul, ol listestil: none; img grense: 0;
Jeg liker vanligvis å inkludere noen vanlige klasser som jeg bruker i alle mine prosjekter. Du kan eller ikke kan velge å bruke disse selv.
.floatLeft float: left; polstring: .5em .5em .5em 0; .flateRight float: right; polstring: .5em 0 .5em .5em;
ht, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, skjema, a, fieldset, input, th, td margin: 0; polstring: 0; grense: 0; oversikt: ingen; kropp linjehøyde: 1; skriftstørrelse: 88% / * Bestem selv hvis du vil inkludere dette. * /; h1, h2, h3, h4, h5, h6 skriftstørrelse: 100%; polstring: .6em 0; margin: 0 15px; ul, ol listestil: none; en farge: svart; tekst-dekorasjon: ingen; a: svever tekst-dekorasjon: understreke; .flateLeft float: left; polstring: .5em .5em .5em 0; .flateRight float: right; polstring: .5em 0 .5em .5em;
Minst for meg er dette alt jeg trenger for å komme i gang med en ny nettside. For dine egne prosjekter, bør du utvide hva jeg har her slik at det passer best for deg. Du bør sannsynligvis angi margenene på flere av de vanlige elementene, for eksempel avsnittet.
Hvis du ønsker å få en 100% tilbakestilt fil, anbefaler jeg at du refererer til Eric Meyers populære "Tilbakestill CSS" -fil. Alternativt kan du sjekke ut YUI Reset CSS. Se deg på mandag!
Accentsconagua