الميراث في CSS
تشرح هذه المقالة التوريث في CSS۔
يمكنك مراجعة الخصائص الموروثة وغير الموروثة الممثلة۔
YouTube Video
HTML للمعاينة
css-inheritance.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Inheritance</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-inheritance.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Inheritance</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Inheritance</h2></header>
19 <article>
20 <h3>Example of Inheritance</h3>
21 <section>
22 <p>
23 Example of P Element.<br>
24 <span>Example of Span Element</span>
25 </p>
26 </section>
27 <div>
28 Example of Div Element
29 </div>
30 <ul>
31 <li>List Item 1</li>
32 <li>List Item 2</li>
33 <li>List Item 3</li>
34 </ul>
35 </article>
36 <article>
37 <h3>all</h3>
38 <section>
39 <h4>Initial</h4>
40 <div class="all-initial">This is an initial element</div>
41 </section>
42 <section>
43 <h4>Inherit</h4>
44 <div class="parent-inherit">
45 <div class="all-inherit">This is an inherited element</div>
46 </div>
47 </section>
48 <section>
49 <h4>Unset All</h4>
50 <div class="parent-unset">
51 <div class="all-unset">This is an unset element</div>
52 </div>
53 </section>
54 <section>
55 <h4>all and !important</h4>
56 <div class="important-style">
57 <div class="all-with-important">
58 This is an initial element with !important
59 </div>
60 </div>
61 </section>
62 </article>
63 </main>
64</body>
65</html>الميراث في CSS
في CSS، بعض الخصائص تُورث تلقائيًا من العناصر الأبوية إلى العناصر الأطفال۔ هذه آلية مفيدة لأنه بمجرد تعيين خاصية معينة، سيكون لدى العناصر الأطفال نفس النمط، مما يلغي الحاجة إلى تعيينها بشكل متكرر۔ ومع ذلك، ليست كل الخصائص تُورث؛ بعض الخصائص تُورث بينما البعض الآخر لا يُورث۔ على سبيل المثال، color وfont-family تُورث، لكن خصائص نموذج الصندوق مثل margin وpadding لا تُورث۔
الخصائص الموروثة
الخصائص القابلة للوراثة هي بشكل رئيسي تلك المتعلقة بالنصوص والخطوط۔
الخصائص الموروثة بشكل شائع
color: لون النص
1body {
2 color: black;
3}- في هذه الحالة، سيكون لدى جميع العناصر الأطفال داخل
bodyلون نص أسود۔
font-family: عائلة الخط
1body {
2 font-family: "Times New Roman", cursive;
3}- جميع العناصر الأطفال تستخدم خط
Arial۔
font-size: حجم النص
1body {
2 font-size: 16px;
3}- سيكون كل النص داخل
الجسمبشكل افتراضي16px.۔
line-height: تباعد الأسطر
1p {
2 line-height: 1.5;
3}- سيتم عرض النص داخل عنصر
<p>بارتفاع سطر 1.5 مرة، مما يؤثر أيضًا على عناصره الفرعية.۔
text-align: محاذاة النص
1div {
2 text-align: center;
3}- يتم عرض النص والعناصر المضمنة داخل عنصر
divفي المنتصف.۔
visibility: رؤية العنصر
1div {
2 visibility: hidden;
3}الوضوحهو خاصية تتحكم في مرئية العنصر.۔ عندما يتم تعيينه إلى مخفي، يصبح العنصر غير مرئي.۔- في هذه الحالة، سيتم أيضًا إخفاء العناصر الفرعية داخل
div.۔
list-style: نمط القائمة (علامات القائمة لـ<ul>و<ol>)
1ul {
2 list-style: square;
3}- في هذه الحالة، سيتم عرض عناصر القائمة داخل علامة ul بعلامات مربعة.۔
مثال:
الخصائص غير الموروثة
الخصائص المتعلقة بالتصميم ونموذج الصندوق عادةً لا يتم توريثها.۔ تحتاج هذه الخصائص إلى ضبطها بشكل فردي لكل عنصر.۔
الخصائص الشائعة غير الموروثة
margin,padding: الهوامش الخارجية والداخلية لعنصر
1div {
2 margin: 10px;
3 padding: 20px;
4}- حتى إذا قمت بتعيين هوامش خارجية أو داخلية لعناصر
div, فإن ذلك لا يؤثر على عناصرها الفرعية۔
border: حد العنصر
1div {
2 border: 1px solid black;
3}- حتى إذا تم تعيين إطار على عنصر أب، فإنه لا يؤثر على العناصر الفرعية۔
width,height: عرض وارتفاع العنصر
1div {
2 width: 100px;
3 height: 50px;
4}- عرض وارتفاع العنصر الأب لا يؤثران تلقائياً على العناصر الفرعية۔
background: نمط الخلفية
1body {
2 background-color: lightblue;
3}- لون الخلفية المعين في العنصر
bodyلا يؤثر على العناصر الفرعية مباشرةً۔ ولكن إذا كان العنصر الفرعي لديه خلفية شفافة، فقد يكون لون خلفية العنصر الأب مرئيًا من خلاله۔
مثال:
التحكم في الميراث
يمكن التحكم في التوريث باستخدام الكلمات المفتاحية inherit، initial، أو unset.۔
- إذا كنت تريد تمكين التوريث: يمكنك فرض التوريث بشكل صريح باستخدام الكلمة المفتاحية
inherit۔
1div {
2 color: inherit; /* Inherit the color from its parent element */
3}- إذا كنت لا تريد التوريث: يمكنك إعادة تعيين الخاصية إلى قيمتها الأولية باستخدام الكلمات المفتاحية
initialأوunset۔
1p {
2 color: initial; /* Reset the color to its initial/default value */
3}مثال:
خاصية all
خاصية all هي خاصية يمكنها إعادة تعيين جميع خصائص CSS تقريبًا، بما في ذلك تلك التي يمكن توريثها، لعنصر محدد دفعة واحدة۔ تحديداً، يمكنك استخدام الكلمات الرئيسية الثلاث التالية لتعيين خصائص عنصر:۔
initial: تعيد تعيين جميع الخصائص إلى قيمها الأولية۔inherit: تورث جميع الخصائص من العنصر الأب۔unset: تورث الخاصية إذا كانت قابلة للتوريث، وإلا فإنه يعيدها إلى قيمتها الأولية۔
all مفيدة للغاية عندما ترغب في إعادة تعيين أو تعيين عدة خصائص دفعة واحدة بدلاً من تعيين خصائص معينة بشكل فردي۔
مثال على إعادة التعيين إلى القيم الأولية
1.all-initial {
2 all: initial;
3 background-color: lightskyblue;
4}-
عندما تريد إعادة تعيين جميع الأنماط التي تم تعيينها مسبقًا لعنصر محدد وإعادته إلى حالته الأولية، استخدم
all: initialبهذا الشكل۔ -
في هذا المثال، يتم إعادة تعيين جميع خصائص عنصر
<div>الذي يحمل الصنف.all-initialإلى القيم الأولية الافتراضية للمتصفح۔
مثال على الوراثة
1.parent-inherit {
2 color: blue;
3 font-size: 20px;
4 border: 1px solid blue;
5}
6
7.all-inherit {
8 all: inherit;
9 background-color: lightskyblue;
10}- استخدام
all: inheritيجعل جميع الخصائص تورث من العنصر الأب۔ - في هذا المثال، ترث العناصر التي تحتوي على الصنف
.all-inheritجميع الخصائص، مثلcolorوfont-size، من العنصر الأب۔
مثال على تحديد القيمة الأولية أو الوراثة بناءً على الشروط
1.parent-unset {
2 color: blue;
3}
4
5.all-unset {
6 font-weight: bold;
7}
8
9.all-unset {
10 all: unset;
11}- استخدام
all: unsetيجعل الخصائص موروثة إذا كان ذلك ممكنًا؛ وإلا، فإنه يتم إعادتها إلى قيمها الأولية۔ - في هذه الحالة، يتم توريث خاصية
color، بينما يتم إعادة تعيين خاصيةfont-weightإلى قيمتها الأولية، وعادةً ما تكونnormal۔
العلاقة مع الأهمية النسبية (الأولوية)
1.all-with-important {
2 color: red !important;
3 background-color: lightskyblue;
4}
5
6.all-with-important {
7 all: initial;
8}-
خاصية
allهي آلية قوية لإعادة التعيين، ولكنها تتأثر بخصوصية CSS۔ إذا كان العنصر المحدد يحتوي على مواصفات نمط قوية، فقد لا تتمكن خاصيةallمن تجاوز تلك الأنماط۔ على سبيل المثال، الخصائص المحددة باستخدام!importantلا يمكن التأثير عليها۔ -
في هذا المثال، حتى إذا حاولت إعادة تعيين النمط باستخدام
all: initial، فلن يتم إعادة تعيين خاصيةcolorبسبب مواصفةcolor: red !important۔
العناصر على مستوى الكتلة والعناصر المضمنة
العناصر على مستوى الكتلة
- مثال:
<div>,<p>,<h1>〜<h6>,<ul>,<li>,<section> - الخصائص:
- تظهر دائمًا في سطر جديد وتتمدد لملء العرض الكامل للعنصر الأب۔
- يمكن تعيين العرض (
width) والارتفاع (height) بحرية۔ - يمكن تعيين الهوامش (
margin) والملء الداخلي (padding) في جميع الاتجاهات وستؤثر على جميع الجوانب۔
1div {
2 width: 80%; /* Set the width to 80% of its parent element's width */
3 padding: 20px; /* Add a padding of 20 pixels on all sides */
4 margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}العناصر المضمنة
- مثال:
<span>,<a>,<strong>,<em>,<img>,<label> - الخصائص:
- تظهر بجانب عناصر أخرى مضمنة على نفس السطر۔
- لا يمكن تعيين العرض (
width) والارتفاع (height) مباشرة (ما لم يتم تطبيقdisplay: block)۔ - تعيين الهوامش (
margin) أو الملء الداخلي (padding) عموديًا له تأثير محدود (الهوامش والملء الداخلي الأفقيان فعالان)۔
1a {
2 padding: 5px; /* Padding for inline elements */
3 margin-right: 10px; /* Set margin to the right */
4 color: blue;
5}الاختلافات بين العناصر الكتلية (block-level elements) والعناصر الخطية (inline elements)
-
إعدادات العرض والارتفاع:
- العناصر ذات المستوى البلوكي: يمكن تعيين العرض والارتفاع۔
- العناصر المضمنة: لا يمكن تعيين العرض والارتفاع بشكل عام۔
-
الهامش والحشو:
- العناصر ذات المستوى البلوكي: يتم تطبيق الهوامش والملء الداخلي على جميع الجوانب۔
- العناصر المضمنة: الهوامش والملء الداخلي في الأعلى والأسفل غير فعالة أو لها تأثير محدود۔
-
طريقة التخطيط:
- العناصر ذات المستوى البلوكي: يتم وضعها تلقائيًا في سطر جديد۔
- العناصر المضمنة: محاذاة على نفس السطر مع عناصر أخرى مضمنة۔
كما يمكنك أن ترى، هناك اختلافات في كيفية تطبيق أنماط CSS على العناصر على مستوى الكتلة والعناصر ضمن السطر.۔ في العناصر على مستوى الكتلة، تُطبق خصائص CSS المتعلقة بالتخطيط مثل العرض والارتفاع والهوامش والحشوات كما هو محدد.۔ من ناحية أخرى، قد لا يتم تطبيق خصائص CSS المتعلقة بالتخطيط مثل العرض أو الارتفاع أو الهوامش أو الملء الداخلي على العناصر المضمنة، أو قد يتم تطبيقها بشكل محدود۔
معالجة CSS للعناصر ذات المستوى البلوكي والخطية
1span {
2 display: block; /* Display the span element as a block-level element */
3 width: 100px;
4 height: 50px;
5}ومع ذلك، من خلال تعيين خاصية display إلى block أو inline-block، يمكنك تعديل الأنماط مثل العرض والارتفاع للعناصر المضمنة كما لو كانت عناصر بلوكية۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔