تنظیم مجدد CSS (سبک های بازنشانی) صفر است با استفاده از CSS، برخی از پارامترهای عناصر HTML که مرورگرها به طور پیش فرض نصب می شوند. به عنوان مثال، این عناصر عبارتند از پاراگراف ها (برچسب)، که در ابتدا میدان های عمودی غیر صفر (CSS)، لیست های برچسب گذاری شده (برچسب)، که دیگر زمینه های دیگر نیست، بلکه یک نشانگر خاص (CSS) و غیره وجود دارد.

حالا بیایید فکر کنیم آنچه شما به این تنظیم مجدد CSS نیاز دارید، چه چیزی می تواند به ما بدهد؟ خوب، تصور کنید که صفحات سایت خود را تحسین کنید و در عین حال زمینه های پاراگراف هایی را که مرورگرهای ارائه شده به طور پیش فرض ارائه شده، تغییر نکرده اند، زیرا اندازه آنها به طور کامل مرتب شده است. اما به من بگویید، لطفا، و کجا تصمیم گرفتید که تمام مرورگرهای جهان، که قبلا وجود داشته و هنوز ظاهر شوند، زمینه های مشابه را ایجاد می کنند؟ علاوه بر این، چرا شما فکر می کنید که مرورگرهایی که در آن طرح شما را آزمایش کرده اید، در آنها تغییر نخواهد کرد نسخه های بعدی اندازه این زمینه ها به طور کامل حذف نمی شود؟ احساس بویایی دارید؟

بنابراین، پرتاب CSS، آیه ها به سادگی از چنین سوء تفاهم ها محدود می شوند، یعنی آنها ابتدا تمام مقادیر "انتقادی" خواص CSS را بازنشانی می کنند، و سپس آن را به عقب اضافه می کنند، اما با اندازه های خود را اضافه می کنند. بنابراین، شما می توانید مطمئن باشید که در تمام مرورگرها این سایت به همان اندازه نگاه خواهد کرد. شما قطعا می توانید سبک ها را بازنشانی نکنید، اما به سادگی در طول طرح، پارامترهای لازم را به موارد تعیین کنید، اما خطر وجود دارد که جایی چیزی از دست رفته و در یک نقطه خاص، همه چیز شکسته خواهد شد.

بر اساس موارد فوق، یکی از ویژگی های تسکین CSS این است که پس از استفاده از آن، بسیاری از عناصر HTML ظاهر معمول خود را از دست می دهند. و اگر از دست دادن زمینه های پاراگراف برای مبتدیان باشد، چیزی انتظار می رود برای مبتدیان، سپس به عنوان مثال، این واقعیت که دکمه های ایجاد شده از برچسب ها و یا به طور ناگهانی تبدیل به خارج از متن معمول تبدیل شده است - یک شگفتی کامل است. اما این نباید خجالت بکشد، زیرا برای این سبک ها و تنظیم مجدد، به طوری که Pedigreer پس از آن فراموش نکنید که آنها را در یک جدید مشخص کنید.

راه های زیادی برای بازنشانی سبک ها وجود دارد، و چه چیزی را انتخاب می کنید - این بستگی به شما دارد، اما من می توانم به شما بگویم - بهترین بازنشانی یکی است که شما خود را بر اساس تجربه و عادات خود ایجاد کرده اید. اگر هنوز چنین تجربه ای ندارید، می توانید از یکی از گزینه های زیر استفاده کنید.

همیشه سبک ها را برای بازنشانی CSS در ابتدای کد مشخص کنید، در غیر این صورت برخی از پارامترها ممکن است کار نمی کنند زیرا اولویت های سبککه هنگام پردازش صفحه HTML و کد CSS، مرورگرهای نصب شده اند.

تنظیم مجدد CSS با یک انتخاب جهانی

* (Font-family: به ارث؛ / * تمام عناصر از هدست فونت پدر و مادر خود را به ارث برده * / فونت سبک: به ارث برده؛ / * به ارث بردن طراحی * / فونت وزن: به ارث برده؛ / * به ارث بردن چربی * / عمودی-align: پایه؛ / * تراز عمودی عمودی * / فونت اندازه: 100٪؛ / * اندازه فونت 100٪ * / پس زمینه: شفاف؛ / * پس زمینه تمام عناصر شفاف * / مرز: 0؛ / * حذف قاب * / طرح: 0؛ / * خطوط را حذف کنید * / حاشیه: 0؛ / * حذف زمینه ها * / padding: 0؛ / * حذف EDENTS * /)

شرح مثال

در این مثال با انتخاب جهانی سبک های مشخص شده بلافاصله در تمام عناصر HTML که در صفحه حضور دارند، تنظیم مجدد می شوند. همانطور که می بینید، بیشتر خواص دقیقا برای شبکه ایمنی، به عنوان مقادیر آنها مشخص شده است و به طوری که مرورگرها باید به طور پیش فرض با توجه به مشخصات CSS جایگزین شوند. اما همانطور که قبلا می دانید، در عمل، این همه کاملا متفاوت است و اگر اموال در واقع توسط عناصر از والدین خود در تمام مرورگرهای پیشرو به ارث برده شود، همان فیلدهای خارجی مشخص شده توسط اموال CSS همیشه در ابتدا برابر صفر نیستند.

اما اندازه چارچوب (CSS) و خطوط (CSS) به طور پیش فرض صفر نیست، اما در حال حاضر با توجه به مشخصات. با این حال، ضخامت آنها تنظیم مجدد شد، به طوری که اندازه گیری فراموش نکنید که آن را به وضوح مشخص کنید که در آن ضروری است.

بازنشانی CSS از یاهو

بدن، DIV، DL، DT، DD، UL، OL، LI، H1، H2، H3، H4، H5، H2، H4، H5، H6، پیش، فرم، فیلد، ورودی، textarea، p، blockquote، th، td (حاشیه: 0؛ Padding: 0؛) Fieldset، IMG، ABBR، Acronym (Border: 0؛) آدرس، عنوان، CITE، CODE، DFN، EM، Strong، TH، VAR (فونت سبک: طبیعی؛ وزن فونت: عادی؛) جدول (Border-Collapse: Collapse؛ / * مرزهای مشترک برای جداول جداول * / فاصله مرزی: 0؛ / * فاصله صفر بین سلول ها * /) caption، th (text-align: left؛ / * تراز متن به لبه سمت چپ * /) OL، UL (لیست سبک: هیچ؛ / * حذف نشانگرهای لیست * /) H1، H2، H3، H4، H5، H6 (فونت اندازه: 100٪؛ فونت وزن: عادی؛) پرسش: قبل از، Q: بعد از (محتوا: "؛ / * ما نقل قول ها را از برچسب q * /) لغو می کنیم

شرح مثال

یاهو در یک زمان نسخه بازنشانی چشم خود را توسعه داده است. در اینجا، خواص عناصر خاص در حال تغییر است، که باعث می شود انعطاف پذیری بیشتری در کنترل آنها فراهم شود. گونه های خارجی. به عنوان مثال، نشانگرها از لیست ها حذف می شوند و برچسب با استفاده از اموال CSS نقل قول می شود. مزایای این روش واضح است، اما منفی ها شامل کد های فراوان و گاهی اوقات بیش از حد می باشند. اما هیچ کس شما را تغییر نمی دهد تا هر گونه تنظیم مجدد CSS را به نیازهای خود تغییر دهید. فرض کنید شما می توانید برخی از موارد غیر ضروری را حذف کنید. انتخابگر برچسب یا نه فقط نقل قول ها را حذف کنید، اما بلافاصله از آنها ظاهر لازم را بپرسید.

تنظیم مجدد CSS از اریک مایر

HTML، Body، Div، Span، Applet، Object، Iframe، H1، H2، H3، H4، H5، H6، P، Blockquote، Pre، A، Abbr، Acronym، Address، Big، Cite، Code، Del، DFN، EM، IMG، INS، KBD، Q، S، SAMP، کوچک، اعتصاب، قوی، زیر، Sup، TT، VAR، B، U، I، CENTER، DL، DT، DD، OL، UL، LI، Fieldset، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، th، th، td، مقاله، کنار، بوم، جزئیات، قراردادن، شکل، figcaption، footer، header، hgroup، منو، ناوبری، خروجی، روبی، بخش، خلاصه، زمان، علامت گذاری، صوتی، ویدئو (حاشیه: 0؛ Padding: 0؛ مرز: 0؛ فونت اندازه: 100٪؛ فونت: به ارث برده؛ عمودی، جزئیات، جزئیات، جزئیات، شکل، پاورقی، هدر، Hgroup، منو، ناوبری، بخش (نمایش: / * ما آیتم های بلوک (برای مرورگرهای قدیمی) * /) بدن (خط ارتفاع: 1؛ / * فاصله خطوط متن در صفحه * /) OL، UL (لیست سبک: هیچکدام؛) BLOCKQUOTE: قبل، BLOCKQUOTE: پس از، Q: قبل، Q: پس از (محتوا: "؛ / * حذف نقل قول ها در Q و مسدود کردن * / محتوا: هیچ؛ / * اضافه کردن برای وفاداری * /) Blockquote، Q (نقل قول: هیچ؛ / * راه دیگری برای حذف نقل قول * /) جدول (فروپاشی مرزی: Collapse؛ فاصله مرزی: 0؛)

شرح مثال

راه بعدی برای بازنشانی CSS پیشنهاد Eric Meyer (Eric Meyer) - یک توسعه دهنده وب شناخته شده در محافل خاصی است. در اینجا او قبلا یک تخلیه سبک را برای برچسب ها از HTML 5 اضافه کرده است، که به هر حال در زمان نوشتن این مقاله و خودشان هنوز هم توسط مرورگرهای مدرن پشتیبانی می شوند. اما شما همیشه باید به چشم انداز نگاه کنید، درست است؟

در واقع، این مقاله می تواند به بی نهایت ادامه یابد، زیرا، من یک بار دیگر تکرار می کنم، در یک نقطه خاص، هر اندازه گیری به نسخه خود را از تخلیه می آید یا از آن استفاده نمی کند، با توجه به توجه آن، از آن استفاده نمی کند.

همه چيز آیتم های HTML صفحات پیش فرض ارزش های خود را دارند. و متاسفانه، توسط مرورگرهای مختلف به همان اندازه تفسیر نمی شود. به عنوان یک نتیجه، طراحی سایت رنج می برد، طراحی آن هنگام تغییر مرورگر (مرورگر اینترنت) تغییر می کند. هدف از روش بازنشانی یک ظاهر طراحی شده، کاهش ناسازگاری مرورگر در مواردی مانند ارتفاع خط، زمینه ها، اندازه فونت عنوان و غیره است.

نمونه هایی از اسکریپت های تنظیم مجدد سبک CSS

اعتقاد بر این است که هر وب مستر خود احترام باید کد تنظیم مجدد CSS خود را بنویسد. اما من طرفدار یک رویکرد دیگر هستم، یک راه حل آماده تهیه کنید، در صورت لزوم درک کنید و درست کنید.

Eric Meyer CSS Reset

اسکریپت تخلیه از اریک مایر، با کلمات خود نویسنده، عمدا بسیار رایج است. به عنوان مثال، آن را در آن برای یک عنصر بدن، هر پس زمینه پیش فرض مشخص نشده است. بنابراین، باید تغییر، ویرایش، گسترش یافته و در غیر این صورت پیکربندی شده با توجه به نیازهای شما. رنگ های دلخواه را برای صفحات، پیوندها و غیره اضافه کنید.

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | مجوز 20110126: هیچکدام (دامنه عمومی) * / HTML، Body، Div، SPAN، APPLET، OBJECT، IFRAME، H1، H2، H3، H4، H5، H6، P، BLOCKQUOTE، PRE، A، ABBR، ACRONYM، آدرس، بزرگ، CITE، CODE، DEL، DFN، EM، IMG، INS، KBD، Q، S، SAMP، کوچک، اعتصاب، قوی، زیر، SUP، TT، VAR، B، U، I، TT، VAR، B، U، I، CENTER، DL، DT، DD، OL، UL، LI، Fieldset، فرم، برچسب، افسانه، جدول، عنوان، TBODY، TFOOF، THEAD، TR، TH، TD، مقاله، کنار، بوم، جزئیات، جزئیات، قراردادن، شکل، Figcaption، Footer، Header، Hgroup، Menu، NAV، خروجی، روبی، بخش، خلاصه، زمان، علامت گذاری، صدا، ویدئو (حاشیه: 0؛ Padding: 0؛ مرز: 0؛ فونت اندازه: 100٪ ؛ فونت: به ارث برده شده؛ align-align: baseline؛) / * HTML5 نمایشگر صفحه نمایش بازنشانی برای مرورگرهای قدیمی تر * / مقاله، کنار، جزئیات، Figcaption، شکل، پاورقی، هدر، Hgroup، منو، NAV، بخش (نمایش: بلوک؛ ) بدن (ارتفاع خط: 1؛) OL، UL (List-style: هیچ؛) blockquote، q (نقل قول: هیچ؛) blockquote: قبل، blockquote: afterter، پرسش: قبل، Q: پس از (محتوا: "؛ محتوا: هیچکدام؛) جدول (Border-Collapse: C. hlapse؛ فاصله مرزی: 0؛ )

یاهو (yui 3) تنظیم مجدد CSS

CSS Yui 3 سبک سبک بحث برانگیز از مرورگرهای عناصر HTML را نرم می کند، و همچنین هر اسکریپت دیگر CSS CSS را برای ایجاد یک مبنای قابل اعتماد برای ایجاد وب سایت ها و برنامه های وب ایجاد می کند.

/ * yui 3.18.1 کپی رایت 2014 یاهو شرکت همه حقوق محفوظ است. مجوز تحت مجوز BSD. http://yuilibrary.com/license/ * / * TODO باید تنظیمات را در HTML حذف کند، زیرا ما نمی توانیم آن را "TODO با پیشوند"، باید با انتخاب یا اموال برای صرفه جویی در وزن، * / HTML (رنگ) : # 000؛ سابقه و هدف: #fff؛) / * todo حذف تنظیمات بدن از زمانی که ما می توانیم "T نام فضای نام. * / / * TODO تست قرار دادن آمدن به سر. - در FF نتواند * / body، div، dl، dt، dd، ul، ol، li، h1، h2، h3، h4، h5، h6، پیش، کد، فرم، fieldset، افسانه، ورودی، textarea، p، blockquote، th، TD (حاشیه: 0؛ padding: 0؛) جدول (مرز فروپاشی: Collapse؛ تقسیم مرزی: 0؛) Fieldset، IMG (مرز: 0؛) / * Todo فکر می کنم در مورد ارثی hanlding به طور متفاوت، شاید اجازه دهید IE6 کمی شکست بخورد ... * / آدرس، عنوان، Cite، Code، DFN، EM، Strong، Th، Var (فونت، سبک: نرمال؛ فونت وزن: عادی؛) OL، UL (لیست سبک: هیچ؛) عنوان، TH (Text-align: left؛) H1، H2، H3، H4، H5، H6 (فونت اندازه: 100٪؛ فونت وزن: نرمال؛) Q: قبل، Q: بعد از (محتوا: "؛) Abbr Acronym (مرز: 0؛ Font-variant: Normal؛) / * برای حفظ ارتفاع خط و ظاهر انتخاب * / sup (عمودی-align: text-top؛) زیر (عمودی-align: text-bottom؛) ورودی، textarea ، را انتخاب کنید (Font-Family: به ارث؛ فونت اندازه: به ارث برده؛ فونت وزن: به ارث برده؛ * فونت اندازه: 100٪؛ / * برای فعال کردن تغییر اندازه IE * / * * از آنجا که افسانه در IE به ارث برده است / افسانه (رنگ: # 000؛) / * YUI CSS تشخیص ion تمبر * / # yui3-css-stamp.cssreset (نمایش: هیچ؛ )

تنظیم مجدد سبک ها normalize.css

Normalize.css یک فایل CSS سفارشی است که به مرورگرها اجازه می دهد تا تمام عناصر را به طور مداوم و مطابق با استانداردهای مدرن نمایش دهند. نویسندگان آن به طور پیش فرض تفاوت های بین سبک های مرورگرهای مختلف را مورد بررسی قرار دادند تا فقط این سبک هایی را که نیاز به عادی سازی دارند، اصلاح کنند.

/ *! normalize.css v6.0.0 | مجوز MIT | github.com/necolas/normalize.css * / / * document \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * 1. ارتفاع خط را اصلاح کنید در تمام مرورگرها * 2. جلوگیری از تنظیمات اندازه فونت پس از تغییرات جهت گیری در * یعنی ویندوز فون و در iOS. * / HTML (خط ارتفاع: 1.15؛ / * 1 * / -ms-text-size-size تنظیم: 100٪؛ / * 2 * / * webkit-text-size-size: 100٪؛ / * 2 * /) / * بخش ها \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * افزودن صفحه صحیح در IE 9-. * / مقاله، کنار، پاورقی، هدر، ناوبری، بخش (صفحه نمایش: بلوک؛) / ** * اصلاح اندازه فونت و حاشیه عناصر H1 در "بخش" و * `attrate` conefox در Chrome، Firefox، و صفری * / h1 (اندازه فونت: 2م؛ حاشیه: 0.67EM 0؛) / * گروه بندی محتوا \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * نمایش صحیح را در IE 9 اضافه کنید. * 1. نمایش صحیح را در اینترنت اکسپلورر اضافه کنید. * / Figcaption، شکل، اصلی (/ * 1 * / صفحه نمایش: بلوک؛) / ** * اضافه کردن حاشیه صحیح در IE 8. * / شکل (حاشیه: 1EM 40PX؛) / ** * 1. اضافه کردن جعبه درست اندازه گیری در فایرفاکس. * 2. سرریز را در لبه و یعنی نشان دهید. * / hr (اندازه جعبه: جعبه محتوا؛ / * 1 * / ارتفاع: 0؛ / * 1 * / overflow: قابل مشاهده؛ / * 2 * /) / ** * 1. ارث و مقیاس اندازه فونت را اصلاح کنید در تمام مرورگرها * 2. فونت عجیب و غریب را در تمام مرورگرها درست کنید. * / pre (font-family: monospace، monospace؛ / * 1 * / font-size: 1em؛ / * 2 * /) / * Semantics سطح متن \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * 1. پس زمینه خاکستری را در لینک های فعال در IE 10 حذف کنید. * 2. حذف شکاف در لینک های زیر در iOS 8+ و Safari 8+. * / a (background-color: شفاف؛ / * 1 * / -webkit-text-decoration-skip: objects؛ / * 2 * /) / ** * 1. حذف مرز پایین در کروم 57- و فایرفاکس 39- . * 2. اضافه کردن دکوراسیون متن صحیح در کروم، لبه، یعنی اپرا و سافاری. * / abbr (border-bottom: هیچ؛ / * 1 * / متن دکوراسیون: زیر خط؛ / * 2 * / دکوراسیون متن: زیر خط کشوری؛ / * 2 * /) / ** * جلوگیری از کاربرد تکراری از `byder `توسط قانون بعدی در Safari 6. * / b، قوی (فونت وزن: به ارث برده؛) / ** * اضافه کردن وزن فونت صحیح در Chrome، Edge و Safari. * / b، قوی (فونت وزن: bolder؛) / ** * 1. اصلاح وراثت و مقیاس فونت را در تمام مرورگرها اصلاح کنید. * 2. فونت عجیب و غریب را در تمام مرورگرها درست کنید. * / کد، KBD، SAMP (فونت خانواده: monospace، monospace؛ / * 1 * / اندازه فونت: 1em؛ / * 2 * /) / ** * اضافه کردن سبک فونت صحیح در آندروید 4.3-. * / DFN (فونت سبک: ایتالیایی؛) / ** * اضافه کردن پس زمینه صحیح و رنگ در IE 9-. * / علامت (پس زمینه رنگ: # ff0؛ رنگ: # 000؛) / ** * اندازه فونت صحیح را در تمام مرورگرها اضافه کنید. * / کوچک (فونت اندازه: 80٪؛) / ** * جلوگیری از عناصر زیر و sup` از تاثیر ارتفاع خط در * تمام مرورگرها. * / sub، sup (font-size: 75٪؛ ارتفاع خط: 0؛ موقعیت: نسبی؛ عمودی-align: baseline؛) sub (پایین: -0.25em؛) sup (top: -0.5em؛) / * محتوای جاسازی شده \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * اضافه کردن صفحه نمایش صحیح در IE 9-. * / صوتی، ویدئو (صفحه نمایش: inline-block؛) / ** * اضافه کردن صفحه نمایش صحیح در iOS 4-7. * / صوتی: نه () (صفحه نمایش: هیچ؛ ارتفاع: 0؛) / ** * حذف مرز بر روی تصاویر در داخل لینک ها در IE 10-. * / IMG (سبک مرزی: هیچ؛) / ** * پنهان کردن سرریز در IE. * / SVG: نه (: root) (سرریز: پنهان؛) / * forms \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * حاشیه را حذف کنید در فایرفاکس و سافاری. * / دکمه، ورودی، OptGroup، Select، TextArea (حاشیه: 0؛) / ** * نمایش سرریز در IE. * 1. سرریز را در لبه نشان دهید. * / دکمه، ورودی (/ * 1 * / سرریز: قابل مشاهده؛) / ** * حذف وراثت متن را در لبه، فایرفاکس و یعنی حذف کنید. * 1. ارث را از تبدیل متن در فایرفاکس حذف کنید. * / دکمه، را انتخاب کنید (/ * 1 * / text-transform: / ** ** * 1. جلوگیری از یک اشکال WebKit که در آن (2) بومی "صوتی" و "ویدئو" را از بین می برد. کنترل در Android 4. * 2. ناتوانی در نوع سبک های قابل کلیک در iOS و Safari را اصلاح کنید. * / دکمه، HTML، / * 1 * /، (-WebKit ظاهر: دکمه؛ / * 2 * /) / ** * مرز درونی و پد را در فایرفاکس حذف کنید. * / دکمه :: - Moz-Focus-Inner، :: - Moz-Focus-Inner، :: - Moz-Focus-Inner، :: - Moz-Focus-Inner (Border-Style: None؛ Padding: 0؛) / ** * سبک های تمرکز را با قانون قبلی بازگردانید. * / دکمه: -Moz-Focusring،: -moz-focusring ،: -moz-focusring،: moz-focusring (طرح کلی: 1px dottedextextextextext؛) / ** * 1. نوشتن متن بسته بندی شده در لبه و یعنی. * 2. ارثی رنگ را از عناصر fieldset در IE درست کنید. * 3. پد را بردارید تا توسعه دهندگان زمانی که آنها صفر را از دست ندهند * `عناصر fieldset 'در تمام مرورگرها. * / افسانه (اندازه جعبه: Border-Box؛ / * 1 * / رنگ: به ارث؛ / * 2 * / صفحه نمایش: جدول؛ / * 1 * / حداکثر عرض: 100٪؛ / * 1 * / padding: 0 ؛ / * 3 * / سفید فضای: نرمال؛ / * 1 * /) / ** * 1. اضافه کردن صفحه نمایش صحیح در IE 9-. * 2. اضافه کردن هماهنگی صحیح عمودی در کروم، فایرفاکس و اپرا. * / پیشرفت (نمایش: بلوک درون خط؛ / * 1 * / عمودی-align: baseline؛ / * 2 * /) / ** * حذف اسکرول عمودی پیش فرض در IE. * / textarea (overflow: auto؛) / ** * 1. اضافه کردن جعبه صحیح در IE 10-. * 2. پد را در IE 10- حذف کنید. * /، (جعبه اندازه: جعبه مرزی؛ / * 1 * / padding: 0؛ / * 2 * /) / ** * سبک مکان نما را از افزایش و دکمه های Decreme در Chrome اصلاح کنید. * / :: - Webkit-Inner-Spin-Button، :: - WebKit-Outer-Spin-Button (ارتفاع: خودکار؛) / ** * 1. ظاهر عجیب و غریب در Chrome و Safari را اصلاح کنید. * 2. سبک طرح کلی در صفری را تصحیح کنید. * / (-Webkit ظاهر: Textfield؛ / * 1 * / Outline-Offset: -2px؛ / * 2 * /) / ** * دکمه های داخلی را حذف کنید و دکمه های لغو را در Chrome و Safari در MacOS حذف کنید. * / :: - WebKit-Search-Search-Button، :: - WebKit-Search-Decoration (-WebKit ظاهر: هیچ؛) / ** * 1. عدم توانایی به سبک سبک های قابل کلیک در iOS و Safari را اصلاح کنید. * 2. تغییر خواص فونت به "به ارث" در Safari. * / :: - دکمه WebKit-file-uppload (-Webkit ظاهر: دکمه؛ / * 1 * / فونت: به ارث برده؛ / * 2 * /) / * interactive \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / * * اضافه کردن صفحه نمایش صحیح در IE 9-. * 1. صفحه نمایش صحیح را در لبه، یعنی و فایرفاکس اضافه کنید. * / جزئیات، / * 1 * / منو (صفحه نمایش: بلوک؛) / * * نمایش صحیح را در تمام مرورگرها اضافه کنید. * / خلاصه (نمایش: لیست لیست؛) / * scripting \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * نمایش صحیح را اضافه کنید یعنی نه-. * / canvas (صفحه نمایش: inline-block؛) / ** * افزودن صفحه صحیح در اینترنت اکسپلورر. * / Template (نمایش: هیچ؛) / * پنهان \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * نمایش صحیح در IE 10 اضافه کنید -. * / (نمایش: هیچ؛)

بازنشانی از طریق انتخاب جهانی * (ستاره)

در نگاه اول، این ممکن است ساده ترین و ساده راه حل به نظر برسد، چرا همه موارد HTML را توصیف می کنید و زمانی که می توانید از انتخابگر استفاده کنید، آنها را به آنها اختصاص دهید، زیرا عمل آن به تمام HTML اعمال می شود.

* (حاشیه: 0؛ padding: 0؛)

اما متأسفانه این کار خوب نیست. مرورگر بسیار سخت است (زمان زیادی را در مقایسه با سایر روش های بازنشانی CSS طول می کشد) قوانین را به هر عنصر در سند، به ویژه در صفحات وب بزرگ، اعمال کنید و همچنین می توانید بسیاری از سبک های پیش فرض خوب را نابود کنید.

تنظیم مجدد سبک و وردپرس

اگر می خواهید از یکی از روش های CSS های CSS فوق توضیح دهید، روش های تنظیم مجدد برای سایت در وردپرس، می توان آن را به دو روش انجام داد.

اول این است که شما باید کد بازنشانی را به شروع فایل style.css کپی کنید تم های وردپرس (پس از خطوط نوشتن و موضوع عنوان، یعنی پس از متن که توسط کسری و ستاره / * * * /.

به استثنای خانواده های IE و اپرا مینی.

از آنجا که کمبود پشتیبانی می تواند یک مشکل ایجاد کند، در اینجا برخی از راه های بازنشانی برخی از خواص CSS در مقادیر اولیه آنها وجود دارد:

RESET: این (انیمیشن: هیچ؛ انیمیشن تاخیر: 0؛ انیمیشن-جهت حرکت: عادی؛ انیمیشن-مدت زمان: 0؛ انیمیشن-پر-حالت: هیچ؛ انیمیشن-تکرار-تعداد: 1؛ انیمیشن-نام: هیچ؛ انیمیشن بازی -State: در حال اجرا؛ انیمیشن زمان بندی-تابع: سهولت؛ Backface دید: قابل مشاهده است. پس زمینه: 0؛ پس زمینه دلبستگی: اسکرول؛ پس زمینه کلیپ: مرز جعبه؛ رنگ پس زمینه: شفاف؛ تصویر پس زمینه: هیچ؛ سابقه و هدف -Origin: بالشتک جعبه؛ موقعیت پس زمینه: 0 0؛ موقعیت پس زمینه-X: 0؛ موقعیت پس زمینه-Y: 0؛ تکرار پس زمینه: تکرار؛ پس زمینه اندازه: خودکار خودکار؛ مرز: 0؛ border- سبک : هیچ؛ عرض حاشیه: متوسط؛ رنگ حاشیه: ارث؛ پایین حاشیه: 0؛ پایین حاشیه رنگ: ارث؛ پایین حاشیه چپ شعاع: 0؛ پایین حاشیه راست شعاع: 0؛ مرزی از پایین به سبک: هیچ؛ پایین حاشیه عرض: متوسط؛ مرز فروپاشی: جداگانه؛ مرز تصویر: هیچ؛ مرز چپ: 0؛ مرزی چپ رنگ: به ارث می برند؛ مرزی چپ سبک: هیچ؛ Border- چپ عرض: متوسط؛ مرزی آدیوس: 0؛ راست مرز: 0؛ مرز راست رنگ: ارث؛ مرز راست سبک: هیچ؛ مرز راست و عرض: متوسط؛ فاصله مرزی: 0؛ مرز بالا: 0؛ مرزی بالا رنگ: به ارث برده؛ مرزی بالا سمت چپ شعاع: 0؛ مرزی بالا سمت راست شعاع: 0؛ مرز بالا به سبک: هیچ؛ مرز بالای عرض: متوسط؛ پایین: خودکار؛ جعبه سایه: هیچکدام؛ جعبه اندازه: جعبه محتوا؛ عنوان Caption: بالا؛ پاک کردن: هیچکدام؛ کلیپ: خودکار؛ رنگ: به ارث برده؛ ستون ها: خودکار؛ ستون شمارش: خودکار؛ ستون پر کردن: تعادل؛ ستون شکاف: عادی؛ ستون قانون: متوسط \u200b\u200bهیچکدام از CurrentColor؛ ستون قانون رنگ: CurrentColor؛ ستون به سبک: هیچکدام؛ ستون حکومت عرض: هیچ؛ ستون فاصله: 1؛ ستون عرض: خودکار؛ محتوا: عادی؛ ضد افزایش: هیچکدام؛ ضد بازنشانی: هیچکدام؛ مکان نما: خودکار؛ جهت: LTR؛ صفحه نمایش: Inline؛ سلول های خالی: نمایش؛ شناور: هیچکدام؛ فونت: عادی؛ FONT-FAMILY: ارث؛ فونت اندازه: رسانه؛ فونت سبک: عادی؛ فونت نوع: عادی؛ فونت وزن: طبیعی؛ ارتفاع: خودکار؛ خطوط: هیچکدام؛ چپ: خودکار؛ فاصله نامه: عادی؛ خط ارتفاع: عادی؛ لیست سبک: هیچکدام؛ لیست سبک-تصویر: هیچکدام؛ سبک لیست مکان: بیرون؛ لیست سبک نوع: دیسک؛ حاشیه: 0؛ حاشیه پایین: 0؛ حاشیه سمت چپ: 0؛ حاشیه راست: 0؛ حاشیه بالا: 0؛ حداکثر ارتفاع: هیچکدام؛ حداکثر عرض: هیچکدام؛ حداقل ارتفاع: 0؛ Min-Width: 0؛ Opacity: 1؛ یتیمان: 0؛ طرح کلی: 0؛ طرح کلی رنگ: Invert؛ سبک کلی: هیچکدام؛ عرض کلی: متوسط؛ سرریز: قابل مشاهده؛ از overflow-x: قابل مشاهده است. overflow-y: قابل مشاهده؛ Padding: 0؛ پودر پایین: 0؛ پوشش-چپ: 0؛ Padding-Right: 0؛ Padding-top: 0؛ Page-Break-After: Auto؛ تفکیک صفحه قبل: خودرو؛ تفکیک صفحه در داخل: AUTO؛ چشم انداز: هیچکدام؛ چشم انداز منبع: 50٪ 50٪؛ موقعیت: استاتیک؛ / * نیاز ممکن است به نقل از تغییر برای مناطق مختلف (به عنوان مثال FR) * / نقل قول: "\\ 201C" "\\ 201D" "\\ 2018" "\\ 2019"؛ راست: خودکار؛ تب اندازه: 8؛ جدول طرح: خودکار؛ تراز متن: ارث؛ متن align-last: auto؛ متن دکوراسیون: هیچکدام؛ متن دکوراسیون رنگ: به ارث برده؛ متن دکوراسیون خط: هیچ؛ متن دکوراسیون سبک: جامد؛ Text-Indent: 0؛ متن سایه: هیچکدام؛ تبدیل متن: هیچکدام؛ بالا: خودکار؛ تبدیل: هیچکدام؛ تبدیل سبک: تخت؛ انتقال: هیچکدام؛ گذار گذرا: 0s؛ انتقال-مدت زمان: 0S؛ انتقال مالکیت: هیچکدام؛ تابع انتقال زمان: سهولت؛ Unicode-bidi: عادی؛ عمودی-align: baseline؛ دید: قابل مشاهده است فضای سفید: طبیعی؛ بیوه ها: 0؛ عرض: خودکار؛ فاصله گذاری کلمه: عادی؛ Z-index: Auto؛ / * پچ مدرن پایه * / همه: اولیه؛ همه: UNSET؛ ) / * پچ مدرن پایه * / # RESET-this-Root (همه: ابتدا؛ * (همه: UNSET؛))

• REPO GITHUB مربوطه با دسامبر 2017 لیست قانع کننده تر

همانطور که در نظرات کاربر ذکر شد @ user566245:

این در اصل درست است، اما مسافت پیموده شده ممکن است متفاوت باشد. به عنوان مثال، برخی از عناصر، مانند Textarea به طور پیش فرض، یک مرز با استفاده از این تنظیم مجدد، آنها مرز Textarea را کاهش می دهند.

خریداری شده به منظور تبدیل شدن به یک مدرن مدرن، کاربر oost

# reset-this-parent (همه: ابتدایی؛ * (همه: UNSET؛))

مثال از W3.

این می تواند برای عنصر ریشه از "ویجت" موجود در صفحه ای که نمی خواهد سبک های صفحه بیرونی را به ارث برده باشد مفید باشد. لطفا توجه داشته باشید، با این حال، هر سبک پیش فرض مورد استفاده برای این عنصر (به عنوان مثال، به عنوان مثال: نمایش: یک بلوک از جدول سبک UA در عناصر بلوک، به عنوان مثال)، همچنین حذف خواهد شد.

هیچ کس در مورد دیگری فکر نمیکرد، به جز CSS، برای تنظیم مجدد CSS؟ آره؟

چنین کاربردی فوری وجود دارد:

getElementsytagname ("*") تمام عناصر را از DOM باز می گرداند. سپس شما می توانید سبک ها را برای هر عنصر در مجموعه تنظیم کنید:

var allencents \u003d document.getElementsbytagname ("*")؛ برای (var i \u003d 0، len \u003d allenctions.length؛ من< len; i++) { var element = allElements[i]; // element.style.border = ... }

با این همه گفت: من فکر نمی کنم که تنظیم مجدد CSS چیزی انجام شود اگر ما تنها با یک مرورگر وب به پایان نرسیم. اگر "مرورگر" در انتهای "مرورگر" تنظیم شده باشد.

برای مقایسه در اینجا لیستی از ارزش فایرفاکس 40.0 برای

جایی که فونت سبک: عملیات DOM اجرا می شود.

ALIGN-CONTENT: UNSET؛ align-items: unset؛ align-self: unset؛ انیمیشن: UNSET؛ ظاهر: UNSET؛ Backface-Visibility: UNSET؛ Background-Blend-Mode: UNSET؛ سابقه و هدف: UNSET؛ اتصال: UNSET؛ بلوک اندازه: UNSET؛ مرز بلوک پایان: UNSET؛ بلوک مرزی شروع: UNSET؛ Border-Collapse: UNSET؛ Border-inline-end: UNSET؛ Border-Inline-Start: UNSET؛ مرزی شعاع: UNSET؛ فاصله مرزی: UNSET؛ مرز: UNSET؛ پایین: UNSET؛ Box-align: unset؛ جعبه دکوراسیون - شکستن: UNSET؛ جعبه جهت: UNSET؛ BOX-FLEX: UNSET؛ Box-Ordinal-Group: UNSET؛ جعبه شرق: UNSET؛ جعبه بسته: UNSET؛ جعبه سایه: UNSET؛ جعبه اندازه: UNSET؛ CAPTION-SIDE: UNSET؛ پاک کردن: UNSET؛ CLIP-PATH: UNSET؛ کلیپ-قانون: UNSET؛ کلیپ: UNSET؛ رنگ تنظیم: UNSET؛ فیلترهای رنگ آمیزی رنگ: UNSET؛ Interpolation رنگ: UNSET؛ رنگ: UNSET؛ ستون پر کردن: UNSET؛ ستون شکاف: UNSET؛ ستون قانون: UNSET؛ ستون ها: UNSET؛ محتوا: UNSET؛ کنترل شخصیت مشاهده: UNSET؛ ضد افزایش: UNSET؛ ضد بازنشانی: UNSET؛ مکان نما: UNSET؛ نمایش: UNSET؛ غالب پایه: UNSET؛ سلول های خالی: UNSET؛ Opacity Fill-Opacity؛ Fill-Rule: UNSET؛ پر کردن: UNSET؛ فیلتر: UNSET؛ Flex-Flow: UNSET؛ FLEX: UNSET؛ Float-Edge: Unset؛ شناور: UNSET؛ سیل رنگ: UNSET؛ سیلاب Opacity: UNSET؛ فونت خانواده: UNSET؛ فونت ویژگی های تنظیمات: UNSET؛ فونت کرنینگ: UNSET؛ font-language-override: unset؛ فونت اندازه گیری: UNSET؛ اندازه فونت: UNSET؛ فونت کشش: UNSET؛ فونت سبک: مورب؛ فونت سنتز: UNSET؛ Font-variant: UNSET؛ فونت وزن: UNSET؛ فونت :؛ نیروی شکسته-تصویر آیکون: UNSET؛ ارتفاع: UNSET؛ خط های: UNSET؛ جهت گیری تصویر: UNSET؛ تصویر منطقه: UNSET؛ رندر تصویر: UNSET؛ IME-MODE: UNSET؛ اندازه درون خطی: UNSET؛ جداسازی: UNSET؛ توجیه محتوا: UNSET؛ توجیه اقلام: UNSET؛ توجیه خود: UNSET؛ چپ: UNSET؛ فاصله نامه: UNSET؛ روشنایی رنگ: UNSET؛ خط ارتفاع: UNSET؛ لیست سبک: UNSET؛ حاشیه بلوک-پایان: UNSET؛ Margin-Block-Start: UNSET؛ حاشیه inline-end: unset؛ مارجین-inline-start: unset؛ حاشیه: UNSET؛ مارکر افست: UNSET؛ مارکر: UNSET؛ ماسک نوع: UNSET؛ ماسک: UNSET؛ حداکثر بلوک اندازه: UNSET؛ حداکثر ارتفاع: UNSET؛ Max-Inline-Size: UNSET؛ حداکثر عرض: UNSET؛ Min-Block-size: UNSET؛ حداقل ارتفاع: UNSET؛ min-inline-size: unset؛ Min-Width: UNSET؛ مخلوط مخلوط حالت: UNSET؛ Object-fit: UNSET؛ Object-Position: UNSET؛ Offset-Block-end: UNSET؛ Offset-Block-Start: UNSET؛ Offset-inline-end: UNSET؛ Offset-Inline-Start: UNSET؛ Opacity: UNSET؛ سفارش: UNSET؛ ORIENT: UNSET؛ Offset Offset: UNSET؛ Outline-Radius: UNSET؛ طرح کلی: UNSET؛ سرریز: UNSET؛ Padding-Block-end: UNSET؛ Padding-Block-Start: UNSET؛ Padding-inline-end: UNSET؛ Padding-Inline-Start: UNSET؛ padding: unset؛ صفحه-break-after: unset؛ Page-Break-forure: Useret؛ Page-Break-inside: unset؛ رنگ سفارش: UNSET؛ چشم انداز مبدا: UNSET؛ چشم انداز: UNSET؛ اشاره گر رویدادها: UNSET؛ موقعیت: UNSET؛ نقل قول: UNSET؛ تغییر اندازه: UNSET؛ راست: UNSET؛ ruby-align: unset؛ روبی موقعیت: UNSET؛ رفتارهای اسکرول: UNSET؛ اسکرول-ضربه محکم و ناگهانی مختصات: UNSET؛ Scroll-Snap Destination: UNSET؛ Scroll-Snap-Points-X: UNSET؛ Scroll-Snap-Points-Y: UNSET؛ اسکرول-ضربه محکم و ناگهانی نوع: UNSET؛ شکل رندر: UNSET؛ پشته اندازه: UNSET؛ توقف رنگ: UNSET؛ Stop-Opacity: UNSET؛ Stroke-Dasharray: UNSET؛ Stroke-DashOffset: UNSET؛ STROKE-LINECAP: UNSET؛ Stroke-linejoin: UNSET؛ Stroke-MiterLimit: UNSET؛ Stroke-Opacity: UNSET؛ STROKE-WIDTH: UNSET؛ سکته مغزی: UNSET؛ تب اندازه: UNSET؛ جدول طرح: UNSET؛ متن align-last: unset؛ متن align: unset؛ TEXT-LENCHOR: UNSET؛ متن ترکیبی به طور مرتب: UNSET؛ متن دکوراسیون: UNSET؛ متن تاکید بر موقعیت: UNSET؛ متن تاکید: UNSET؛ Text-Dandent: UNSET؛ متن جهت گیری: UNSET؛ متن سرریز: UNSET؛ ارائه متن: UNSET؛ متن سایه: UNSET؛ متن اندازه گیری: UNSET؛ تبدیل متن: UNSET؛ بالا: UNSET؛ تبدیل مبداء: UNSET؛ تبدیل سبک: UNSET؛ تبدیل: UNSET؛ انتقال: UNSET؛ کاربر تمرکز: UNSET؛ کاربر ورودی: UNSET؛ کاربر اصلاح: UNSET؛ کاربر انتخابی: UNSET؛ بردار اثر: UNSET؛ عمودی-align: unset؛ دید: UNSET؛ فضای سفید: UNSET؛ عرض: UNSET؛ تغییر خواهد کرد: UNSET؛ پنجره کشیدن: UNSET؛ کلمه شکستن: UNSET؛ فاصله کلمه: UNSET؛ Word-Wrap: UNSET؛ نوشتن حالت: UNSET؛ Z-index: UNSET؛

بسیاری از عایق ها به اصطلاح استفاده می شوند تنظیم مجدد CSSخدمت به حذف ویژگی های مرورگرهای مختلف. در حقیقت، این فایل سبک ها تمام خواص پیش فرض CSS را بازنشانی می کنند. در این مقاله، من کد این فایل را نشان خواهم داد و می گویم ارزش استفاده از CSS Reset یا نه.

من خیلی متفاوت دیده ام تنظیم مجدد CSSهمه آنها در مورد یکسان هستند. شما می توانید از این استفاده کنید:

HTML، Body، Div، Span، Applet، Object، iFrame،
H1، H2، H3، H4، H5، H6، P، Blockquote، Pre،
A، Abbr، مخفف، آدرس، بزرگ، ذکر، کد،
دل، DFN، EM، فونت، IMG، INS، KBD، Q، S، SAMP،
کوچک، اعتصاب، قوی، زیر، Sup، Tt، Var،
ب، تو، من، مرکز،
DL، DT، DD، OL، UL، LI،
Fieldset، فرم، برچسب، افسانه،
جدول، عنوان، بدن، بدن، tfoot، thead، tr، th، td (
سابقه و هدف: شفاف؛
مرز: 0؛
فونت اندازه: 100٪؛
حاشیه: 0؛
طرح کلی: 0؛
Padding: 0؛
عمودی-align: baseline؛
}
بدن (
خط ارتفاع: 1؛
}
OL، UL (
لیست سبک: هیچکدام؛
}
Blockquote، Q (
نقل قول: هیچکدام؛
}
BlockQuote: قبل، blockquote: پس از،
س: قبل، س: بعد از (
محتوا: ""؛
محتوا: هیچکدام؛
}
: تمرکز (
طرح کلی: 0؛
}
جدول (
مرز فروپاشی: فروپاشی؛
فاصله مرزی: 0؛
}

من فکر می کنم که استفاده از آن به علت و خیلی قابل فهم است، اما چرا، به عنوان مثال، من از آن استفاده نمی کنم، مانند بسیاری از درختان دیگر، ارزش آن را در مورد آن ارزش دارد. اول، این است یک فایل اضافی، دوم، درك كردن برای پردازش، اما مهمتر از همه - من خواص پیش فرض را دوست دارم. به عنوان مثال، زمینه های مشابه در جدول. پس از همه، تمام خواص پیش فرض نه تنها آن را، بلکه به عنوان بیشتر گزینه بهینه نمایش عناصر مختلف من به شما اطمینان می دهم، تنظیم مجدد لایه گذاری. سلول های جدول، به احتمال زیاد، شما آن را در فایل اصلی بازگردانید. و دور از این واقعیت است که ارزش از پیش فرض چه چیزی متفاوت است. بنابراین معلوم می شود که ما آن را برای اولین بار تمیز می کنیم، و سپس همان بازگشت. و همراه با اولین کاستی (یک فایل اضافی و کد اضافی)، بسیاری از vertellers به \u200b\u200bطور کلی استفاده نمی شود. تنظیم مجدد CSS.

به هر حال، با استفاده از تخلیه یک ظاهر طراحی شده بد نیست، بنابراین شما می توانید با خیال راحت از آن استفاده کنید اگر فکر می کنید ساده سازی سازگاری سایت تحت مرورگرهای مختلف، شما را به طور کامل ساده می کند.

• منتقل کردن

این مقاله اولین چرخه در موضوع Taming CSS است. امروز ما به تکنولوژی نگاه خواهیم کرد تنظیم مجدد CSS.

چرا شما به آن نیاز دارید؟

هر مرورگر سبکهای پیش فرض خود را برای عناصر مختلف HTML تنظیم می کند. با کمک CSS Reset، ما می توانیم این تفاوت را برای اطمینان از سبک مرورگر صلیب قرار دهیم.

به عنوان مثال، شما از یک مورد استفاده می کنید آ. در سند شما اکثر مرورگرها مانند اینترنت اکسپلورر. و فایرفاکس اضافه کردن لینک رنگ ابی و تیز. با این حال، تصور کنید که در پنج سال تصمیم گرفت که یک مرورگر جدید ایجاد کند (بیایید آن را Ultrobrowser بفرستیم). توسعه دهندگان مرورگر تاکید آبی و آزار دهنده را دوست نداشتند، بنابراین آنها تصمیم به تخصیص پیوندها کردند قرمز و فونت جسورانه. این بر اساس این است اگر شما مقدار اساسی سبک های مورد را تنظیم کنید آ.، آن را تضمین خواهد شد که شما می خواهید آن را ببینید، و نه به عنوان ترجیح داده برای نمایش توسعه دهندگان Ultrabrowrowser.

اما اکنون ما هیچ مدرکی نداریم، از جمله بین پاراگراف های فردی! چه باید بکنید؟ دروغ نگویید و نترسید: در زیر تخلیه ما ما قانون را که ما نیاز داریم را توصیف می کنیم. می توان آن را انجام داد روش های مختلف: تعیین یک ضخامت از زیر یا بالای پاراگراف، آن را در درصد، پیکسل یا در EM مشخص کنید.

مهمترین چیز، مرورگر در حال حاضر با توجه به قوانین ما بازی می کند، و نه ما بر طبق آن. تصمیم گرفتم به این ترتیب انجام دهم:

* (حاشیه: 0؛ padding: 0؛) P (حاشیه: 5px 0 10px 0؛)

در نتیجه، ما آنچه را که در نمونه سوم دیده می شد، داشتیم.

شما می توانید سبک های خود را برای تنظیم مجدد ایجاد کنید، اگر شما برخی از وظایف خاصی را در پروژه خود حل کنید. با وجود این، هیچ وجود ندارد گام به گام رهبری با ایجاد تنظیم مجدد CSS خود. توصیه به اصول خود و سبک خود را.

برای کمک به شما یک انتخاب، من چند لینک دیگر را ارائه می دهم:

1. کمتر بیشتر است - انتخاب من از تنظیم مجدد CSS (اد الیوت).

2. تنظیم مجدد CSS شما اولین چیزی است که باید مرورگر را ببینید

سبک های تنظیم مجدد پس از نصب سبک های خود را برای اقلام یک رویکرد نادرست است. در این مورد، هیچ چیز خوب نیست که منتظر نمایشگر مرورگر باشد. به یاد داشته باشید که ابتدا همیشه تنظیم مجدد CSS را تنظیم کنید، و سپس تمام سبک های دیگر.

بله، من درک می کنم این مسخره بود، اما این یکی از اشتباهات عمده توسعه دهندگان از مالا به بزرگ است. بسیاری از آنها را فراموش کرده اند.

برخی ممکن است یک سوال منطقی بپرسند: چرا این اتفاق می افتد؟ پاسخ ساده است: قوانین ثبت شده در زیر متن فایل CSS (و حتی با اتصال آنها در سند) ثبت شده، قوانین اعلام شده پیش از آن را بازنویسی کنید.

بیایید تا حد زیادی از موضوع حرکت نکنیم و ادامه دهیم. سبک های اریک مایر را به مثال ما اعمال کنید، اما بعد از توصیف خواص ما، همانطور که در 4 نمونه نشان داده شده است. ریاضیات زیر را می گویند: "چه چیزی لازم بود ثابت کرد."

3. از یک سند جداگانه CSS برای تنظیم مجدد CSS استفاده کنید

من باید (نه، آنها را مجبور نکردند) به این توصیه اشاره کنند. با استفاده از یک فایل جداگانه برای بازنشانی CSS یک عمل معمول است که تعداد زیادی از توسعه دهندگان پشتیبانی می کند.

در واقع، من به موقعیت خلقت پایبند هستم یک فایل بزرگ CSS با توجه به عملکرد بیشتر این رویکرد. اما ب این مساله من تمایل دارم با اکثر موافق باشم: تنظیم مجدد CSS باید به یک فایل جداگانه منتقل شود (معمولا Reset.CSS نامیده می شود). در این مورد، شما می توانید آن را در پروژه های مختلف بدون هیچ گونه تلاش برای شعبه از قوانین CSS دیگر استفاده کنید.

4. سعی کنید از یک انتخابگر جهانی اجتناب کنید

با وجود این واقعیت که این مفهوم کار می کند، کاربرد آن اغلب به دلیل عدم سازگاری با برخی از مرورگرها مطلوب نیست (به عنوان مثال، این انتخابگر در اینترنت اکسپلورر پردازش شده است). شما باید از این تکنیک فقط برای صفحات ساده، کوچک، استاتیک و قابل پیش بینی استفاده کنید (اگر قبلا آن را انجام دادید).

این توصیه ها بسیار مهم است زمانی که شما راه حل هایی مانند تم های CMS را توسعه می دهید. شما نمی توانید پیش بینی کنید که چگونه از آن استفاده می شود و چگونه آن را اصلاح می شود. بهتر است قوانین اساسی CSS را برای همه موارد توصیف کنیم تا از این مکانیسم غیر قابل پیش بینی (حتی یک جلد کوچکتر) از انتخابگر جهانی استفاده شود.

5. هنگام استفاده از تنظیم مجدد CSS، خواص بیش از حد را اجتناب کنید

یکی دیگر از دلایل اینکه من یک فایل جداگانه را برای بازنشانی CSS دوست ندارم، افزونگی بالقوه اعلامیه های بعدی خواص CSS است. تکرار افراد سبک های شما در کل مجموعه ای از فایل های CSS یک Movietone است و باید اجتناب شود. البته، گاهی اوقات ما بیش از حد تنبل هستیم تا سبک سبک ها را حفظ کنیم و برخی از آنها را ترکیب کنیم، اما حداقل سعی کنید!

بیایید به بازنشانی CSS از اریک بازگردیم. این مقادیر پیش فرض را برای آیتم های خطی، رنگ و پس زمینه تنظیم می کند بدن به روش زیر:

بدن (ارتفاع خط: 1؛ رنگ: سیاه؛ زمینه: سفید؛)

فرض کنید شما قبلا می دانید که چگونه عنصر به نظر می رسد بدن:

1. پس زمینه رنگ: #CCCCCCC؛
2. رنگ: # 996633؛
3. شما به صورت افقی می خواهید یک تصویر پس زمینه خاص را تکرار کنید.

در این مورد، نیازی به ایجاد یک انتخاب جدید برای توصیف خواص خود وجود ندارد - شما می توانید آنها را به سادگی آنها را در تنظیم مجدد CSS فعال کنید. بیایید این کار را انجام دهیم:

بدن (ارتفاع خط: 1؛ رنگ: # 996633؛ سابقه و هدف: #CCC URL (tiled-image.gif) تکرار X بالا سمت چپ؛)

نترسید که CSS را تنظیم مجدد کنید. آن را برای خودتان تنظیم کنید، آن را بر روی خودتان کار کنید. تغییر، بازسازی، حذف و اضافه کردن آن را به عنوان شما در مورد خاص خود نیاز دارید.

اریک مایر در مورد این گفت: "این مورد نیست که همه باید از تنظیم مجدد CSS بدون تغییر استفاده کنند."