CSS Academy · درس

التوريث والخاصية all

افهم قواعد توريث CSS واستخدم الخاصية all لإعادة ضبط الأنماط الموروثة

الدرس 4 من 413 خطوة

التوريث والخاصية all درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما التوريث؟

تنقل بعض خصائص CSS قيمتها المحسوبة تلقائيًا إلى العناصر الابنة. ويُسمى هذا التوريث. وهو يوفر عليك كتابة القاعدة نفسها لكل عنصر في المكون.

الخصائص الموروثة

الخصائص الموروثة عادةً هي خصائص الطباعة والنص:

font-family وfont-size وfont-weight وfont-style
color
line-height
letter-spacing
text-align
visibility
خصائص CSS المخصصة

الخصائص غير الموروثة

الخصائص غير الموروثة عادةً هي خصائص نموذج الصندوق والتخطيط:

margin وpadding وborder
width وheight
background
display وposition
box-shadow وtransform

الكلمة المفتاحية inherit

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

<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
  <input type="text" placeholder="Inherits font/color" />
  <button>Button inherits too</button>
  <textarea>Inherits</textarea>
  <select><option>Option A</option></select>
</div>

الكلمة المفتاحية initial

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

<div style="font-size: 30px; color: tomato;">
  <p>Normal text inherits large tomato-colored style from its parent.</p>
  <p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>

الكلمة المفتاحية unset

تتغير دلالة unset حسب السياق:

بالنسبة إلى الخصائص الموروثة: تعمل مثل inherit
بالنسبة إلى الخصائص غير الموروثة: تعمل مثل initial

وهي تمحو الخاصية فعليًا وتعيدها إلى حالتها الطبيعية.

<div style="color: tomato;">
  <p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
  <p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>

الكلمة المفتاحية revert

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

<div style="color: tomato; font-family: Georgia, serif;">
  Ancestor style is tomato serif text.
  <div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>

خاصية all

الخاصية all هي صيغة مختصرة تطبّق كلمة مفتاحية على جميع خصائص CSS في الوقت نفسه، باستثناء direction وunicode-bidi.

<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
  <div class="isolated-widget">all: initial — resets everything to spec defaults</div>
  <div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>

الاستخدام العملي لـ all: initial

استخدم all: initial عندما تحتاج إلى إنشاء مكوّن معزول تمامًا لا يتأثر بالأنماط العامة أو أنماط العنصر الأب:

<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
  Page context — large serif tomato text
  <div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>

نمط all: unset

أزل أنماط الأزرار الافتراضية في المتصفح لإنشاء أزرار مخصّصة، من دون الحاجة إلى معرفة جميع الخصائص المعنية:

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

التوريث والخصائص المخصّصة

تُورَّث الخصائص المخصّصة في CSS افتراضيًا. وهذا ما يجعلها قوية — فالمتغيّر الذي يتم تعيينه على :root يكون متاحًا في كل مكان. استخدم @property { inherits: false } لجعل الخاصية المخصّصة غير قابلة للتوريث.

تحقّق سريعًا

ما الكلمة المفتاحية التي تعيد الخاصية إلى القيمة الافتراضية لوكيل المستخدم في المتصفح، بدلًا من القيمة الأولية المحددة في مواصفات CSS؟

أجب عليها في الدرس التفاعلي

مراجعة

تنقل الخصائص الموروثة قيمها إلى العناصر المنحدرة، بينما لا تفعل الخصائص غير الموروثة ذلك. توفّر الكلمات المفتاحية inherit وinitial وunset وrevert تحكمًا صريحًا في ذلك. تعيد الخاصية all ضبط جميع الخصائص دفعةً واحدة — ما يجعلها قوية للمكوّنات المعزولة وعناصر النماذج المخصّصة.

البدء مجانًا

تعلم CSS مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «التوريث والخاصية all» مجاني؟

نعم — نص درس «التوريث والخاصية all» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «التوريث والخاصية all»؟

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

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «التوريث والخاصية all»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

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

جميع الدروس في هذه الدورة

حساب الخصوصية: Inline وID وClass وElement
التسلسل: المصدر والترتيب
‏!important: متى ولماذا لا نستخدمها
التوريث والخاصية all

← العودة إلى CSS Academy