Fájl visszaállítása CSS. A CSS-reset használata

A CSS visszaállítása. (Reset Styles) nullázva van a CSS használatával.Egyes paraméterek HTML elemek, a böngésző alapértelmezés szerint telepített. Például ezek az elemek közé tartoznak a fenti (tag), amely kezdetben jelen nulla függőleges mezők (CSS), jelzett listák (tag), amelyek már nem csak területeken, hanem bizonyos típusú markerek (CSS) és így tovább.

Most gondoljunk arra, hogy szüksége van erre a CSS-re, mit adhat nekünk? Nos, képzeljük el, hogy magasztalják webhely oldalain, és ugyanabban az időben nem változott a mezőket bekezdések, a böngésző által kínált alapértelmezett, mivel méretük teljesen rendezett. De mondd meg nekem, kérlek, és hol döntöttél, hogy a világ minden böngészője, aki már létezik és még mindig megjelenik, ugyanolyan méretű mezőket hoz létre? Ráadásul miért gondolod, hogy a böngészők, amelyekben tesztelte az elrendezést, nem fog változni az ő következő verziók Ezeknek a mezőknek a mérete egyáltalán nem távolítható el teljesen? Érezd, mi illata?

Tehát, a CSS dobása, a versek egyszerűen csak ilyen félreértésekből korlátozódnak, vagyis először visszaállítja a CSS tulajdonságainak összes "kritikus" értékét, majd hozzáadja azt, de saját méretükkel. Így biztos lehet benne, hogy minden böngészőben az oldal egyformán megjelenik. Biztosan nem állhatod vissza a stílusokat, de egyszerűen az elrendezés során állítsa be a szükséges paramétereket az elemekhez, de fennáll annak a veszélye, hogy valahol valami elveszett, és egy bizonyos ponton minden megszakad.

A fentiek alapján a CSS-megkönnyebbülés egyik jellemzője, hogy a használat után sok HTML elem elveszíti a szokásos megjelenését. És ha a veszteség mezők bekezdésben a kezdők, valami várható kezdők, akkor például az a tény, hogy a gombok segítségével létrehozott címkék vagy hirtelen külsőleg hasonlít a szokásos szöveget - egy teljes meglepetés. De ez nem lehet zavarban, mert erre a stílusokra és visszaáll, így a pedigreer ezután nem felejtette el, hogy meghatározza őket egy új.

Sok mód van a stílusok visszaállítására, és micsoda választja - ez csak önállóan függ, de elmondhatom, hogy egy - a legjobb reset az, amit magad teremtettél, az Ön tapasztalatai és szokásai alapján. Ha még nincs ilyen tapasztalata, használhatja az alábbiakban javasolt opciók egyikét.

Mindig adja meg a stílusokat a CSS visszaállításához a kód kezdetén, különben a paraméterek egy része nem működik, mert stílus prioritásokamelyek a HTML oldal és a CSS-kód feldolgozása során telepített böngészők.

Állítsa vissza a CSS-t egy univerzális választóval

* (Font-Család: öröklés; / * Minden elem örökölje a szülőbetõs fülhallgatóját * \u200b\u200b/ betűtípus-stílus: öröklés; / * örökölje a designt * / betűsúly: öröklés; / * örökölje a zsír * / függőleges-igazítás: alapvonal; / * függőleges kiindulási igazítás * / betűméret: 100%; / * betűméret 100% * / háttér: átlátszó; / * az összes elem átlátszó * / Border: 0; / * Távolítsa el a keret * / vázlat: 0; / * A kontúrok eltávolítása * / margó: 0; / * Távolítsa el a mezőket * / Padding: 0; / * Eltávolítás francia bekezdések * /)

A példa leírása

Ebben a példában univerzális választó A megadott stílusok azonnal visszaállnak az összes HTML elemnél, amelyek jelen vannak az oldalon. Amint láthatja, a legtöbb tulajdonság pontosan a biztonsági háló értékét, az értéküket, és így a böngészőknek alapértelmezés szerint helyettesíteniük kell a CSS-specifikációnak megfelelően. De ahogyan már tudod, a gyakorlatban mindez teljesen más, és ha az ingatlant valóban örökölte a szülei elemei minden vezető böngészőben, akkor a CSS tulajdonság által meghatározott külső mezők nem mindig eredetileg nulla.

De a keret (CSS) és kontúrok (CSS) mérete nem alapértelmezés szerint nem nulla, de már a specifikáció szerint. Azonban a vastagságuk visszaállt, így a mérőműszer nem fogja elfelejteni, hogy egyértelműen meghatározza, ha szükséges lenne.

Állítsa vissza a CSS-t a Yahoo!

Test, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, forma, terep, bemenet, textarea, p, blockquote, th, td (margó: 0; Padding: 0;) Fieldset, IMG, ABBR, ACRONYM (határ: 0;) cím, felirat, idézet, kód, dfn, em, erős, th, var (betűtípus: normál, betűtípus: normál;) (Border-Collapse: összeomlás; / * Általános határok táblák tábláihoz * / határ-távolság: 0; / * nullázási távolság a sejtek között * /) felirat, th (szöveges igazítás: balra; / * szöveges igazítás a bal szélre * /) ol, ul (listastílus: nincs; / * A listák jelölők * /) H1, H2, H3, H4, H5, H6 (betűméret: 100%; betűtípus-súly: normál;) K: Korábban, Q: után (tartalom: ""; / * Megszakítjuk az idézeteket a Q * /)

A példa leírása

A Yahu egyszerre kifejlesztette saját szemabály-verzióját. Itt a konkrét elemek tulajdonságai már változóak, ami lehetővé teszi nagyobb rugalmasság elérését az őket szabályozásában. külső fajok. Például a jelölőket eltávolítják listákból, és a címke idézőjelek a CSS tulajdonsággal. Ennek a megközelítésnek az előnyei nyilvánvalóak, de a mínuszok magukban foglalják a terjedtebb és néha redundáns kódot. De senki sem zavarja meg, hogy megváltoztassa a CSS-t az Ön igényeihez. Tegyük fel, hogy törölhet néhány szükségtelennel. tagválasztók Vagy csak távolítsa el az idézeteket, de azonnal kérje meg őket a szükséges megjelenéshez.

Állítsa vissza az Eric Meyer CSS-t

Html, test, div, span, applet, objektum, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, rövidítés, cím, nagy, cite, code, del, dfn, Em, img, ins, kbd, q, s, samp, kicsi, sztrájk, erős, sub, sup, tt, var, b, u, i, központ, dl, dt, dd, ol, ul, li, fieldset, Forma, címke, legenda, asztal, felirat, tody, tfoot, thread, tr, th, td, cikk, félre, vászon, részletek, beágyaz, ábra, figcaption, footer, header, h brutroup, menü, nav, kimenet, ruby, Szekció, összefoglaló, idő, jel, hang, videó (margó: 0; Padding: 0, határ: 0; Border: 0, Betűméret: 100%; Font: öröklés; függőleges igazítás: alapvonal;) \u200b\u200bCikk, Részletek, Kábelek, Ábra, lábléc, fejléc, hánycsoport, menü, Nav, szakasz (kijelző: / * A blokk elemeket (régi böngészők számára) * /) test (vonalmagasság: 1, / * sorköz Szöveg az oldalon * /) ol, ul (listastílus: nincs;) BlokkQuTquote: korábban, blokkvidék: után, Q: korábban, q: után (tartalom: "" quotes q és blockquote * / tartalom: Nincs; / * Hűség * /) BlokkQuote, Q (idézetek: nincs; / * Egy másik módja az idézeteknek * /) táblázat eltávolításának másik módja * /) Táblázat (Border Collapse: Összecsukás; Border-távolság: 0;)

A példa leírása

A CSS visszaállításának következő módja Eric Meyer (Eric Meyer) - egy bizonyos körökben ismert webfejlesztő. Itt már hozzá egy mentesítés stílusok címkéket HTML 5, ami mellesleg a írásakor ezt a cikket, és maguk is még mindig nagyon rosszul támogatott modern böngészőben. De mindig szembesülsz, ugye?

Valójában ez a cikk folytatódhat a végtelenségig, hiszen ismét megismétlem egy bizonyos ponton, minden egyes mérőműszer a mentesítés változatába kerül, vagy egyáltalán nem használja, a figyelmet szenteli.

Minden HTML elemek Az alapértelmezett oldalak saját értékeik vannak. És sajnos, nem egyformán értelmezhető különböző böngészők. Ennek eredményeképpen a helyszín kialakítása szenved, tervezési módosításai, amikor a böngésző (internetböngésző). A styling reset eljárás célja, hogy csökkentse a böngésző ellentmondását olyan dolgokban, mint a vonal magassága, mezők, a cím betűkészleteinek mérete stb.

Példák a CSS Style Reset parancsfájlokra

Úgy vélik, hogy minden önbecsülési webmesternek meg kell írnia saját CSS-visszaállítási kódját. De egy másik megközelítés támogatója vagyok, kész megoldást, értsd meg, és szükség esetén javítsa ki.

Eric Meyer CSS visszaáll

Az Eric Meyer kisülési szkriptje, maga a szerző szavai, szándékosan nagyon gyakori. Például nincs megadva egy elemtesthez, bármilyen alapértelmezett hátteret. Ezért módosítani kell, szerkeszteni, bővíteni és egyébként konfigurálni az Ön igényeinek megfelelően. Adja hozzá a kívánt színeket az oldalakhoz, linkekhez és így tovább.

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licenc: Nincs (Public Domain) * / html, Body, Div, Span, Applet, Object, IFrame, H1, H2, H3, H4, H5, H6, P, Idézetblokk, Pre, A, Röv, rövidítése, Cím, Nagy, idézett, kód, del, dfn, em, img, ins, kbd, q, s, samp, kicsi, sztrájk, erős, al, sup, tt, var, b, u, i, tt, var, b, U, én, központ, dl, dt, dd, ol, ul, li, fieldset, forma, címke, legenda, asztal, felirat, tody, tfoot, thread, tr, th, td, cikk, félre, vászon, részletek, Beágyaz, ábra, figcaption, footer, header, h brutroup, menü, nav, kimenet, rubin, szakasz, összefoglaló, idő, jel, hang, videó (margó: 0, párnázás: 0; határ: 0, betűméret: 100% ; font: örökli; vertical-align: Baseline;) / * HTML5 DISPLAY-ROLE RESET régebbi böngészőkhöz * / CIKK, félre, részleteket FIGCAPTION, ábra, lábjegyzet, fejléc, HGROUP, menü NAV § (display: block; ) Test (vonalmagasság: 1,) ol, ul (listastílus: nincs;) Blockquote, Q (idézetek: nincs;) BlokkQuTquote: korábban, blokkvidék: Utaster, Q: korábban, Q: után (tartalom: ""; Tartalom: Nincs;) Táblázat (Border- Collapse: C. OLLAPSE; Border-távolság: 0; )

Jehu! (Yui 3) visszaállítja a CSS-t

A CSS YUI 3 stílusok lágyítják a HTML elemek böngészőinek ellentmondásos stílusát, valamint bármely más CSS-reset script-ot, hogy megbízható alapot hozzanak létre webhelyek és webes alkalmazások létrehozásához.

/ * YUI 3.18.1 Copyright 2014 Yahoo! Inc. Minden jog fenntartva. A BSD-licenc keretében engedélyezett. http://yuilibrary.com/license/ * / * A TODO-nak meg kell távolítania a beállításokat a HTML-ről, mivel tudjuk, hogy "t namespace it. Todo az előtaggal, kell-e csoportot választó vagy ingatlan a súlymegtakarítás? * / HTML (szín) : # 000; Háttér: #FFF;) / * TODO eltávolítása a testen lévő beállítások óta, mivel tudnánk. * / / * TODO teszt az Alass a fejre. - Az FF-en nem sikerül. * / Test, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, forma, field, legenda, input, textarea, p, blockquote, th, TD (Margin: 0, Padding: 0;) Táblázat (Border-Collapse: Összecsukás: Összecsukás, határ-térfogat: 0;) Fieldset, IMG (határ: 0;) / * Todo Gondolj a Hanlding örökségre másképp ... * / cím, felirat, idézet, kód, dfn, em, erős, th, var (betűtípus-stílus: normál, betűtípus: normál;) ol, ul (lista stílus: nincs;) (Szöveges igazítás: balra;) H1, H2, H3, H4, H5, H6 (betűméret: 100%; betűtípus-súly: normál;) Q: korábban, Q: után (tartalom: "";) ABBR, Rövidítés (határ: 0, betűtípus-változat: normál;) / * A vonalmagasság és a választók megjelenése megőrzése * / SUP (függőleges-igazítás: szöveges;) Sub (függőleges-igazítás: szöveges alsó;) bemenet, TEXTAREA , Válassza ki (betűtípus-család: öröklés; Betűméret: öröklés; betűtípus-súly: öröklés; * betűméret: 100%; / * az IE * /) / * átméretezés engedélyezéséhez, mert a legenda nem örökölje az IE * t / Legend (szín: # 000,) / * yui css észlelés Ion bélyegző * / # yui3-CSS-bélyegző.cssreset (kijelző: nincs; )

A stílusok visszaállítása normalize.css

A normalize.css egy olyan egyéni CSS fájl, amely lehetővé teszi a böngészők számára, hogy folyamatosan és a modern szabványoknak megfelelően megjelenítsenek minden elemet. A szerzők feltárni a különbség a stílusok különböző böngészők alapértelmezés szerint kijavítani csak azok stílusok szükség normalizálás.

/ *! Normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css * / / * dokumentum \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * 1. Javítsa ki a vonalmagasságot Minden böngészőben. * 2. Megakadályozza a betűméret módosításait az orientáció változásai után * Windows telefon és iOS-ban. * / HTML (Line-Magasság: 1.15; / * 1 * / -ms-szövegméret: 100%; / * 2 * / -webkit-szövegméret-beállítás: 100%; / * 2 * /) / * szakaszok \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Adja hozzá a megfelelő megjelenítést az IE 9-. * / Article, félre, lábléc, fejléc, NAV, szakasz (Kijelző: Blokk;) / ** * Javítsa meg a "H1" elemek betűméretét és margóját a "Section" és a * `` cikk "CONEFOX-ban a Chrome, Firefox, és Szafari. * / H1 (Font-Méret: 2em; margin: 0.67em 0;) / * csoportosító tartalom \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * Adja hozzá a helyes megjelenítést az IE 9-. * 1. Adja hozzá a megfelelő megjelenítést az IE-ben. * / FigKaption, Ábra, fő (/ * 1 * / kijelző: blokk;) / ** * Adja hozzá a megfelelő margót az IE 8. * / figura (Margin: 1em 40px;) / ** * 1. Adja hozzá a megfelelő mezőt A Firefox méretezése. * 2. Mutassa be a túlcsordulás szélén és azaz. * / HR (dobozmérés: tartalomdoboz; / * 1 * / magasság: 0; / * 1 * / túlfolyó: látható; / * 2 * /) / ** * 1. Javítsa meg a betűméret örökségét és méretezését Minden böngészőben. * 2. Javítsa ki a páratlan "em" betűtípust minden böngészőben. * / Pre (Font-Family: Monospace, Monospace, / * 1 * / betűméret: 1em; / * 2 * /) / * szövegszintű szemantika \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * 1. Távolítsa el az aktív linkek szürke hátterét az IE 10-ben. * 2. Távolítsa el a hiányosságokat az iOS 8+ és a Safari 8+ -ban. * / A (background-color: átlátszó; / * 1 * / -webkit-text-dekoráció-kihagyó: Tárgyak; / * 2 * /) / ** * 1. távolítsa el az alsó határ a Chrome és a Firefox 57- 39- . * 2. Adja hozzá a helyes szöveges dekorációt Chrome, Edge, IE, Opera és Safari. * / ABBR (Border-Bottom: Nincs; / * 1 * / szöveges dekoráció: aláhúzás; / * 2 * / szöveges dekoráció: aláhúzás pontozott; / * 2 * /) / ** * Megakadályozza a `bolder ismétlődő alkalmazását `A Safari következő szabályával 6. * / B, erős (betűtípus-súly: öröklés;) / ** * Adja hozzá a helyes betűtípust króm, él és szafari. * / B, erős (betűtípus-súly: merészebb,) / ** * 1. Javítsa ki a betűméret örökségét és méretezését minden böngészőben. * 2. Javítsa ki a páratlan "em" betűtípust minden böngészőben. * / Kód, KBD, SAMP (FONT-FAMILY: MONOSPACE, MONOSPACE, / * 1 * / betűméret: 1em; / * 2 * /) / ** * Adja hozzá a megfelelő betűtípus-stílust az Android 4.3-. * / Dfn (betűtípus-stílus: dőlt,) / ** * Adja hozzá a megfelelő hátteret és színt az IE 9-. * / Mark (háttérszín: # ff0, szín: # 000,) / ** * Adja hozzá a megfelelő betűméretet az összes böngészőben. * / Kicsi (betűtípus-méret: 80%;) / ** * Megakadályozza, hogy a `sub` és` sup` elemek befolyásolják a vonalmagasságot * minden böngészőben. * / Sub, SUP (betűméret: 75%; vonalmagasság: 0, pozíció: relatív, függőleges-igazítás: alapvonal;) \u200b\u200bSub (alsó: -0.25em;) SUP (TOP: -0.5EM;) / * beágyazott tartalmakat \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Adja hozzá a helyes kijelzőt az IE 9-. * / Audio, videó (kijelző: inline-blokk;) / ** * Adja hozzá a megfelelő megjelenítést az iOS 4-7-ben. * / AUDIO: NEM () (Kijelző: Nincs, magasság: 0;) / ** * Távolítsa el a határt az IE 10-. * / Img (határstílus: nincs;) / ** * elrejti a túlcsordulást az IE-ben. * / SVG: nem (: root) (túlcsordulás: Rejtett;) / * Forms \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Távolítsa el a margót a Firefoxban és a szafariban. * / Button, Input, OptGroup, Select, Textarea (Margin: 0;) / ** * A túlfolyás megjelenítése az IE-ben. * 1. Mutassa meg a túlcsordulás szélén. * / Gomb, bemenet (/ * 1 * / túlcsordula: látható;) / ** * Távolítsa el a szöveg átalakításának örökségét, a Firefox és azaz. * 1. Távolítsa el a szöveg átalakításának örökségét a Firefoxban. * / Gomb, válassza ki (/ * 1 * / szöveges transzformáció: nincs;) / ** * 1. Megakadályozza a Webkit hibát, ahol (2) megsemmisíti az `Audio` és a` view` * vezérléseit Android 4. * 2. Javítsa ki a stílus kattintható típusok képtelenségét az iOS és a Safari-ban. * / Gomb, html, / * 1 * /, (-webkit-megjelenés: gomb; / * 2 * /) / ** * Távolítsa el a belső határt és a párnázatot a Firefoxban. * / Gomb :: - Moz-fókusz-inner, :: - Moz-fókusz-inner ,: - Moz-fókusz-inner ,: - Moz-fókusz-belső (határ-stílus: nincs, párnázás: 0;) / ** * Állítsa vissza az előző szabály hangsúlytáblázatát. * / GOMB: -MOZ-FOCUSTRING ,: -MOZ-FOUSTRING,: -MOZ-FOUSTRING,: -MOZ-FOCUSTRING (vázlat: 1PX pontozott gombosextext;) / ** * 1. Javítsa meg a szövegcsomagolást a szélén és azaz. * 2. Javítsa ki a szín öröklését a "Fieldset" elemektől az IE-ben. * 3. Távolítsa el a párnázást, hogy a fejlesztők ne kerüljenek ki, ha nulla * `sietset` elemeket minden böngészőben. * / Legend (Box-méretezése: Border-Box; / * 1 * / Szín: öröklése; / * 2 * / display: table; / * 1 * / max-szélesség: 100%; / * 1 * / kitöltés: 0 ; / * 3 * / fehér tér: normál; / * 1 * /) / ** * 1. Adja hozzá a helyes megjelenítést az IE 9-. * 2. Adja hozzá a helyes függőleges igazítást a Chrome, Firefox és az Opera-hoz. * / Progress (kijelző: inline-blokk; / * 1 * / függőleges-igazítás: alapvonal; / * 2 * /) / ** * Távolítsa el az alapértelmezett függőleges görgetősávot az IE-ben. * / TEXTAREA (túlcsordulás: Auto,) / ** * 1. Adja hozzá a megfelelő doboz méretezését az IE 10-. * 2. Távolítsa el a párnázatot az IE 10-. * /, (Box-méretezése: Border Box; / * 1 * / kitöltés: 0; / * 2 * /) / ** * korrigálja a kurzor stílus NÖVEKMÉNY és Decreme gombok a Chrome. * / :: - WebKit-Inner-Spin-gomb, :: - WebKit-Külső spin-gomb (magasság: Auto,) / ** * 1. Javítsa ki a Chrome és a Safari furcsa megjelenését. * 2. Javítsa ki a szafari vázlatos stílust. * / (-Webkit-megjelenés: textfield; / * 1 * / vázlat-offset: -2px; / * 2 * /) / ** * Távolítsa el a belső párnázást, és törölje a króm és a szafari gombokat a MacOS-on. * / :: - WebKit-search-Mégsem-gomb, :: - WebKit-Search-dekoráció (-WebKit-Megjelenés: none;) / ** * 1. Helyes az, hogy nem stílus kattintható típusai Ios és Safari. * 2. Változtassa meg a betűtípus tulajdonságait, hogy "inherit" -et a Safari-ban. * / :: - WebKit-File-Upload-gomb (-webkit-megjelenés: gomb; / * 1 * / betűtípus: öröklés; / * 2 * /) / * interaktív \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / * * Adja hozzá a helyes megjelenítést az IE 9-. * 1. Adja hozzá a megfelelő megjelenítést a szélén, azaz és a Firefox-ban. * / Részletek, / * 1 * / Menü (kijelző: blokk;) / * * Adja hozzá a megfelelő kijelzőt az összes böngészőben. * / Összefoglaló (Megjelenítés: lista-pont;) / * scripting \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Add meg a megfelelő kijelző IE kilenc. * / Vászon (kijelző: inline-blokk;) / ** * Adja hozzá a megfelelő megjelenítést az IE-ben. * / Template (display: none;) / * rejtett \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * Add helyes megjelenítésének az IE 10 -. * / (Kijelző: nincs;)

Állítsa vissza az univerzális választót * (Asterisk)

Első pillantásra ez a legegyszerűbb és egyszerű megoldásnak tűnhet, miért írja le az összes HTML elemet, és adja meg őket, ha használhatja a választót *, mert cselekvése minden HTML-re vonatkozik.

* (Margin: 0, Padding: 0;)

De sajnos ez nem jó gyakorlat. A böngésző nagyon nehéz (sok időt vesz igénybe más CSS-visszaállítási eljárásokhoz képest) A szabályokat a dokumentum minden elemére kell alkalmazni, különösen nagy weboldalakon, és sok jó alapértelmezett stílust is elpusztíthat.

Stílus reset és wordpress

Ha a fent leírt CSS-stílusok egyikét szeretné használni, visszaállítani a WordPress webhelyét, akkor kétféleképpen lehet elvégezni.

Az első az, hogy át kell másolnia a visszaállítási kódot a style.css fájl megkezdéséhez wordPress témák (A szerzői és címsorok témája után, azaz a frakció és a csillag által keretezett szöveg és * ... * /.

Az IE és az opera mini családok kivételével.

Mivel azaz a támogatás hiánya problémát okozhat, itt van néhány módja annak, hogy néhány CSS tulajdonságait a kezdeti értékükön állítsa be:

Reset-Ez (animáció: nincs, animáció-késleltetés: 0, animáció-irány: normál; animáció-időtartam: 0; animáció-kitöltési mód: nincs; animáció-iteration-count: 1; animáció-neve: Nincs; animáció -State: Futás; Animáció-időzítés-funkció: Könnyű; Backface-láthatóság: látható; Háttér: 0, Háttér-rögzítés: tekercs; Háttér-klip: Border-Box; Háttérszín: átlátszó; háttérkép: nincs; háttér -Orgin: Padding-Box; Háttér-pozíció: 0 0, Háttér-pozíció-X: 0; háttér-pozíció-Y: 0; Háttér-ismétlés: Ismétlés; Háttér méret: Auto Auto; Border: 0; : Nincs; határszélesség: közepes; határ-szín: öröklés; határ alsó: 0; határ-alsó szín: öröklés; határ-alsó-bal sugár: 0; határ alsó-jobb sugár: 0; határ Alsó-stílus: nincs; határ-alsó szélesség: közepes; határ-összeomlás: különálló; határfelület: nincs; határ balra: 0; határ-bal szín: öröklés; határ- bal szélesség: közepes; határ-r Adius: 0; Határ: 0; Határán jobb szín: öröklés; Border-Right-Style: Nincs; Határ-jobb szélesség: közepes; Border-távolság: 0; Border-Top: 0; Border-Top-Color: öröklés; Határ-baloldali sugár: 0; Border-Top-Right-RADIUS: 0; Határ felső stílus: Nincs; Border-Top-Welth: Medium; Alsó: Auto; Box-Shadow: Nincs; Box-méretezés: Content-Box; Caption oldala: Top; Tiszta: Nincs; Clip: Auto; Szín: öröklés; Oszlopok: Auto; Oszlopszám: Auto; Oszlop-kitöltés: egyensúly; Oszlop-rés: normális; Oszlop szabály: közepes Nincs áramfesték; Oszlopszabály-szín: CurrentColor; Oszlop-szabály-stílus: nincs; oszlop-szabályszélesség: nincs; oszlop-span: 1; Oszlopszélesség: Auto; Tartalom: Normál; Ellentmondás: nincs; Visszaállítás: Nincs; Cursor: Auto; Irány: LTR; Kijelző: inline; Üressejtek: show; Float: Nincs; Betűtípus: Normál; Font-család: öröklés; Betűméret: közepes; Betűtípus-stílus: normális; Betűtípus-változat: normál; betűsúly: normál; Magasság: Auto; Hyphens: Nincs; Bal: Auto; Letter-Távolság: Normál; Line-Magasság: Normál; Lista-stílus: Nincs; Lista-stílusú kép: Nincs; Lista-stílusú pozíció: kívül; Lista-stílusú típus: lemez; Margó: 0; Margó alsó: 0; margó-balra: 0; Margó jobb: 0; Margin-Top: 0; Max-Magasság: Nincs; Max-szélesség: Nincs; Min-Magasság: 0; MIN-WIDTH: 0; Opacity: 1; Árvák: 0; Vázlat: 0; Vázlat-szín: invert; Vázlat-stílus: Nincs; Vázlat-szélesség: közepes; Túlcsordulás: látható; túlcsordulás-x: látható; Túlcsordulás-y: látható; Padding: 0; Padding alul: 0; Padding balra: 0; Padding-Right: 0; Padding-Top: 0; Oldaltörés után: Auto; Oldaltörés előtt: Auto; Oldaltörés-belsejében: Auto; Perspektíva: Nincs; Perspektív eredetű: 50% 50%; Pozíció: statikus; / * Lehet, hogy módosítani kell a különböző helyszíneket (például FR) * / Idézetek: "\\ 201C" "\\ 201d" "\\ 2018" "2019"; Jobb: Auto; Tab-Méret: 8; Asztali elrendezés: Auto; Szöveg-igazítás: örökölje; Text-Align-Utolsó: Auto; Szöveges dekoráció: nincs; Szöveges dekoráció-szín: öröklés; Szöveges dekoráció-vonal: Nincs; Szöveges dekoráció-stílus: szilárd; Szöveges francia bekezdés: 0; Szöveg-árnyék: Nincs; Szöveges transzformáció: nincs; Top: Auto; Átalakítás: Nincs; Transzformációs stílus: lapos; Átmenet: nincs; Átmeneti késleltetés: 0S; Átmeneti időtartam: 0S; Átmeneti tulajdonság: Nincs; Átmeneti időzítés funkció: Könnyű; Unicode-Bidi: Normál; Függőleges-igazítás: kiindulási pont; Láthatóság: látható; Fehér tér: normális; özvegyek: 0; Szélesség: Auto; Szó-távolság: Normál; Z-index: Auto; / * Alapvető modern javítás * / minden: kezdeti; Minden: Undet; ) / * Alapvető modern javítás * / # reset-this-root (minden: kezdeti; * (minden: kifogásolás)))

  • Releváns Github Repo 2017 decemberével Erősebb lista

Amint azt a felhasználói megjegyzések @ user566245:

ez elvileg igaz, de az egyéni kilométer eltérhet. Például egyes elemek, mint a textarea alapértelmezés szerint van egy határ alkalmazásával a reset után, csökkenteni fogják a textarea határon.

Megvásárolták, hogy modern normává váljanak, felhasználói Joost

# Reset-this-szülő (minden: kezdeti; * (minden: kifogásolás)))

Példa a W3-ról.

Ez hasznos lehet a "widget" gyökér eleméhez, amely az oldal tartalmazza, amely nem akarja örökölni a külső oldal stílusait. Megjegyezzük azonban, hogy bármely alapértelmezett stílus használt ez az elem (például, például: Kijelző: egy blokk a UA stílusok táblázat a tömb elemei, például), akkor is el kell hagyni.

Senki sem gondolt egy másikra, kivéve a CSS-t, hogy visszaállítsa a CSS-t? Igen?

Van ilyen sürgős segédprogram:

a GetElemsyTagname ("*") vissza fog térni az összes elemet a DOM-ból. Ezután beállíthatja a gyűjtemény minden elemét:

Varients \u003d document.getElementsbytagname ("*"); a (var i \u003d 0, len \u003d allements.lengnth, i< len; i++) { var element = allElements[i]; // element.style.border = ... }

Mindezekkel azt mondják; Nem hiszem, hogy a CSS-visszaállítás valami elvégzett, ha nem fejezzük be csak egy webböngészővel. Ha a "böngésző" a végén "Alapértelmezés szerint" áll.

Az összehasonlítás itt a Firefox 40.0 értékek listája

Ahol betűtípus-stílus: ferde Run Dom működés.

Align-Tartalom: Undet; Illessze-elemek: Unset; Align-Self: unset; Animáció: befogása; Megjelenés: kifogás; Backface-Láthatóság: Undet; Background-Blend-Mode: unset; Háttér: Undet; Kötés: Unset; Blokkméret: befogása; Border Block-end: unset; Border Block Start: Unset; Border-Collapse: unset; Border-inline-end: unset; Border-Inline-Start: Undet; Border-RADIUS: Unset; Border-Távolság: Unset; Border: unset; Alul: unset; Box-Align: Undet; Box-dekoráció-szünet: unset; Box-irány: unset; Box-Flex: Undet; Box-ordinális csoport: unset; Box-Orient: Undet; Box-Pack: unset; Box-Shadow: unset; Box-méretezés: alsony; Caption Side: unset; Tiszta: Undet; Clip-Path: Unset; CLIP-szabály: unset; Clip: unset; Színbeállítás: Undet; Színes interpolációs-szűrők: Undet; Színes interpoláció: kifogásolja; Szín: unset; oszlop-kitöltés: kifogásolva; Oszlop-rés: unset; Oszlopszabály: Undet; Oszlopok: Undet; Tartalom: Undet; Kontroll-karakter-láthatóság: kifogásolás; Ellentmondás: kifogásolása; Ellenőrzés-reset: unset; Kurzor: Unset; Kijelző: Undet; Domináns-kiindulási pont: kifogásolása; Üres sejtek: kifogásolása; Töltse ki az átlátszatlanság: Unset; TÖRTÉNŐ SZABÁLYOZÁS: NYOMÁS; Töltse ki: unset; Szűrő: Undet; Flex-flow: unset; FLEX: UNDS; Float-Edge: unset; Float: unset; Árvíz szín: Undet; Flood-Opacity: unset; FONT-FAMILUM: NYOMÁS; Font-Feature-Settings: Undet; font-kering: unset; Betűtípus-nyelvi felülbírálás: unset; betűtípus-méretbeállítás: kifogásolása; Betűtípus-méret: unset; Font-Stretch: unset; Betűtípus-stílus: ferde; betűtípus-szintézis: unset; betűtípus-változat: unset; betűsúly: unset; Font :; Force-Broken-image-ikont: unset; Magasság: Unset; Hyphens: unset; kép-tájolás: befogása; Image-régió: unset; Image-rendering: unset; IME-mód: unset; Inline-Mite: Undet; Isolation: Unset; Indokolás-tartalom: Undet; Indokolás-tételek: Undet; Igazolja az önmagát: unset; Bal: Undet; Levéltávolság: Undet; Világítás szín: unset; Line-Magasság: unset; Lista-stílus: unset; Margin-Block-end: unset; Margin-Block-Start: Undet; margin-inline-end: unset; Margin-Inline-Start: Undet; Margin: unset; Marker-offset: unset; marker: unset; Maszk típus: unset; Maszk: Undet; Max-blokk méret: unset; Max-Magasság: Undet; Max-inline-size: unset; Max-szélesség: unset; Min-Block-Size: Unset; Min-Magasság: Unset; MIN-INLINE-MÉRET: NYOMÁS; Min-width: unset; MIX-BLEND-MODE: Undet; Objektum-illeszkedés: befogása; Objektumpozíció: Unset; Offset-block-end: unset; Offset-Block-Start: Undet; offset-inline-end: unset; Offset-inline-start: unset; Opacity: unset; Rendelés: unset; Orient: unset; Vázlat-offset: unset; Vázlat-sugarú: unset; Vázlat: unset; Túlcsordulás: kifogásolva; Padding-Block-end: unset; Padding-Block-Start: Unset; Padding-inline-end: unset; Padding-inline-start: Unset; Padding: unset; Oldal-szünet után: unset; Oldal-törés előtt: unset; Oldal-break-belsejében: unset; Festékrendelés: unset; Perspektivikus eredetű: unset; Perspektíva: befogása; Pointer-események: Undet; Pozíció: Undet; Idézetek: Undet; Átméretezés: kifogásolása; Jobb: Unset; Ruby-Align: unset; Ruby-pozíció: unset; Scroll-viselkedés: befogása; Scroll-Snap-koordináta: Unset; Scroll-Snap-Solution: Undet; Scroll-Snap-Point-X: Undet; Scroll-Snap-Points-Y: Undet; Scroll-Snap-type: unset; Shape-rendering: unset; Stack-méretezés: befogása; Stop-color: unset; Stop-Opacity: unset; Stroke-dasharray: unset; Stroke-dashoffset: unset; Stroke-linecap: unset; Stroke-linjoin: unset; Stroke-merilimit: unset; Stroke-Opacity: unset; Stroke-width: unset; Stroke: unset; Tab-Méret: Undet; Asztali elrendezés: kifogásolása; Text-Align-Utolsó: Undet; Text-Align: unset; Szöveg-horgony: unset; Szöveg-kombinált-függőleges: befogása; Szöveges dekoráció: alsony; Szöveges hangsúly - Pozíció: Undet; Szöveges hangsúly: kifogásolása; Szöveges francia bekezdés; Szöveg-orientáció: Unset; Text-túlcsordulás: Unset; Szöveges renderelés: kifogásolja; Szöveges árnyék: Undet; Szövegméret-állítás: Unset; Szöveges transzformáció: befogása; Top: unset; Átalakítás eredetű: kifogásolása; Transzformációs stílus: kifogásolható; Átalakítás: Undet; Átmenet: alsony; Felhasználó-fókusz: Unset; Felhasználói bemenet: Undet; Felhasználó módosítása: Unset; User-Select: Undet; Vektor-hatás: befogása; Függőleges-igazítás: be van állítva; Láthatóság: Undet; Fehér tér: Unset; Szélesség: Undet; Will-Change: Undet; Ablak-húzás: Undet; Word-Break: unset; Word-Távolság: Undet; Word-Wrap: unset; Írási mód: befogása; Z-index: unset;

Sok csúcsot használnak az úgynevezett CSS visszaállítás.a különböző böngészők jellemzőinek kiküszöbölésére szolgál. Tulajdonképpen, ez a fájl A stílusok visszaállnak az összes CSS alapértelmezett tulajdonságaihoz. Ebben a cikkben bemutatom a fájl kódját, és elmondom Érdemes használni a CSS-visszaállítást, vagy sem.

Sokan láttam CSS visszaállítás.Mindegyikük ugyanolyan. Ezt használhatja:

Html, test, div, span, applet, objektum, iframe,
H1, H2, H3, H4, H5, H6, P, PROCKQUOTE, PRE,
A, abbr, betonság, cím, nagy, idézet, kód,
Del, dfn, em, font, img, ins, kbd, q, s, samp,
Kicsi, sztrájk, erős, al, sup, tt, var,
B, u, i, központ,
Dl, dt, dd, ol, ul, li,
Fieldset, forma, címke, legenda,
Asztal, felirat, tody, tfoot, Theer, Tr, TH, TD (
Háttér: átlátszó;
Határ: 0;
Betűméret: 100%;
Margó: 0;
Vázlat: 0;
Padding: 0;
Függőleges-igazítás: kiindulási pont;
}
Test (
Line-Magasság: 1;
}
Ol, ul (
Lista-stílus: Nincs;
}
Blockquote, q (
Idézetek: Nincs;
}
BLOCKQUOTE: Előtt, BlokkQuTe: Utána,
K: Előtt, Q: után (
Tartalom: "";
Tartalom: Nincs;
}
: Fókusz (
Vázlat: 0;
}
Asztal (
Border-Collapse: összeomlás;
Border-távolság: 0;
}

Úgy vélem, hogy a felhasználása azért van, és olyan érthető, de miért, például nem használom, mint sok más kihívó, érdemes elmondani róla. Először is, ez az egy extra fájl, Másodszor, megértés A feldolgozáshoz, de ami a legfontosabb - szeretem az alapértelmezett tulajdonságokat. Például ugyanazok a mezők az asztalnál. Végtére is, az összes alapértelmezett tulajdonság nem volt, mint azt, de a legtöbbet optimális lehetőség Különböző elemek megjelenítése. Biztosíthatom, visszaállítlak párnázás. A táblázat sejtjei valószínűleg visszaadja a főfájlba. És messze attól a ténytől, hogy az érték különbözik attól, hogy mi volt az alapértelmezett. Tehát kiderül, hogy először tisztítjuk, majd ugyanaz a megtérülés. És az első hiányosságokkal (extra fájl és extra kód), sok vertellert egyáltalán nem használnak. CSS visszaállítás..

Egyébként is, a stílusos kisülés használata nem rossz, Így biztonságosan használható, ha úgy gondolja, hogy az egyszerűsítés a webhely adaptációja alapján különböző böngészők valóban egyszerűsíteni akkor az egész.

  • Átruházás

Ez a cikk az első a ciklus a CSS Taming témáján. Ma megnézzük a technológiát CSS visszaállítás..

Miért van rá szükséged?

Minden böngésző az alapértelmezett stílusokat különböző HTML elemekhez állítja be. A CSS-visszaállítás segítségével ezt a különbséget a stílusok böngészője biztosítja.

Például egy elemet használ a. A dokumentumban. A legtöbb böngésző tetszik Internet böngésző. és Firefox hozzáadása linket kék színű és Éles. Képzeld azonban, hogy öt éven belül valaki úgy döntött, hogy új böngészőt hoz létre (hívjuk Ultrabrowser). A böngészőfejlesztők nem szeretik a kék és bosszús hangsúlyt, így úgy döntöttek, hogy összekapcsolják a linkeket piros és merész betűtípus. Ezen alapul, ha az elem stílusainak alapértékét állítja be a., Akkor garantált, hogy a kívánt látni, és nem olyan előnyös, hogy megjelenítse a fejlesztők UltraBrowser.

De most nincsenek beltéri, beleértve az egyéni bekezdéseket is! Mit kell tenni? Ne hazudjon, és ne félj: a mentesítésünk alatt leírjuk a szükséges szabályt. Megtehető különböző utak: Adja meg az alábbiakban vagy a bekezdés tetején, adja meg százalékban, pixelben vagy EM-ben.

A legfontosabb dolog, a böngésző most a szabályaink szerint játszik, és nem mi szerintünk. Úgy döntöttem, hogy így teszek:

* (Margin: 0, Padding: 0;) P (Margin: 5px 0 10px 0;)

Ennek eredményeként volt, amit a harmadik példában lehetett látni.

Saját stílusokat hozhat létre a visszaállításhoz, ha megoldja a projekt néhány adott feladatot a projektben. Ennek ellenére nincs lépésről lépésre vezetés A saját CSS-visszaállítás létrehozásával. Javasoljuk saját elvét és saját stílusát.

Ahhoz, hogy segítsen választani, még több linket adok:

  1. Kevesebb több - a CSS (Ed Elliot) visszaállítása.

2. A CSS-visszaállítás az első dolog a böngésző megtekintéséhez

A stílusok letelepedése a saját stílusok telepítése után helytelen megközelítés. Ebben az esetben semmi jó várni a böngésző megjelenítéséhez. Ne feledje, hogy először csatlakoztassa a CSS-visszaállítást, majd az összes többi stílust.

Igen, megértem, nevetséges volt, de ez a Mala fejlesztők egyik legfontosabb hibái. Sokan csak felejtsd el.

Néhányan logikus kérdést tehetnek fel: miért folyik itt? A válasz egyszerű: a CSS fájl szövege alatt rögzített szabályok (és még alacsonyabbak a dokumentumban), felülírják a korábban bejelentett szabályokat.

Ne mozogjunk nagymértékben a témáról, és folytassa. Alkalmazza az Eric Meyer stílusokat a példánkra, de utána Tulajdonságok leírása, amint azt a 4 példa mutatja. A matematika a következőket mondaná: "Mit kellett bizonyítani."

3. Használjon külön CSS-dokumentumot a CSS-visszaállításhoz

Nekem van (nem, nem kényszerítettek engem), hogy megemlítsem ezt a tanácsot. A CSS-visszaállításhoz külön fájl használata általános gyakorlat, hogy nagyszámú fejlesztő támogatja.

Tény, hogy betartom a teremtés helyzetét egy nagy CSS fájl Ennek a megközelítésnek a nagyobb teljesítménye miatt. De B. ez a probléma A legtöbb esetben egyetértek: a CSS-visszaállítást külön fájlba kell venni (általában reset.css). Ebben az esetben különböző projektekben használhatja, anélkül, hogy bármilyen erőfeszítést megtennél más CSS-szabályokról.

4. Próbálja meg elkerülni az univerzális választó használatát

Annak ellenére, hogy ez a koncepció működik, alkalmazása leggyakrabban nem kívánatos az egyes böngészőkkel való összeférhetetlenség miatt (például ez a választó helytelenül feldolgozott az Internet Explorerben). Ezt a technikát csak egyszerű, kicsi, statikus és kiszámítható oldalakra kell használni (ha már meg kellett tenned).

Ez a tanács különösen fontos, ha olyan megoldásokat fejleszt ki, mint a CMS témák. Nem lehet előre megjósolni, hogy hogyan fogják használni, és hogyan módosítják. Jobb, ha az alapvető CSS-szabályokat az összes tételre leírja, mint az univerzális választók kiszámíthatatlan (még egy kisebb térfogat) mechanizmusát.

5. Kerülje a redundáns tulajdonságokat a CSS-visszaállítás során

Egy másik ok, amiért nem szeretem a CSS-visszaállítás különálló fájlját, a CSS tulajdonságainak későbbi nyilatkozatának lehetséges redundanciája. A stílusok egyének ismétlése a CSS-fájlok egészének sorai között mozog, és kerülni kell. Persze, néha lusta, hogy lépést tartson a stílus stílusok és összekapcsolják egy részük, de legalább próbálkozás!

Visszatérjünk az Eric-ból a CSS-re. Alapértelmezett értékeket állítja be a vonalmagasság, a szín és a háttér eleméhez test. A következőképpen:

Test (vonalmagasság: 1, szín: fekete, háttér: fehér;)

Tegyük fel, hogy már tudja, hogy az elem hogyan fog kinézni test.:
  1. háttérszín: #ccccccc;
  2. szín: # 996633;
  3. Vízszintesen szeretné megismételni egy adott háttérképet.

Ebben az esetben nincs szükség új választó létrehozására a tulajdonságok leírásához - egyszerűen engedélyezheti őket a CSS-visszaállításban. Csináljuk:

Test (vonalmagasság: 1, szín: # 996633; háttér: #ccc url (csempézett kép.gif) ismétlődő x felső balra;)

Ne félj, hogy módosítsa a CSS visszaállítást. Állítsa be magadnak, hogy dolgozzon magának. Változás, újjáépítés, eltávolítás és hozzáadása, amennyire szüksége van az adott esetben.

Eric Meyer ezt mondta: "Ez nem így van, ha mindenkinek megváltozik a CSS-visszaállítást."

Hasonló cikkek