Share
Veel te veel beginnende CSS-ontwerpers realiseren zich niet hoe belangrijk het is om een "reset.css" bestand. Wanneer je een omgeving hebt waar elke browser zijn eigen "standaard" -stijl heeft, zul je vaak merken dat je je schedel neerslaat terwijl je jezelf afvraagt: "Waarom is hier een afstand?" Om jezelf enkele van de hoofdbrekens te besparen die je ongetwijfeld zult ervaren, moet je je eigen eenvoudige resetbestand maken. Het probleem met het gebruik van een van de vele bestaande raamwerken is dat ze niet specifiek op jou zijn afgestemd. Ik gebruik bijvoorbeeld nooit het verouderde "midden" -element in mijn projecten. Daarom hoef ik het niet in mijn standaardstijl te plaatsen. Maar anderen moeten dit misschien doen - hoewel ze een klap op de pols verdienen ... of de billen als je zo geneigd bent.
Standaard zullen de browsers marges toevoegen aan veel elementen. Meestal zijn er bijvoorbeeld ongeveer zes pixels marges op het body-element. Als ontwerper moet u degene zijn die deze cijfers specificeert! (Behalve misschien als het gaat om lettertypegrootte - wat een heel ander onderwerp is waarover uitvoerig gedebatteerd moet worden.) Laten we een aantal van deze elementen op nul zetten!
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, vorm, a, veldset, invoer, th, td marge: 0; opvulling: 0; rand: 0; overzicht: geen;
U hebt misschien gemerkt dat uw elementen in grootte variëren van browser tot browser. U kunt dit wijzigen door de standaard lettertypegrootte in te stellen op 100%.
h1, h2, h3, h4, h5, h6 font-size: 100%;
Vervolgens moeten we de marges en opvulling definiëren voor onze headingelementen. Ik ga ook het lijststijltype uit mijn lijstelementen verwijderen. Ten slotte zal ik een basislettertype instellen voor het body-element.
lichaam lijnhoogte: 1; tekengrootte: 88%; h1, h2, h3, h4, h5, h6 font-size: 100%; opvulling: .6em 0; marge: 0 15px; ul, ol lijststijl: geen; img border: 0;
Ik gebruik meestal graag een paar algemene klassen die ik in al mijn projecten gebruik. U kunt er al dan niet voor kiezen deze zelf te gebruiken.
.floatLeft float: left; opvulling: .5em .5em .5em 0; .floatRight float: right; opvulling: .5em 0 .5em .5em;
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, vorm, a, veldset, invoer, th, td marge: 0; opvulling: 0; rand: 0; overzicht: geen; body line-height: 1; font-size: 88% / * Bepaal zelf of je dit wilt opnemen. * /; h1, h2, h3, h4, h5, h6 font-size: 100%; opvulling: .6em 0; marge: 0 15px; ul, ol lijststijl: geen; a color: black; tekstdecoratie: geen; a: hover text-decoration: onderstrepen; .floatLeft float: left; opvulling: .5em .5em .5em 0; .floatRight float: right; opvulling: .5em 0 .5em .5em;
Voor mij is dit alles wat ik nodig heb om aan de slag te gaan met een nieuwe website. Voor je eigen projecten moet je uitbreiden wat ik hier heb, zodat het het beste bij je past. U moet waarschijnlijk de marges opgeven voor meer van uw veelgebruikte elementen, zoals de alineatags.
Als je een 100% reset-bestand wilt hebben, raad ik je aan om het populaire "Reset CSS" -bestand van Eric Meyer te raadplegen. Als alternatief kunt u de YUI Reset CSS bekijken. Tot maandag!
Accentsconagua