نقدم ترجمة المقال "لماذا CSS Grid أفضل من Bootstrap لإنشاء التخطيطات" بقلم Per Harald Borgen، المنشور على موقع ru.hexlet.io.

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

تصبح هذه الفوائد ملفتة للنظر بشكل خاص عند مقارنة CSS Grid بإطار العمل الأكثر شيوعًا، Bootstrap. لا يمكنك فقط إنشاء تخطيطات كانت مستحيلة في السابق بدون JavaScript، ولكن ستصبح التعليمات البرمجية الخاصة بك أسهل في الصيانة والفهم.

دعونا نلقي نظرة على الأسباب الثلاثة الأولى التي تجعلني أعتقد أن CSS Grid متفوق على Bootstrap.

سوف يصبح الترميز أسهل

سيؤدي استبدال Bootstrap بـ CSS Grid إلى جعل HTML أكثر نظافة. على الرغم من أن هذه ليست الفائدة الأكثر أهمية، إلا أنها ربما تكون أول فائدة ستلاحظها.

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

بوتستراب

دعونا نلقي نظرة أولاً على الترميز المطلوب لإنشاء هذا الموقع في Bootstrap.

وهنا أود الانتباه إلى هذا:

1. يجب أن يكون لكل سطر علامة منفصلة
   .
2. يجب استخدام أسماء الفئات (col-xs-2) للإشارة إلى التخطيط.
3. عندما يصبح هذا النمط معقدًا، فإن HTML كذلك.

إذا كان هذا موقعًا سريع الاستجابة، فعادةً ما تبدو العلامات أسوأ:

شبكة CSS

الآن دعونا نلقي نظرة على طريقة لتنفيذ نفس الشيء في CSS Grid. وهنا HTML:

كان بإمكاني استخدام العناصر الدلالية، لكنني قررت الالتزام بـ div لجعل المقارنة مع Bootstrap أكثر وضوحًا.

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

وعلى عكس Bootstrap، لن يصبح هذا الترميز معقدًا جدًا مع زيادة تعقيد تخطيط الصفحة.

في مثال Bootstrap، لم تكن مطالبًا بإضافة أي CSS في CSS Grid، فأنت بالتأكيد بحاجة إلى ذلك. وبشكل أكثر تحديدًا، تحتاج إلى إضافة هذا:

بالنسبة للبعض، قد تكون هذه نقطة بيع لـ Bootstrap: لا داعي للقلق بشأن CSS لإنشاء شبكة بسيطة - ما عليك سوى إنشاء التخطيط بتنسيق HTML.

ولكن كما سترون في النقطة التالية، فإن العلاقة بين العلامات والتخطيط هي في الواقع ثغرة أمنية عندما يتعلق الأمر بالمرونة.

المزيد من المرونة

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

بمعنى آخر، قم بتغيير التخطيط من هذا:

الى هذا:

شبكة CSS

يعد القيام بذلك باستخدام CSS Grid أمرًا سهلاً للغاية. نضيف استعلام وسائط ونمزج الكتل المختلفة كما نريد:

تُسمى القدرة على إنشاء تخطيط بهذه الطريقة - دون القلق بشأن كيفية كتابة HTML - باستقلالية أمر المصدر، وهو فوز كبير للمطورين والمصممين.

تسمح لك CSS Grid بتحويل HTML إلى ما كان من المفترض أن تكون عليه. في ترميز المحتوى، وليس في الرؤية، وهو ما يهدف CSS إلى القيام به.

بوتستراب

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

إن القيام بذلك باستخدام استعلام الوسائط ليس مهمة تافهة. لا يمكن القيام بذلك إلا باستخدام HTML وCSS، وسيكون عليك التلاعب بجافا سكريبت.

يوضح هذا المثال الفائدة الكبيرة لـ CSS Grid التي جربتها بنفسي.

لا مزيد من حدود 12 عمودًا

إنها ليست المشكلة الأكبر، لكنها كانت مزعجة في كثير من الأحيان. نظرًا لأن شبكة Bootstrap مقسمة إلى 12 عمودًا، فستواجه مشكلات إذا كنت تريد تخطيطًا مكونًا من خمسة أعمدة. أو سبعة. أو تسعة. أو من عدد ليس اثني عشر.

ليس الأمر كذلك مع CSS Grid. يمكنك إنشاء تخطيطك الخاص بالعدد الذي تريده من الأعمدة. وهنا تخطيط سبعة أعمدة.

يتم ذلك عن طريق تعيين أعمدة قالب الشبكة للتكرار (7، 1fr) مثل هذا:

قد يكون هناك اختراقات للقيام بذلك في Bootstrap... وأنا أعلم أن Bootstrap 4 يستخدم Flexbox، الذي يسمح بهذه المرونة، لكنه لم يخرج بعد من الإصدار التجريبي.

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

ولكن قبل أن تتخلى عن استخدام CSS Grid بالكامل، أقترح عليك الاستماع إلى ما يقوله Morten Rand-Hendriksen حول هذا الموضوع. ويقول إن CSS Grid هي فرصة لإعادة التفكير في كيفية تفكيرنا في التوافق مع الإصدارات السابقة:

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

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

خاتمة

"كلما استخدمت CSS Grid أكثر، أصبحت مقتنعًا أكثر بأنه لا توجد فائدة من إضافة طبقة تجريد فوقها. CSS Grid عبارة عن إطار تخطيط مدمج في المتصفح مباشرةً."

• درس تعليمي

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

1. مدقق W3C

يوصى بالتحقق من HTML وCSS للموقع من خلال خدمة validator.w3.org. ستقوم هذه الخدمة بمسح الكود وعرض الأخطاء، على سبيل المثال:

• العلامة غير مغلقة؛
• الأحرف غير الموصى بها في الروابط؛
• يتم استخدام علامة غير مستحسنة؛
• السمة المطلوبة غير محددة؛
• وغيرها.

2. التخطيط بتنسيق UTF-8

عند تخطيط الصفحة، عليك التأكد من ضبط ترميز الملف على UTF-8 (بدون قائمة مكونات الصنف). يقوم كل محرر نصوص بتعيين الترميز بشكل مختلف.

يتيح لك الملف بتنسيق UTF-8 استخدام أحرف غير قياسية (على سبيل المثال، رموز اللغات المختلفة ورموز العملات وغيرها).

تحتاج أيضًا إلى إخبار المتصفحات بأن الصفحة مفتوحة بتشفير UTF-8. ويتم ذلك من خلال العلامة أدناه:

3. عدة عناصر لها نفس المعرف

يجب عدم تكرار قيمة سمة المعرف في كود HTML.

4. العفاريت

يوصى بدمج عدة صور صغيرة في ملف واحد (يُسمى هذا الملف بالكائن). سيؤدي ذلك إلى تقليل عدد الطلبات الواردة إلى الموقع وتحسين سرعة تحميل الصفحة.

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

تتمثل مزايا خطوط العفاريت في الحفاظ على الجودة عند تغيير حجم الرموز وحجمها الأصغر. لكن العيب هو أنه لا يمكنك استخدام أكثر من لون واحد في الأيقونة.

5. الكثير من المحددات

لا ينصح باستخدام أكثر من ثلاثة محددات، لأن وهذا يؤثر على أداء الموقع.

/* غير مستحسن، تداخل كبير */ .page .item .title a () /* يمكن اختصاره */ .page .item a ()
تقرأ المتصفحات CSS من اليمين إلى اليسار. أولئك. في الكود أعلاه، سيتم أولاً تحديد جميع الروابط الموجودة في الصفحة، ثم سيتم تحديد تلك الروابط الموجودة داخل عنصر .item.

6. أنماط HTML

تم تصميم HTML لعرض المعلومات (النص والصور). يتم تصميم المحتوى (تغيير الحجم واللون والخط) في CSS.

خطأ في الكود

خطأ في الكود

7. أسماء الفئات غير صحيحة

يقوم العديد من مصممي التخطيط، عندما يحتاجون إلى جعل النص باللون الأخضر، بإرفاق الفئة .green به.

رسالة نصية

وهذا خطأ، لأن... عند تغيير التصميم قد تتغير العديد من الألوان، على سبيل المثال قد يظهر نص الرسالة باللون الأزرق بدلاً من اللون الأخضر. ثم سيتعين عليك البحث عن جميع العلامات التي تحتوي على الفئة .green واستبدالها بـ .blue.

رسالة نصية

رسالة نصية

8. البكسلات في القيم الكسرية

تسمح لك بعض المتصفحات بتحديد وحدات البكسل بقيم كسرية، مثل "1.5 بكسل". لكن هذا خطأ، لأن... البيكسل وحدة غير قابلة للتجزئة. بدلاً من "1.5px"، من الأفضل استخدام "1.5em".

P ( /* غير صحيح */ تباعد الأحرف: 1.5 بكسل; /* صحيح */ تباعد الأحرف: .005em;)

9. استخدام الفئات بدلاً من المعرفات

يوصى بالتحديد حسب الفئة بدلاً من المعرف، لأنه المحددات ذات المعرف لها وزن أكبر من تلك الخاصة بالفئات، وسيكون من الصعب تجاوزها.

#modal a (color: blue;) /* لا يمكن تجاوز اللون أدناه، لأن #modal له وزن أكبر من الفئات */ .modal-header a ( color: #333; ) /* في هذه الحالة سيتعين عليك إضافة #modal */ #modal .modal-header a ( color: #333; )
كما لا ينصح باستخدامه!مهم، لأنه وزنه أعلى من وزن سمة المعرف، وسيكون من الصعب أيضًا تجاوزه.

10. القائمة

يجب أن يتم تنسيق القائمة كقائمة.

الصفحة الرئيسية الأخبار عن الشركة

• بيت
• أخبار
• عن الشركة

11. البديل المفقود للصور

يجب تحديد السمة البديلة في العلامات (يمكن أن تكون فارغة).

12. العلامات

يجب أن يكون هناك عنوان واحد فقط لكل علامة في كل صفحة

. في الأساس، تحتوي هذه العلامة على عنوان الصفحة.

13. النسخ

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

/* غير صحيح */ .tovar () .stranica () .zapros () /* صحيح */ .product () .page () .query ()

14. كليرفيكس

من الصعب الكتابة عن Clearfix باختصار، لكنني سأشير إلى نقطة مفادها أن العديد من مصممي التخطيط يرتكبون خطأً في رأيي.

يجب تحديد class.clearfix في العلامة الأصلية، وعدم وضعه بجوارها.

15. HTML - لغة البرمجة

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

معلومات: لماذا تحتاج إلى CSS؟

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

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

• يساعد على تجنب الازدواجية
• يسهل الصيانة
• يسمح لك بإجراء تغييرات على الموقع بأكمله في مكان واحد

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

عندما يفتح المستخدم صفحة ويب، يقوم المتصفح بتنزيل معلومات النمط مع محتوى الصفحة.

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

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

المزيد من التفاصيل

توفر لغة الترميز مثل HTML أيضًا بعض الطرق لتحديد الأنماط.

على سبيل المثال، في HTML يمكنك استخدام العلامة لجعل النص غامقًا، أو تحديد لون خلفية الصفحة في العلامة .

عند استخدام CSS، لا يتم عادةً استخدام تحديد الأنماط باستخدام لغة الترميز، نظرًا لأن جميع معلومات التصميم يمكن قراءتها وتعديلها بسهولة في ملف CSS.

الإجراء: قم بإنشاء ورقة أنماط

1. قم بإنشاء ملف نصي جديد في نفس الدليل مثل doc1.html الذي تم إنشاؤه في المقالة الأولى.
2. احفظه كـ style1.css. سيكون هذا الملف بمثابة ورقة الأنماط الخاصة بك.
3. انسخ السطر التالي والصقه في ملف CSS، ثم احفظ الملف: strong (اللون: أحمر؛)

ربط ورقة الأنماط بالمستند

1. لربط مستندك بورقة الأنماط، يلزمك إجراء بعض التغييرات على ملف HTML. أضف الأسطر أدناه:

   جتصاعدي سأسلوب سهيتس

2. احفظ الملف وافتحه في متصفحك. ستجعل ورقة الأنماط الأحرف الكبيرة باللون الأحمر:

بالإضافة إلى اللون الأحمر، هناك أسماء ألوان أخرى في CSS.

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

يوفر لك CSS وقتًا ثمينًا وطاقة. تحدد أوراق الأنماط المتتالية، كما يوحي اسمها، نمطًا محددًا للعناصر الموجودة على صفحات الويب استنادًا إلى قائمة الأولويات، والتي يطلق عليها عادة "التتالي". وبصرف النظر عن هذا، فهو يسمح لك أيضًا بإدارة العناصر المختلفة على صفحات الويب الخاصة بموقعك. يمكن لورقة أنماط CSS واحدة التحكم في الخط والتنسيق وحجم النص والموضع والتصميم واللون لموقع الويب بأكمله. على الرغم من أن Cascading Style Sheets يمكنها تغيير العرض التقديمي ومظهر موقع الويب الخاص بك، إلا أنها لا علاقة لها بتصميم موقع الويب.

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

فصل عرض الموقع عن محتواه.

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

زيادة سرعة تحميل الموقع.

نظرًا لأن Cascading Style Sheets عبارة عن ملفات نصية، فهي خفيفة الوزن وتستخدم نطاقًا تردديًا أقل، مما يؤدي بدوره إلى زيادة سرعة تحميل موقعك. وفقًا للإحصاءات، فإن الموقع الذي يستخدم أوراق أنماط خارجية تعتمد على CSS يتم تحميله بمعدل أسرع سبع مرات تقريبًا من موقع مماثل لا يحتوي على هذه التقنية. نظرًا لأنه يتم تحميل المستندات النصية بسرعة كبيرة، فسيتم عرض صفحات الويب في غضون ثوانٍ تقريبًا، مما سيكون له تأثير إيجابي على تجربة الزائر الإجمالية عند زيارة موقعك.

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

توافق CSS مع المتصفحات الحديثة.

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

كما يتبين مما سبق، فإن تقنية CSS، بالإضافة إلى توفير أدوات لإنشاء مواقع ويب حديثة وجذابة، تساعد أيضًا في حل عدد من المشكلات. وهذا في حد ذاته يحدد الأهمية العالية لـ CSS.

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

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

يجب كتابة الرابط (href) في علامة رابط واحدة. يجب أن يبدو محتوى الرابط في HTML5 كما يلي: href=”style.css” rel=”stylesheet”. لا تنس أن علامة الارتباط نفسها موجودة بين علامات المفاتيح الرئيسية المقترنة.

بعد قيمة href، تتم الإشارة إلى اسم ملف CSS الذي يجب إرفاقه بالمستند (هذا ليس بالضرورة النمط). إذا كان الملف الذي يحتوي على الأنماط موجودًا في مجلد آخر، فيجب عليك تحديد المسار إليه باستخدام شرطة مائلة (/).

بناء جملة CSS

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

أولا، تحقق من المحدد. يجب أن يتطابق المحدد مع ما كتبته في ملف html. أي أنه إذا تم تحديد الفئة = "container" في html، فسيتم كتابة ".container" في CSS بدلاً من المحدد. لاحظ النقطة التي قبل العنوان. يتم وضع الفترة فقط قبل الفصول الدراسية. إذا كنت تحدد نمطًا لعناوين h1، فلن تكون هناك حاجة إلى نقطة.

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

المتصفح

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

استخدم متصفحات مختلفة للاختبار: Opera، Google Chrome، Firefox. لا ينصح بالاعتماد على Internet Explorer لأنه ليس محور التركيز الأساسي لشركة Microsoft، مما يجعله "غير متسق" مع CSS3.

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

ميراث

أصعب شيء يمكن فهمه في CSS هو الميراث. في حين أنه غالبًا ما يكون أساس التعليمات البرمجية غير العاملة.

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

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

عندما تجد حاوية أو عنصرًا آخر يحتوي على نمط مطبق لا يعمل، قم بإلقاء نظرة فاحصة على العنصر "المتداخل" فيه.

ربما يحتوي العنصر الأصلي على خاصية تمنع خاصية أخرى في العنصر الفرعي من العمل. يمكنك قراءة المزيد عن الميراث في أي كتاب مرجعي لـ CSS.