Lähtestage CSS(lähtesti stiilid) – see on nullimine alates kasutades CSS-i, mõned HTML-i elementide parameetrid, mille brauserid vaikimisi määravad. Näiteks hõlmavad sellised elemendid lõike (silt), millel on algselt nullist erinevad vertikaalsed veerised (CSS), täppidega nimekirjad(silt), millel pole mitte ainult välju, vaid ka teatud tüüpi markereid (CSS) ja nii edasi.

Mõelgem nüüd, milleks see CSS-i lähtestamine on, mida see meile anda võib? Kujutage ette, et olete oma saidi lehed paigutanud ega ole muutnud brauserite vaikimisi pakutavaid lõiguveerisid, kuna nende suurus sobis teile üsna hästi. Aga öelge palun, miks te otsustasite, et kõik maailmas juba olemasolevad ja ilmuvad brauserid loovad ühesuurused väljad? Veelgi enam, miks arvate, et need brauserid, milles oma paigutust testisite, ei muutu järgmised versioonid nende väljade suurus või ei eemaldata neid üldse? Kas tunnete, kuidas see lõhnab?

Seega kaitsevad paigutuse kujundajad CSS-i lähtestamisega lihtsalt end selliste arusaamatuste eest, see tähendab, et nad lähtestavad esmalt kõik elementide CSS-i atribuutide "kriitilised" väärtused ja seejärel lisavad need vajadusel tagasi, kuid oma suurustega. Nii võite olla kindel, et sait näeb kõigis brauserites ühesugune välja. Loomulikult ei saa te stiile lähtestada, vaid saate need lihtsalt paigutuse ajal seadistada nõutavad parameetrid elemente, kuid on oht, et kuskil jääb midagi vahele ja teatud hetkel kõik “ujub”.

Eelnevast lähtudes on CSS-i lähtestamise üks omadusi see, et peale selle rakendamist kaotavad paljud HTML-i elemendid oma tavapärase välimuse. Ja kui algajatele on lõikude veeriste kadumine ootuspärane, siis näiteks see, et siltide abil loodud nupud muutusid ühtäkki väliselt sarnaseks tavatekstiga, on täielik üllatus. Kuid see ei tohiks teid segadusse ajada, sest stiilid lähtestatakse selleks, et küljendaja ei unustaks neid hiljem uuesti täpsustada.

Stiilide lähtestamiseks on palju võimalusi ja see, millise valite, sõltub ainult teist, kuid võin teile öelda üht – parim lähtestamine on see, mille olete ise oma kogemuste ja harjumuste põhjal loonud. Kui teil sellist kogemust veel pole, võite kasutada ühte allpool pakutud valikutest.

Määrake CSS-i lähtestamise stiilid alati koodi alguses, vastasel juhul ei pruugi mõned valikud seetõttu töötada stiili prioriteedid, mille määravad brauserid lehe HTML- ja CSS-koodi töötlemisel.

CSS-i lähtestamine universaalse valijaga

* ( font-family: inherit; /* kõik elemendid pärivad fondi kirjatüübi oma vanematelt */ font-style: inherit; /* pärivad stiili */ font-weight: inherit; /* pärivad paksuse */ vertikaalne joondamine : baasjoon /* fondi suurus: 100% */ taust: läbipaistev /* kõigi elementide taust: 0; / kontuurid: 0; /* eemalda piirjooned */ veerised: 0 /* eemalda täidised */ )

Näite kirjeldus

Selles näites kasutades universaalne valija määratud stiilid lähtestatakse kohe kõigi lehel leiduvate HTML-elementide jaoks. Nagu näete, on enamik atribuute määratud lihtsalt ohutuse tagamiseks, kuna nende väärtused vastavad juba neile, mida brauserid peaksid CSS-i spetsifikatsiooni järgi vaikimisi määrama. Kuid nagu te juba teate, on praktikas see kõik täiesti vale ja kui atribuut on tõepoolest päritud elementide poolt vanematelt kõigis juhtivates brauserites, siis samad CSS-i atribuudiga määratud välised veerised ei ole alati algselt võrdsed nulliga.

Kuid kaadrite (CSS) ja piirjoonte (CSS) suurused ei võrdu vaikimisi nulliga, vaid vastavalt spetsifikatsioonile. Kuid ka nende paksus nulliti, et küljendaja ei unustaks seda vajadusel selgesõnaliselt märkida.

Lähtestage CSS Yahoo!

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, vorm,väljakomplekt,sisend,tekstiala,p,plokitsitaat,th,td ( veeris: 0; polster: 0; ) fieldset,img,abbr,akronüüm (ääris: 0; ) aadress,pealkiri,tsita,kood,dfn,em,strong,th,var (fondi stiil: tavaline; fondi kaal: tavaline; ) tabel ( border-collapse: colapse; /* tabeli lahtrite ühised äärised */ border-spacing: 0; /* lähtestab lahtrite vahelise kauguse */ ) caption,th (teksti joondamine: vasakule; /* joondab teksti vasakule * / ) ol,ul ( loendi stiil: puudub; /* eemalda loendi markerid */ ) h1,h2,h3,h4,h5,h6 ( fondi suurus: 100%; fondi kaal: tavaline; ) q:before, q :after ( sisu: ""; /* eemalda Q-sildilt jutumärgid */ )

Näite kirjeldus

Yahoo ettevõte töötas korraga välja oma stiilide lähtestamise versiooni. Siin muudetakse juba konkreetsete elementide omadusi, mis võimaldab nende haldamisel suuremat paindlikkust välimus. Näiteks siin on loenditest eemaldatud täpid ja CSS-i atribuuti kasutades on eemaldatud siltidest jutumärgid. Selle lähenemisviisi eelised on ilmsed, kuid puudused hõlmavad mahukamat ja mõnikord üleliigset koodi. Kuid keegi ei keela teil CSS-i lähtestamist vastavalt teie vajadustele muuta. Oletame, et saate eemaldada mõned, mida te ei vaja sildi valijad või mitte lihtsalt tsitaate eemaldada, vaid anda neile kohe vajalik välimus.

CSS-i lähtestamine, autor Eric Meyer

html,body,div,span,aplett,objekt,iframe,h1,h2,h3,h4,h5,h6,p, blockquote,pre,a,abbr,akronüüm,aadress,suur,tsiit,kood,del,dfn, em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,väljakomplekt, vorm,silt,legend, tabel,pealkiri,tbody,tfoot,thead,tr,th,td,artikkel,kõrvale,lõuend,detailid,manusta,joonis,jalus,päis,hrühm,menüü,nav, väljund,rubiin, jaotis,kokkuvõte,aeg,märk,heli,video (veeris: 0; täidis: 0; ääris: 0; fondi suurus: 100%; font: päri; vertikaaljoondus: lähtejoon; ) artikkel, kõrvale, üksikasjad, pildipealkiri, joonis, jalus, päis, hgroup,menüü,nav,sektsioon (kuva: plokk; /* elementide blokeerimine (vanemate brauserite jaoks) */ ) keha (rea kõrgus: 1; /* reavahe lehel olev tekst */ ) ol,ul ( loendi stiil: puudub; ) blockquote:enne, blockquote:after, q:before,q:after ( sisu: ""; /* Eemalda tsitaadid Q ja BLOCKQUOTE */ sisust : none; /* lisage hea meetme jaoks

Näite kirjeldus

Teise meetodi CSS-i lähtestamiseks pakkus välja teatud ringkondades tuntud veebiarendaja Eric Meyer. Siin on ta juba lisanud HTML 5 siltide stiilide lähtestamise, mida, muide, selle artikli kirjutamise ajal tänapäevased brauserid endiselt väga halvasti toetavad. Aga sa pead alati vaatama tulevikku, eks?

Tegelikult võiks seda artiklit jätkata lõpmatuseni, sest, kordan veel kord, jõuab iga küljendaja teatud hetkel oma lähtestamisvalikuni või ei kasuta seda oma tähelepanelikkusele tuginedes üldse.

Kõik HTML elemendid vaikelehtedel on oma kindlad väärtused. Ja kahjuks ei tõlgenda need erinevad brauserid võrdselt. Selle tulemusena kannatab saidi kujundus brauseri (Interneti-brauseri) vahetamisel. Stiili lähtestamise protseduuri eesmärk on vähendada brauseri ebaühtlust sellistes asjades nagu reakõrgus, veerised, päise fondi suurused jne.

CSS-stiili lähtestamise skriptide näited

On arvamus, et iga endast lugupidav veebimeister peaks kirjutama oma enda kood lähtesta CSS. Aga mina olen teistsuguse lähenemise pooldaja: võta valmis lahendus, mõista seda ja vajadusel kohenda.

Eric Meyer CSS-i lähtestamine

Eric Meyeri lähtestamise skript on autori enda sõnul tahtlikult väga üldine. Näiteks kehaelemendil ei ole vaikimisi taustavärvi määratud. Seetõttu tuleb seda muuta, redigeerida, laiendada ja muul viisil kohandada vastavalt teie vajadustele. Lisage soovitud värvid lehtedele, linkidele ja nii edasi.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Litsents: puudub (avalik domeen) */ html, body, div, span, aplett, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronüüm, aadress, suur, viidata, kood, del, dfn, em, img, ins, kbd, q, s, samp, väike, streik, tugev, sub, sup, tt, var, b, u, i, keskpunkt, dl, dt, dd, ol, ul, li, väljakomplekt, vorm, silt, legend, tabel, pealdis, tbody, tfoot, thead, tr, th, td, artikkel, kõrvale, lõuend, üksikasjad, manustamine, joonis, pildipealkiri, jalus, päis, hgroup, menüü, navigeerimisseade, väljund, rubiin, jaotis, kokkuvõte, aeg, märk, heli, video (veeris: 0; polster: 0; ääris: 0; fondi suurus: 100%; font: päri; vertikaaljoondus: baasjoon ; ) /* HTML5 kuvarolli lähtestamine vanematele brauseritele */ artikkel, kõrvale, üksikasjad, pildipealkiri, joonis, jalus, päis, hgroup, menüü, navigeerimine, jaotis ( kuva: plokk; ) keha ( rea kõrgus: 1; ) ol, ul ( list-style: none; ) blockquote, q ( jutumärgid: pole; ) blockquote:enne, blockquote:after, q:enne, q:after ( sisu: ""; sisu: puudub; ) tabel ( border- kollaps: kollaps; piiride vahe: 0; )

Yahoo! (YUI 3) Lähtestage CSS

CSS-i lähtestamine YUI 3 leevendab brauserite HTML-i elementide ebaühtlast stiili, nagu iga teine ​​​​CSS-i lähtestamise skript, et luua veebisaitide ja veebirakenduste loomiseks kindel alus.

/* YUI 3.18.1 Autoriõigus 2014 Yahoo! Inc. Kõik õigused kaitstud. Litsentsitud BSD litsentsi alusel. http://yuilibrary.com/license/ */ /* TODO peab eemaldama HTML-i sätted, kuna me ei saa seda nimeruumi. TODO koos eesliitega, kas ma peaksin kaalu säästmiseks grupeerima valija või atribuudi järgi? */ html( color:#000 background:#FFF */ /* TODO test klassi panemine HEAD-i. - FF-il ebaõnnestub. */ keha, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, kood, vorm, väljakomplekt, legend, sisend, tekstiala, p, tsitaat, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO mõtlema pärimist erinevalt käsitleda, võib-olla lasta IE6-l veidi ebaõnnestuda... */ aadress, pealdis, tsitaat, kood, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul ( list-style:noone after ( sisu:""; ) lühend, akronüüm ( border:0; font-variant:normal; ) /* rea kõrguse ja valija välimuse säilitamiseks */ sup ( vertical-align:text-top; ) sub ( vertikaal- align:text-bottom; sisend, tekstiala, valige ( font-family: inherit; font-size: inherit; font-weight: inherit; *font-size:100%; /*suuruse muutmise lubamiseks IE jaoks*/ ) / *kuna legend ei päri IE-s */ legend (värv:#000; ) /* YUI CSS-i tuvastamise tempel */ #yui3-css-stamp.cssreset (kuva: puudub; )

Normalize.css stiilide lähtestamine

Normalize.css on kohandatud CSS-fail, mis võimaldab brauseritel kuvada kõiki elemente järjepidevamalt ja kooskõlastatumalt kaasaegsed standardid. Selle autorid uurisid stiilide erinevusi erinevad brauserid vaikimisi kohandada ainult neid stiile, mis vajavad normaliseerimist.

/*! normalize.css v6.0.0 | MIT-i litsents | github.com/necolas/normalize.css */ /* Dokument ===================================== = ====================================== */ /** * 1. Parandage rida kõrgus kõigis brauserites. * 2. Vältige fondi suuruse kohandamist pärast orientatsiooni muutmist * IE sees Windowsi telefon ja iOS-is. */ html (rea kõrgus: 1,15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Jaotised ================================================ =========================== */ /** * Lisage IE 9-s õige kuva. */ artikkel, kõrvale, jalus, päis, navigeerimine, jaotis (kuva: blokk; ) /** * Parandage fondi suurust ja veerist elementide "h1" elementide "section" ja * "article" kontekstis Chrome'is, Firefoxis ja Safari. */ h1 ( fondi suurus: 2 em; veeris: 0,67 em 0; ) /* Sisu rühmitamine ============================ = ==================================================== ========= */ /** *Lisage IE 9-s õige kuva. * 1. Lisage IE-sse õige kuva. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Lisage IE 8-s õige veeris. */ joonis ( veeris: 1em 40px; ) /** * 1. Lisage õige kast suuruse määramine Firefoxis. * 2. Näidake Edge'is ja IE-s ületäitumist. */ hr ( kasti suurus: sisukast; /* 1 */ kõrgus: 0; /* 1 */ ületäitumine: nähtav; /* 2 */ ) /** * 1. Parandage fondi suuruse pärilikkus ja skaleerimine kõigis brauserites. * 2. Parandage kõigis brauserites paaritu "em" fondi suurus. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Tekstitaseme semantika =============== ==================================================== === ========= */ /** * 1. Eemaldage IE 10 aktiivsete linkide hall taust. * 2. Eemaldage iOS 8+ ja Safari 8+ ja uuemates versioonides allajoonitud linkide lüngad. */ a ( taustavärv: läbipaistev; /* 1 */ -webkit-text-decoration-skip: objektid; /* 2 */ ) /** * 1. Eemaldage Chrome 57- ja Firefox 39- alumine ääris . * 2. Lisage Chrome'is, Edge'is, IE-s, Operas ja Safaris õige tekstikaunistus. */ abbr ( ääris-alumine: puudub; /* 1 */ text-decoration: allakriipsutamine; /* 2 */ tekstidekoratsioon: allajoonitud punktiir; /* 2 */ ) /** * Väldi `paksem ` järgmise reegli järgi Safari 6-s. */ b, strong ( font-weight: inherit; ) /** * Lisage Chrome'is, Edge'is ja Safaris õige fondi kaal. */ b, tugev ( font-weight: bolder; ) /** * 1. Parandage fondi suuruse pärilikkus ja skaleerimine kõigis brauserites. * 2. Parandage kõigis brauserites paaritu "em" fondi suurus. */ kood, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Lisage Android 4.3-s õige fondi stiil. */ dfn ( font-style: kursiiv; ) /** * Lisage IE 9-s õige taust ja värv. */ mark ( taustavärv: #ff0; värv: #000; ) /** * Lisage kõikides brauserites õige fondi suurus. */ väike ( fondi suurus: 80%; ) /** * Takistage elementide "sub" ja "sup" rea kõrguse mõjutamine kõigis * brauserites. */ sub, sup ( fondi suurus: 75%; rea kõrgus: 0; asukoht: suhteline; vertikaaljoondus: baasjoon; ) sub ( alumine: -0,25 em; ) sup ( ülemine: -0,5 em; ) /* Manustatud sisu ================================================= ================ =========================== */ /** * Lisage õige kuva IE 9-s. */ heli, video ( ekraan: inline-block; ) /** * Lisage iOS 4-7 õige kuva. */ audio:not() (kuva: puudub; kõrgus: 0; ) /** * Eemaldage IE 10-s olevate linkide seest piltidelt ääris. */ img ( border-style: none; ) /** * Peida ületäitumine IE-s. */ svg:not(:root) ( ületäitmine: peidetud; ) /* Vormid ================================= = =================================================== ====== */ /** * Eemaldage veeris Firefoxis ja Safaris. */ nupp, sisend, optgrupp, valik, tekstiala ( veeris: 0; ) /** * Näitab IE-s ületäitumist. * 1. Näidake Edge'is ületäitumist. */ nupp, sisend ( /* 1 */ ületäitumine: nähtav; ) /** * Eemaldage Edge'is, Firefoxis ja IE-s tekstiteisenduste pärand. * 1. Eemaldage Firefoxis teksti teisenduse pärand. */ nuppu, valige ( /* 1 */ text-transform: none; ) /** * 1. Vältige WebKiti viga, kus (2) hävitab Android 4 loomulikud heli- ja videojuhtelemendid. * 2. Parandage iOS-is ja Safaris klõpsatavate tüüpide stiilimise keeld. */ nupp, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Eemaldage Firefoxis sisemine ääris ja polster. */ nupp::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner (ääriste stiil: puudub; polsterdus: 0; ) /** * Taasta eelmise reegliga määramata fookusstiilid. */ nupp:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( kontuur: 1px dotted ButtonText; ) /** * 1. Parandage teksti murdmine Edge'is ja IE-s. * 2. Parandage IE-s 'fieldset' elementide värvide pärand. * 3. Eemaldage täidis, et arendajad ei jääks kõigist brauseritest välja, kui nullivad * `fieldset` elemendid. */ legend ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ polster: 0 /* 3 */ tühik: tavaline /* 1 */ ) /** * 1. Lisage IE 9-sse õige kuva. * 2. Lisage Chrome'is, Firefoxis ja Operas õige vertikaaljoondus. */ edenemine ( kuva: inline-block; /* 1 */ vertikaalne joondus: baasjoon; /* 2 */ ) /** * Eemaldage IE-st vaikimisi vertikaalne kerimisriba. */ textarea ( overflow: auto; ) /** * 1. Lisage IE 10-s õige kasti suurus. * 2. Eemaldage IE 10- polster. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Parandage Chrome'i kursori suurendamise ja vähendamise nuppude stiili. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( kõrgus: auto; ) /** * 1. Parandage veider välimus Chrome'is ja Safaris. * 2. Parandage Safaris kontuuri stiili. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Eemaldage sisemine polsterdus ja tühistamise nupud Chrome'is ja Safaris MacOS-is. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Parandage suutmatus iOS-is ja Safaris klõpsatavaid tüüpe stiilida. * 2. Muutke Safaris fondi atribuudid väärtuseks "pärima". */ ::-webkit-file-upload-button ( -webkit-appearance: nupp; /* 1 */ font: inherit; /* 2 */ ) /* Interaktiivne ============ ==================================================== === ============ */ /* * Lisage IE 9-s õige kuva. * 1. Lisage Edge'is, IE-s ja Firefoxis õige kuva. */ üksikasjad, /* 1 */ menüü ( kuva: plokk; ) /* * Lisage kõigis brauserites õige kuva. */ kokkuvõte ( kuva: loendiüksus; ) /* Skriptimine ==================================== = ======================================= */ /** * Lisage õige kuva IE 9-. */ lõuend ( ekraan: inline-block; ) /** * Lisage IE-s õige kuva. */ mall ( kuva: puudub; ) /* Peidetud ======================================= ===================================== */ /** * Lisage IE 10-s õige kuva - . */ (kuva: puudub; )

Lähtestage universaalse valijaga * (tärn)

Esmapilgul võib see tunduda kõige lihtsam ja edukam lahendus, miks kirjeldada kõiki HTML-i elemente ja määrata neile väärtusi, kui saate kasutada valijat *, sest selle mõju kehtib kogu HTML-i kohta.

* ( veeris: 0; täidis: 0; )

Kuid kahjuks pole see hea tava. Brauseri jaoks on väga raske (võrreldes teiste CSS-i lähtestamisprotseduuridega aeganõudev) rakendada reegleid dokumendi igale elemendile, eriti suurtel veebilehtedel, ning see võib rikkuda ka palju häid vaikestiile.

Stiilide ja WordPressi lähtestamine

Kui soovite kasutada mõnda ülalkirjeldatud lähtestamismeetoditest CSS-stiilid WordPressi saidi puhul saab seda teha kahel viisil.

Esimene on see, et peate lähtestuskoodi kopeerima faili style.css ülaossa WordPressi teemad(pärast teema autorsust ja pealkirja puudutavaid ridu, st pärast murdosa ja tärniga raamitud teksti /* ... */.

Välja arvatud IE ja Opera Mini perekonnad.

Kuna IE toe puudumine võib probleemi põhjustada, on siin mõned viisid mõne CSS-i atribuudi algväärtuste lähtestamiseks:

Reset-this ( animatsioon: puudub; animatsiooni viivitus: 0; animatsiooni suund: tavaline; animatsiooni kestus: 0; animatsiooni täitmise režiim: puudub; animatsiooni iteratsiooni arv: 1; animatsiooni nimi: puudub; animatsioon- play-state: animatsiooni-aja-funktsioon: tausta-nähtavus: tausta-kast: tausta-positsioon: 0; border- style: border-width: border-bottom-radius: border-bottom-width: border-collapse: border-left; 0 piir-vasak-stiil: piir-vasak-laius: 0; ääris-parem: 0; ääris-parem-värv: pärida; ääris-parem-stiil: puudub; ääris-parem-laius: keskmine; piiride vahe: 0; ääris-ülemine: 0; piiri-ülemise värv: pärida; ääris-ülemine-vasak-raadius: 0; ääris-ülemine-parem-raadius: 0; border-top-stiil: puudub; ääris-ülemine laius: keskmine; alumine: auto; kast-vari: puudub; kasti suurus: sisukarp; pealdise pool: ülemine; selge: puudub; clip:auto; värvus: pärida; veerud: auto; veergude arv: auto; veeru täitmine: tasakaal; veeru vahe: tavaline; veeru reegel: keskmine none currentColor; veeru reegli värv: praegune värv; veeru reegli stiil: puudub; veeru reegli laius: puudub; veeru ulatus: 1; veeru laius: automaatne; sisu: tavaline; vastukasv: puudub; vastureset: puudub; kursor: auto; suund: ltr; ekraan: inline; tühjad lahtrid: näita; ujuk: puudub; font: tavaline; font-perekond: pärida; fondi suurus: keskmine; fondi stiil: tavaline; font-variant: tavaline; fondi kaal: tavaline; kõrgus: auto; sidekriipsud: puudub; vasakul: auto; tähevahed: tavaline; joone kõrgus: normaalne; loendi stiil: puudub; list-style-image: none; list-style-position: väljaspool; list-style-type: ketas; marginaal: 0; veeris-alumine: 0; veeris-vasak: 0; veeris-parem: 0; veeris-ülemine: 0; maksimaalne kõrgus: puudub; maksimaalne laius: puudub; min-kõrgus: 0; min-laius: 0; läbipaistmatus: 1; orvud: 0; ülevaade: 0; kontuuri värv: ümberpööratud; kontuuri-stiil: puudub; piirjoone laius: keskmine; ülevool: nähtav; ülevool-x: nähtav; ülevool-y: nähtav; polsterdus: 0; polsterdus-põhi: 0; polster-vasak: 0; polsterdus-parem: 0; polsterdus: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspektiiv: puudub; perspektiiv-päritolu: 50% 50%; asend: staatiline; /* Võimalik, et tuleb muuta erinevate lokaatide jutumärke (nt fr) */ jutumärgid: "\201C" "\201D" "\2018" "\2019"; paremal: auto; vahelehe suurus: 8; tabeli paigutus: auto; text-align: inherit; text-align-last: auto; tekst-kaunistus: puudub; tekst-kaunistus-värv: pärida; text-decoration-line: puudub; tekst-kaunistus-stiil: soliidne; teksti-taane: 0; tekst-vari: puudub; tekstiteisendus: puudub; top:auto; teisendus: puudub; transform-style: korter; üleminek: puudub; ülemineku viivitus: 0 s; ülemineku kestus: 0 s; üleminekuomadus: puudub; ülemineku-ajastamise funktsioon: lihtsus; unicode-bidi: tavaline; vertikaalne joondamine: baasjoon; nähtavus: nähtav; tühik: tavaline; lesed: 0; laius: auto; sõnavahe: tavaline; z-indeks: auto; /* põhiline kaasaegne plaaster */ kõik: esialgne; kõik: määramata; ) /* tänapäevane põhiparandus */ #reset-this-root ( kõik: esialgne; * ( kõik: määramata; ) )

• Asjakohane githubi repo detsembrist 2017 veenvam nimekiri

Nagu @user566245 kommentaaris mainiti:

See on põhimõtteliselt tõsi, kuid individuaalne läbisõit võib erineda. Näiteks mõnel elemendil, nagu vaiketekstiala, on ääris, selle lähtestamise rakendamisel vähendatakse tekstiala piire.

Ostetud Joosti kasutaja poolt tänapäevaseks normiks

#reset-this-parent ( kõik: esialgne; * ( kõik: määramata; ) )

NÄIDE W3-st

See võib olla kasulik lehel oleva juur-vidina elemendi puhul, mis ei soovi välise lehe stiile pärida. Pange tähele, et kõik sellele elemendile rakendatud vaikestiil (nt plokielementide UA stiilitabeli display:block) eemaldatakse samuti.

Kas keegi on mõelnud Cs-i lähtestamiseks millelegi muule peale css-i? Jah?

On selline hädaabiutiliit:

getElementsByTagName("*") tagastab kõik DOM-i elemendid. Seejärel saate määrata iga kollektsiooni elemendi jaoks stiilid.

Var allElements = document.getElementsByTagName("*"); for (var i = 0, len = allElements.length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }

Kõige selle juures; Ma arvan, et css-i lähtestamine pole võimalik, välja arvatud juhul, kui meil on ainult üks veebibrauser. Kui lõpus on "brauser" seatud "vaikimisi".

Võrdluseks on siin Firefox 40.0 väärtuste loend

kus font-style: oblique käivitab DOM-i toimingu.

Joonda-sisu: määramata; align-items: unset; align-self: unset; animatsioon: unset; välimus: seadistamata; tagakülje nähtavus: määramata; background-blend-mode: unset; taust: määramata; sidumine: määramata; ploki suurus: määramata; border-block-end: määramata; border-block-start: unset; border-collapse: unset; border-inline-end: määramata; border-inline-start: määramata; piiriraadius: määramata; piirivahe: määramata; piir: määramata; alumine: määramata; box-align: unset; box-decoration-break: unset; kasti suund: määramata; box-flex: unset; box-ordinal-group: unset; box-orient: unset; kast-pakk: seadistamata; box-shadow: unset; kasti suurus: määramata; pealdise pool: määramata; selge: unset; lõiketee: määramata; clip-rule: unset; klipp: määramata; värvi reguleerimine: määramata; värviinterpolatsioonifiltrid: unset; värviinterpolatsioon: määramata; värv: määramata; veeru täitmine: määramata; veeru vahe: määramata; veeru reegel: määramata; veerud: määramata; sisu: määramata; juhtmärk-nähtavus: määramata; vastukasv: unset; counter-reset: unset; kursor: määramata; ekraan: seadmata; dominant-alustase: määramata; tühjad lahtrid: määramata; täite-läbipaistmatus: määramata; täitmisreegel: määramata; täitmine: määramata; filter: välja lülitatud; flex-flow: unset; paindumine: seadmata; float-edge: unset; ujuk: seadmata; üleujutusvärv: määramata; üleujutus-läbipaistmatus: määramata; fondiperekond: määramata; font-feature-settings: unset; font-kerning: määramata; font-language-override: unset; font-size-adjust: määramata; fondi suurus: määramata; font-stretch: määramata; font-style: oblique; font-synthesis: unset; font-variant: määramata; fondi kaal: määramata; font: ; jõuga katki-pildi-ikoon: unset; kõrgus: seadistamata; sidekriipsud: määramata; pildi orientatsioon: määramata; pildiregioon: määramata; pildi renderdamine: määramata; ime-režiim: määramata; inline-size: määramata; isolatsioon: unset; õigusta-sisu: määramata; õigusta-elemendid: määramata; õigusta-self: unset; vasakule: määramata; tähevahe: määramata; valgustusvärv: seadistamata; joone kõrgus: määramata; loendi stiil: määramata; margin-block-end: määramata; margin-block-start: unset; margin-inline-end: määramata; margin-inline-start: määramata; marginaal: määramata; marker-nihe: määramata; marker: määramata; maski tüüp: määramata; mask: määramata; max-ploki suurus: määramata; maksimaalne kõrgus: määramata; max-inline-size: määramata; max-width: määramata; min-ploki suurus: määramata; min-kõrgus: seadistamata; min-inline-size: määramata; min-laius: määramata; mix-blend-mode: unset; objektile sobiv: määramata; objekti asukoht: määramata; offset-block-end: unset; offset-block-start: unset; offset-inline-end: määramata; offset-inline-start: unset; läbipaistmatus: määramata; järjestus: määramata; orienteeruda: seadmata; piirjoone nihe: määramata; kontuurraadius: määramata; kontuur: määramata; ülevool: unset; padding-block-end: unset; padding-block-start: unset; polsterdus-inline-end: määramata; polsterdus-inline-start: määramata; polster: määramata; page-break-after: määramata; page-break-before: unset; page-break-inside: määramata; värvi järjekord: määramata; perspektiiv-päritolu: määramata; perspektiiv: määramata; pointer-events: unset; asend: väljalülitatud; jutumärgid: määramata; suuruse muutmine: määramata; paremal: määramata; ruby-align: määramata; rubiini asend: määramata; scroll-behavior: unset; scroll-snap-coordinate: unset; scroll-snap-destination: unset; scroll-snap-points-x: määramata; scroll-snap-points-y: määramata; scroll-snap-type: unset; kujundi renderdamine: määramata; virna suuruse määramine: määramata; stop-värv: määramata; stop-papacity: unset; insult-dasharray: määramata; insult-dashoffset: määramata; insult-linecap: unset; insult-linejoin: määramata; insult-miterlimit: määramata; insult-läbipaistmatus: määramata; käigu laius: määramata; löök: määramata; tab-size: määramata; tabeli paigutus: määramata; text-align-last: unset; teksti joondamine: määramata; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-emphasis-position: unset; text-emphasis: unset; text-taane: määramata; teksti orientatsioon: määramata; text-overflow: unset; teksti renderdamine: määramata; tekst-vari: määramata; text-size-adjust: määramata; text-transform: unset; ülemine: määramata; transform-origin: unset; transform-style: unset; teisendus: määramata; üleminek: määramata; kasutaja fookus: määramata; kasutaja sisend: määramata; kasutaja muuta: määramata; kasutaja valik: määramata; vektor-efekt: määramata; vertikaalne joondamine: määramata; nähtavus: seadmata; tühik: määramata; laius: määramata; tahe-muuta: määramata; akna lohistamine: määramata; sõnamurd: määramata; sõnavahe: määramata; sõnamurdmine: määramata; kirjutamisrežiim: määramata; z-indeks: määramata;

Paljud küljendajad kasutavad nn CSS-i lähtestamine, mille eesmärk on kõrvaldada erinevate brauserite iseärasused. tegelikult see fail stiilid lähtestab kõik CSS-i atribuudid vaikeväärtustele. Selles artiklis näitan selle faili koodi ja ütlen teile, kuidas Kas ma peaksin kasutama CSS-i lähtestamist või mitte?.

Olen näinud palju erinevaid CSS-i lähtestamine, need on kõik umbes samad. Võite kasutada seda:

HTML, keha, div, ulatus, aplett, objekt, iframe,
h1, h2, h3, h4, h5, h6, p, tsitaat, eel,
a, lühend, akronüüm, aadress, suur, viidata, kood,
del, dfn, em, font, img, ins, kbd, q, s, samp,
väike, lööb, tugev, sub, sup, tt, var,
b, u, i, keskpunkt,
dl, dt, dd, ol, ul, li,
väljakomplekt, vorm, silt, legend,
tabel, pealkiri, tbody, tfoot, thead, tr, th, td (
taust: läbipaistev;
ääris: 0;
fondi suurus: 100%;
marginaal: 0;
ülevaade: 0;
polsterdus: 0;
vertikaalne joondamine: baasjoon;
}
keha (
joone kõrgus: 1;
}
ol, ul (
loendi stiil: puudub;
}
tsitaat, q(
jutumärgid: puudub;
}
blockquote:enne, blockquote:pärast,
q: enne, q: pärast (
sisu: "";
sisu: puudub;
}
:focus (
ülevaade: 0;
}
tabel (
border-collapse: kollaps;
piiride vahe: 0;
}

Ma arvan, et selle kasutamise põhjused on juba selged, kuid miks ma seda näiteks ei kasuta, nagu paljud teised küljendajad, tasub rääkida. Esiteks see lisafail , Teiseks, lisaaeg töötlemiseks, kuid mis kõige tähtsam, mulle meeldivad vaikeomadused. Näiteks samad väljad tabelis. Lõppude lõpuks tehti kõik vaikeomadused põhjusega, kuid kõige rohkem parim variant erinevate elementide kuvamine. Kinnitan teile, et pärast lähtestamist polsterdus tabeli lahtrite puhul tagastate selle tõenäoliselt põhifailis. Ja see pole kaugeltki tõsiasi, et väärtus erineb vaikeväärtusest. Nii selgub, et kõigepealt eemaldame selle ja siis tagastame. Ja koos esimeste puudustega (lisafail ja lisakood) paljud küljenduskujundajad ei kasuta CSS-i lähtestamine.

Igatahes stiili lähtestamise kasutamine pole halb, nii et saate seda ohutult kasutada, kui arvate, et see lihtsustab saidi kohandamist erinevad brauserid lihtsustab teie paigutust üldiselt.

• Tõlge

See artikkel on esimene seeriast, mis käsitleb CSS-i taltsutamist. Täna vaatame tehnoloogiat CSS-i lähtestamine.

Miks see vajalik on?

Iga brauser määrab erinevate HTML-elementide jaoks oma vaikestiili väärtused. CSS-i lähtestamise abil saame selle erinevuse tasandada, et tagada stiilide brauseriülene ühilduvus.

Näiteks kasutate elementi a oma dokumendis. Enamikule brauseritele meeldib Internet Explorer ja Firefox, lisage link Sinine värv Ja allakriipsutamine. Kujutage aga ette, et viis aastat hiljem otsustas keegi luua uus brauser(nimetagem seda UltraBrowseriks). Brauseri arendajatele sinine värv ei meeldinud ja allajoonimine häiris neid, mistõttu otsustasid nad lingid esile tõsta punases Ja julge. See põhineb sellel, kui määrate elemendi põhistiili väärtuse a, siis on see garanteeritud nii, nagu soovite, ja mitte nii, nagu UltraBrowseri arendajad eelistavad seda kuvada.

Kuid nüüd pole meil üldse taane, sealhulgas üksikute lõikude vahel! Mida teha? Ärge valetage ja ärge kartke: lähtestamise all kirjeldame vajalikku reeglit. Seda saab teha erinevatel viisidel: määrake taane lõigu all- või ülaosas, määrake see protsentides, pikslites või em.

Kõige tähtsam on see, et brauser mängib nüüd meie reeglite järgi, mitte meie selle reeglite järgi. Otsustasin seda teha järgmiselt:

* ( veeris: 0; täidis: 0; ) p ( veeris: 5px 0 10px 0; )

Selle tulemusena saime selle, mida võib näha kolmandas näites.

Kui lahendate oma projektis konkreetset probleemi, saate luua oma lähtestamisstiile. Vaatamata sellele ei ole samm-sammult juhend oma CSS-i lähtestamise loomisel. Toetuge oma põhimõtetele ja oma stiilile.

Õige valiku hõlbustamiseks on siin veel paar linki:

1. Less is more – minu valik Reset CSS (Ed Elliott).

2. CSS-i lähtestamine on esimene asi, mida brauser nägema peaks

Stiilide lähtestamine pärast elementide jaoks oma stiilide määramist on vale lähenemine. Sel juhul ei tasu brauseri kuvalt midagi head oodata. Pidage meeles, et esmalt peaksite alati kaasama CSS-i lähtestamise ja seejärel kõik muud stiilid.

Jah, ma saan aru, see kõlas naljakalt, kuid see on noorte ja vanade arendajate üks peamisi vigu. Paljud inimesed lihtsalt unustavad selle.

Mõni võib küsida loogilise küsimuse: miks see nii juhtub? Vastus on lihtne: reeglid, mis on kirjutatud CSS-faili tekstis madalamale (ja veelgi madalamale nende järjekorras dokumendis), kirjutavad varem deklareeritud reeglid üle.

Ärgem kaldugem teemast liiga kaugele ja jätkakem. Rakendame oma näites Eric Meyeri stiile, kuid pärast meie omaduste kirjeldused, nagu on näidatud näites 4. Matemaatikud ütleksid järgmist: "See on see, mida me pidime tõestama."

3. Kasutage CSS-i lähtestamiseks eraldi CSS-dokumenti

Ma pean (ei, ma ei olnud mingil juhul sunnitud) seda nõuannet mainima. Eraldi faili kasutamine CSS-i lähtestamiseks on levinud tava, mida toetavad paljud arendajad.

Tegelikult võtan ma loomispositsiooni üks suur CSS-fail selle lähenemisviisi suurema jõudluse tõttu. Aga sisse see küsimus Kaldun enamusega nõustuma: CSS Reset tuleks üle viia eraldi fail(tavaliselt nimetatakse reset.css). Sel juhul saate seda kasutada erinevates projektides, ilma et peaksite seda teistest CSS-i reeglitest eraldama.

4. Püüdke vältida universaalse valija kasutamist

Kuigi see kontseptsioon töötab, ei ole selle kasutamine mõne brauseriga ühilduvuse tõttu sageli soovitav (näiteks ei töödelda seda valijat Internet Exploreris õigesti). Seda tehnikat peaksite kasutama ainult lihtsate, väikeste, staatiliste ja etteaimatavate lehtede jaoks (kui peaksite seda tegema).

See nõuanne on eriti oluline, kui töötate välja lahendusi, näiteks CMS-i teemasid. Te ei saa ette ennustada, kuidas seda kasutatakse või kuidas seda muudetakse. Parem on kirjeldada kõigi elementide CSS-i põhireegleid, kui kasutada selleks ettearvamatut (kuigi väiksemat) universaalsete selektorite mehhanismi.

5. CSS-i lähtestamise kasutamisel vältige üleliigseid atribuutide kirjeldusi

Teine põhjus, miks mulle ei meeldi CSS-i lähtestamise jaoks eraldi fail, on järgnevate CSS-i atribuutide deklaratsioonide võimalik liiasus. Teie individuaalsete stiilide kordamine kogu CSS-failide hulgas on halvad kombed ja seda tuleks vältida. Muidugi oleme mõnikord liiga laisad, et stiile hoolikalt läbi vaadata ja mõnda neist kombineerida, kuid me peaksime vähemalt proovima!

Läheme tagasi Ericu CSS-i lähtestamise juurde. See määrab elemendi joone kõrguse, värvi ja tausta vaikeväärtused keha järgmisel viisil:

korpus (joone kõrgus: 1; värvus: must; taust: valge; )

Oletame, et teate juba, milline element välja näeb keha:

1. taustavärv: #cccccc;
2. värv: #996633;
3. Soovite korrata teatud taustpilti horisontaalselt.

Sel juhul ei ole vaja oma omaduste kirjeldamiseks uut valijat luua – saate need lihtsalt lisada CSS-i lähtestamisele. Teeme seda:

keha ( joone kõrgus: 1; värv: #996633; taust: #ccc url(tiled-image.gif) kordus-x üleval vasakul; )

Ärge kartke CSS-i lähtestamist ise muuta. Kohandage see enda jaoks, pange see enda kasuks tööle. Muutke, korraldage ümber, eemaldage ja lisage vastavalt vajadusele teie konkreetsel juhul.

Eric Meyer ütles selle kohta järgmist: "See ei ole juhtum, kus kõik peaksid kasutama CSS-i lähtestamist ilma muudatusteta."