Visi puslapių HTML elementai turi specifines reikšmes. Ir, deja, skirtingos naršyklės juos interpretuoja ne taip pat. Dėl to nukenčia svetainės dizainas, keičiant naršyklę (interneto naršymą) keičiasi jos dizainas. Stiliaus pašalinimo procedūros tikslas – pakeisti naršyklės nepatogumus tokiais klausimais kaip eilučių aukštis, paraštės, antraštės šrifto dydžiai ir kt.
Scenarijų programos, skirtos CSS stiliams atsisiųsti
Manau, kad kiekvienas save gerbiantis žiniatinklio valdytojas yra atsakingas už savo CSS kodo rašymą. Jei esu kitokio požiūrio gerbėjas, priimkite paruoštą sprendimą, pateikite paraišką dėl kažko naujo ir patenkinkite savo poreikius.
Eric Meyer CSS nustatymas iš naujo
Erico Meyerio parašytas scenarijus, paties autoriaus žodžiais, yra neįtikėtinai baisus. Pavyzdžiui, kūno elementui nėra užduočių, nesvarbu, kokia spalva dekoruotas fonas. Todėl, atsižvelgiant į jūsų poreikius, gali būti pakeitimų, modifikacijų, išplėtimų ir kitų koregavimų. Pridėkite reikiamas spalvas šonams.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licencija: nėra (viešasis domenas) */ html, body, div, span, programėlė, objektas, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronimas, adresas, didelis, cituoti, kodas, del, dfn, em, img, ins, kbd, q, s, samp, mažai, streikuoti, stiprus, sub, sup, tt, var, b, u, i, centras, dl, dt, dd, ol, ul, li, laukų rinkinys, forma, etiketė, legenda, lentelė, antraštė, tbody, tfoot, thead, tr, th, td, straipsnis, nuošalyje, drobė, detalės, įterpti, paveikslėlis, antraštė, poraštė, antraštė, hgroup, meniu, navigacija, išvestis, rubinas, sekcija, santrauka, laikas, ženklas, garsas, vaizdo įrašas ( paraštė: 0; užpildymas: 0; kraštinė: 0; šrifto dydis: 100 %; šriftas: paveldėti; vertikalus lygiavimas : pagrindinė linija ; ) /* HTML5 rodymo vaidmens nustatymas iš naujo senesnėms naršyklėms */ straipsnis, nuošalyje, detalės, paveikslo antraštė, paveikslėlis, poraštė, antraštė, hgroup, meniu, naršymas, skyrius ( ekranas: blokas; ) tekstas ( eilutės aukštis: 1 ; ) ol, ul ( sąrašo stilius: nėra; ) blockquote, q (kabutės: nėra; ) blockquote:prieš, blockquote:after, q:prieš, q:after ( turinys: ""; turinys: nėra; ) lentelė ( border- griūti: griūti; tarpas tarp kraštinių: 0; )
Yahoo! (YUI 3) Iš naujo nustatykite CSS
YUI 3 CSS stiliaus išmetimas pagerina puikų HTML elementų stilių naršyklėse, taip pat kitus CSS išmetimo scenarijus, kad būtų sukurtas patikimas svetainių ir svetainių kūrimo pagrindas.
/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Visos teisės saugomos. Licencijavimas pagal BSD licenciją. http://yuilibrary.com/license/ */ /* TODO reikia pašalinti HTML nustatymus, nes negalime pakeisti vardų vietos color:#FFF ) /* TODO pašalinti nustatymus iš BODY negaliu pavadinti tai */ /* TODO testas, įdėdamas klasę į HEAD – nepavyksta FF, dl, dt, ul, ol, li, h1, h2, h3, h4, h6. , pre, kodas, forma, laukų rinkinys, legenda, įvestis, teksto sritis, p, citata, th, td ( paraštė: 0; užpildymas: 0; ) lentelė ( border-collapse: colapse; border-spacing: 0; ) fieldset , img ( border:0; ) /* TODO pagalvokite apie paveldėjimo tvarkymą kitaip, galbūt leiskite IE6 šiek tiek sugesti... */ adresas, antraštė, citata, kodas, dfn, em, strong, th, var ( šrifto stilius: normalus; šrifto svoris: normalus svoris:normal align:text-top ) sub (vertikalus lygiavimas:tekstas apačioje; ) įvestis, teksto sritis , pasirinkite ( šrifto šeima: paveldėti; šrifto dydis: paveldėti; šrifto svoris: paveldėti; *šrifto dydis: 100%; /*kad būtų galima keisti IE dydį*/ ) /*nes legenda ne " paveldėti IE * / legenda ( spalva: # 000; ) /* YUI CSS aptikimo antspaudas */ #yui3-css-stamp.cssreset ( ekranas: nėra; )
Drop stiliai normalize.css
Normalize.css yra pritaikytas CSS failas, leidžiantis naršyklėms nuosekliau ir atitinka dabartinius standartus rodyti visus elementus. Autoriai stebėjo skirtingų naršyklių stilių skirtumus, kad nustatytų, kuriuos stilius reikėtų normalizuoti.
/*! normalize.css v6.0.0 | MIT licencija | github.com/necolas/normalize.css */ /* Dokumentas ===================================== = ======================================= */ /** * 1. Pataisykite eilutę aukštis visose naršyklėse. * 2. Galite koreguoti fono vaizdus po orientacijos pakeitimo IE sistemoje Windows Phone ir iOS. */ html ( eilutės aukštis: 1,15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Skyriai ================================================ = ========================== */ /** * Pridėkite tinkamą ekraną IE 9-. */ straipsnis, nuošalyje, poraštė, antraštė, navigacija, sekcija (rodymas: blokas; ) /** * Pataisykite šrifto dydį ir paraštes „h1“ elementuose „section“ ir * „straipsnio“ kontekstuose „Chrome“, „Firefox“ ir Safari. */ h1 ( šrifto dydis: 2 em; paraštė: 0,67 em 0; ) /* Turinio grupavimas ============================ = =================================================== ========= */ /** *Pridėkite tinkamą ekraną IE 9-. * 1. IE pridėkite tinkamą ekraną. */ pav. antraštė, paveikslėlis, pagrindinis ( /* 1 */ ekranas: blokas; ) /** * Įtraukite teisingą paraštę IE 8. */ paveikslėlis ( paraštė: 1em 40 piks.; ) /** * 1. Pridėkite tinkamą laukelį dydžio nustatymas „Firefox“. * 2. Perpildymo ekranas Edge ir IE. */ val (dėžutės dydis: turinio dėžutė; /* 1 */ aukštis: 0; /* 1 */ perpildymas: matomas; /* 2 */ ) /** * 1. Pataisykite šrifto dydžio paveldėjimą ir mastelį visose naršyklėse. * 2. Pataisykite nelyginį šrifto dydį „em“ visose naršyklėse. */ pre ( šriftų šeima: vienkartinė, vienareikšmė; /* 1 */ šrifto dydis: 1em; /* 2 */ ) /* Teksto lygio semantika =============== =================================================== === ========= */ /** * 1. Pakeiskite IE 10 funkcijų juodą foną */ a (fono spalva: skaidrus; /* 1 */ -webkit-text-decoration -skip: objects ; /* 2 */ ) /** * 1. Pašalinkite apatinę kraštinę „Chrome 57-“ ir „Firefox 39-“. * 2. Pridėkite tinkamą dekoravimo tekstą naršyklėse „Chrome“, „Edge“, IE, „Opera“ ir „Safari“. */ abbr ( kraštinė-apačia: nėra; /* 1 */ text-decoration: pabraukimas; /* 2 */ text-decoration: pabraukimas taškuotas; /* 2 */ ) /** * Apsaugokite nuo pasikartojančio `bolder taikymo ` pagal kitą taisyklę „Safari 6“. */ b, strong ( šrifto svoris: paveldėti; ) /** * Pridėkite tinkamą šrifto svorį „Chrome“, „Edge“ ir „Safari“. */ b, stiprus ( šrifto svoris: paryškintas; ) /** * 1. Pataisykite šrifto dydžio paveldėjimą ir mastelį visose naršyklėse. * 2. Pataisykite nelyginį šrifto dydį „em“ visose naršyklėse. */ kodas, kbd, samp ( šriftų šeima: vienareikšmė, vienareikšmė; /* 1 */ šrifto dydis: 1em; /* 2 */ ) /** * Pridėkite tinkamą šrifto stilių „Android 4“. 3-. */ dfn ( šrifto stilius: kursyvas; ) /** * Pridėkite tinkamą foną ir spalvą IE 9-. */ pažymėkite (fono spalva: #ff0; spalva: #000; ) /** * Visose naršyklėse pridėkite tinkamą šrifto dydį. */ mažas ( šrifto dydis: 80 %; ) /** * Neleiskite „sub“ ir „sup“ eilučių aukščio * visose naršyklėse. */ sub, sup ( šrifto dydis: 75 %; linijos aukštis: 0; padėtis: santykinė; vertikaliai lygiuoti: bazinė linija; ) sub ( apačioje: -0,25 em; ) sup ( viršuje: -0,5 em; ) /* Įterptasis turinys ================================================= ================ =========================== */ /** * Pridėkite teisingas ekranas IE 9-. */ garsas, vaizdo įrašas ( ekranas: inline-block; ) /** * Pridėkite tinkamą ekraną iOS 4–7. */ audio:not() ( ekranas: nėra; aukštis: 0; ) /** * Pašalinkite vaizdų rėmelius nuorodų viduje IE 10-. */ img ( border-style: none; ) /** * Slėpti perpildymą IE. */ svg:not(:root) ( perpildymas: paslėptas; ) /* Formos ================================ = ================================================== ====== */ /** * Pašalinkite paraštę „Firefox“ ir „Safari“. */ mygtukas, įvestis, pasirinkimo grupė, pasirinkimas, teksto sritis ( paraštė: 0; ) /** * Rodyti perpildymą IE. * 1. Parodykite perpildymą Edge. */ mygtukas, įvestis ( /* 1 */ perpildymas: matomas; ) /** * Pašalinkite teksto transformacijos paveldėjimą Edge, Firefox, IE. * 1. Pašalinkite teksto transformacijos paveldėjimą „Firefox“. */ mygtuką, pasirinkite ( /* 1 */ text-transform: none; ) /** * 1. Užkirsti kelią WebKit klaidai, kai (2) sunaikina vietinius „garso“ ir „vaizdo“ * valdiklius „Android 4“. * 2. Vickorist stilius svarbių tipų iOS ir Safari. */ mygtukas, html , /* 1 */ , ( -webkit-appearance: mygtukas; /* 2 */ ) /** * „Firefox“ pašalinkite vidinę kraštinę ir užpildymą. */ mygtukas::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner /** * Išsaugo fokusavimo stilius, nenustatytus pagal ankstesnę taisyklę . */ mygtukas:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( kontūras: 1px taškuotas ButtonText; ) /** * 1. Vickory tekstas, įterptas į Edge ir IE . * 2. Vickory 'fieldset' elementų barvisibility IE. * 3. Pašalinkite užpildą, kad kūrėjai nesusiję su tuo, o tai reiškia, kad visose naršyklėse nebus pašalintų * „fieldset“ elementų. */ legenda ( dėžutės dydis: rėmelis; /* 1 */ spalva: paveldėti; /* 2 */ ekranas: lentelė; /* 1 */ maksimalus plotis: 100%; /* 1 */ užpildymas: 0 /* 3 */ tarpas: normalus /* 1 */ ) /** * 1. Įtraukite teisingą vaizdą IE 9-. * 2. Prie Chrome, Firefox ir Opera pridėkite tiesių vertikalių skirtukų. */ progresas ( ekranas: inline-block; /* 1 */ vertikalus lygiavimas: bazinė linija; /* 2 */ ) /** * Pašalinkite numatytąją vertikalią slinkties juostą IE. */ textarea ( perpildymas: automatinis; ) /** * 1. Pridėkite tinkamą langelio dydį IE 10-. * 2. Pašalinkite IE 10- kamšalą. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Vickory orientacijos ir atrakinimo mygtukų sąrašas naršyklėje Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( aukštis: automatinis; ) /** * 1. Pataisykite keistą išvaizdą naršyklėse Chrome ir Safari. * 2. Pataisykite kontūro stilių „Safari“. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Pašalinkite smeigtuką ir įgalinkite mygtuką „Chrome“ ir „Safari“ sistemoje „MacOS“. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Pakeiskite stilių į spustelėjamus tipus iOS ir Safari. * 2. „Safari“ pakeiskite šrifto ypatybes į „paveldėti“. */ ::-webkit-file-upload-button ( -webkit-appearance: mygtukas; /* 1 */ šriftas: paveldėti; /* 2 */ ) /* Interaktyvus ============ =================================================== === ============ */ /* * Pridėkite teisingą ekraną IE 9-. * 1. Pridėkite tinkamą ekraną Edge, IE ir Firefox. */ išsami informacija, /* 1 */ meniu ( ekranas: blokuoti; ) /* * Pridėkite teisingą vaizdą visose naršyklėse. */ santrauka ( ekranas: sąrašo elementas; ) /* Scenarijų sudarymas ==================================== = ======================================= */ /** * Pridėkite teisingą vaizdą IE 9-. */ drobė ( ekranas: inline-block; ) /** * IE pridėkite tinkamą ekraną. */ šablonas ( ekranas: nėra; ) /* Paslėptas ======================================= ===================================== */ /** * Pridėkite tinkamą ekraną IE 10 - . */ ( ekranas: nėra; )
Nuleiskite per universalųjį selektorių * (žvaigždutė)
Iš pirmo žvilgsnio gali atrodyti, kad paprasčiausias ir aiškiausias sprendimas yra aprašyti visus HTML elementus ir priskirti jiems reikšmes, jei galite naudoti parinkiklį * ir net išplėsti HTML.
* ( paraštė: 0; užpildymas: 0; )
Deja, tai nėra gera praktika. Labai svarbu, kad naršyklė (tai užtrunka daug laiko, palyginti su kitomis CSS atsisakymo procedūromis) nustatyti taisykles kiekvienam dokumento elementui, ypač didelėse interneto svetainėse, taip pat gali sukurti daug gerų stilių. Užkuliusiuose.
„WordPress“ stiliaus kritimas
Jei norite naudoti vieną iš aprašytų metodų, kad pašalintumėte CSS stilius „WordPress“ svetainėje, galite tai padaryti dviem būdais.
Pirma, atsisiuntimo kodą reikia nukopijuoti į „WordPress“ temų style.css failą (po eilučių apie autorystę jos vadinamos po teksto, įrėminto trupmena ir žvaigždute /* ... */) .
Dėl tokių rangų varžosi labai daug rinkėjų CSS nustatymas iš naujo, paslauga, skirta suprasti skirtingų naršyklių ypatumus. Faktiškai, Šis stiliaus failas visą CSS galią atiduoda kūrėjams. Šiame straipsnyje parodysiu šio failo kodą ir pranešu mums, varto vikorystuvati CSS Reset chi ni.
Aš turiu daug įvairių CSS nustatymas iš naujo, Visa smarvė maždaug vienoda. Galite tai parašyti wiki:
HTML, turinys, div, intervalas, programėlė, objektas, iframe,
h1, h2, h3, h4, h5, h6, p, citata, prieš,
a, santrumpa, akronimas, adresas, didelis, cituoti, kodas,
del, dfn, em, šriftas, img, ins, kbd, q, s, samp,
mažai, streikuoti, stiprus, sub, sup, tt, var,
b, u, i, centras,
dl, dt, dd, ol, ul, li,
laukų rinkinys, forma, etiketė, legenda,
lentelė, antraštė, tbody, tfoot, thead, tr, th, td (
fonas: skaidrus;
kraštinė: 0;
šrifto dydis: 100%;
paraštė: 0;
kontūras: 0;
paminkštinimas: 0;
vertikalus lygiavimas: bazinė linija;
}
kūnas(
linijos aukštis: 1;
}
ol, ul (
sąrašo stilius: nėra;
}
bloko citata, q(
citatos: nėra;
}
blockquote:prieš, blockquote:po,
q:prieš, q:po (
turinys: "";
turinys: nėra;
}
: Fokusas (
kontūras: 0;
}
stalas (
border-collapse: griūtis;
tarpas tarp kraštinių: 0;
}
Aš galvoju, kodėl jo vikoristanas toks mąstantis ir toks protingas, ir kodėl, pavyzdžiui, aš nesu vikoristas, kaip ir daugelis kitų rinkėjų, apie šį varto atpažinimą. Visų pirma, tai viskas labas failas, kitaip, labas valanda obrobkai, bet svarbiausia, kad ji mažiau tiktų gelta sergantiems. Pavyzdžiui, patys lentelės laukai. Ir visi autoritetai buvo už mąstymo ne veltui, bet kaip geriausias variantas įvairių elementų pateikimui. Aš dainuoju tau, nuliodamas kamšalas lentelės viduryje, kurioje viskas rodoma, ją pasuksite pagrindiniame faile. Ir toli gražu nėra faktas, kad yra reikšmingas skirtumas, kas buvo už mąstymo. Išeina ašis, kurią pirmiausia atitraukiame, o tada pasukame. Ir tuo pačiu su pirmaisiais trūkumais (įdomus failas ir įdomus kodas) yra daug maketų ir visai ne vikorys CSS nustatymas iš naujo.
Bet kuriuo atveju, Vikoristano stiliaus lašas nėra vertas Todėl maloniai galite tai pakomentuoti, nes gerbiate, kad supaprastinus svetainės pritaikymą skirtingoms naršyklėms, ji gali lengvai supaprastinti visą maketą.
Dėl to kaltos IE ir Opera Mini šeimos.
Kai kurios IE palaikymo sistemos gali sukelti problemų. Štai būdai, kaip pašalinti kai kuriuos CSS valdiklius jų pagrindinėms reikšmėms:
Iš naujo nustatykite tai ( animacija: nėra; animacijos delsa: 0; animacijos kryptis: įprasta; animacijos trukmė: 0; animacijos užpildymo režimas: nėra; animacijos kartojimų skaičius: 1; animacijos pavadinimas: nėra; animacija- play-state: bėgimas, animacijos laiko funkcija: fono vaizdas: 0 fonas-vaizdas: fonas-padėtis: 0 0; -y: 0: auto border-width: border-bottom-spindulys: 0 border-bottom-width; border-collapse: border-left-style: border-left-width: border-right-color: inherit; kraštinės dešinės stilius: nėra; kraštinė-dešinė-plotis: vidutinis; tarpas tarp kraštinių: 0; kraštinė-viršus: 0; kraštinė-viršutinė spalva: paveldėti; kraštinė-viršus-kairysis-spindulys: 0; kraštinė-viršus-dešinė-spindulys: 0; border-top-stilius: nėra; kraštinės-viršaus plotis: vidutinis; dugnas: automatinis; langelis-šešėlis: nėra; dėžutės dydis: turinio dėžutė; antraštės pusė: viršuje; aišku: nėra; klipas:auto; spalva: paveldėti; stulpeliai: auto; stulpelių skaičius: automatinis; stulpelio užpildymas: balansas; stulpelio tarpas: normalus; stulpelio taisyklė: vidutinė none currentColor; stulpelis-taisyklė-spalva: currentColor; stulpelio taisyklės stilius: nėra; stulpelio taisyklės plotis: nėra; kolonos tarpatramis: 1; stulpelio plotis: automatinis; turinys: normalus; priešpriešinis prieaugis: nėra; priešpriešinis nustatymas iš naujo: nėra; žymeklis: automatinis; kryptis: ltr; ekranas: inline; tuščios ląstelės: rodyti; plūdė: nėra; šriftas: normalus; šriftų šeima: paveldėti; šrifto dydis: vidutinis; šrifto stilius: normalus; šrifto variantas: normalus; šrifto svoris: normalus; aukštis: automatinis; brūkšneliai: nėra; kairėje: auto; tarpai tarp raidžių: normalus; linijos aukštis: normalus; sąrašo stilius: nėra; sąrašo stiliaus vaizdas: nėra; sąrašo stiliaus padėtis: išorėje; sąrašo stiliaus tipas: diskas; paraštė: 0; paraštė-apačia: 0; paraštė-kairė: 0; paraštė-dešinė: 0; paraštė-viršus: 0; maksimalus aukštis: nėra; maksimalus plotis: nėra; min aukštis: 0; min-plotis: 0; neskaidrumas: 1; našlaičių: 0; kontūras: 0; kontūro spalva: apversta; kontūro stilius: nėra; kontūro plotis: vidutinis; perpildymas: matomas; perpildymas-x: matomas; perpildymas-y: matomas; paminkštinimas: 0; paminkštinimas-apačia: 0; paminkštinimas kairėje: 0; pamušalas-dešinė: 0; paminkštinimas-viršus: 0; page-break-after: auto; page-break-for-for: auto; puslapis-break-inside: auto; perspektyva: nėra; perspektyvinė kilmė: 50%; 50 %; padėtis: statinė; /* Gali reikėti skirtingų kabučių skirtingose lokalėse (pvz., fr) */ kabutės: "\201C" "\201D" "\2018" "\2019"; dešinėje: auto; skirtuko dydis: 8; stalo išdėstymas: automatinis; teksto lygiavimas: paveldėti; text-align-last: automatinis; tekstas-dekoravimas: nėra; tekstas-dekoracija-spalva: paveldėti; tekstas-dekoravimo-linija: nėra; tekstas-dekoravimo-stilius: solidus; teksto įtrauka: 0; teksto šešėlis: nėra; teksto transformacija: nėra; top:auto; transformuoti: nėra; transformuoti-stilius: plokščias; perėjimas: nėra; perėjimo delsa: 0s; perėjimo trukmė: 0s; pereinamasis turtas: nėra; perėjimo laiko funkcija: lengvumas; unicode-bidi: normalus; vertikalus lygiavimas: bazinė linija; matomumas: matomas; tarpas: normalus; našlių: 0; plotis: automatinis; žodžių tarpai: normalus; z indeksas: automatinis; /* basic modern patch */ all: inicialinis; visi: nenustatyta; ) /* pagrindinis modernus pataisas */ #reset-this-root ( visi: pradiniai; * ( visi: nenustatyti; ) )
- Atitinkamas „github“ atpirkimo sandoris nuo 2017 m.
Tai buvo nurodyta Koristuvach @user566245 komentaruose:
Iš esmės tai teisinga, tačiau individuali rida gali skirtis. Pavyzdžiui, tam tikri elementai, pavyzdžiui, už sienų esanti tekstilė, sukuria kordoną, sąstingį, keičia tekstinės zonos ribas.
Pridbany, kad taptų dabartine norma, Koristuvach Joost
#reset-this-parent (visi: pradiniai; * ( visi: nenustatyti; ) )
STOCK Z W3
Tai gali būti naudojama pagrindiniam „valdiklio“ elementui, įtrauktam į šoninę juostą, jei nenorite sumažinti šoninės juostos stiliaus. Tačiau atkreipkite dėmesį, kad bet koks šiam elementui pritaikytas stilius „užkulisiuose“ (pvz., pvz.: display: block iš UA stiliaus lentelės bloko elementuose) taip pat bus matomas.
Ar kas nors pagalvojo apie ką nors kita, pavyzdžiui, css, kad būtų galima atsisakyti css? Taigi?
Štai paprastas įrankis:
getElementsByTagName („*“) grąžins visus elementus iš DOM. Tada galite nustatyti odos elemento stilius kolekcijoje:
Var allElements = document.getElementsByTagName("*"); for (var i = 0, len = visiElementai.ilgis; i< len; i++) { var element = allElements[i]; // element.style.border = ... }
Visa tai pasakyta; Nemanau, kad iš tikrųjų įmanoma atsisakyti css, nes neturėsime tik vienos žiniatinklio naršyklės. Jei „naršyklės“ pabaigoje ji bus įdiegta „užkulisiuose“.
Aiškumo dėlei čia pateikiamas Firefox 40.0 verčių sąrašas
de font-style: įstrižas DOM operacijos paleidimas.Lygiuoti turinį: nenustatyta; align-items: unset; align-self: unset; animacija: nenustatyta; išvaizda: nenustatyta; nugaros matomumas: nenustatytas; background-blend-mode: atšauktas; fonas: nenustatytas; įrišimas: nenustatytas; bloko dydis: nenustatytas; border-block-end: unset; border-block-start: unset; border-collapse: unset; border-inline-end: unset; border-inline-start: unset; border-radius: nenustatytas; border-spacing: unset; kraštinė: nenustatyta; apačia: nenustatyta; langelio lygiavimas: nenustatytas; box-decoration-break: unset; dėžutės kryptis: nenustatyta; box-flex: nenustatytas; box-ordinal-group: unset; box-orient: unset; dėžutė-paketas: nenustatytas; langelis-šešėlis: nenustatytas; dėžutės dydis: nenustatytas; antraštės pusė: nenustatyta; aiškus: nenustatytas; klipo kelias: nenustatytas; klipų taisyklė: nenustatyta; klipas: nenustatytas; color-adjust: unset; spalvų interpoliacijos filtrai: išjungtas; spalva-interpoliacija: nenustatyta; spalva: nenustatyta; stulpelio užpildymas: nenustatytas; stulpelio tarpas: nenustatytas; stulpelio taisyklė: nenustatyta; stulpeliai: nenustatyta; turinys: nenustatytas; valdymas-simbolis-matomumas: nenustatytas; priešpriešinis prieaugis: išjungtas; priešpriešinis atstatymas: išjungtas; žymeklis: nenustatytas; ekranas: išjungtas; dominuojantis-bazinis: nenustatytas; tuščios ląstelės: nenustatyta; užpildymo neskaidrumas: nenustatytas; užpildymo taisyklė: nenustatyta; užpildyti: nenustatyta; filtras: išjungtas; lankstus srautas: nenustatytas; lankstus: nenustatytas; plūduriuojantis kraštas: nenustatytas; plūdė: nenustatyta; potvynio spalva: nenustatyta; užtvindymo neskaidrumas: nenustatytas; šriftų šeima: nenustatyta; font-feature-settings: unset; šrifto tarpas: nenustatytas; font-language-override: unset; font-size-adjust: unset; šrifto dydis: nenustatytas; šrifto tempimas: nenustatytas; šrifto stilius: įstrižas; šrifto sintezė: unset; šrifto variantas: nenustatytas; šrifto svoris: nenustatytas; šriftas: ; priverstinai sulaužytas vaizdo piktograma: nenustatyta; aukštis: nenustatytas; brūkšneliai: nenustatyta; vaizdo orientacija: nenustatyta; vaizdo regionas: nenustatytas; vaizdo perteikimas: nenustatytas; ime-mode: išjungtas; eilutinis dydis: nenustatytas; izoliacija: išjungta; Justify-content: unset; Justify-items: unset; pateisinti save: unset; kairėje: nenustatyta; tarpai tarp raidžių: nenustatytas; apšvietimo spalva: nenustatyta; linijos aukštis: nenustatytas; sąrašo stilius: nenustatytas; margin-block-end: unset; margin-block-start: unset; margin-inline-end: unset; margin-inline-start: unset; paraštė: nenustatyta; žymeklis-offset: unset; žymeklis: nenustatytas; kaukės tipas: nenustatyta; kaukė: nenustatyta; maksimalus bloko dydis: nenustatytas; maksimalus aukštis: nenustatytas; maksimalus dydis: nenustatytas; maksimalus plotis: nenustatytas; mažiausias bloko dydis: nenustatytas; min aukštis: nenustatytas; min-inline-size: nenustatytas; min plotis: nenustatytas; mix-blend-mode: atšauktas; objekto pritaikymas: nenustatytas; objekto padėtis: nenustatyta; offset-block-end: unset; offset-block-start: unset; offset-inline-end: unset; offset-inline-start: unset; neskaidrumas: nenustatytas; tvarka: nenustatyta; orientuotis: nenustatytas; kontūro poslinkis: nenustatytas; kontūro spindulys: nenustatytas; kontūras: nenustatytas; perpildymas: nenustatytas; padding-block-end: unset; padding-block-start: unset; padding-inline-end: unset; padding-inline-start: unset; paminkštinimas: nenustatytas; page-break-after: unset; page-break-before: unset; page-break-inside: unset; dažų tvarka: nenustatyta; perspektyva-kilmė: nenustatyta; perspektyva: nenustatyta; rodyklės įvykiai: nenustatyta; padėtis: išjungta; citatos: nenustatyta; keisti dydį: atšauktas; dešinėje: nenustatyta; ruby-align: nenustatyta; rubino padėtis: nenustatyta; slinkties elgsena: nenustatyta; scroll-snap-coordinate: unset; scroll-snap-destination: unset; scroll-snap-points-x: atšauktas; scroll-snap-points-y: nenustatyta; scroll-snap-type: unset; formos perteikimas: nenustatytas; krūvos dydis: nenustatytas; stop spalva: nenustatyta; stabdymo neskaidrumas: nenustatytas; insultas-dasharray: nenustatytas; insultas-dashoffset: nenustatytas; insultas-linecap: nenustatytas; stroke-linejoin: nenustatyta; smūgio-miterriba: nenustatyta; insulto neskaidrumas: nenustatytas; eigos plotis: nenustatytas; smūgis: nenustatytas; skirtuko dydis: nenustatytas; lentelės išdėstymas: nenustatytas; text-align-last: nenustatyta; teksto lygiavimas: nenustatyta; text-inchor: unset; text-combine-right: unset; text-decoration: unset; teksto paryškinimo padėtis: nenustatyta; teksto pabrėžimas: unset; teksto įtrauka: nenustatyta; teksto orientacija: nenustatyta; text-overflow: unset; teksto atvaizdavimas: nenustatytas; teksto šešėlis: nenustatytas; text-size-adjust: unset; text-transform: unset; viršuje: nenustatyta; transform-origin: unset; transform-style: unset; transformuoti: atšaukta; perėjimas: nenustatytas; vartotojo fokusavimas: nenustatytas; vartotojo įvestis: nenustatyta; vartotojo modifikuoti: atšaukta; vartotojo pasirinkimas: nenustatyta; vektorinis efektas: nenustatytas; vertikalus lygiavimas: nenustatytas; matomumas: nenustatytas; tarpas: nenustatytas; plotis: nenustatytas; keisis: nenustatytas; lango vilkimas: nenustatytas; word-break: unset; žodžių tarpai: nenustatytas; word-wrap: unset; rašymo režimas: išjungtas; z indeksas: nenustatytas;
Autoriaus požiūris: Gyvenimas svetainėje Merežyje panašus į gyvenimą sudėtingame smėlyje. Naršyklės vis dar veikia taip pat, tačiau kartais joms nepavyksta parodyti neperduotų kredencialų. Pavyzdžiui, visos naršyklės turi „vartotojo agento stiliaus lapą“ – tam skirtų CSS stilių rinkinį, kad antraštė atrodytų kaip antraštė ir pan., net prieš priskiriant šoninius stilius1. Žinoma, odos naršyklės variklyje valymo procese bus šiek tiek žudynių.
Viena iš programų naudojo sąrašo stilių lapus, o naršyklės stilių lapuose „Internet Explorer“ ir „Opera“ naudojo sąrašo paraštę kairėje: 30 pt;, o „Firefox“ ir KHTML naudojo užpildymo kairę: 40 pikselių;. Jei norėjote pakeisti įvestį į ul (padding-left: 0;), tai davė skirtingus rezultatus naršyklėse.
SKID WEEKEND NALASHTUVAN CSS
Norėdamas pasiekti šiek tiek stabilumo, kaip kūrėjas pašalinu visus laukus ir naudoju papildomą universalų parinkiklį:
* (paraštė: 0; užpildymas: 0;)
* ( paraštė : 0 ; užpildymas : 0 ; )
Pasiekę sąrašą ir iš jo nuskaitę savo stiliaus lapą, pasirinksite tuos, kuriuos radote. Tačiau sąstingis * reiškė, kad laukas ir įėjimas „įkrito“ visiems elementams ir, kai tik pridėjote formos elementą, tapo dar sunkiau.
Atkūrimo tikslas – atkurti viską, kas įmanoma... [i] tapti jūsų galingų pagrindinių stilių atskaitos tašku- Erikas Mejeris
html, body, div, span, programėlė, objektas, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronimas, adresas, didelis, cituoti, kodas, del, dfn, em, img, ins, kbd, q, s, samp, vyras, smūgis, stiprus, sub, sup, tt, var, b, u, i, centras, dl, dt, dd, ol, ul, li, lauko rinkinys, forma, etiketė, legenda, lentelė, antraštė, tbody, tfoot, ad, tr, th, td, straipsnis, nuošalyje, drobė, informacija, įterpti, paveikslėlis, antraštė, poraštė, antraštė, h grupė, meniu, navigacija, išvestis, rubinas, skyrius, santrauka, laikas, ženklas, garso įrašas, vaizdo įrašas ( paraštė: 0; užpildymas: 0; kraštinė: 0; šrifto dydis: 100 %; šriftas: paveldėti; vertikalus lygiavimas: pagrindinė linija; )
html, kūnas, div, span, programėlė, objektas, iframe,
h1, h2, h3, h4, h5, h6, p, citata, prieš,
a, santrumpa, akronimas, adresas, didelis, cituoti, kodas,
del, dfn, em, img, ins, kbd, q, s, samp,
mažas, smūgis, stiprus, sub, sup, tt, var,
b, u, i, centras,
dl, dt, dd, ol, ul, li,
laukų rinkinys, forma, etiketė, legenda,
lentelė, antraštė, tbody, tfoot, thead, tr, th, td,
straipsnis, nuošalyje, drobė, detalės, įterpti,
figūra, antraštė, poraštė, antraštė, h grupė,
meniu, navigacija, išvestis, rubinas, skyrius, santrauka,
laikas, ženklas, garsas, vaizdo įrašas (
paraštė: 0;
paminkštinimas: 0;
kraštinė: 0;
šrifto dydis: 100%;
šriftas: paveldėti;
vertikalus lygiavimas: bazinė linija;
Svarbu sumažinti daugelio (arba ne visų) elementų galią iki paprasto teksto atitikmens. Fragmentai išmesti iš tų pačių elementų, tokiu būdu galima išvengti problemos * (paraštė: 0; užpildymas: 0;). Tada galime apibrėžti šių atmestų „negaliojančių“ autoritetų stilius, būdami tikri, kad jie bus stabilūs įvairiose naršyklėse. Šis stilių atpažinimas taip pat yra paklausos rodiklis nustatant panašius šių elementų stilius.
SKIDANNYA NALASHTUVAN CSS PROBLEMOS
CSS atsisakymas buvo gera idėja, tačiau tuo pat metu, ypač kadrų-kadrų protui, jie dažnai naudojami kaip pakaitalas. Pavyzdžiui, Erikas manė, kad kiti mažmenininkai pradės naudoti svetaines remdamiesi šiais nuolaidų stiliais, todėl jiems tai turės įtakos, o pirmoji Meyer Reset versija iš karto įtraukė šią taisyklę:
/* atminkite, kad reikia nustatyti fokusavimo stilius! */ :focus ( kontūras: 0; )
Deja, realybėje ne visi priskyrė stilius, į kuriuos reikėtų atkreipti dėmesį, o Erikas tai matė iš kitos versijos.
Praleiskite zastosovuyuchi, pajusite, kad turite šiek tiek duonos. Atmetus naršyklės stilius apdorojimui, sunku nustatyti tų, kurie yra atsakingi už odos elemento išvaizdą, dydį, o tai taip pat padeda persijungti, kad elementai būtų įstrigę už semantikos, o ne dekoravimui. Tačiau i ir em tipų elementų naršyklės stilius yra toks pat. Kiti naršyklės stiliai, pavyzdžiui, juokingai didelis antraštės tekstas, pasikeitė ir tapo nepakeliami. Problemų kyla, jei norite išsaugoti išmestą HTML elementą po perkėlimo nenaudodami nurodytų „neįkyrių“ metimo stilių.
Mažiausia su nuolaidomis susijusi problema yra nukritimas, dėl kurio naršyklės įrankiuose atsiranda šiukšlių. Jei bandote pašalinti giliai įdėto elemento CSS problemą kieno nors kito kode, negalime jums padėti:
CSS taisyklės, kurios kartojasi suglaudinant
NORMALIZUOTI.CSS
Nicholasas Gallagheris ir Jonathanas Nealas sukūrė kitokį požiūrį, naudodami Normalize.css – „mažą CSS failą, kuris užtikrina nuoseklų HTML elementų stilių įvairiose naršyklėse“. Kaip ir CSS nuolaidos, tai suteikia mums patikimą pradžios tašką įvairiose naršyklėse – pirmiausia tai yra pagrindinė nuolaidų trūkumo priežastis, tačiau šie du požiūriai skiriasi filosofiniu požiūriu.
CSS lašas gali būti naudojamas agento stiliui sukurti ir anoniminiams elementams pasukti į „nestilių“ būseną, kurioje galite saugiai būti. Tačiau tada turime atpažinti daugumos elementų stilius, kad galėtume juos naudoti. „Normalize.css“ tikslas yra skirtas tik kūrėjo agento stilių neatitikimams, pasirenkant tinkamiausius parametrus atsižvelgiant į aplinkybes, kuriose jis slypi. Čia taip pat turime visiškai saugų kelių naršyklių pagrindą, kuris apima normalizuotus klientų agentų stilius, paruoštus pagrindinių statybinių medžiagų kūrimui. Pagrindinis dėmesys skiriamas idealizuotai kelių naršyklių stiliaus lapo versijai, pagrįstai CSS 2.1. Abiem atvejais prie sukurto vaizdo turime pridėti daugiau dominuojančių stilių, kitu atveju, jei prarasime naršyklės pritaikymą Normalize.css, turėsime pridėti mažiau stilių.
Normalize.css pakeitimai yra tikslesni, jūsų naršyklės kūrimo įrankiai neturi perrašomų taisyklių. Paprastos ul: ašis, „sutrikęs“, kad padėtų Meyer Reset ir Normalize.css 1 ir 2 versijos:
Netvarkingo sąrašo elementas „Patrinimai“.
Meyer Reset
Zastosovamo Normalize.css v1
Taikant Normalize.css v2
Atrodo, kad filosofija skiriasi, jei „Meyer Reset“ programa rodoma kaip pora paprasto teksto eilučių be paraščių ar žymeklių, tada „Normalize.css“ programa yra panaši į stilius, esančius už įpakavimo. Stilių, kurie buvo konsoliduoti iki šio lygio, skirtumus galima lengvai atskirti.
Tačiau ne visi stiliai įtraukti į ul. Aiškumo dėlei nufotografuokite tą pačią „bauginančią“ ekrano kopiją kartu su matomais agento „Firefox 21“ ir „Opera Next 15“ stiliais.
Skidannya CSS(stilių pašalinimas) – tai reiškia papildomų CSS ir kitų HTML elementų parametrų, kuriuos naršyklės nustato reklamai, panaikinimą. Pavyzdžiui, prieš tokius elementus galite pridėti pastraipas (žymas), kuriose dažniausiai yra ne nulis vertikalių laukų (CSS), sąrašus (žymes), kuriuose yra ne tik laukai, bet ir to paties tipo žymekliai (CSS) ir kt. .
Dabar pagalvokime, ko mums reikia, kai atsisakome CSS, ką galime jam duoti? Gera žinoti, kad sudeginote savo svetainės puslapius ir nepakeitėte pastraipų laukų, kuriuos nurodė naršyklės, nes jūs visiškai kontroliuojate jų dydį. Bet pasakykite man, mielai, kodėl manėte, kad visos pasaulio naršyklės, kurios jau egzistuoja ir vis dar atsiranda, sukuria tokio dydžio laukus? Be to, kodėl tikite, kad tos naršyklės, kuriose išbandėte išdėstymą, nekeičia šių laukų dydžio dabartinėse versijose arba nepašalina jų būsimose versijose? Ar galite užuosti tai, ką užuodžiate?
Taigi, ištrindami CSS, maketuotojai tiesiog apsisaugo nuo tokių neatitikimų, pirmiausia išvalydami visas „kritines“ CSS valdiklių reikšmes nuo elementų, o tada, jei reikia, prideda jas atgal, net su savo matmenimis. Taigi galime priminti, kad svetainė visose naršyklėse atrodo vienoda. Stilių, žinoma, galima netrinti, o tiesiog išdėstymo metu nustatyti reikiamus parametrus elementams ir čia yra rizika, kad čia viskas bus išleista ir kitą akimirką viskas bus „papildyta“.
Remiantis tuo, kas išdėstyta aukščiau, viena iš CSS ypatybių yra ta, kad po jo užšaldymo daugelis HTML elementų praranda savo pirminę išvaizdą. Ir nors paraščių praradimas pastraipose pradedantiesiems yra visiškai suprantamas, pavyzdžiui, tai, kad už papildomų žymų ar rapport sukurti mygtukai tapo panašesni į originalų tekstą, yra visiškas nusivylimas. Tačiau apgaudinėti nereikia, net ir šiam tikslui stiliai nukainoti, kad maketuotojas vėliau nepamirštų jų įvesti dar kartą.
Būdų pakeisti stilių yra labai daug, o kurį pasirinksite, priklauso nuo jūsų, tačiau galiu pasakyti vieną dalyką – geriausias būdas yra tas, kurį susikūrėte pats, pasikliaudamas savo žiniomis ir žiniomis. Jei dar neturite tokios informacijos, galite greitai pereiti prie vienos iš toliau pateiktų parinkčių.
Pirmiausia būtinai nurodykite CSS siuntimo į pagrindinį kodą stilius, kitaip veiksmai su parametrais gali būti neapdorojami per stiliaus prioritetus, kuriuos įdiegia naršyklės apdorodamos HTML puslapį ir CSS kodą.
Skid CSS universalaus selektoriaus pagalba
* (šriftų šeima: paveldėti; /* visi elementai sumažinami pagal jų šriftą */ šrifto stilius: paveldėti; /* vaizdas sumažintas */ šrifto svoris: paveldėti; /* svoris sumažinamas */ vertikaliai lygiuoti: bazinė linija /* vertikalus lygiavimas pagal pagrindinę liniją */ šrifto dydis: 100% */ fonas: skaidrus /* visų vaizdo elementų fonas /* pasirenkami kontūrai; paraštė: 0 /* pasirinkite laukus */ užpildymas: 0;Užpakalio aprašymas
Kieno užpakalis už pagalbą universalus selektorius Nurodyti stiliai nedelsiant taikomi visiems HTML elementams, kurie bus puslapyje. Kaip matote, dauguma galių yra skirtos draudimo tikslais, todėl jų reikšmės parodo, kaip naršyklės gali atitinkamai įgyvendinti CSS specifikacijas. Bet kaip jau žinote, praktiškai viskas yra ne taip, o kadangi visose šiuolaikinėse naršyklėse galią efektyviai sumažina jų tėvų elementai, patys išoriniai laukai, nurodyti CSS galios, iš pradžių ne visada yra vienodi. iki nulio.
O kadrų (CSS) ir kontūrų (CSS) dydžio ašis pagal nutylėjimą neviršija nulio, bet ir specifikacijos. Tačiau ši veikla buvo iš naujo nustatyta į nulį, todėl maketuotojas nepamiršo aiškiai nurodyti, kur jos reikės.
Išmeskite CSS iš Yahoo!
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,laukų rinkinys,įvestis,teksto sritis,p,blockquote,th,td ( paraštė: 0; užpildymas: 0; ) fieldset,img,abbr,akronimas (kraštinė: 0; ) adresas,antraštė,cita,kodas,dfn,em,strong,th,var (šrifto stilius: normalus; šrifto svoris: normalus; ) lentelė ( border-collapse: colapse; /* tarpas tarp vidurinės lentelės */ border-spacing: 0; /* išvalomas tarpas tarp vidurio */ ) caption,th ( text-align: left; /* sulygiuoti tekstą su kairėje */ ) ol,ul ( sąrašo stilius: nėra; /* sąrašo žymeklių pasirinkimas */ ) h1,h2,h3,h4,h5,h6 (šrifto dydis: 100%; šrifto svoris: normalus; ) q: before,q :after ( turinys: ""; /* iškreipia Q žymos letenas */ )Užpakalio aprašymas
„Yahoo“ kompanija neseniai sukūrė savo stilių atmetimo parinktį. Čia jau keičiasi konkrečių elementų galia, o tai leidžia lanksčiau valdyti išorinę išvaizdą. Pavyzdžiui, čia žymekliai yra sutvarkyti iš sąrašų, o žyma yra už papildomos CSS galios. Šio metodo pranašumai yra akivaizdūs, o trūkumų ašis gali apimti daugiau ir kartais perteklinį kodą. Tačiau niekas nereikalauja, kad pakeistumėte CSS pagal savo poreikius. Taip, galite pašalinti dalykus, kurių jums nereikia žymų parinkikliai arba ne tik sutvarkyti letenas, bet iš karto suteikti joms reikiamą naują išvaizdą.
Ericas Meyeris CSS
html,body,div,span,programėlė,objektas,iframe,h1,h2,h3,h4,h5,h6,p, blockquote,pre,a,abbr,akronimas,adresas,didelis,cituoti,kodas,del,dfn, em,img,ins,kbd,q,s,samp,mažas,strike,stiprus,sub,sup,tt,var,b,u,i,centras,dl,dt,dd,ol,ul,li,laukų rinkinys, forma,etiketė,legenda, lentelė,antraštė,tbody,tfoot,thead,tr,th,td,straipsnis,nuošalyje,drobė,informacija,įterpti,figūra,figantraštė,poraštė,antraštė,h grupė,meniu,nav, išvestis,rubinas, skiltis,santrauka,laikas,ženklas,garsas,vaizdo įrašas ( paraštė: 0; užpildymas: 0; kraštinė: 0; šrifto dydis: 100 %; šriftas: paveldėti; lygiavimas vertikaliai: bazinė linija; ) straipsnis, nuošalyje, detalės, antraštė, figūra, poraštė, antraštė, h grupė, meniu, navigacija, sekcija ( ekranas: blokas; /* bloko elementai reikalingi (senesnėms naršyklėms) */ ) turinys ( eilutės aukštis: 1; /* tarpai tarp eilučių teksto puslapyje * / ) ol ,ul ( sąrašo stilius: nėra; ) blockquote:before,blockquote:after, q:before,q:after ( turinys: ""; /* Paėmus letenas iš Q ir BLOCKQUOTE */ turinys: nėra; / * pridėta tikslumui */ ) blockquote,q ( kabutės: nėra; /* kitas būdas sutvarkyti */ ) lentelė ( border-collapse: colapse; tarpas tarp kraštinių: 0; )Užpakalio aprašymas
Kitas būdas atsisakyti CSS yra paskelbti Eric Meyer – populiarų internetinį žurnalą. Čia jau pridėjote nuolaidų stilių žymoms iš HTML 5, kuriuos, beje, šio straipsnio rašymo metu vis dar menkai palaikė dabartinės naršyklės. Na, pirmiausia reikia stebėtis ateitimi, tiesa?
Tiesą sakant, šį straipsnį būtų galima tęsti neribotą laiką, nes, kartoju paskutinį kartą, maketuotojas tinkamu momentu ateis į savo nuolaidos variantą, arba ne vikorystvoy yogo zagali, pasikliaudamas savo pagarba.
