CSS افتراضيا. إعادة تعيين أنماط باستخدام إعادة تعيين CSS. حيث يمكنني العثور على CSS ل CSS الافتراضي للمتصفح

CSS CSS الافتراضي لعناصر HTML (2)

لكل متصفح مختلف، لذلك:

فايرفوكس (أبو بريص): وبعد أو الذهاب إلى الموارد: // الموارد GRE - وإلقاء نظرة على html.css.
كروم / سفاري (WebKit):
- كروم (وميض):
متصفح الانترنت. (ترايدنت) ، إصدارات سابقة: http://web.archive.org/web/20170122223926/http://www.iecss.com/

أين يمكنني أن أجد CSS ل CSS الافتراضي للمتصفح؟

العديد من عناصر HTML لديها بعض خصائص CSS. بشكل افتراضي، والتي يمكن أن تؤدي أحيانا إلى سلوك غير معروف / غير المرغوب فيه. على سبيل المثال، يتم عرض حقول الإدخال بشكل مختلف في متصفحات مختلفة. أنا أبحث عن مكان يغطي خصائص CSS3 الجديدة وعناصر HTML5 الجديدة.

لقد رأيت في آخرين (المزيد من القضايا الأكبر سنا (مثل أوراق أنماط CSS افتراضيا في المتصفحات) التي تقدم حلول إعادة تعيين CSS. هذا الحل ليس ضروريا في بعض الأحيان، وغالبا ما أرغب في حفظ بعض الخصائص الأساسية (على سبيل المثال، اختيار حقول الإدخال في Chrome). بعبارات أخرى: أنا لا أريد أن أتخلص من الأشياء فقط لأنني لا أعرف ما يفعلونه .

وبالتالي، هل يوجد موقع يمكن أن يعطيني كل هذه المعلومات (أو ربما أكثر)؟

مستودع GitHub لجميع مواصفات HTML W3C والجداول الافتراضية نمط CSS للمطورين

1. 2. أنماط قياسية لبرنامج Internet Explorer

3. 4. أنماط قياسية لأوبرا

5. أنماط قياسية ل HTML4 (مواصفات W3C)

6. أنماط قياسية ل HTML5 (مواصفات W3C)

مثال، من خلال المواصفات الافتراضية W3C HTML4:

HTML، العنوان، Orchquote، Body، DD، DID، DL، DT، FITELTION، شكل، الإطار، إطارات، H1، H2، H3، H4، H5، H6، Noframes، OL، P، UL، Center، DIR، HR، القائمة، قبل (العرض: كتلة؛ Unicode-Bidi: تضمين) LI (عرض: لا شيء) الجدول (العرض: الجدول) TR (العرض: الجدول رأس- المجموعة) Tbody (عرض: جدول توسيط جدول توسيط) Colgroup ( عرض: الجدول العمود-Group) TD، TH COLGROUP (العرض: جدول العمود المائدة) TD، TH (العرض: خلية الجدول) التسمية التوضيحية (العرض: جدول التسمية التوضيحية) th (font-wink: أكثر جرأة؛ نص محاذاة : مركز التسمية التوضيحية (مركز التحويل: المركز) الجسم (الهامش: 8 بكسل) H1 (الخط الحجم: 2EM؛ الهامش: .67EM 0) H2 (الخط الحجم: 1.5EM؛ الهامش: .75EM 0) H3 (font- الحجم: 1.17EM؛ الهامش: .83EM 0) H4، P، Blockquote، UL، Filexet، شكل، OL، DL، DIR، القائمة (الهامش: 1.12EM 0) H5 (Font-size: .83em؛ الهامش: 1.5EM 0) h6 (font-size: .75EM؛ الهامش: 1.67EM 0) H1، H2، H3، H4، H5، H6، B، قوي (Font-Winke: أكثر جرأة) Orchquote (Marg في اليسار: 40PX؛ الهامش الأيمن: 40 بكسل) أنا، cite، em، var، العنوان (خط الخط: مائل) قبل، TT، رمز، KBD، SAMP (Font-Family: Monospace) قبل (White-Space: قبل) زر، Textarea، إدخال، حدد (عرض: Inline-Block) كبير (Font-Size: 1.17EM) صغير، فرعي، SUP (محاذاة رأسية: Sub) SUP (الجدول الرأسي: سوبر) الجدول (عمودي المحاذاة: سوبر) تباعد الحدود : 2px؛) Thead، TBOOT، TFOOT (عمودي المحاذاة: الأوسط) TD، TH، TR (العمودي المحاذاة: الانثناء) S، Strike، DEL (Text-Decoration: Line Orber) HR (Border: 1Px Inset) OL ، UL، DIR، القائمة، DD (هامش يسارا: 40 بكسل) OL (قائمة على الطراز: عشري) OL ul ul، ul ul، ul ul، ul ol (margin-top: 0؛ الهامش أسفل: 0) ش ، Ins (Text-Decoration: تسطير) BR: قبل (المحتوى: "\\ a"؛ المساحة البيضاء: سطر مسبق) المركز (Text-align: Center): Link، link: تمت زيارته (Text-Decoration: تسطير): التركيز (الخطوط العريضة: إعدادات إينفيرتي رقيقة المنقطة (لا تتغير) * / bdo (الاتجاه: LTR؛ Unicode-Bidi: تجاوز Bidi) BDO (الاتجاه: RTL؛ محاولة Unicode-BID I: تجاوز Bidi) * (الاتجاه: LTR؛ Unicode-Bidi: تضمين) * (الاتجاه: RTL؛ Unicode-Bidi: تضمين) @ Media Print (H1 (Break-Break - قبل: دائما) H1، H2، H3، H4، H5، H6 (Break-Break - بعد: تجنب) ul، OL، DL (استراحة الصفحة قبل: تجنب))

في هذه المقالة، سنتحدث عن إعادة تعيين الأساليب والنظر في مثال لإنشاء ملف Reset.css هذا.

ظهرت فكرة رمي الأساليب منذ حوالي 10 سنوات. والذي خلص بالفعل إلى أنه بمساعدة مجموعة صغيرة من أنماط CSS، أحضرت عرض الصفحة في جميع المتصفحات إلى نفسه. بالطبع لا يعمل دائما، ولكن يمكن تصحيح بعض اللحظات - على سبيل المثال، الحدود لا يفهم أين يحدث IE في بعض الإصدارات. أو السكتة الدماغية الزرقاء (الخطوط العريضة) في الحقول.

ليس لأحد مطور الواجهة الأمامية، ليس سرا أن المتصفحات متعجرفة للغاية وكل منها يعالج عناصر HTML بطريقته الخاصة، مضيفا أنماطها القياسية.

نظرا لأن هذه الأفكار اشتعلت فيها النيران لفترة طويلة، فليس من المستغرب أن هناك بالفعل ملفات جاهزة إعادة تعيين، عادة ما يسمى RESET.CSS، والاتصال بجميع المشاريع.

لماذا في ملف منفصل؟ نعم، فقط لأنها أكثر ملاءمة لنقلها من المشروع إلى المشروع.

فيما يلي إعادة تعيين مثال من 2007:

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 الترخيص: لا شيء (المجال العام) * / html، الجسم، div، span، التطبيق الصغير، الكائن، iframe، h1، h2، h3، h4، h5، h6، p، blockquote، pre، abbr، اختصار، عنوان، كبيرة، cite، code، del، dfn، em، img، is، kbd، q، samp، samp، الصغيرة، الضربة، قوية، sub، tt، tt، v، u، أنا، tt، var، b، b، b، b، U، I، مركز، DL، DT، DD، OL، LI، Filexet، شكل، تسمية، أسطورة، طاولة، طاولة، TFOOT، THEAD، TR، TH، TD، مقالة، جانبا، قماش، تفاصيل، تضمين، الشكل، الشكل، figcaption، تذييل الصفحة، رأس، hgroup، القائمة، nav، الإخراج، روبي، القسم، ملخص، الوقت، علامة، الصوت، الفيديو (الهامش: الحشد: 0؛ الحدود: 0؛ font-size: 100٪ ؛ الخط: ورث؛ محاذاة رأسية: خط الأساس؛) / * HTML5 عرض إعادة تشغيل دور للمتصفحات القديمة * / المقال، جانبا، التفاصيل، figcaption، الشكل، تذييل، رأس، hgroup، القائمة، nav، القسم (عرض: كتلة؛ ) الجسم (ارتفاع الخط: 1؛) OL، UL (نمط القائمة: لا شيء؛) outcquote، q (اقتباسات: لا شيء؛) blockquote: قبل، underquote: veetter، q: قبل، س: بعد (المحتوى: "؛ المحتوى: لا شيء؛) الجدول (حدود الحدود: C. Ollapse؛ تباعد الحدود: 0؛ في

هذا مجرد مستوى هذا الملف الذي اتخذته دائرة معينة من مطوري الويب.

أنصحك، سواء كنت مبرمج متمرس أو مبتدئين فقط في تطوير ملف إعادة الضبط الخاص بك. كأساس، يمكنك أن تأخذ المعيار الموضح أعلاه، استكماله مع محدداته أو تغيير تلك الموجودة. إليك مثال على مثل هذا الملف الذي قمت بتطويره لنفسي:

إدخال، Textarea، A، زر، حدد (مخطط تفصيلي: لا شيء) img (الحدود: لا شيء؛) HR (واضح: كلاهما؛ الحدود: لا شيء؛ خلفية: (كرر الخلفية: عدم التكرار؛) / * HTML5 إعادة تعيين دور العرض للمستعرضات الأقدم * / مقال، جانبا، تفاصيل، معجم، الشكل، تذييل الصفحة، رأس، HGROOU، القائمة، NAV، القسم (عرض: كتلة؛) الجسم (خط الارتفاع: 1؛) OL، ul (قائمة -STYLE: لا شيء. الهامش: الحشش: 0؛) Blockquote، Q (عروض الأسعار: لا شيء؛) Blockquote: قبل، Orchquote: VENTTER، Q: قبل، س: بعد (المحتوى: "؛ المحتوى: لا شيء؛) الجدول (طي الحدود: انهيار؛ تباعد الحدود: 0؛)

يمكنك KIP أي من التعليمات البرمجية أعلاه للاستخدام الشخصي، ولكن إذا كنت تستخدمه في مقالاتك - ضع رابطا للمصدر.

هذه المقالة هي الأولى من الدورة حول موضوع CSS Taming. اليوم سننظر إلى التكنولوجيا إعادة تعيين CSS..

لماذا تحتاج إليها؟

يحدد كل متصفح أنماطها الافتراضية لعناصر HTML المختلفة. من عند باستخدام CSS. إعادة تعيين يمكننا مستوى هذا الاختلاف لتوفير أنماط متصفح عبر الإنترنت.

على سبيل المثال، يمكنك استخدام عنصر أ. في وثيقتك. معظم المتصفحات مثل Internet Explorer و Firefox أضف رابط لون ازرق و حادوبعد ومع ذلك، تخيل أنه في خمس سنوات قرر شخص ما إنشاء متصفح جديد (دعنا نسميها Ultrabrowser). لم يكن مطورو المتصفحون التركيز الأزرق والضيق، لذلك قرروا تخصيص الروابط أحمر و خط غامق الخطوبعد يعتمد على هذا إذا قمت بتعيين القيمة الأساسية للأنماط للعنصر أ.، سيتم ضمان أن تكون كما تريد رؤيته، وليس كما هو مفضل عرض مطوري Ultrabrowser.

ولكن الآن ليس لدينا سجلات على الإطلاق، بما في ذلك بين الفقرات الفردية! ما يجب القيام به؟ لا تكذب وليس خائفا: أسفل تصريفنا، نصف القاعدة التي نحتاجها. اجعله يمكن القيام به طرق مختلفة: حدد المسافة البادئة من أسفل أو أعلى الفقرة، حددها في المئة أو بكسل أو في م.

الشيء الأكثر أهمية، المستعرض يلعب الآن وفقا لقواعدنا، وليس نحن وفقا لذلك. قررت أن أجري بهذه الطريقة:

* (الهامش: 0؛ الحشو: 0؛) ص (الهامش: 5 بكسل 0 10 بكسل 0؛)

نتيجة لذلك، كان لدينا ما يمكن رؤيته في المثال الثالث.

يمكنك إنشاء أنماط خاصة بك لإعادة التعيين، إذا قمت بحل بعض المهمة المعينة في مشروعك. على الرغم من هذا، لا يوجد خطوة بخطوة القيادة عن طريق إنشاء إعادة تعيين CSS الخاصة بك. يوصي بمبادئك الخاصة وأسلوبك الخاص.

لمساعدتك في اتخاذ خيار، سأقدم زوجين المزيد من الروابط:

أقل هو أكثر - خياري لإعادة تعيين CSS (إد إليوت).

2. إعادة تعيين CSS الخاص بك هو أول شيء لرؤيته المتصفح

إعادة تعيين أنماط بعد تثبيت أنماطك الخاصة للعناصر هي نهج غير صحيح. في هذه الحالة، لا شيء جيد لانتظار عرض المتصفح. تذكر أنك تقوم أولا بتوصيل CSS بإعادة تعيين CSS، ثم جميع الأنماط الأخرى.

نعم، أنا أفهم أنه كان سخيفا، لكن هذه هي واحدة من الأخطاء الرئيسية للمطورين من مالا إلى عظيم. كثير فقط ننسى ذلك.

قد يطرح البعض سؤالا منطقي: لماذا يحدث؟ الجواب بسيط: القواعد المسجلة أسفل نص ملف CSS (وحتى أقل من اتصالها في المستند)، الكتابة فوق القواعد المعلنة في وقت سابق.

دعونا لا نتحرك إلى حد كبير من الموضوع والمتابعة. تطبيق أنماط إريك ماير إلى مثالنا، ولكن بعد أوصاف خصائصنا، كما هو مبين في 4 أمثلة. سيقول الرياضيات ما يلي: "ما هو مطلوب لإثبات".

3. استخدم مستند CSS منفصل لإعادة تعيين CSS

لا بد لي من (لا، لم يجبرني) أن أذكر هذه النصيحة. باستخدام ملف منفصل لإعادة تعيين CSS هو الممارسة المعتادة التي تدعم. رقم ضخم المطورين.

في الواقع، أنا تلتزم بموقف الخلق ملف css واحد كبير بسبب أداء أكبر لهذا النهج. ولكن في هذا السؤال، أميل إلى الاتفاق مع معظم: إعادة تعيين CSS يجب أن تؤخذ في ملف منفصل. (عادة ما يسمى إعادة تعيين .css). في هذه الحالة، يمكنك استخدامه في مشاريع مختلفة دون بذل أي جهد لتفرع من قواعد CSS الأخرى.

4. حاول تجنب استخدام محدد عالمي

على الرغم من حقيقة أن هذا المفهوم يعمل، فإن تطبيقه هو في كثير من الأحيان غير مرغوب فيه بسبب عدم التوافق مع بعض المتصفحات (على سبيل المثال، يتم معالجة هذا المحدد ببرنامج Internet Explorer). يجب عليك استخدام هذه التقنية فقط للحصول على صفحات بسيطة وصغيرة وثابتة ويمكن التنبؤ بها (إذا كان عليك بالفعل القيام بذلك).

هذه النصيحة مهمة بشكل خاص عند تطوير حلول مثل مواضيع CMS. لا يمكنك التنبؤ مقدما كيف سيتم استخدامه وكيف سيتم تعديله. من الأفضل وصف قواعد CSS الأساسية لجميع العناصر بدلا من استخدام آلية هذه الآلية التي لا يمكن التنبؤ بها (حتى حجم أصغر) من المحددين العالمي.

5. تجنب الخصائص الزائدة عند استخدام إعادة تعيين CSS

سبب آخر لماذا لا أحب ملف منفصل لإعادة تعيين CSS هو التكرار المحتمل للإعلانات اللاحقة خصائص CSS. تكرار الأفراد من أنماطك بين مجموعة ملفات CSS بأكملها هي Movietone ويجب تجنبها. بالطبع، في بعض الأحيان نحن كسول للغاية لمواكبة أسلوب الأساليب والجمع بين بعضهم، ولكن على الأقل حاول!

دعنا نعود إلى إعادة تعيين CSS من إريك. يضع القيم الافتراضية للبند الطول واللون والخلفية الجسم. بالطريقة الآتية:

الجسم (ارتفاع الخط: 1؛ اللون: أسود؛ خلفية: أبيض؛)

لنفترض أنك تعرف بالفعل كيف سيبدو العنصر الجسم.:

لون الخلفية: #CCCCCC؛
اللون: # 996633؛
تريد أفقيا لتكرار صورة خلفية محددة.

في هذه الحالة، ليست هناك حاجة لإنشاء محدد جديد لوصف خصائصك - يمكنك ببساطة تمكينها في إعادة تعيين CSS. لنفعلها:

الجسم (خط الارتفاع: 1؛ اللون: # 996633؛ خلفية: url #ccc (tomet-image.gif) كرر-x أعلى اليسار؛)

لا تخف من تعديل إعادة تعيين CSS نفسه. قم بإعداده لنفسك، وجعله يعمل على نفسك. تغيير وإعادة بناء وإزالة وإضافته كما تحتاج في حالتك الخاصة.

قال إريك ماير عن هذا: "هذا ليس هو الحال عندما يجب على الجميع استخدام إعادة تعيين CSS دون تغيير".

كل شىء عناصر HTML الصفحات الافتراضية لها قيمها الخاصة. ولسوء الحظ، لا تفسر بنفس القدر من قبل المتصفحات المختلفة. نتيجة لذلك، يعاني تصميم الموقع، يتغير تصميمه عند تغيير المتصفح (متصفح الإنترنت). الغرض من إجراء إعادة تعيين التصميم هو تقليل عدم تناسق المتصفح في أشياء مثل ارتفاع الخط والحقول وحجم خطوط العنوان، إلخ.

أمثلة من البرامج النصية لإعادة ضبط نمط CSS

هناك رأي مفاده أن كل مشرف موقع الويب الخاص بالنفس يجب أن يكتب له الرمز الخاص إعادة تعيين CSS. لكنني مؤيد نهج آخر، خذ حل جاهز، فهمه ويصحما إذا لزم الأمر.

إريك ماير CSS إعادة

البرنامج النصي للتصريف من إريك مايير، بكلمات المؤلف نفسه عمدا شائع جدا. على سبيل المثال، لم يتم تحديدها في جسم عنصر، أي خلفية افتراضية. لذلك، يجب تغييرها وتحريرها وتوسيعها وتكوينها وفقا لاحتياجاتك. أضف الألوان المرغوبة للصفحات والروابط وما إلى ذلك.

ياهو! (YUI 3) إعادة تعيين CSS

CSS YUI 3 أنماط تنفذ النمط المثير للجدل من متصفحات عناصر HTML، بالإضافة إلى أي برنامج نصي لإعادة تعيين CSS الأخرى لإنشاء أساس موثوق لإنشاء مواقع الويب وتطبيقات الويب.

/ * YUI 3.18.1 حقوق الطبع والنشر 2014 Yahoo! وشركة كل الحقوق محفوظة. مرخصة تحت رخصة BSD. http://yuilibrary.com/license/ * / * تحتاج ToDO لإزالة الإعدادات الموجودة على HTML لأننا لا نستطيع "تي اسم اسمها. مع البادئة، هل يجب علي المجموعة بواسطة محدد أو خاصية توفير الوزن؟ * / HTML (اللون : # 000؛ الخلفية: #FFF؛) / * لا يمكن إزالة الإعدادات على الجسم نظرا لأننا نستطيع "تي اسم اسمه. * / / * اختبار TODO وضع Alass على الرأس. - فشل في FF. * / هيئة، DIV، DL، DT، DT، DD، UL، OL، LI، H1، H2، H3، H4، H5، H6، Pre، Code، Form، Flasset، Legend، المدخلات، Textarea، P، Blockquote، TD (الهامش: 0؛ الحشد: 0؛) الجدول (طي الحدود: الانهيار؛ التواج الحدودي: 0؛) الحقلة، img (الحدود: 0؛) / * todo تفكر في وراثة hanlding بشكل مختلف، وربما السماح IE6 فشل قليلا ... * / العنوان، التسمية التوضيحية، CITE، CODE، DFN، em، قوي، th، var (font style: عادي؛ خط الوزن: عادي؛) OL، UL (نمط القائمة: لا شيء؛) التسمية التوضيحية، ال (النص المحاذاة: اليسار؛) H1، H2، H3، H4، H5، H6 (Font-size: 100٪؛ Font-Wink :)؛ س: قبل، س: بعد (المحتوى: "؛) ABBR، المختصرات (الحدود: 0؛ متغير الخط: عادي؛) / * للحفاظ على ارتفاع الخط وظهور محدد * / SUP (محاذاة رأسية: Text-top؛) الفرعية (محاذاة رأسية: أسفل النص؛) الإدخال، Textarea ، حدد (font-family: Worherit؛ Font-size: Worherit؛ Wond-Winter: Worherit؛ * Font-Size: 100٪؛ / * لتمكين تغيير حجم IE * /) / * لأن الأسطورة لا يرث في IE * / الأسطورة (اللون: # 000؛) / * yui css الكشف ختم أيون * / # YUI3-CSS-Stamp.csSreset (عرض: لا شيء؛ في

إعادة ضبط الأساليب تطبيع .CSS.

Normalize.css هو ملف CSS مخصص يسمح للمتصفحات بعرض جميع العناصر أكثر باستمرار ووفقا للمعايير الحديثة. فحص مؤلفوه الاختلافات بين الأساليب متصفحات مختلفة بشكل افتراضي، لضبط تلك الأنماط التي تحتاج فقط إلى التطبيع.

/ *! Normalize.css v6.0.0 | رخصة ماساتشوستس للتكنولوجيا |. github.com/necolas/normalize.css * / / * المستند \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\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-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-. * / مقالة، جانبا، تذييل، رأس، NAV، القسم (العرض: كتلة؛) / ** * تصحيح حجم الخط والهامش على "عناصر H1" داخل "القسم" و * `` `al`` conefox في الكروم، فايرفوكس، و سفاري. * / h1 (font-size: 2EM؛ الهامش: 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. أضف العرض الصحيح في IE. * / figcaption، الشكل، الرئيسية (/ * 1 * / العرض: كتلة؛) / ** * أضف الهامش الصحيح في IE 8. * / الرقم (الهامش: 1EM 40PX؛) / ** * 1. أضف المربع الصحيح التحجيم في فايرفوكس. * 2. إظهار الفائض في الحافة و IE. * / ساعة (حجم المربع: مربع المحتوى؛ / * 1 * / الارتفاع: 0؛ / * 1 * / تجاوز: مرئي؛ / * 2 * /) / ** * 1. تصحيح الميراث وحجم حجم الخط في جميع المتصفحات. * 2. تصحيح تحجيم الخطوط الفردية في جميع المتصفحات. * / قبل (font-family: monospace، monospace؛ / * 1 * / font-size: 1EM؛ / * 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 * / / ** * 1. قم بإزالة الخلفية الرمادية على الروابط النشطة في IE 10. * 2. إزالة الثغرات في الروابط تسطير في iOS 8+ و Safari 8+. * / أ (لون الخلفية: شفاف؛ / * 1 * / -Webkit-Text-Skip: الكائنات؛ / * 2 * /) / ** * 1. قم بإزالة الحدود السفلية في Chrome 57- و Firefox 39- وبعد * 2. أضف الديكور النص الصحيح في Chrome، Edge، IE، Opera، Safari. * / abbr (الحد من الحدود: لا شيء؛ / * 1 * / نص زخرفة: تسطير؛ / * 2 * / نص زخرفة: تسطير المنقطة؛ / * 2 * /) / ** * منع التطبيق المكرر من `أكثر جرأة `حسب القاعدة التالية في Safari 6. * / b، قوي (Font-Wintoy: Worherit؛) / ** * أضف وزن الخط الصحيح في Chrome، Edge، و Safari. * / ب، قوي (font-wink الوزن: أكثر جرأة؛) / ** * 1. تصحيح الميراث وحجم حجم الخط في جميع المتصفحات. * 2. تصحيح تحجيم الخطوط الفردية في جميع المتصفحات. * / رمز، KBD، SAMP (Font-Family: modospace، monospace؛ / * 1 * / font-size: 1EM؛ / * 2 * /) / ** * إضافة نمط الخط الصحيح في Android 4.3. * / dfn (نمط الخط: مائل؛) / ** * أضف الخلفية الصحيحة واللون في IE 9-. * / علامة (لون الخلفية: # FF0؛ اللون: # 000؛) / ** * إضافة حجم الخط الصحيح في جميع المتصفحات. * / صغير (حجم الخط: 80٪؛) / ** * منع عناصر "SUB` و SUP` من التأثير على ارتفاع الخط في * جميع المتصفحات. * / sub، sup (font-size: 75٪؛ خط الارتفاع: 0؛ الموقع: قريب؛ عمودي محاذاة: خط الأساس؛) الفرعية (أسفل: -0.25em؛) SUP (أعلى: -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-. * / الصوت، الفيديو (العرض: كتلة مضمنة؛) / ** * أضف العرض الصحيح في iOS 4-7. * / الصوت: غير () (العرض: لا شيء؛ الارتفاع: 0؛) / ** * إزالة الحدود على الصور داخل الروابط في IE 10-. * / img (نمط الحدود: لا شيء؛) / ** * إخفاء الفائض في IE. * / svg: لا (: الجذر) (تجاوزت: مخفية؛) / * النماذج \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\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، حدد، Textarea (الهامش: 0؛) / ** * إظهار الفائض في IE. * 1. عرض الفائض في الحافة. * / زر، المدخلات (/ * 1 * / تجاوز: مرئي؛) / ** * قم بإزالة وراث تحويل النص في الحافة و Firefox و IE. * 1. قم بإزالة ميراث النص في فايرفوكس. * / زر، حدد (/ * 1 * / نص التحويل: بلا؛) / ** * 1. منع علة Webkit حيث (2) يدمر الضوابط الأصلية "الصوت" و "الفيديو" * في Android 4. * 2. تصحيح عدم القدرة على الأنواع النقدية الأنواع في نظام التشغيل iOS و Safari. * / زر، HTML، / * 1 * /، (-Webkit- المظهر: الزر؛ / * 2 * /) / ** * إزالة الحدود الداخلية والماشاد في فايرفوكس. * / زر :: - Moz-Focus-Inner، :: - Moz-Focus-Inner، :: - Moz-Focus-Inner، :: - Moz-Focus-Inner (نمط الحدود: لا شيء؛ الحشو: 0؛) / ** * استعادة أنماط التركيز عن طريق القاعدة السابقة. * / زر: -moz-fuccesring،: -moz-comfortring ،: -Moz-comfortring ،: -Moz-fuccisring (مخطط التفصيلي: 1px buttontext المنقط؛) / ** * 1. تصحيح التفاف النص في الحافة، أي. * 2. تصحيح ميراث اللون من عناصر "الحقول" في IE. * 3. قم بإزالة الحشو، لذلك لا يتم القبض على المطورين عند الخروج من عناصر "الحقلة" في جميع المتصفحات. * / الأسطورة (حجم التحجيم: مربع الحدود؛ / * 1 * / اللون: الوراثة؛ / * 2 * / العرض: الجدول؛ / * 1 * / الحد الأقصى العرض: 100٪؛ / * 1 * / الحشو: 0 ؛ / * 3 * / أبيض الفضاء: طبيعي؛ / * 1 * /) / ** * 1. أضف العرض الصحيح في IE 9-. * 2. أضف المحاذاة الرأسية الصحيحة في Chrome و Firefox و Opera. * / التقدم (العرض: كتلة مضمنة؛ / * 1 * / عمودي محاذاة: خط الأساس؛ / * 2 * /) / ** * إزالة شريط التمرير العمودي الافتراضي في IE. * / textarea (تجاوز الفائض: تلقائي؛) / ** * 1. أضف التحجيم الصحيحي في IE 10-. * 2. قم بإزالة الحشو في IE 10-. * /، (تحجيم مربع: مربع الحدود؛ / * 1 * / الحشو: 0؛ / * 2 * /) / ** * تصحيح نمط المؤشر لزيادة الزيادة وخفض الأزرار في الكروم. * / :: - WebKit-Inner-spin-button، :: - WebKit-Outer-SPIN-Button (الارتفاع: Auto؛) / ** * 1. تصحيح المظهر الغريب في Chrome و Safari. * 2. تصحيح نمط المخطط التفصيلي في رحلات السفاري. * / (-Webkit-liseance: TextField؛ / * 1 * / Offset Offset: -2px؛ / * 2 * /) / ** * قم بإزالة الحشو الداخلي وإلغاء الأزرار في Chrome and Safari على MacOS. * / :: - WebKit-Search-Cancel-button، :: - WebKit-Search-Decoration (-Webkit-مظهر: لا شيء؛) / ** * 1. تصحيح عدم القدرة على النمط الأنواع قابلة للنقر في نظام التشغيل iOS و Safari. * 2. تغيير خصائص الخط "لا يرث في Safari. * /:: - زر تحميل ملف WebKit (-Webkit-مظهر: زر؛ / * 1 * / الخط: Worherit؛ / * 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. أضف العرض الصحيح في الحافة، أي، و Firefox. * / التفاصيل، / * 1 * / القائمة (عرض: حظر؛) / * * أضف العرض الصحيح في جميع المتصفحات. * / ملخص (عرض: قائمة القائمة؛) / * البرمجة النصية \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\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. * / قالب (العرض: لا شيء؛) / * مخفي \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\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 وتعيينها لهم عندما يمكنك استخدام المحدد *، لأن عملها ينطبق على جميع أتش تي أم أل.

* (الهامش: 0؛ الحشو: 0؛)

ولكن لسوء الحظ، هذه ليست ممارسة جيدة. المتصفح صعب للغاية (يستغرق الكثير من الوقت مقارنة بإجراءات إعادة تعيين CSS الأخرى) قم بتطبيق القواعد على كل عنصر في المستند، خاصة على صفحات الويب الكبيرة، ويمكنه أيضا تدمير العديد من الأنماط الافتراضية الجيدة.

إعادة تعيين نمط وورد

إذا كنت ترغب في استخدام إحدى طرق إعادة تعيين أنماط CSS الموصوفة أعلاه للموقع على WordPress، فيمكن القيام بذلك بطريقتين.

الأول هو أنك تحتاج إلى نسخ رمز إعادة التعيين إلى بداية ملف Style.css الخاص بموضوع WordPress الخاص بك (بعد خطوط التأليف واسم الموضوع، أي بعد النص مؤطر والنجمة / * ... * وبعد

@ import "Reset.css"؛

إذا كان هناك توجيه @ import في CSS، فيجب أن يكون في بداية الجدول (قبل كل القواعد). خلاف ذلك، يمكن للمتصفح تجاهله.

بمعنى آخر، لتعزيز السرعة، يتم تكوين جداول أنماط CSS، كقاعدة عامة، إلى ملف واحد. لذلك، استخدم Apport دون حاجة حقيقية.

كما ترون، فإن تصريف الأساليب في WordPress ليس خاصا.

شكرا

عند كتابة المقالة، تم استخدام المصادر التالية.