Atiestatīt CSS(stila atiestatīšana) tiek nulle ar izmantojot CSS, dažas no HTML elementu opcijām, kuras pārlūkprogrammas ir iestatījušas pēc noklusējuma. Piemēram, šādi elementi ietver rindkopas (birkas), kurām sākotnēji ir nulles vertikālas piemales (CSS), aizzīmju sarakstus (tagus), kurām jau ir ne tikai piemales, bet arī noteikta veida marķieri (CSS) utt. .
Tagad padomāsim, kam paredzēta šī CSS atiestatīšana, ko tā mums var dot? Labi, iedomājieties, ka esat izkārtojis savas vietnes lapas un tajā pašā laikā neesat mainījis pārlūkprogrammu ieteiktās rindkopas pēc noklusējuma, jo to izmērs jums ir piemērots. Bet sakiet, lūdzu, kāpēc jūs nolēmāt, ka visas pasaules pārlūkprogrammas, kas jau pastāv un joprojām parādīsies, radīs vienāda lieluma laukus? Turklāt kāpēc jūs domājat, ka pārlūkprogrammas, kurās pārbaudījāt savu izkārtojumu, nemainīsies šādas versijasšo lauku lielumu vai arī tie netiks noņemti vispār? Jūti, kā tas smaržo?
Tātad, izmetot CSS, izkārtojuma dizaineri vienkārši apdrošinās sevi pret šādiem pārpratumiem, tas ir, vispirms izslēdz visas elementu "kritiskās" vērtības. CSS rekvizīti, un pēc tam pēc vajadzības pievienojiet, bet ar saviem izmēriem. Tādējādi jūs varat būt pārliecināti, ka vietne visās pārlūkprogrammās izskatīsies vienādi. Jūs, protams, varat neatiestatīt stilus, bet vienkārši iestatīt vēlamos parametrus elementi, taču pastāv risks, ka kaut kur kaut kas tiks palaists garām un kādā brīdī viss "uzpeldēs".
Pamatojoties uz iepriekš minēto, viena no CSS atiestatīšanas iezīmēm ir tā, ka pēc tās piemērošanas daudzi HTML elementi zaudē savu pazīstamo izskatu. Un, ja rezervju zaudēšana rindkopās ir kaut kas gaidāms iesācējiem, tad, piemēram, tas, ka pogas, kas izveidotas, izmantojot tagus vai pēkšņi kļūst ārēji līdzīgas parastajam tekstam, ir pilnīgs pārsteigums. Bet tas nedrīkst jūs sajaukt, jo šim nolūkam stili tiek atiestatīti, lai izkārtojuma noformētājs neaizmirstu tos vēlāk norādīt vēlreiz.
Ir daudz veidu, kā atiestatīt stilus, un kuru izvēlaties, ir atkarīgs tikai no jums, taču es varu jums pateikt vienu - labākā atiestatīšana ir tā, kuru esat izveidojis pats, pamatojoties uz savu pieredzi un ieradumiem. Ja jums vēl nav šādas pieredzes, varat izmantot kādu no tālāk piedāvātajām iespējām.
Vienmēr koda sākumā iekļaujiet CSS atiestatīšanas stilus, pretējā gadījumā daži parametri var nedarboties dēļ stila prioritātes ko nosaka pārlūkprogrammas, apstrādājot HTML lapu un CSS kodu.
CSS atiestatīšana, izmantojot universālo selektoru
* (font-family: mantot; / * visi elementi manto burtveidolu no saviem vecākiem * / font-style: mantot; / * manto seju * / font-weight: mantot; / * manto drosmi * / vertical-align: pamatlīnija; / * vertikāla līdzināšana pret sākotnējo * / fonta lielums: 100%; / * fonta lielums 100% * / fons: caurspīdīgs; / * visu elementu fons ir caurspīdīgs * / apmale: 0; / * noņemt robežas * / kontūra : 0; / * noņemt kontūras * / piemali: 0; / * noņemt piemales * / polsterējums: 0; / * noņemt polsterējumu * /)Piemēra apraksts
Šajā piemērā, izmantojot universāls selektors norādītie stili tiek nekavējoties atiestatīti visiem lapā esošajiem HTML elementiem. Kā redzat, lielākā daļa īpašību ir norādītas tikai drošības apsvērumu dēļ, jo to vērtības jau atbilst tām, kuras pārlūkprogrammām pēc noklusējuma jāaizstāj saskaņā ar CSS specifikāciju. Bet, kā jūs jau zināt, praksē tas viss ir pilnīgi atšķirīgs, un, ja īpašums patiešām tiek mantots ar elementiem no vecākiem visās vadošajās pārlūkprogrammās, tad tās pašas ārējās malas, ko nosaka CSS rekvizīts, sākotnēji ne vienmēr ir vienādas ar nulli.
Bet kadru (CSS) un kontūru (CSS) izmēri pēc noklusējuma nav vienādi ar nulli, bet gan atbilstoši specifikācijai. Tomēr arī to biezums tika atiestatīts uz nulli, lai maketētājs neaizmirstu to skaidri norādīt, kur tas ir nepieciešams.
Atiestatīt CSS no Yahoo!
pamatteksts, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, forma, lauka kopa, ievade, tekstareja, p, bloka citāts, th, td (piemale: 0; polsterējums: 0;) fieldset, img, abbr, akronīms (robeža: 0;) adrese, paraksts, citāts, kods, dfn, em, strong, th, var (fonta stils: normāls; fonta svars: normāls;) tabula (apmales sabrukšana: sakļaušana; / * tabulas šūnu vispārējās robežas * / robežu atstarpes: 0; / * nulles atstarpes starp šūnām * /) paraksts, th (text-align: left; / * izlīdzinot tekstu pa kreisi * /) ol, ul (saraksta stils: nav; / * noņemt saraksta marķierus * /) h1, h2, h3, h4, h5, h6 (fonta lielums: 100%; fonta svars: normāls;) q: pirms, q: pēc (saturs: ""; / * noņemiet pēdiņas no Q taga * /)Piemēra apraksts
Yahu uzņēmums savulaik izstrādāja savu stilu atiestatīšanas versiju. Šeit jau mainās konkrētu elementu īpašības, kas ļauj sasniegt lielāku elastību to pārvaldībā. izskats... Piemēram, šeit aizzīmes tiek noņemtas no sarakstiem, bet no taga - pēdiņas, izmantojot CSS īpašumu. Šīs pieejas priekšrocības ir acīmredzamas, bet trūkumi ietver apjomīgāku un dažreiz lieku kodu. Bet neviens netraucē mainīt CSS atiestatīšanu atbilstoši savām vajadzībām. Pieņemsim, ka varat izdzēst dažus nevajadzīgus tagu atlasītāji vai ne tikai noņemt pēdiņas, bet uzreiz iestatīt tām vēlamo izskatu.
Atiestatīt Erica Mejera CSS
html, pamatteksts, div, span, sīklietotne, objekts, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronīms, adrese, liels, citēt, kods, del, dfn, em, img, ins, kbd, q, s, samp, mazs, streiks, spēcīgs, sub, sup, tt, var, b, u, i, centrs, dl, dt, dd, ol, ul, li, fieldset, veidlapa, etiķete, leģenda, tabula, paraksts, tbody, tfoot, thead, tr, th, td, raksts, malā, audekls, detaļas, iegulšana, attēls, attēls, kājene, galvene, hgrupa, izvēlne, nav, izvade, rubīns, sadaļa, kopsavilkums, laiks, atzīme, audio, video (piemale: 0; polsterējums: 0; apmale: 0; fonta lielums: 100%; fonts: pārmantot; vertical-align: baseline;) raksts, malā, detaļas, attēls, attēls, kājene, galvene, hgrupa, izvēlne, nav, sadaļa (displejs: bloks; / * bloka elementi (vecākām pārlūkprogrammām) * /) pamatteksts (līnijas augstums: 1; / * rindu atstarpe teksts lapā * /) ol, ul (saraksta stils: nav;) bloka citāts: pirms, bloka citāts: pēc, q: pirms, q: pēc (saturs: ""; / * Noņemt pēdiņas no Q un BLOCKQUOTE * / saturs : nav; / * pievienojiet, lai būtu pareizi * /) bloka citāts, q (pēdiņas: nav; / * cits veids, kā noņemt pēdiņas * /) tabula (robeža-sabrukums: sakļaut; robežu atstarpes: 0;)Piemēra apraksts
Vēl vienu veidu, kā atiestatīt CSS, ieteica Ēriks Meijers, labi zināms tīmekļa izstrādātājs noteiktās aprindās. Šeit viņš jau ir pievienojis HTML 5 tagu stilu atiestatīšanu, kurus, starp citu, šīs rakstīšanas laikā mūsdienu pārlūkprogrammas ļoti slikti atbalstīja. Bet vienmēr ir jāskatās perspektīvā, vai ne?
Patiesībā šo rakstu varētu turpināt bezgalīgi, jo, vēlreiz atkārtoju, noteiktā brīdī katrs maketētājs izdomā savu atiestatīšanas iespēju vai vispār to neizmanto, paļaujoties uz savu vērību.
Viss HTML elementi lapām pēc noklusējuma ir savas īpašās vērtības. Un diemžēl dažādās pārlūkprogrammās tās netiek interpretētas vienādi. Tā rezultātā cieš vietnes dizains, mainās pārlūkprogrammas (interneta pārlūka) dizains. Stila atiestatīšanas procedūras mērķis ir samazināt pārlūkprogrammas neatbilstības tādās lietās kā rindu augstums, piemales, galvenes fontu izmēri utt.
CSS stilu atiestatīšanas skriptu piemēri
Tiek uzskatīts, ka katram sevi cienošam tīmekļa pārzinim ir jāraksta savs CSS atiestatīšanas kods. Bet es esmu citas pieejas piekritējs, pieņemu gatavu risinājumu, saprotu to un laboju, ja nepieciešams.
Eric Meyer CSS atiestatīšana
Erica Mejera atiestatīšanas skripts, pēc paša autora domām, ir apzināti ļoti vispārīgs. Piemēram, tai nav noklusējuma fona krāsas korpusa elementam. Tāpēc to vajadzētu pārveidot, rediģēt, paplašināt un citādi pielāgot atbilstoši jūsu vajadzībām. Pievienojiet vēlamās krāsas lapām, saitēm un citam.
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licence: nav (publiski pieejams) * / html, pamatteksts, div, span, sīklietotne, objekts, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronīms, adrese, liels, citēt, kods, del, dfn, em, img, ins, kbd, q, s, samp, mazs, streiks, spēcīgs, sub, sup, tt, var, b, u, i, centrs, dl, dt, dd, ol, ul, li, fieldset, forma, etiķete, leģenda, tabula, paraksts, tbody, tfoot, thead, tr, th, td, raksts, malā, audekls, detaļas, iegult, figūra, figcaption, kājene, galvene, hgrupa, izvēlne, navigācija, izvade, rubīns, sadaļa, kopsavilkums, laiks, atzīme, audio, video (piemale: 0; polsterējums: 0; apmale: 0; fonta lielums: 100%; fonts: pārmantot; vertikālā līdzināšana: sākotnējā līnija ;) / * HTML5 displeja lomu atiestatīšana vecākiem pārlūkiem ol, ul (saraksta stils: nav;) bloka citāts, q (pēdiņas: nav;) bloka citāts: pirms, bloka citāts: pēc, q: pirms, q: pēc (saturs: ""; saturs: nav;) tabula (robeža- sabrukums: c ollapse; atstarpe starp robežām: 0; )
Yahoo! (YUI 3) Atiestatīt CSS
CSS Reset YUI 3 samazina HTML elementu nekonsekvento stilu pārlūkprogrammās, tāpat kā jebkuru citu CSS atiestatīšanas skriptu, lai izveidotu stabilu pamatu vietņu un tīmekļa lietojumprogrammu veidošanai.
/ * YUI 3.18.1 Autortiesības 2014 Yahoo! Inc. Visas tiesības aizsargātas. Licencēts saskaņā ar BSD licenci. http://yuilibrary.com/license/ *// * TODO būs jānoņem HTML iestatījumi, jo mēs to nevaram nosaukt. TODO ar prefiksu, vai man vajadzētu grupēt pēc selektora vai īpašuma, lai ietaupītu svaru? */ html ( krāsa: # 000; fons: #FFF;) / * TODO noņem iestatījumus uz BODY, jo mēs nevaram to nosaukt. * / / * TODO tests, liekot klasi uz GALVAS. - Neizdodas FF. * / body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, kods, forma, lauka kopa, leģenda, ievade, textarea, p, blockquote, th, td (piemale: 0; polsterējums: 0;) tabula (robeža-sabrukums: sabrukums; robežu atstatums: 0;) fieldset, img (robeža: 0;) / * TODO domā par mantojuma pārmantošanu savādāk, varbūt ļaujot IE6 nedaudz izgāzties ... * / adrese, paraksts, citāts, kods, dfn, em, strong, th, var (font-style: normal; font-weight: normal;) ol, ul (list-style: none;) uzraksts, th (text-align: left;) h1, h2, h3, h4, h5, h6 (fonta lielums: 100%; fonta svars: normāls;) q: pirms, q: pēc (saturs: "";) abbr., akronīms (apmale: 0; fontu variants: normāls;) / *, lai saglabātu līnijas augstumu un atlasītāja izskatu * / sup (vertikāli līdzināt: teksta augšdaļa;) , atlasiet (font-family: mantot; font-size: mantot; font-weight: mantot; * font-size: 100%; / *, lai iespējotu izmēru maiņu IE * /) / *, jo leģenda nepārmanto IE * / leģenda (krāsa: # 000;) / * YUI CSS Detect jonu zīmogs * / # yui3-css-stamp.cssreset (displejs: nav; )
Normalize.css stilu atiestatīšana
Normalize.css ir pielāgots CSS fails, kas ļauj pārlūkprogrammām konsekventi un atbilstoši mūsdienu standartiem atveidot visus elementus. Tās autori pētīja atšķirības starp dažādu pārlūkprogrammu noklusējuma stiliem, lai labotu tikai tos stilus, kuriem nepieciešama normalizācija.
/ *! normalizēt.css v6.0.0 | MIT licence | github.com/necolas/normalize.css * / / * Dokuments ================================== == ==================================== * / / ** * 1. Izlabojiet līnijas augstumu visos pārlūkprogrammas. * 2. Novērst fonta lieluma pielāgošanu pēc orientācijas izmaiņām * IE ieslēgts Windows Phone un operētājsistēmā iOS. * / html (rindas augstums: 1,15; / * 1 * / -ms-text-size-Adjust: 100%; / * 2 * / -webkit-text-size-Adjust: 100%; / * 2 * /) / * Sadaļas ============================================== = =========================== * / / ** * Pievienojiet pareizo displeju IE 9-. * / raksts, malā, kājene, galvene, nav, sadaļa (displejs: bloks;) / ** * Labojiet fonta lielumu un piemales elementiem "h1" sadaļā "un *" raksts "pārlūkā Chrome, Firefox un Safari. * / h1 (fonta lielums: 2em; mala: 0,67em 0;) / * Satura grupēšana ========================== == ============================================ * / / ** * IE 9- pievienojiet pareizo displeju. * 1. IE pievienojiet pareizo displeju. * / attēls, attēls, galvenais ( / * 1 * / displejs: bloks;) / ** * Pievienojiet pareizo piemali IE 8. * / skaitlis (piemale: 1em 40px;) / ** * 1. Pievienojiet pareizo lodziņu izmēru noteikšana pārlūkprogrammā Firefox. * 2. Parādiet pārpildi Edge un IE. * / hr (kastes izmēri: satura lodziņš; / * 1 * / augstums: 0; / * 1 * / pārpilde: redzama; / * 2 * /) / ** * 1. Labojiet fonta lieluma mantojumu un mērogošanu visās pārlūkprogrammās. * 2. Izlabojiet nepāra `em` fontu izmēru visās pārlūkprogrammās. * / pre (font-family: monospace, monospace; / * 1 * / font-size: 1em; / * 2 * /) / * Teksta līmeņa semantika =============== ================================================== ========= * / / ** * 1. IE 10 noņemiet pelēko fonu uz aktīvajām saitēm. * / a (fona krāsa: caurspīdīga; / * 1 * / -webkit-text-decoration-skip: objekti; / * 2 * /) / ** * 1. Noņemiet apakšējo apmali pārlūkprogrammā Chrome 57- un Firefox 39- ... * 2. Pievienojiet pareizo teksta apdari pārlūkprogrammā Chrome, Edge, IE, Opera un Safari. * / abbr (border-bottom: none; / * 1 * / text-decoration: underline; / * 2 * / text-decoration: underline dotted; / * 2 * /) / ** * Novērst atkārtotu `drosmīgāku lietošanu `ar nākamo noteikumu Safari 6. * / b, spēcīgs (fontu svars: drosmīgāks;) / ** * 1. Labojiet fontu lieluma pārmantošanu un mērogošanu visās pārlūkprogrammās. * 2. Izlabojiet nepāra `em` fontu izmēru visās pārlūkprogrammās. * / code, kbd, samp (font-family: monospace, monospace; / * 1 * / font-size: 1em; / * 2 * /) / ** * Pievienojiet pareizo fonta stilu operētājsistēmā Android 4.3-. * / dfn (font-style: italic;) / ** * Pievienojiet pareizo fonu un krāsu IE 9-. * / atzīme (fona krāsa: # ff0; krāsa: # 000;) / ** * Pievienojiet pareizo fonta lielumu visās pārlūkprogrammās. * / mazs (fonta lielums: 80%;) / ** * Neļaut elementiem "sub" un "sup" ietekmēt līnijas augstumu * visās pārlūkprogrammās. * / sub, sup (fonta lielums: 75%; līnijas augstums: 0; pozīcija: relatīva; vertikāla līdzināšana: sākotnējā līnija;) sub (apakšā: -0,25 em;) sup (augšpusē: -0,5 em;) / * Iegults saturs ================================================ ========================= * / / ** * Pievienojiet pareizo displeju IE 9-. * / audio, video (displejs: inline-block;) / ** * Pievienojiet pareizo displeju operētājsistēmā iOS 4-7. * / audio: nav () (displejs: nav; augstums: 0;) / ** * Noņemiet robežu attēlos, kas atrodas IE 10- saišu iekšpusē. * / img (apmales stilā: nav;) / ** * Paslēpt pārplūdi IE. * / svg: nav (: sakne) (pārpilde: slēpta;) / * Veidlapas ================================ ======================================= * * / / ** * Noņemt piemali pārlūkprogrammās Firefox un Safari. * / poga, ievade, optgroup, select, textarea (piemale: 0;) / ** * Parādīt pārplūdi IE. * 1. Parādiet pārpildi Edge. * / poga, ievade ( / * 1 * / pārpilde: redzama;) / ** * Noņemiet teksta pārveidošanas mantojumu Edge, Firefox un IE. * 1. Noņemiet teksta pārveidošanas mantojumu pārlūkprogrammā Firefox. * / poga, atlasiet ( / * 1 * / text-transform: none;) / ** * 1. Novērsiet WebKit kļūdu, kur (2) iznīcina vietējās "audio" un "video" * vadīklas operētājsistēmā Android 4. * 2. Izlabojiet nespēju stilizēt klikšķināmos veidus iOS un Safari. * / poga, html, / * 1 * /, (-webkit-izskats: poga; / * 2 * /) / ** * Noņemiet Firefox iekšējo apmali un polsterējumu. * / poga ::-moz-focus-internal, ::-moz-focus-internal, ::-moz-focus-internal, ::-moz-focus-internal (robežas stils: nav; polsterējums: 0;) / ** * Atjaunojiet fokusa stilus, ko neietekmēja iepriekšējais noteikums. * / poga: -moz fokusēšana ,: -moz fokusēšana ,: -moz fokusēšana ,: -moz fokusēšana (kontūra: 1px punktēta ButtonText;) / ** * 1. Labojiet teksta ietīšanu Edge un IE. * 2. Izlabojiet krāsu mantojumu no "fieldset" elementiem IE. * 3. Noņemiet polsterējumu, lai izstrādātāji netiktu pieķerti, kad tie visās pārlūkprogrammās atceltu * "fieldset" elementus. * / apzīmējums (kastes izmērs: robežas kaste; / * 1 * / krāsa: pārmantot; / * 2 * / displejs: tabula; / * 1 * / maksimālais platums: 100%; / * 1 * / polsterējums: 0 ; / * 3 * / atstarpe: normāla; / * 1 * /) / ** * 1. Pievienojiet pareizo displeju IE 9-. * 2. Pievienojiet pareizo vertikālo līdzinājumu pārlūkprogrammās Chrome, Firefox un Opera. * / progress (displejs: inline-block; / * 1 * / vertical-align: baseline; / * 2 * /) / ** * Noņemiet noklusējuma vertikālo ritjoslu IE. * / textarea (pārplūde: automātiska;) / ** * 1. IE 10- pievienojiet pareizo kastes izmēru. * 2. Noņemiet polsterējumu IE 10-. * /, (lodziņa izmērs: apmales lodziņš; / * 1 * / polsterējums: 0; / * 2 * /) / ** * Izlabojiet kursora palielināšanas un samazināšanas pogu stilu pārlūkā Chrome. * / ::-webkit-internal-spin-button, ::-webkit-external-spin-button (augstums: auto;) / ** * 1. Izlabojiet nepāra izskatu pārlūkā Chrome un Safari. * 2. Izlabojiet kontūras stilu pārlūkprogrammā Safari. * / (-webkit-izskats: teksta lauks; / * 1 * / outline-offset: -2 pikseļi; / * 2 * /) / ** * Noņemiet iekšējo polsterējumu un atcelšanas pogas pārlūkā Chrome un Safari operētājsistēmā MacOS. * / ::-webkit-search-cancel-button, ::-webkit-search-decoration (-webkit-izskatu: nav;) / ** * 1. Izlabojiet nespēju stilizēt klikšķināmos veidus iOS un Safari. * 2. Safari mainiet fontu rekvizītus uz "mantot". * / ::-tīmekļa komplekta faila augšupielādes poga (-webkit-izskatu: poga; / * 1 * / fonts: pārmantot; / * 2 * /) / * Interaktīvs ============ ================================================== ============= * / / * * Pievienojiet pareizo displeju IE 9-. * 1. Pievienojiet pareizo displeju Edge, IE un Firefox. * / detaļas, / * 1 * / izvēlne (displejs: bloks;) / * * Pievienojiet pareizo displeju visās pārlūkprogrammās. * / kopsavilkums (displejs: saraksta vienums;) / * Skripts ================================ == ===================================== * / / ** * Pievienojiet pareizo displeju IE deviņos -. * / audekls (displejs: inline-block;) / ** * Pievienojiet pareizo displeju IE. * / veidne (displejs: nav;) / * Slēpts ===================================== = =================================== * / / ** * Pievienojiet pareizo displeju IE 10-. .. * / (displejs: nav;)
Atiestatīt, izmantojot universālo selektoru * (zvaigznīte)
No pirmā acu uzmetiena tas var šķist vienkāršākais un veiksmīgākais risinājums, kāpēc aprakstīt visus HTML elementus un piešķirt tiem vērtības, ja varat izmantot * atlasītāju, jo tā ietekme attiecas uz visu HTML.
* (mala: 0; polsterējums: 0;)
Diemžēl tā nav laba prakse. Pārlūkprogrammai ir ļoti grūti (tas aizņem daudz laika, salīdzinot ar citām CSS atiestatīšanas procedūrām) piemērot noteikumus katram dokumenta elementam, īpaši lielām tīmekļa lapām, un tas var arī sabojāt daudzus labos noklusējuma stilus.
Atiestatīt stilus un WordPress
Ja vēlaties WordPress vietnei izmantot vienu no iepriekš minētajām CSS stilu atiestatīšanas metodēm, to var izdarīt divos veidos.
Pirmais ir tas, ka jums ir jākopē atiestatīšanas kods faila style.css sākumā. WordPress tēmas(aiz rindām par autorību un tēmas nosaukumu, tas ir, pēc teksta, kas ierāmēts ar daļu un zvaigznīti / * ... * /.
Izņemot IE un Opera Mini ģimenes.
Tā kā IE atbalsta trūkums var radīt problēmu, šeit ir daži veidi, kā atjaunot dažu CSS rekvizītu sākotnējās vērtības:
Atiestatīt šo (animācija: nav; animācijas aizkave: 0; animācijas virziens: normāls; animācijas ilgums: 0; animācijas aizpildīšanas režīms: nav; animācijas atkārtojumu skaits: 1; animācijas nosaukums: nav; animācija- atskaņošanas stāvoklis: darbojas; animācijas laika noteikšanas funkcija: vieglums; aizmugures redzamība: redzama; fons: 0; fona pielikums: ritiniet; fona klips: apmales lodziņš; fona krāsa: caurspīdīga; fona attēls: nav; fona izcelsme: polsterējuma kaste; fona pozīcija: 0 0; fona pozīcija-x: 0; fona pozīcija-y: 0; fona atkārtošana: atkārtot; fona lielums: automātiska auto; robeža: 0; robeža- stils: nav; robežas platums: vidējs; apmales krāsa: pārmantot; robeža-apakšā: 0; robeža-apakšējā krāsa: mantot; robeža-apakšējais-kreisais rādiuss: 0; robeža-apakšējais labais-rādiuss: 0; border-bottom-style: none; border-bottom-width: medium; border-collapse: atsevišķi; border-image: none; border-left: 0; border-left-color: mantot; border-left-style: none; border-left-width: vidējs; border-r adijs: 0; robeža pa labi: 0; border-right-color: mantot; border-right-style: nav; border-right-width: vidējs; atstarpe starp robežām: 0; robeža augšpusē: 0; border-top-color: mantot; robeža-augšējais kreisais rādiuss: 0; robeža augšējā labajā rādiusā: 0; border-top-style: nav; border-top-width: vidējs; apakšā: auto; kaste-ēna: nav; kastes izmēri: satura kaste; paraksta puse: augšpusē; skaidrs: nav; klips: auto; krāsa: mantot; kolonnas: auto; kolonnu skaits: auto; kolonnu aizpildīšana: līdzsvars; kolonnas sprauga: normāla; kolonnu noteikums: vidējs neviens pašreizējaisKrāsa; column-rule-color: currentColor; column-rule-style: nav; column-rule-width: nav; kolonnu laidums: 1; kolonnas platums: auto; saturs: normāls; pretpieaugums: nav; counter-reset: nav; kursors: auto; virziens: ltr; displejs: inline; tukšas šūnas: parādīt; pludiņš: nav; fonts: normāls; font-family: mantot; fonta lielums: vidējs; fontu stils: normāls; fontu variants: normāls; fonta svars: normāls; augstums: auto; defises: nav; pa kreisi: auto; atstarpes starp burtiem: normāli; līnijas augstums: normāls; saraksta stils: nav; list-style-image: nav; list-style-position: ārpusē; saraksta stila tips: disks; rezerve: 0; apakšējā mala: 0; margin-left: 0; mala pa labi: 0; marg-top: 0; maksimālais augstums: nav; maksimālais platums: nav; min-augstums: 0; minimālais platums: 0; necaurredzamība: 1; bāreņi: 0; kontūra: 0; kontūras krāsa: apgriezts; kontūras stils: nav; kontūras platums: vidējs; pārplūde: redzama; overflow-x: redzams; overflow-y: redzams; polsterējums: 0; polsterējums apakšā: 0; polsterējums pa kreisi: 0; polsterējums pa labi: 0; polsterējums: 0; lappuses pārtraukums: auto; lappuses pārtraukums: auto; lappuses pārrāvums: auto; perspektīva: nav; perspektīva-izcelsme: 50% 50%; stāvoklis: statisks; / * Var būt nepieciešams mainīt citātus dažādām lokalizācijām (piemēram, fr) * / pēdiņas: "\ 201C" "\ 201D" "\ 2018" "\ 2019"; pa labi: auto; cilnes izmērs: 8; galda izkārtojums: auto; text-align: mantot; text-align-last: auto; teksta dekorēšana: nav; text-decoration-color: mantot; text-decoration-line: nav; teksta dekorēšanas stils: ciets; teksta atkāpe: 0; teksta ēna: nav; text-transform: nav; augšā: auto; pārveidot: nav; pārveidošanas stils: plakans; pāreja: nav; pārejas aizkave: 0s; pārejas ilgums: 0s; pārejas īpašums: nav; pārejas laika funkcija: vieglums; unicode-bidi: normāls; vertikāli izlīdzināt: bāzes līnija; redzamība: redzama; atstarpe: normāla; atraitnes: 0; platums: auto; atstatums starp vārdiem: normāls; z-indekss: auto; / * pamata mūsdienu ielāps * / viss: sākotnējais; all: unset; ) / * pamata mūsdienu ielāps * / # reset-this-root (viss: sākotnējais; * (viss: atiestatīts;))
- Saistošāks saraksts ar atbilstošu github repo no 2017. gada decembra
Kā minēts lietotāja @ user566245 komentārā:
tas principā ir taisnība, taču individuālais nobraukums var atšķirties. Piemēram, dažiem elementiem, piemēram, noklusējuma teksta apgabalam, ir apmale, piemērojot šo atiestatīšanu, tekstarejas robežas tiks samazinātas.
Ieguvis, lai kļūtu par mūsdienu normu, lietotājs Joost
# reset-this-parent (visi: sākotnēji; * (visi: atiestatīti;))
PIEMĒRS NO W3
Tas var būt noderīgi saknes "logrīka" elementam, kas iekļauts lapā, kas nevēlas mantot ārējās lapas stilus. Tomēr ņemiet vērā, ka tiks noņemts arī jebkurš šim elementam lietotais "noklusējuma" stils (piemēram, displejs: bloks no UA stila lapas par bloku elementiem).
Neviens nav iedomājies neko citu kā css par css dempingu? Jā?
Pastāv šāda steidzama lietderība:
getElementsByTagName ("*") atgriezīs visus elementus no DOM. Pēc tam katram kolekcijas vienumam varat iestatīt stilus:
Var allElements = document.getElementsByTagName ("*"); par (var i = 0, len = allElements.length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }
Ar visu to ir teikts; Es nedomāju, ka css atiestatīšana ir kaut kas izdarāms, ja vien mēs neizmantojam tikai vienu tīmekļa pārlūkprogrammu. Ja beigās “pārlūks” ir iestatīts uz “noklusējums”.
Salīdzinājumam šeit ir Firefox 40.0 vērtību saraksts
kur fontu stils: slīpi sāk DOM darbību.Saturu izlīdzināt: atiestatīts; align-items: atiestatīts; align-self: unset; animācija: atiestatīta; izskats: nav iestatīts; redzamība aizmugurē: nav iestatīta; fona sajaukšanas režīms: atiestatīts; fons: nav iestatīts; iesiešana: neiestatīts; bloka izmērs: nav iestatīts; border-block-end: unset; border-block-start: atiestatīts; robežas sabrukums: nav iestatīts; border-inline-end: unset; border-inline-start: atiestatīts; robežas rādiuss: nav iestatīts; attālums starp robežām: nav iestatīts; robeža: nav iestatīta; apakšā: nav iestatīts; box-align: unset; box-decoration-break: unset; lodziņa virziens: nav iestatīts; box-flex: neiestatīts; box-ordinal-group: unset; kaste orientēta: neiestatīta; kaste-iepakojums: neiestatīts; kaste-ēna: neiestatīta; kastes izmērs: nav iestatīts; paraksta puse: unset; skaidrs: neiestatīts; klipa ceļš: atiestatīts; clip-rule: atiestatīts; klips: atiestatīts; krāsu pielāgošana: nav iestatīts; krāsu interpolācijas filtri: nav iestatīti; krāsu interpolācija: nav iestatīta; krāsa: neiestatīta; column-fill: unset; kolonnas sprauga: nav iestatīta; column-rule: unset; kolonnas: unset; saturs: neiestatīts; kontroles rakstzīmju redzamība: nav iestatīta; pretējs pieaugums: nav iestatīts; counter-reset: atiestatīts; kursors: atiestatīts; displejs: neiestatīts; dominējošais bāzes līmenis: nav iestatīts; tukšas šūnas: nav iestatīts; aizpildījuma necaurredzamība: nav iestatīta; aizpildīšanas noteikums: atiestatīts; aizpildīt: neiestatīts; filtrs: atiestatīts; elastīga plūsma: nav iestatīta; elastīgs: neiestatīts; pludiņa mala: nav iestatīta; pludiņš: neiestatīts; plūdu krāsa: nav iestatīta; plūdu necaurredzamība: nav iestatīta; font-family: unset; font-feature-settings: atiestatīts; font-kerning: unset; font-language-override: unset; font-size-Adjust: unset; font-size: unset; font-stretch: unset; fontu stils: slīps; fontu sintēze: atiestatīts; font-variant: unset; font-weight: unset; fonts :; force-broken-image-icon: atiestatīts; augstums: nav iestatīts; defises: neiestatītas; attēla orientācija: nav iestatīta; attēla reģions: nav iestatīts; attēlu atveidošana: nav iestatīta; ime-mode: atiestatīts; rindas izmērs: nav iestatīts; izolācija: nav iestatīta; attaisnot saturu: unset; attaisnot vienumus: unset; attaisnot sevi: neiestatīt; pa kreisi: nav iestatīts; burtu atstarpes: neiestatītas; apgaismojuma krāsa: nav iestatīta; līnijas augstums: nav iestatīts; list-style: unset; margin-block-end: unset; margin-block-start: atiestatīts; margin-inline-end: unset; margin-inline-start: atiestatīts; mala: nav iestatīta; marķiera nobīde: neiestatīta; marķieris: neiestatīts; maskas veids: nav iestatīts; maska: neiestatīta; max-block-size: atiestatīts; maksimālais augstums: nav iestatīts; max-inline-size: atiestatīts; maksimālais platums: nav iestatīts; min-block-size: atiestatīts; min-augstums: nav iestatīts; min-inline-size: nav iestatīts; min-platums: nav iestatīts; mix-blend-mode: atiestatīts; objekta atbilstība: nav iestatīta; objekta stāvoklis: nav iestatīts; offset-block-end: atiestatīts; offset-block-start: atiestatīts; nobīde-inline-end: atiestatīta; offset-inline-start: atiestatīts; necaurredzamība: nav iestatīta; secība: atiestatīts; orientēties: neiestatīts; kontūra-nobīde: neiestatīta; kontūras rādiuss: nav iestatīts; kontūra: nav iestatīta; pārplūde: nav iestatīta; polsterējuma bloka gals: atiestatīts; padding-block-start: atiestatīts; polsterējums-inline-end: atiestatīts; polsterējums-inline-start: atiestatīts; polsterējums: neatiestatīts; lappuses pārtraukums: atiestatīts; lappuses pārtraukums pirms: atiestatīts; lappuses pārtraukums: atiestatīts; krāsu secība: neiestatīta; perspektīva-izcelsme: nav iestatīta; perspektīva: neiestatīts; rādītāju notikumi: nav iestatīts; stāvoklis: nav iestatīts; pēdiņas: neiestatīts; mainīt izmērus: atiestatīts; pa labi: neiestatīts; ruby-align: atiestatīts; rubīna pozīcija: nav iestatīta; ritināšanas uzvedība: nav iestatīta; scroll-snap-koordinate: unset; scroll-snap-destination: atiestatīts; scroll-snap-points-x: atiestatīts; scroll-snap-points-y: atiestatīts; scroll-snap-type: atiestatīts; formas atveidošana: nav iestatīta; kaudzes izmērs: nav iestatīts; pieturas krāsa: nav iestatīta; pieturas necaurredzamība: nav iestatīta; insults-dasharray: neiestatīts; insults-dashoffset: atiestatīts; insulta līnija: neiestatīts; stroke-linejoin: unset; insulta-miterlimit: nav iestatīts; insults-necaurredzamība: nav iestatīts; gājiena platums: nav iestatīts; gājiens: neiestatīts; tab-size: unset; galda izkārtojums: nav iestatīts; text-align-last: unset; text-align: unset; teksta enkurs: unset; text-comb-upright: unset; teksta dekorēšana: neiestatīta; teksta uzsvars-pozīcija: nav iestatīts; teksta uzsvars: neiestatīts; text-ievilkums: unset; teksta orientācija: nav iestatīta; text-overflow: unset; teksta atveidošana: nav iestatīta; teksta ēna: nav iestatīta; text-size-Adjust: unset; text-transform: unset; augšā: neiestatīts; transformēt izcelsmi: neiestatīts; pārveidot-style: unset; pārveidot: neiestatīts; pāreja: nav iestatīta; fokuss uz lietotāju: atiestatīts; lietotāja ievade: atiestatīta; user-modify: unset; user-select: atiestatīts; vektora efekts: neiestatīts; vertical-align: unset; redzamība: nav iestatīta; atstarpe: neiestatīta; platums: nav iestatīts; gribas maiņa: neiestatīts; loga vilkšana: atiestatīts; vārdu pārtraukums: neiestatīts; atstatums starp vārdiem: neiestatīts; vārdu ietīšana: neiestatīts; rakstīšanas režīms: atiestatīts; z-indekss: nav iestatīts;
Daudzi maketētāji izmanto t.s CSS atiestatīšana, kas kalpo, lai novērstu dažādu pārlūkprogrammu īpatnības. Patiesībā, šo failu stila lapa atiestata visus CSS rekvizītus pēc noklusējuma... Šajā rakstā es parādīšu šī faila kodu un pastāstīšu, vai ir vērts izmantot CSS Reset vai nē.
Esmu redzējis daudz un dažādus CSS atiestatīšana, tie visi ir aptuveni vienādi. Jūs varat izmantot šo:
Html, pamatteksts, div, span, sīklietotne, objekts, iframe,
h1, h2, h3, h4, h5, h6, p, bloka citāts, iepriekš,
a, abbr, akronīms, adrese, liels, citēt, kods,
del, dfn, em, fonts, img, ins, kbd, q, s, samp,
mazs, streiks, spēcīgs, sub, sup, tt, var,
b, u, i, centrs,
dl, dt, dd, ol, ul, li,
lauka kopa, forma, iezīme, leģenda,
tabula, paraksts, tbody, tfoot, thead, tr, th, td (
fons: caurspīdīgs;
robeža: 0;
fonta lielums: 100%;
rezerve: 0;
kontūra: 0;
polsterējums: 0;
vertikāli izlīdzināt: bāzes līnija;
}
ķermenis (
līnijas augstums: 1;
}
ol, ul (
saraksta stils: nav;
}
bloka citāts, q (
citāti: nav;
}
bloka citāts: pirms, bloka citāts: pēc,
q: pirms, q: pēc (
saturs: "";
saturs: nav;
}
: fokuss (
kontūra: 0;
}
tabula (
border-collapse: sabrukums;
atstarpe starp robežām: 0;
}Es domāju, ka tā izmantošanas iemesls ir saprotams, bet kāpēc, piemēram, es to neizmantoju, tāpat kā daudzi citi maketētāji, ir vērts par to pastāstīt. Pirmkārt, tā ir papildu fails, Otrkārt, papildus laiks lai apstrādātu, bet pats galvenais, man patīk noklusējuma rekvizīti. Piemēram, tie paši lauki ir tabulā. Galu galā visi rekvizīti tika veikti pēc noklusējuma kāda iemesla dēļ, bet kā lielākā daļa labākais variants parādot dažādus priekšmetus. Es jums apliecinu, nulle polsterējums tabulas šūnām, visticamāk, jūs to atgriezīsit galvenajā failā. Un tas nebūt nav fakts, ka vērtība atšķirsies no noklusējuma. Tātad izrādās, ka mēs vispirms to noņemam un pēc tam atdodam. Un kopā ar pirmajiem trūkumiem (papildu fails un papildu kods) daudzi maketētāju neizmanto CSS atiestatīšana.
Jebkurā gadījumā, stila atiestatīšana nav slikta lieta, lai jūs varētu to droši izmantot, ja domājat, ka vietņu pielāgošanas vienkāršošana dažādām pārlūkprogrammām patiešām vienkāršos jūsu izkārtojumu kopumā.
- Tulkošana
Šis raksts ir pirmais sērijā par tēmu CSS pieradināšana. Šodien mēs apskatīsim tehnoloģiju CSS atiestatīšana.
Kāpēc tas ir vajadzīgs?
Katra pārlūkprogramma dažādiem HTML elementiem nosaka savas noklusējuma stila vērtības. Ar CSS Reset palīdzību mēs varam neitralizēt šo atšķirību, lai nodrošinātu vairāku pārlūkprogrammu stila stilus.Piemēram, jūs izmantojat elementu a jūsu dokumentā. Lielākajai daļai pārlūkprogrammu patīk Internet Explorer un Firefox pievieno saiti zilā krāsā un pasvītrot... Tomēr iedomājieties, ka pēc pieciem gadiem kāds nolēma radīt jauna pārlūkprogramma(sauksim to par UltraBrowser). Pārlūkprogrammu izstrādātājiem nepatika zilā krāsa, un viņus kaitināja pasvītrojums, tāpēc viņi nolēma izcelt saites sarkanā krāsā un treknrakstā... Pamatojoties uz to, elementa pamata stila vērtība tiek iestatīta a tad tiek garantēts, ka tā būs tāda, kādu vēlaties, nevis tā, kā UltraBrowser izstrādātāji izvēlas to parādīt.
Bet tagad mums vispār nav ievilkumu, arī starp atsevišķām rindkopām! Ko darīt? Nemelojiet un nebaidieties: zem mūsu atiestatīšanas mēs aprakstīsim nepieciešamo noteikumu. Tu to vari izdarīt Dažādi ceļi: Norādiet ievilkumu rindkopas apakšā vai augšpusē, norādiet to procentos, pikseļos vai em.
Vissvarīgākais ir tas, ka pārlūkprogramma tagad spēlē pēc mūsu noteikumiem, nevis mēs pēc viņa. Es nolēmu to darīt līdzīgi:
* (piemale: 0; polsterējums: 0;) p (piemale: 5 pikseļi 0 10 pikseļi 0;)Rezultātā mēs saņēmām to, ko var redzēt trešajā piemērā.
Jūs varat izveidot savus atiestatīšanas stilus, ja savā projektā risināt kādu konkrētu problēmu. Neskatoties uz to, nav soli pa solim izveidojot savu CSS atiestatīšanu. Paļaujieties uz saviem principiem un savu stilu.
Lai palīdzētu jums izdarīt pareizo izvēli, šeit ir vēl dažas saites:
- Mazāk ir vairāk - mana izvēle Reset CSS (Ed Elliot).
2. Jūsu CSS atiestatīšana ir pirmā lieta, ko pārlūkprogrammai vajadzētu redzēt
Stilu atiestatīšana pēc elementu stilu iestatīšanas nav pareizā pieeja. Šajā gadījumā pārlūkprogrammas displejā nevajadzētu gaidīt neko labu. Atcerieties, ka vispirms vienmēr jāiekļauj CSS atiestatīšana un pēc tam visi citi stili.Jā, es saprotu, ka tas izklausījās smieklīgi, bet šī ir viena no galvenajām izstrādātāju kļūdām, gan jauniem, gan veciem. Daudzi cilvēki to vienkārši aizmirst.
Daži var uzdot loģisku jautājumu: kāpēc tas notiek? Atbilde ir vienkārša: noteikumi, kas rakstīti zem CSS faila teksta (un vēl zemāki to savienojuma secībā dokumentā), pārraksta iepriekš deklarētos noteikumus.
Nepalaidīsim pārāk tālu no tēmas un turpināsim. Piemērosim Ērika Mejera stilus mūsu piemēram, bet pēc mūsu īpašumu apraksti, kā parādīts 4 piemērā. Matemātiķi teiktu šādi: "Tas ir tas, kas bija jāpierāda."
3. CSS atiestatīšanai izmantojiet atsevišķu CSS dokumentu
Man ir (nē, es nekādā gadījumā nebiju piespiests) minēt šo padomu. Atsevišķa faila izmantošana CSS atiestatīšanai ir ierasta prakse, ko atbalsta liels skaits izstrādātāju.Patiesībā es ieņemu radīšanas pozīciju viens liels CSS failsšīs pieejas lielākas veiktspējas dēļ. Bet iekšā šo jautājumu Man ir tendence piekrist vairākumam: CSS Reset ir jāpārvieto uz atsevišķs fails(parasti sauc par reset.css). Ja tā, varat to izmantot dažādos projektos, nepieliekot pūles, lai to atdalītu no citiem CSS noteikumiem.
4. Centieties izvairīties no universālā selektora izmantošanas
Lai gan šī koncepcija darbojas, tās izmantošana bieži vien nav vēlama, jo tā nav saderīga ar dažām pārlūkprogrammām (piemēram, pārlūkprogrammā Internet Explorer šis atlasītājs netiek pareizi apstrādāts). Šo paņēmienu drīkst izmantot tikai vienkāršām, mazām, statiskām un paredzamām lapām (ja tas ir nepieciešams).Šis padoms ir īpaši svarīgs, izstrādājot risinājumus, piemēram, CMS tēmas. Jūs nevarat iepriekš paredzēt, kā tas tiks izmantots vai kā tas tiks mainīts. Labāk ir aprakstīt CSS pamatnoteikumus visiem elementiem, nevis izmantot šim nolūkam neparedzamu (kaut arī mazāku) universālo atlasītāju mehānismu.
5. Izvairieties no liekiem rekvizītu aprakstiem, izmantojot CSS Reset
Vēl viens iemesls, kāpēc man nepatīk atsevišķs CSS Reset fails, ir iespējamā nākamo CSS īpašuma deklarāciju dublēšana. Individuālo stilu pavairošana CSS failu komplektā ir slikta izturēšanās, un no tā vajadzētu izvairīties. Protams, dažreiz mēs esam pārāk slinki, lai rūpīgi pārdomātu stilu kopumu un apvienotu dažus no tiem, bet vismaz mums vajadzētu mēģināt!Atpakaļ pie Ērika CSS atiestatīšanas. Tas nosaka elementa līnijas augstuma, krāsas un fona noklusējuma vērtības ķermenisšādā veidā:
ķermenis (līnijas augstums: 1; krāsa: melna; fons: balts;)
Pieņemsim, ka jūs jau zināt, kā izskatīsies elements. ķermenis:
- fona krāsa: #cccccc;
- krāsa: # 996633;
- Jūs vēlaties horizontāli atkārtot noteiktu fona attēlu.
Šajā gadījumā nav nepieciešams izveidot jaunu atlasītāju, lai aprakstītu savas īpašības - varat tās vienkārši iekļaut CSS atiestatīšanā. Darīsim to:
pamatteksts (līnijas augstums: 1; krāsa: # 996633; fons: #ccc url (tiled-image.gif) atkārtojums x augšējā kreisā puse;)
Jūtieties brīvi modificēt pašu CSS atiestatīšanu. Pielāgojiet to sev, lai tas darbotos jūsu labā. Modificējiet, atjaunojiet, noņemiet un pievienojiet pēc vajadzības konkrētajā gadījumā.Ēriks Meijers par to teica šādi: "Tas nav gadījums, kad ikvienam vajadzētu izmantot CSS Reset bez izmaiņām."
