Valori implicite Css pentru elementele html. Resetați stilurile folosind CSS Reset. Evitați declarațiile de proprietate redundante când utilizați resetarea CSS

În mod implicit, browserul își setează propriile setări pentru unele proprietăți în css. Dar problema aici este că există multe browsere web și fiecare își poate stabili propriile reguli. Ce solutie? Aflați cum să resetați setările CSS implicite și să le suprascrieți cu ale dvs. Dar acest articol va fi dedicat modului în care se poate face acest lucru.

CSS Resetați sau resetați la setările implicite

CSS Reset este un set de stiluri care resetează unii parametri, instalat de browser Mod implicit. Fiecare dezvoltator web scrie acest fișier individual pentru el, în timp ce alții folosesc o soluție gata făcută. De aici îmi propun să încep. Există multe opțiuni bune resetarea stilului, dar preferata mea a fost aceasta compilată de Eric Meyer:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Licență: niciuna (domeniu public)
*/
html, body, div, span, applet, obiect, iframe,
h1, h2, h3, h4, h5, h6, p, citat bloc, pre,
a, prescurtare, acronim, adresa, mare, cita, cod,
del, dfn, em, img, ins, kbd, q, s, samp,
mic, grevă, puternic, sub, sup, tt, var,
b, u, i, centru,
dl, dt, dd, ol, ul, li,
set de câmpuri, formular, etichetă, legendă,
masa, legenda, tbody, tfoot, thead, tr, th, td,
articol, deoparte, pânză, detalii, încorporare,
figură, figcaption, subsol, antet, hgroup,
meniu, navigare, ieșire, ruby, secțiune, rezumat,
timp, marcaj, audio, video (
marja: 0;
umplutură: 0;
chenar: 0;
dimensiunea fontului: 100%;
font: mostenire;
vertical-align: linia de bază;
}
/* Resetarea rolului de afișare HTML5 pentru browsere mai vechi */
articol, deoparte, detalii, figcaption, figură,
subsol, antet, hgroup, meniu, navigare, secțiune (
afisare: bloc;
}
corp (
înălțimea liniei: 1;
}
ol, ul (
stil-listă: niciunul;
}
citat bloc,q(
ghilimele: niciunul;
}
blockquote:înainte, blockquote:după,
q:inainte, q:dupa (
continut: "";
continut: nici unul;
}
masa (
border-colaps: colaps;
distanță-limită: 0;
}

O sa comentez putin codul. În primul rând, aici sunt resetate marginile interioare și exterioare pentru toate elementele necesare. În al doilea rând, există suport pentru elemente HTML5. Au un set de reguli care le va permite să se afișeze corect în unele versiuni de browser. În al treilea rând, setările tipice pentru lucru confortabil cu tabele (spațiile dintre celule și marginile duble au fost eliminate). Au fost de asemenea resetate marcatoarele standard pentru liste și ghilimelele pentru citate. Aceste părți ale codului merită eliminate dacă doriți să utilizați stilul implicit.

Cum să resetați singur setările CSS

Dacă aveți o comandă mai mult sau mai puțin normală a CSS, puteți încerca să scrieți singur câteva reguli. De exemplu:

*{
marja: 0;
umplutură: 0;
}

Acesta este poate cel mai mult comandă simplă. Asteriscul în acest caz reprezintă toți selectorii, astfel încât stilurile vor fi aplicate tuturor elementelor de pe pagina web, resetând umplutura și umplutura acestora. S-ar putea să fii surprins, dar aceste linii simple de cod pot fi suficiente pentru a oferi compatibilitate între browsere în multe browsere web. Toate celelalte reguli pot fi adăugate la propria discreție. Recomand să adăugați display: block pentru toate etichetele HTML5.

Unde să plasați regulile de resetare css

Ți-am oferit codul de mai sus, dar unde să-l introduc? Există două opțiuni aici:

• Introduceți-l chiar la începutul foii de stil principale de pe site-ul dvs
• Creați un nou fișier CSS pe server și salvați codul în el, apoi salvați-l și conectați-l la toate paginile INAINTE DE stilul tabelului principal.css .

Pentru mai multe informații despre conectarea unei foi de stil CSS la html, consultați

După părerea mea, a doua opțiune este mai proastă, deoarece degradează performanța prin adăugarea unui fișier suplimentar la descărcare. Pe de altă parte, acest lucru vă va facilita gestionarea acestor reguli. Dar de dragul performanței, recomand să folosiți prima opțiune.

Resetarea setărilor este una dintre măsurile pentru a asigura compatibilitatea între browsere a site-ului, adică aceeași afișare în diferite browsere web. Desigur, acestea nu sunt toate măsurile care vor asigura același lucru aspect, despre restul voi scrie mai târziu pe acest blog. Abonați-vă dacă sunteți interesat.

De la autor: Construirea site-ului web pe Internet poate fi ca și cum a construi pe nisipuri mișcătoare. Browserele fac același lucru, dar din când în când fac diferențe enervant de imprevizibile. De exemplu, toate browserele au „foi de stil pentru agent de utilizator” - un set implicit de stiluri CSS pentru a face antetul să arate ca un antet etc., chiar înainte de a atribui stiluri paginii1. Desigur, fiecare motor de browser folosește seturi implicite ușor diferite.

Un exemplu au fost stilurile implicite de listă, unde inițial erau foile de stil implicite ale browserului Internet Explorer'a și Opera au avut list padding margin-left: 30pt;, în timp ce Firefox și KHTML au venit cu padding-left: 40px;. Dacă doriți să schimbați umplutura implicită prin definirea ul (padding-left: 0;), aceasta ar produce rezultate foarte diferite în browsere.

RESETĂRI CSS

Pentru a obține puțină stabilitate, unii dezvoltatori resetează toate marginile și umplutura folosind un selector universal:

* (marja: 0; umplutură: 0;)

* ( marja : 0 ; umplutură : 0 ; )

Definind indentarea listei și pornind foaia de stil acolo, veți obține ceea ce vă așteptați. Cu toate acestea, folosirea * a însemnat că marja implicită și umplutura s-au prăbușit pentru toate elementele și, de îndată ce ați adăugat un element de formular, lucrurile s-au prost.

Scopul unei resetari este de a reseta tot ce puteți... [și] servi ca punct de plecare pentru propriile stiluri de bază- Eric Meyer

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, tabel, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, rubin, secțiune, rezumat, timp, marcaj, audio, video ( marjă: 0; umplutură: 0; chenar: 0; dimensiunea fontului: 100%; font: moștenire; aliniere verticală: linie de bază; )

html, body, div, span, applet, obiect, iframe, h1, h2, h3, h4, h5, h6, p, citat bloc, pre, a, prescurtare, acronim, adresa, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, set de câmpuri, formular, etichetă, legendă, masa, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, ruby, secțiune, rezumat, timp, marcaj, audio, video ( marja: 0; umplutură: 0; chenar: 0; dimensiunea fontului: 100%; font: mostenire; vertical - aliniere : linia de bază ;

Resetează unele proprietăți ale multor elemente (dar nu ale tuturor) la echivalentul text simplu. Deoarece numai elementele care se potrivesc sunt resetate, acest lucru evită unele probleme * (marja: 0; umplutură: 0;). Putem defini apoi stiluri pentru aceste proprietăți „nestilizate” eliminate, încrezători că ne construim pe o bază stabilă între browsere. Această atribuire de stil acționează și ca un semnal pentru necesitatea de a seta în mod conștient stiluri adecvate pentru aceste elemente.

PROBLEME DE RESETAREA SETĂRILOR CSS

Resetările CSS au fost o salvare, dar acum, mai ales odată cu creșterea wireframe-urilor, acestea sunt adesea folosite așa cum sunt. De exemplu, Eric a presupus că alți dezvoltatori vor începe să construiască site-uri în jurul stilurilor de resetare propuse, înlocuindu-le în consecință, iar prima versiune a Meyer Reset a inclus temporar această regulă:

/* nu uitați să definiți stilurile de focalizare! */ :focus (contur: 0; )

Din păcate, nu toată lumea a definit stilurile de focalizare, iar Eric a eliminat-o din a doua versiune.

Folosirea resetărilor te face să te simți un pic pervers. Resetarea stilurilor implicite ale browserului vă obligă să vă gândiți la modul în care ar trebui să fie afișat fiecare element, ajutând să vă asigurați că elementele sunt aplicate pe baza semanticii și nu a stilurilor implicite. Dar pentru elemente precum i și em există aproape întotdeauna un stil implicit de browser. Alte stiluri implicite de browser, cum ar fi primul, sunt cândva ridicole marime mare Textele titlurilor s-au schimbat și, implicit, au devenit destul de tolerabile. Problemele încep atunci când cineva dorește să posteze un element HTML resetat doar cu stilurile de resetare „nestilizate” atribuite.

Pentru mine, cea mai mare problemă cu resetările este moștenirea, care duce la spam în instrumentele browserului. Când încercați să găsiți o problemă CSS cu un element profund imbricat în codul altcuiva, acest lucru nu va ajuta:

Reguli resetați css, repetat din cauza moştenirii

NORMALIZE.CSS

Nicholas Gallagher și Jonathan Neal au adoptat o abordare diferită cu Normalize.css, „un fișier CSS mic care asigură o mai bună consistență între browsere în stilurile implicite ale elementelor HTML”. Ca și în cazul resetărilor CSS, ne oferă un punct de plecare puternic pentru cross-browser - motivul principal pentru utilizarea unei resetări în primul rând - dar cele două abordări sunt diferite din punct de vedere filozofic.

Resetările CSS suprascriu stilurile de agent de utilizator și readuc multe elemente la starea lor „nestilată”, un teren uniform pe care să se construiască în siguranță. Cu toate acestea, trebuie să stilăm majoritatea elementelor înainte de a putea construi cu ele. În schimb, Normalize.css abordează doar inconsecvențele în stilul agentului utilizator, alegând cele mai potrivite setări implicite pentru a face diferența. Și aici obținem o bază sigură pentru cross-browser, dar una care include stiluri de agenți de utilizator normalizate ca blocuri de bază gata de utilizat. Practic este ceva de genul unei versiuni idealizate pentru cross-browser a foii de stil CSS 2.1 implicite. În ambele cazuri, trebuie apoi să adăugăm propriile noastre stiluri dominante pentru a crea imaginea, dar deoarece setările implicite ale browserului în Normalize.css rămân, există mai puține stiluri de adăugat în general.

Deoarece modificările din Normalize.css sunt mai direcționate, nu există o cascadă de moștenire a regulilor rescrise în instrumentele de dezvoltare a browserului. Iată un simplu ul:, destyleat cu Meyer Reset și Normalize.css versiunile 1 și 2:

Element „nestilat” al unei liste neordonate

Se aplică Meyer Reset

Aplicați Normalize.css v1

Aplicarea Normalize.css v2

Există o diferență clară în filozofie atunci când exemplul Meyer Reset apare ca câteva rânduri de text simplu, fără margini, indentații sau marcatori, în timp ce exemplele Normalize.css arată ca stiluri implicite. Diferența dintre stilurile aplicate acestui ul este, de asemenea, ușor de observat.

Cu toate acestea, acestea nu sunt toate stilurile aplicate ul. Pentru comparație, iată aceeași captură de ecran „nestilată”, dar cu stiluri vizibile de agent de utilizator, în Firefox 21 și Opera Next 15.

Acest articol este primul dintr-o serie pe tema îmblânzirii CSS-ului. Astăzi ne vom uita la tehnologie Resetare CSS.

De ce este necesar acest lucru?

Fiecare browser își setează propriile valori implicite de stil pentru diferite elemente HTML. CU folosind CSS Resetarea putem nivela această diferență pentru a asigura compatibilitatea între browsere a stilurilor.

De exemplu, utilizați elementul Aîn documentul dvs. Majoritatea browserelor, cum ar fi Internet Explorer și Firefox, adaugă un link Culoarea albastrăȘi subliniere. Totuși, imaginați-vă că peste cinci ani cineva decide să creeze un nou browser (să-i spunem UltraBrowser). Dezvoltatorii browserului nu le-a plăcut culoarea albastră și au fost enervați de sublinierea, așa că au decis să evidențieze link-urile in rosuȘi îndrăzneţ. Se bazează pe aceasta că dacă setați valoarea stilului de bază pentru un element A, atunci este garantat că va fi așa cum doriți să fie și nu așa cum preferă dezvoltatorii UltraBrowser să-l afișeze.

Dar acum nu avem deloc liniuțe, inclusiv între paragrafele individuale! Ce să fac? Nu minți și nu-ți fie teamă: sub resetarea noastră vom descrie regula de care avem nevoie. Acest lucru se poate face căi diferite: specificați indentarea din partea de jos sau de sus a paragrafului, specificați-o în procente, pixeli sau em.

Cel mai important, browserul joacă acum după regulile noastre, iar noi nu după regulile sale. M-am hotarat sa fac asa:

* ( marja: 0; umplutură: 0; ) p ( marja: 5px 0 10px 0; )

Drept urmare, am obținut ceea ce se poate vedea în al treilea exemplu.

Vă puteți crea propriile stiluri de resetare dacă rezolvați o problemă specifică în proiectul dvs. În ciuda acestui fapt, nu există ghid pas cu pas la crearea propriei resetări CSS. Bazează-te pe propriile principii și pe propriul tău stil.

Pentru a vă ajuta să faceți alegerea corectă, iată mai multe link-uri:

1. Less is more - alegerea mea de Resetare CSS (Ed Elliott).

2. Resetarea CSS este primul lucru pe care ar trebui să-l vadă browserul

Resetarea stilurilor după setarea propriilor stiluri pentru elemente este o abordare greșită. În acest caz, nu trebuie să vă așteptați la nimic bun de la afișarea browserului. Amintiți-vă că ar trebui să includeți întotdeauna CSS Reset mai întâi și apoi toate celelalte stiluri.

Da, înțeleg, suna amuzant, dar aceasta este una dintre principalele greșeli ale dezvoltatorilor, tineri și bătrâni. Mulți oameni pur și simplu uită de asta.

Unii ar putea pune o întrebare logică: de ce se întâmplă asta? Răspunsul este simplu: regulile scrise mai jos în textul fișierului CSS (și chiar mai jos în ordinea lor în document) suprascriu regulile declarate mai devreme.

Să nu depărtăm prea mult de subiect și să continuăm. Să aplicăm stilurile lui Eric Meyer exemplului nostru, dar după descrieri ale proprietăților noastre, așa cum se arată în exemplul 4. Matematicienii ar spune următoarele: „Asta trebuie să dovedim”.

3. Utilizați un document CSS separat pentru resetarea CSS

Trebuie (nu, nu am fost nicidecum forțat) să menționez acest sfat. Utilizarea unui fișier separat pentru resetarea CSS este o practică obișnuită care este acceptată de număr mare dezvoltatori.

De fapt, iau poziția de creație un fișier CSS mare datorită performanţelor mai mari ale acestei abordări. Dar în această problemă sunt înclinat să fiu de acord cu majoritatea: CSS Reset ar trebui mutat la dosar separat(numit de obicei reset.css). În acest caz, îl puteți folosi în diferite proiecte fără a depune niciun efort pentru a-l separa de alte reguli CSS.

4. Încercați să evitați utilizarea unui selector universal

Deși acest concept funcționează, utilizarea sa nu este adesea de dorit din cauza incompatibilității cu unele browsere (de exemplu, acest selector nu este procesat corect în Internet Explorer). Ar trebui să utilizați această tehnică doar pentru pagini simple, mici, statice și previzibile (dacă ar trebui să faceți asta).

Acest sfat este deosebit de important atunci când dezvoltați soluții precum teme CMS. Nu puteți prezice dinainte cum va fi folosit sau cum va fi modificat. Este mai bine să descrii regulile CSS fundamentale pentru toate elementele decât să folosești mecanismul imprevizibil (deși mai mic) al selectoarelor universale în acest scop.

5. Evitați descrierile de proprietăți redundante când utilizați Resetare CSS

Un alt motiv pentru care nu îmi place un fișier separat pentru CSS Reset este potențiala redundanță a declarațiilor de proprietate CSS ulterioare. Repetarea stilurilor tale individuale în întregul set de fișiere CSS este o manieră proastă și ar trebui evitată. Bineînțeles, uneori suntem prea leneși să trecem cu minuțiozitate printr-un set de stiluri și să combinăm unele dintre ele, dar ar trebui măcar să încercăm!

Să revenim la Resetarea CSS a lui Eric. Setează valorile implicite pentru înălțimea liniei, culoarea și fundalul elementului corp in felul urmator:

corp (înălțimea liniei: 1; culoare: negru; fundal: alb; )

Să presupunem că știți deja cum va arăta elementul corp:

1. culoare de fundal: #cccccc;
2. culoare: #996633;
3. Doriți să repetați o anumită imagine de fundal pe orizontală.

În acest caz, nu este nevoie să creați un nou selector pentru a vă descrie proprietățile - le puteți include pur și simplu în CSS Reset. Hai să o facem:

corp (înălțimea liniei: 1; culoare: #996633; fundal:#ccc url(tiled-image.gif) repetare-x stânga sus; )

Nu vă fie teamă să modificați resetarea CSS în sine. Adaptează-l la tine, fă-l să funcționeze pentru tine. Schimbați, rearanjați, eliminați și adăugați după cum este necesar în cazul dvs. specific.

Eric Meyer a spus următoarele despre aceasta: „Acesta nu este un caz în care toată lumea ar trebui să folosească CSS Reset fără modificări”.

CSS CSS implicit pentru elemente HTML (2)

Este diferit pentru fiecare browser, deci:

• Firefox (Gecko):. Sau accesați resource://gre-resources/ și uitați-vă la html.css.
• Chrome/Safari (WebKit):
  • Chrome (clipește):
• Internet Explorer (Trident), versiuni anterioare: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Unde pot găsi CSS pentru CSS implicit al browserului?

Multe elemente HTML au unele Proprietăți CSS implicite, care uneori pot duce la un comportament necunoscut/nedorit. De exemplu, câmpurile de introducere sunt afișate diferit în diferite browsere. Caut un loc care să acopere noile proprietăți CSS3 și noile elemente HTML5.

Am văzut în alte întrebări (mult mai vechi) (cum ar fi foile de stil CSS implicite în browsere) care sugerează o soluție de resetare CSS. Această soluție uneori nu este necesară, de multe ori aș dori să păstrez unele proprietăți de bază (cum ar fi evidențierea câmpurilor de introducere în Chrome). Cu alte cuvinte: Nu vreau să scap de lucruri doar pentru că nu știu ce fac. .

Asa de, Există un site care să-mi ofere toate aceste informații (sau poate cele mai multe)?

Se poate găsi un depozit GitHub pentru toate specificațiile HTML W3C și foile de stil CSS implicite pentru dezvoltatori.

1.

2. Stiluri standard pentru Internet Explorer

3.

4. Stiluri standard pentru Opera

5. Stiluri standard pentru HTML4 (specificație W3C)

6. Stiluri standard pentru HTML5 (specificație W3C)

Exemplu, conform specificației implicite W3C HTML4:

Html, adresa, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, meniu, pre ( display: block; unicode-bidi: embed ) li ( display: list-item ) head ( display: none ) table ( display: table ) tr ( display: table-row ) thead ( display: table-header- group ) tbody ( display: table-row-group ) tfoot ( display: table-footer-group ) col ( display: table-column ) colgroup ( display: table-column-group ) td, th ( display: table-cell ) legendă (afișare: table-caption) th (greutatea fontului: îngroșat; text-align: center) legendă (text-align: center) body (marja: 8px) h1 (dimensiunea fontului: 2em; margine: .67em 0) h2 (dimensiunea fontului: 1.5em; margine: .75em 0) h3 (dimensiunea fontului: 1.17em; marginea: .83em 0) h4, p, blockquote, ul, fieldset, form, ol, dl, dir, meniu ( marja: 1.12em 0 ) h5 ( dimensiunea fontului: .83em; marja: 1.5em 0 ) h6 ( dimensiunea fontului: .75em; marja: 1.67em 0 ) h1, h2, h3, h4, h5, h6, b, citată puternică (greutate font: mai îndrăzneață) (marja-stânga: 40px; margin-right: 40px ) i, cite, em, var, address ( font-style: italic ) pre, tt, code, kbd, samp ( font-family: monospace ) pre (white-space: pre ) buton, textarea, input, select ( display: inline-block ) big ( font-size: 1.17em ) mic, sub, sup ( font-size: .83em ) sub ( vertical-align: sub ) sup ( vertical-align: super ) tabel ( margine-spație: 2px; ) thead, tbody, tfoot ( vertical-align: middle ) td, th, tr ( vertical-align: inherit ) s, strike, del ( text-decoration: line-through ) hr ( chenar: 1px inset ) ol, ul, dir, meniu, dd ( margin-left: 40px ) ol ( list-style-type: zecimal ) ol ul, ul ol, ul ul, ol ol ( margin-top: 0; margin-bottom: 0 ) u, ins ( text-decoration: underline ) br:before (conținut: "\A"; white-space: pre-line ) center ( text-align: center ) :link, :visited ( text-decoration: subliniere ) :focus (contur: inversare punctată subțire) /* Începeți setările de bidirecționalitate (nu modificați) */ BDO (direcție: ltr; unicode-bidi: bidi-override ) BDO (direcție: rtl; unicode-bidi: bidi-override ) * ( direcția: ltr; unicode-bidi: încorporat ) * ( direcție: rtl; unicode-bidi: încorporat ) @media print ( h1 ( întreruperea paginii-înainte: întotdeauna ) h1, h2, h3, h4, h5, h6 ( întreruperea paginii-după: evita ) ul, ol, dl ( întreruperea paginii-înainte: evita ) )

Toate elementele paginii HTML au propriile valori implicite. Și, din păcate, ele nu sunt interpretate în mod egal de diferite browsere. Ca urmare, designul site-ului are de suferit; designul acestuia se modifică la schimbarea browserului (browser de internet). Scopul procedurii de resetare a stilului este de a reduce inconsecvența browserului în lucruri precum înălțimea liniilor, marginile, dimensiunile fontului antetului etc.

Exemple de scripturi de resetare în stil CSS

Există o părere că fiecare webmaster care se respectă ar trebui să-și scrie pe a lui propriul cod resetați CSS. Dar sunt susținătorul unei abordări diferite: luați o soluție gata făcută, înțelegeți-o și ajustați-o dacă este necesar.

Eric Meyer CSS Resetare

Scriptul de resetare de la Eric Meyer, potrivit autorului însuși, este intenționat foarte general. De exemplu, elementul body nu are un set implicit de culori de fundal. Prin urmare, trebuie să fie modificat, editat, extins și altfel personalizat pentru a se potrivi nevoilor dumneavoastră. Adăugați culorile dorite pentru pagini, linkuri și așa mai departe.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licență: niciuna (domeniu public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, masă, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, ruby, secțiune, rezumat, timp, marcaj, audio, video (margine: 0; umplutură: 0; chenar: 0; dimensiune font: 100%; font: moștenire; aliniere verticală: linie de bază ; ) /* Resetarea rolului de afișare HTML5 pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, blockquote:after, q:fore, q:after (conținut: ""; conținut: none; ) tabel (border- colaps: colaps; distanță-limită: 0; )

Yahoo! (YUI 3) Resetați CSS

CSS Reset YUI 3 atenuează stilul inconsecvent al elementelor HTML de către browsere, la fel ca orice alt script de resetare CSS, pentru a crea o bază solidă pentru construirea de site-uri web și aplicații web.

/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Toate drepturile rezervate. Licențiat conform licenței BSD. http://yuilibrary.com/license/ */ /* TODO va trebui să eliminăm setările pe HTML, deoarece nu putem să-l spațiu de nume. TODO cu prefixul, ar trebui să grupez după selector sau proprietate pentru a reduce greutatea? */ html( color:#000; background:#FFF; ) /* TODO elimina setările de pe BODY, deoarece nu putem să-l spațiu de nume. */ /* TODO test punând o clasă pe HEAD. - Eșuează pe FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td ( margin: 0; padding: 0; ) table ( border-collapse: collapse; border-spacing: 0; ) fieldset, img ( border: 0; ) /* TODO Gândiți-vă la gestionarea moștenirii în mod diferit, poate lăsând IE6 să eșueze puțin ... */ adresa, legenda, citarea, codul, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul (list-style:none; ) caption, th ( text-align:left; ) h1, h2, h3, h4, h5, h6 (dimensiunea fontului:100%; greutatea fontului:normal; ) q:inainte, q:dupa (conținut:""; ) prescurtat, acronim ( border:0; font-variant:normal; ) /* pentru a păstra înălțimea liniei și aspectul selectorului */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , selectați ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*pentru a activa redimensionarea pentru IE*/ ) /*deoarece legenda nu moștenește în IE * / legendă ( culoare:#000; ) /* ștampilă de detecție CSS YUI */ #yui3-css-stamp.cssreset ( afișare: niciunul; )

Resetarea stilurilor normalize.css

Normalize.css este un fișier CSS personalizat care permite browserelor să redeze toate elementele mai consistent și în conformitate cu standardele moderne. Autorii săi au explorat diferențele dintre stiluri browsere diferite implicit pentru a ajusta doar acele stiluri care au nevoie de normalizare.

/*! normalize.css v6.0.0 | Licență MIT | github.com/necolas/normalize.css */ /* Document ===================================== = ======================================= */ /** * 1. Corectează linia înălțime în toate browserele. * 2. Preveniți ajustările dimensiunii fontului după schimbările de orientare în * IE pe Windows Phone și în iOS. */ html ( înălțimea liniei: 1,15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Secțiuni ================================================= =========================== */ /** * Adăugați afișarea corectă în IE 9-. */ articol, deoparte, subsol, antet, navigare, secțiune ( afișare: bloc; ) /** * Corectați dimensiunea fontului și marginea elementelor „h1” din contextele „secțiune” și * „articol” în Chrome, Firefox și Safari. */ h1 ( font-size: 2em; margine: 0.67em 0; ) /* Gruparea conținutului ============================ = ==================================================== ========= */ /** *Adăugați afișarea corectă în IE 9-. * 1. Adăugați afișajul corect în IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Adăugați marja corectă în IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Adăugați caseta corectă dimensionarea în Firefox. * 2. Afișați overflow-ul în Edge și IE. */ h ( box-sizing: content-box; /* 1 */ înălțime: 0; /* 1 */ overflow: vizibil; /* 2 */ ) /** * 1. Corectați moștenirea și scalarea dimensiunii fontului în toate browserele. * 2. Corectați dimensiunea ciudată a fontului `em` în toate browserele. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Semantică la nivel de text =============== ==================================================== === ========= */ /** * 1. Eliminați fundalul gri de pe linkurile active în IE 10. * 2. Eliminați golurile subliniate în linkurile în iOS 8+ și Safari 8+. */ a ( culoarea fundalului: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Eliminați chenarul de jos în Chrome 57- și Firefox 39- . * 2. Adăugați decorarea textului corect în Chrome, Edge, IE, Opera și Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: subliniat; /* 2 */ text-decoration: subliniat punctat; /* 2 */ ) /** * Preveniți aplicarea duplicată a `bolder ` după următoarea regulă din Safari 6. */ b, puternic ( font-weight: inherit; ) /** * Adăugați greutatea corectă a fontului în Chrome, Edge și Safari. */ b, puternic ( font-weight: bolder; ) /** * 1. Corectați moștenirea și scalarea dimensiunii fontului în toate browserele. * 2. Corectați dimensiunea ciudată a fontului `em` în toate browserele. */ cod, kbd, samp (familie font: monospace, monospace; /* 1 */ dimensiune font: 1em; /* 2 */ ) /** * Adăugați stilul corect de font în Android 4.3-. */ dfn ( font-style: italic; ) /** * Adăugați fundalul și culoarea corecte în IE 9-. */ marca (culoare de fundal: #ff0; culoare: #000; ) /** * Adăugați dimensiunea corectă a fontului în toate browserele. */ small ( font-size: 80%; ) /** * Preveniți elementele `sub` și `sup` să afecteze înălțimea liniei în * toate browserele. */ sub, sup ( dimensiunea fontului: 75%; înălțimea liniei: 0; poziție: relativă; alinierea verticală: linia de bază; ) sub ( jos: -0.25em; ) sup ( sus: -0.5em; ) /* Conținut încorporat ================================================= ================ =========================== */ /** * Adăugați afișare corectă în IE 9-. */ audio, video ( display: inline-block; ) /** * Adăugați afișajul corect în iOS 4-7. */ audio:not() (afișare: niciunul; înălțime: 0; ) /** * Eliminați chenarul imaginilor din interiorul linkurilor în IE 10-. */ img (border-style: none; ) /** * Ascunde overflow-ul în IE. */ svg:not(:root) ( overflow: ascuns; ) /* Forms ================================ = =================================================== ====== */ /** * Eliminați marja în Firefox și Safari. */ buton, intrare, optgroup, select, textzona ( margine: 0; ) /** * Afișează overflow în IE. * 1. Afișați depășirea în Edge. Butonul */, introducere ( /* 1 */ overflow: vizibil; ) /** * Eliminați moștenirea transformării textului în Edge, Firefox și IE. * 1. Eliminați moștenirea transformării textului în Firefox. Butonul */, selectați ( /* 1 */ text-transform: none; ) /** * 1. Preveniți o eroare WebKit în care (2) distruge controalele native `audio` și `video` * în Android 4. * 2. Corectați dizabilitatea pentru a stila tipurile pe care se poate face clic în iOS și Safari. */ buton, html , /* 1 */ , ( -webkit-appearance: buton; /* 2 */ ) /** * Eliminați chenarul interior și umplutura în Firefox. */ Buton::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner (stil chenar: niciunul; umplutură: 0; ) /** * Restabiliți stilurile de focalizare nesetate de regula anterioară. */ buton:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring (contur: 1px ButtonText punctat; ) /** * 1. Corectați împachetarea textului în Edge și IE. * 2. Corectați moștenirea culorilor din elementele `fieldset` în IE. * 3. Îndepărtați padding-ul astfel încât dezvoltatorii să nu fie surprinși atunci când eliberează * elemente `fieldset` în toate browserele. */ legendă ( dimensiunea casetei: border-box; /* 1 */ culoare: moștenire; /* 2 */ afișare: tabel; /* 1 */ lățime maximă: 100%; /* 1 */ padding: 0 ; /* 3 */ spatiu alb: normal; /* 1 */ ) /** * 1. Adăugați afișajul corect în IE 9-. * 2. Adăugați alinierea verticală corectă în Chrome, Firefox și Opera. */ progres ( display: inline-block; /* 1 */ vertical-align: baza; /* 2 */ ) /** * Eliminați bara de defilare verticală implicită în IE. */ textarea ( overflow: auto; ) /** * 1. Adăugați dimensiunea corectă a casetei în IE 10-. * 2. Îndepărtați căptușeala în IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Corectați stilul cursorului al butoanelor de creștere și decrementare în Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( înălțime: automat; ) /** * 1. Corectați aspectul ciudat în Chrome și Safari. * 2. Corectați stilul conturului în Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Eliminați butoanele interioare și anulați în Chrome și Safari pe macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Corectați incapacitatea de a stila tipurile pe care se poate face clic în iOS și Safari. * 2. Schimbați proprietățile fontului în „moștenire” în Safari. */ ::-webkit-file-upload-button ( -webkit-appearance: buton; /* 1 */ font: inherit; /* 2 */ ) /* Interactiv ============ ==================================================== === ============ */ /* * Adăugați afișarea corectă în IE 9-. * 1. Adăugați afișajul corect în Edge, IE și Firefox. */ detalii, /* 1 */ meniu ( display: block; ) /* * Adăugați afișarea corectă în toate browserele. */ rezumat (afișare: element-listă; ) /* Scripting ==================================== = ======================================= */ /** * Adăugați afișarea corectă în IE 9-. */ canvas ( display: inline-block; ) /** * Adăugați afișarea corectă în IE. */ șablon ( afișare: niciunul; ) /* Ascuns ======================================= ====================================== */ /** * Adăugați afișajul corect în IE 10 - . */ (afisare: nici unul; )

Resetare prin selector universal * (asterisc)

La prima vedere, aceasta poate părea cea mai simplă și de succes soluție; de ​​ce să descrieți toate elementele HTML și să le atribuiți valori atunci când puteți utiliza selectorul *, deoarece efectul său se aplică tuturor elementelor HTML.

* ( marja: 0; umplutură: 0; )

Dar, din păcate, aceasta nu este o practică bună. Este foarte dificil (care consumă mult timp în comparație cu alte proceduri de resetare CSS) pentru browser să aplice reguli fiecărui element din document, în special pe paginile web mari și, de asemenea, poate strica o mulțime de stiluri implicite bune.

Resetarea stilurilor și WordPress

Dacă doriți să utilizați una dintre metodele de resetare descrise mai sus Stiluri CSS pentru un site WordPress, acest lucru se poate face în două moduri.

Primul este că trebuie să copiați codul de resetare la începutul fișierului style.css al temei dvs. WordPress (după rândurile despre autor și numele temei, adică după textul înconjurat de o fracțiune și un asterisc /* ... */.

@import „reset.css”;

Dacă există o directivă @import în CSS, atunci ar trebui să fie chiar la începutul tabelului (înaintea tuturor regulilor). În caz contrar, browserul îl poate ignora.

În plus, pentru a îmbunătăți performanța, Tabelele CSS stilurile, de regulă, sunt combinate într-un singur fișier. Prin urmare, nu ar trebui să utilizați @import decât dacă există o nevoie reală.

După cum puteți vedea, resetarea stilurilor în WordPress nu este nimic special.

Mulțumiri

Următoarele surse au fost folosite la scrierea acestui articol.