CSS reset – Wat doet het precies?

Ik vond dit reset.css-bestand in een jQuery-afbeeldingsschuifdemo, maar het is nooit opgenomen in het hoofdindex.html-bestand. wat moet het doen, en nog belangrijker, waar zet je het? Zet je het vóórstylesheets() waarnaar wordt verwezen?

Hier is de code in reset.css

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

Antwoord 1, autoriteit 100%

In het begin was er geen standaardisatie over hoe stijlen werkten, elke browser implementeerde wat hij voelde dat goed was. Een van de redenen waarom je zoveel vragen over stijlfouten in IE ziet, is omdat IE de browser was met de meeste verschillen van andere browsers op het gebied van styling. Hoewel IE is verbeterd en dat geldt ook voor andere browsers, passen ze nog steeds hun
eigen randen, opvulling en marges, zoom, lettertypen naar elementen om hun eigen unieke gevoel aan pagina’s te geven. Een voorbeeld is dat chrome zijn eigen gele randen geeft aan tekstvakken. De “reset” “reset” eigenlijk al deze stijlen naar nul/geen, zodat je geen stijlen ziet die je niet hebt toegepast op je pagina.

Als deze stijlen niet “reset” zijn, zul je zien dat ongewenste stijlen/effecten en dingen kapot gaan. Het wordt altijd aanbevolen om de stijlen van de browser te “resetten”.

Bekijk dit artikel Moet u uw CSS opnieuw instellen?


Antwoord 2, autoriteit 40%

reset.css wordt gebruikt om de standaardstijlen van de browser te normaliseren.

Voorbeeld:

voer hier de afbeeldingsbeschrijving in


Antwoord 3, autoriteit 16%

Kijkend naar de antwoorden hier lijkt er een beetje verwarring te zijn tussen “reset” en “normalize”. Hun doelen zijn iets anders.

Een CSS-reset is een reeks stijlen die u vóór uw andere stijlen laadt om de ingebouwde browserstijlen te verwijderen. Een van de eerste en meest populaire was Eric Mayer’s Reset CSS.

Een andere optie is om de ingebouwde browserstijlen te harmoniseren. De meest populaire tool om dit te bereiken is momenteel Normalize.css.


Antwoord 4, autoriteit 5%

Browser heeft verschillende “ingebouwde” stijlen die ze toepassen op verschillende html-elementen. Deze stijldefinities kunnen per browser verschillen. De normaliserende CSS-bestanden zijn bedoeld om de weergave van de pagina in verschillende browsers te “normaliseren” door deze browserspecifieke stijlen opnieuw in te stellen.

Je moet het voorje eigen stijldefinities opnemen. Anders zouden deze stijlen mogelijk (vanwege de trapsgewijze aard van css) ook je declaraties overschrijven, wat niet zo logisch zou zijn;)

De meest populaire stijlreset is waarschijnlijk Eric Meyer’s, wat gepaard gaat met een beetje achtergrondinformatie..


Antwoord 5, autoriteit 4%

Browsers kunnen de ontvangen HTML en CSS weergeven volgens de oorspronkelijke weergave-engine. Verschillende browsers kunnen verschillende weergavebenaderingen gebruiken [IE 😉 als je begrijpt wat ik bedoel]dus de bedoeling van reset.css is om alle attributen in te stellen op gemeenschappelijke vooraf gedefinieerde waarden zodat de ontwikkelaars/ontwerpers het kunnen vergeten een rendering-engine en begin de ontwikkeling helemaal opnieuw.


Antwoord 6, autoriteit 3%

Elke browser heeft zijn eigen standaard user agentstylesheet, die wordt gebruikt om ongestylede websites leesbaarder te maken. De meeste browsers maken bijvoorbeeld standaard links blauw en bezochte links paars, geven tabellen een bepaalde hoeveelheid rand en opvulling, passen variabele font-sizes toe op H1, H2, H3, enz. en een zekere mate van opvulling voor bijna alles.

Heb je je ooit afgevraagd waarom de verzendknoppen er in elke browser anders uitzien?

Natuurlijk zorgt dit voor een zekere hoofdpijn voor CSS-auteurs, die er niet achter kunnen komen hoe ze hun websites er in elke browser hetzelfde uit kunnen laten zien.

Met een CSS Reset kunnen CSS-auteurs elke browser dwingen om alle stijlen terug te zetten naar null, waardoor verschillen tussen browsers zoveel mogelijk worden vermeden.

Vanuit de consistente basis die je hebt ingesteld via je reset, kun je vervolgens doorgaan met het opnieuw opmaken van je document, in de wetenschap dat de verschillen van de browsers in hun standaardweergave van HTML je niet kunnen raken!

Hopelijk heeft het geholpen, misschien wil je dit artikel bekijken, Welke CSS-reset moet ik gebruiken?.


Antwoord 7, autoriteit 3%

Een CSS Reset (of “Reset CSS”) is een korte, vaak gecomprimeerde (verkleinde)
set CSS-regels die de stijl van alle HTML-elementen terugzet naar a
consistente basislijn.

Voor het geval je het nog niet wist, elke browser heeft zijn eigen standaard ‘gebruiker’
agent’ stylesheet, die het gebruikt om ongestylede websites er meer uit te laten zien
leesbaar. De meeste browsers maken bijvoorbeeld standaard koppelingen blauw en
bezochte links paars, geef tabellen een bepaalde rand en
opvulling, variabele lettergroottes toepassen op H1, H2, H3 enz. en een bepaalde
hoeveelheid opvulling voor bijna alles. Ooit afgevraagd waarom Verzenden
knoppen zien er in elke browser anders uit?

Natuurlijk zorgt dit voor een zekere hoofdpijn voor CSS-auteurs,
die er niet achter kunnen komen hoe ze hun websites er overal hetzelfde uit kunnen laten zien
browser.

Met behulp van een CSS-reset kunnen CSS-auteurs elke browser dwingen om al zijn
stijlen worden teruggezet naar null, waardoor verschillen tussen browsers zoveel mogelijk worden vermeden
zo mogelijk

verwijs naar http://www.cssreset.com/what-is- a-css-reset/


Antwoord 8

In eenvoudige bewoordingen is het opnieuw instellen van CSS vereist vanwege de inconsistentie van browsers. In detail zijn alle browserweergaven niet hetzelfde. Daarom kan webweergave per browser verschillen.

Meyer Web biedt een uiterste CSS-resetcode als u deze wilt gebruiken/resetten. Je kunt het hiervinden. Als je meer details nodig hebt, kun je hierook vinden welke CSS reset in meer details en waarom we het moeten gebruiken.

Other episodes