1.3التبويبات الثلاثة: المحتوى، النمط، المتقدّم
الأساسي في 30 ثانية
- المحتوى: الماذا (نصّ، رابط، خيارات وظيفية للعنصر).
- النمط: المظهر (ألوان، طباعة، خلفية، حدود).
- المتقدّم: التقني (هوامش/paddings، تموضع، استجابة، CSS).
الخيط الناظم — نادية تتموضع في كل مكان
تذعر نادية قليلًا: لكل ودجة إعدادات كثيرة. ثم تلاحظ أنه دائمًا التنظيم نفسه — ثلاثة تبويبات. وحالما تفهم المنطق، تضبط أي عنصر دون بحث: المحتوى في المحتوى، المظهر في النمط، الهوامش في المتقدّم.
تكملة 1.2 — المفتاح لعدم الضياع أبدًا في الإعدادات.
1. ثلاثة تبويبات، دائمًا
يُضبَط كل عنصر تقريبًا (ودجة أو حاوية) عبر ثلاثة تبويبات. تبويب المحتوى يحمل المحتوى والخيارات الوظيفية: نصّ عنوان ومستواه، رابط زر، صور شريط عرض. تبويب النمط يُدير المظهر: الألوان، الطباعة، الخلفية، الحدود، الظلال. تبويب المتقدّم يجمع الإعدادات الدقيقة والتقنية: الهوامش والـ paddings، التموضع، إظهار الاستجابة، الأصناف والـ CSS المخصّص.
هذا التنظيم منهجي: تعرف دائمًا أين تبحث. توفّر نادية وقتًا هائلًا — لا نبش بعد الآن.
2. السؤال الصحيح للتبويب الصحيح
العادة: اسأل نفسك «ماذا أريد أن أُغيّر؟». الماذا (نصّ، رابط) → المحتوى. المظهر (لون، خطّ) → النمط. الفراغ والتقني (هامش، padding، إخفاء على الجوّال) → المتقدّم.
لزر العرض: النصّ والرابط في المحتوى، وردي العلامة في النمط، والـ padding والهامش السفلي في المتقدّم.
🔎 مثال ملموس — ضبط زر العرض (حالة نادية)
تبويب المحتوى: نصّ «طلب عرض سعر»، رابط /contact.
تبويب النمط: وردي العلامة، زوايا مُدوّرة.
تبويب المتقدّم: padding مريح، هامش سفلي 24px.
→ المنهج نفسه لأي عنصر.النتيجة: نضبط كل شيء دون بحث.
الدرس: سؤال واحد → تبويب واحد.
مفردات القسم
- التبويبات الثلاثة
- التنظيم المنهجي لإعدادات كل عنصر تقريبًا: المحتوى، النمط، المتقدّم.
مثال بسيط: عنوان، زر، صورة، حاوية: كلها لها هذه التبويبات الثلاثة.
ما ليس كذلك: ظنّ أن لكل ودجة واجهة فريدة.
رد فعل: عنصر جديد؟ ابحث في التبويبات الثلاثة نفسها.
- تبويب المحتوى
- المحتوى والخيارات الوظيفية (نصّ، مستوى، رابط، صور…).
مثال بسيط: نصّ ورابط زر العرض.
ما ليس كذلك: البحث فيه عن اللون (هو في النمط).
رد فعل: الماذا → المحتوى.
- تبويب النمط
- المظهر: ألوان، طباعة، خلفية، حدود، ظلال.
مثال بسيط: وردي العلامة على الزر.
ما ليس كذلك: البحث فيه عن الهوامش (هي في المتقدّم).
رد فعل: المظهر → النمط.
- تبويب المتقدّم
- الإعدادات الدقيقة: هوامش/paddings، تموضع، استجابة، أصناف، CSS.
مثال بسيط: padding الزر وهامشه السفلي.
ما ليس كذلك: البحث فيه عن نصّ العنصر (هو في المحتوى).
رد فعل: الفراغ والتقني → المتقدّم.
- المنطق المنهجي
- التنظيم نفسه في كل مكان: تعرف دائمًا أين تجد إعدادًا.
مثال بسيط: تضبط نادية 10 عناصر مختلفة دون نبش أبدًا.
ما ليس كذلك: إعادة تعلّم الواجهة لكل ودجة.
رد فعل: منطق واحد تحفظه، صالح في كل مكان.
في التطبيق — إتقان التبويبات الثلاثة
- اختر زرًا: في المحتوى، غيّر نصّه ورابطه.
- في النمط، غيّر لونه وطباعته.
- في المتقدّم، اضبط padding وهامشه السفلي.
- أعِد التمرين على عنوان وصورة: لاحظ المنطق نفسه.
نصّ جاهز للقول — طمأنة زبون يريد «تغيير كل شيء» (20 ث)
«كل شيء قابل للتعديل بسهولة: النصّ والروابط، الألوان والخطوط، التباعدات. وبما أن الأداة ترتّب الإعدادات دائمًا بالطريقة نفسها، أستطيع ضبط كل عنصر بسرعة إن أردتَ تغييرًا.»
أظهري أن اتّساق الأداة = سرعة استجابة للزبون.
قالب للنسخ واللصق — أين أضبط ماذا
أريد أن أُغيّر: _______________
→ الماذا (نصّ، رابط، خيارات): تبويب المحتوى
→ المظهر (لون، خطّ، حدّ): تبويب النمط
→ الفراغ/التقني (هامش، padding، استجابة): تبويب المتقدّممبتدئ
احفظ قاعدة «ماذا / مظهر / فراغ» قبل استكشاف الخيارات المتقدّمة.
ربح وقت
سؤال «ماذا أُغيّر؟» يتجنّب النبش في التبويبات الخاطئة.
حاوية
المنطق نفسه: خلفية في النمط، padding/استجابة في المتقدّم.
إعادة إنتاج نمط
انسخ نمط عنصر والصقه على آخر (نقر يمين) للإسراع.
✓ ممارسات جيدة
- اسأل «ماذا / مظهر / فراغ» لإيجاد التبويب الصحيح.
- احفظ أن الهوامش/paddings في المتقدّم.
- انسخ والصق نمطًا لربح الوقت.
✗ أخطاء شائعة
- البحث عن الهوامش في النمط.
- البحث عن اللون في المحتوى.
- إعادة تعلّم الواجهة لكل ودجة.
النقاط الأساسية
- المحتوى = الماذا؛ النمط = المظهر؛ المتقدّم = الفراغ/التقني.
- الهوامش والـ paddings → تبويب المتقدّم.
- المنطق نفسه لكل عنصر.
- سؤال واحد → تبويب واحد.
تحدّي 48 ساعة — طبّق غدًا
خذ زرًا وعدّله في التبويبات الثلاثة: نصّ+رابط (المحتوى)، لون (النمط)، padding+هامش (المتقدّم). أعِد على عنوان لتلاحظ المنطق نفسه. 15 دقيقة.
- أعرف ما يذهب إلى المحتوى، النمط، المتقدّم.
- أجد الهوامش/paddings في المتقدّم.
- أطبّق المنطق نفسه على كل عنصر.
أسئلة شائعة
أين تُضبَط الهوامش والـ paddings؟
في تبويب المتقدّم (مع التموضع والاستجابة)، لا في النمط. النمط يجمع المظهر (ألوان، طباعة، حدود).
هل لكل الودجات هذه التبويبات الثلاثة؟
كل العناصر تقريبًا (ودجات وحاويات). محتوى التبويبات يتغيّر حسب العنصر، لكن المنطق يبقى ذاته، ما يوفّر الوقت.
هل يمكنني نسخ نمط عنصر؟
نعم: نقر يمين → نسخ، ثم «لصق النمط» على عنصر آخر. مفيد لمواءمة عدّة أزرار أو عناوين بسرعة.
تريد نادية زيادة الفراغ تحت زرها. في أي تبويب تضبط الهامش؟