درس 1: ما هي تقنية CSS؟



لعلك سمعت عن CSS من قبل لكن لا تعرف حقاً ما هي، في هذا الدرس ستتعلم المزيد عن CSS وماذا يمكن لهذه التقنية أن تقدم لك.


CSS هي اختصار لي Cascading Style Sheets.


ماذا يمكن أن أفعل بتقنية CSS؟



CSS
هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش،
والعرض والارتفاع، صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى
كثيرة، انتظر فقط وسترى!


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


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


ما الفرق بين CSS وHTML؟

الدرس 5: الروابط


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


ما هي الفئة المزيفة؟


الفئة المزيفة أو pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في HTML.

لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم لذلك يمكننا أن نستخدم a كمنتقي في CSS:





a {
color: blue;
}




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





a:link {
color: blue;
}

a:visited {
color: red;
}




استخدم a:link وa:visited للروابط التي زارها أو لم يزرهاالمستخدم، الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي a:active أما a:hoverفهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط.

سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح والأمثلة.


الفئة المزيفة: link


الفئة المزيفة :link تستخدم للروابط التي تقود المستخدم إلى صفحات لم يزرها.

في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح.





a:link {
color: #6699CC;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

الفئة المزيفة: visited


الفئة المزيفة :visited تستخدم للروابط التي زارها المستخدم، المثال أدناه سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق:





a:visited {
color: #660099;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

الفئة المزيفة: active


الفئة المزيفة :active تستخدم للروابط النشطة.

في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء:





a:active {
background-color: #FFFF00;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

الفئة المزيفة: hover


الفئة المزيفة :hover تستخدم عندما يكون مؤشر الفأرة فوق الرابط.

يمكن
استخدام هذه الفئة لإنشاء مؤثرات جميلة، فمثلاً إذا أردنا أن تكون الروابط
ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS
بهذا الشكل:





a:hover {
color: orange;
font-style: italic;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

المثال 1: المؤثرات تظهر عندما يوضع مؤشر الفأرة على الرابط


هذه
مشهورة لإنشاء مؤثرات مختلفة عندما يوضع مؤشر الفأرة على الرابط، لذلك
سنلقي نظرة على المزيد من الأمثلة المتعلقة بالفئة الزائفة :hover.


مثال 1أ: وضع مسافات بين الحروف


كما تتذكر في [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] تعلمنا أن المسافة بين الحروف يمكن أن تعديلها باستخدام الخاصية letter-spacing، هذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة:





a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

مثال 1ب: الحروف الكبيرة والصغيرة


في [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ألقينا نظرة على الخاصية text-transform والتي يمكنها تغيير حالة الأحرف بين الصغيرة والكبيرة، هذا يمكن استخدامه أيضاً كمؤثر على الروابط:





a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص، يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك، جرب!


مثال 2: إزالة السطر من أسفل الرابط


أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟

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


على أي حال، إزالة الخط من أسفل الروابط سهل جداً، كما تتذكر في [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] الخاصية text-decoration يمكنها أن تستخدم لتحديد ما إذا كان هناك خط سيظهر أسفل النص أم لا، لإزالة الخط السفلي قم بوضع القيمة none للخاصية text-decoration.





a {
text-decoration:none;
}




يمكنك أيضاً أن تفعل ذلك مع الحالات الأربع للرابط:





a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

ملخص

الدرس 6: المطابقة والتجميع للعناصر class وid



في بعض الأحيان تود أن تفعل خصائص ما على مجموعة أو فريق من العناصر، في هذ الدرس سنلقي نظرة على كيفية استخدام الفئات class والمعرفات id لتحديد خصائص معينة لعناصر مختارة.


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


تجميع العناصر باستخدام الفئات "class"


لنقل بأن لدينا قائمتين من الروابط لأصناف مختلفة من الثمار، الخضار والفواكه، القائمتين في ملف HTML ستكونان بهذا الشكل:

الخضار:

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

فواكه:

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

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

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

لنقم بتحديد فئات للمثال أعلاه:

خضار:

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

فواكه:

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

يمكن الآن تحديد خصائص محددة للروابط التي تتبع فئة الخضروات أو الفواكه بهذا الشكل:





a {
color: blue;
}

a.veg {
color: #FFBB00;
}

a.fru {
color: #800000;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

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


تحديد معرف خاص لعنصر معين من خلال id


بالإضافة إلى تجميع العناصر من خلال الفئات، لعلك ترغب في تحديد معرف لخاصية محددة، هذا يمكن إنجازه من خلال الخاصية id.

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

فصل 1

...

فصل 1.1

...

فصل 1.2

...

فصل 2

...

فصل 2.1

...

فصل 2.1.2

...




المثال أعلاه قد يكون عناوين لوثيقة ما تقسم الصفحة إلى أبواب وفصول، من الطبيعي أن نحدد لكل فصل معرفاً خاصاً id كما في المثال الآتي:

id="c1">فصل 1

...

id="c1-1">فصل 1.1

...

id="c1-2">فصل 1.2

...

id="c2">فصل 2

...

id="c2-1">فصل 2.1

...

id="c2-1-2">فصل 2.1.2

...




لنقل أن عنوان الفصل 1.2 يجب أن يكون باللون الأحمر، يمكن إنجاز ذلك في CSS بهذا الشكل:





#c1-2 {
color: red;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

كما ترى في المثال أعلاه يمكن تحديد خصائص معينة لعنصر معين باستخدام #id في وثيقة التصميم

الدرس 8: تجميع العناصر باستخدام span وdiv


العنصران و

يستخدمان لجمع العناصر وإنشاء هيكلية للوثائق وهما يستخدمان معاً مع الخاصيتين class وid.

في هذ االدرس، سنلقي نظرة عن قريب على استخدام و

لأنهما العنصران الأكثر أهمية عندما تتعامل مع CSS.

• التجميع بالعنصر
  
• التجميع بالعنصر
  
  

التجميع بالعنصر


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


مثال هذا هو اقتباس من جملة قالها بنجامين فرانكلين:

Early to bed and early to rise
makes a man healthy, wealthy and wise.

لنقل
أننا نريد أن نؤكد على ما قاله السيد فرانكلين حول فوائد عدم النوم في
النهار بأن نلونها بالأحمر، لهذا الغرض يمكن وضع الكلمات بين وسمي ، كل span أضفنا لها فئة class والتي تمكننا بعد ذلك من إضافة خصائص لها من خلال CSS:

Early to bed and early to rise
makes a man healthy,
wealthy
and wise.

أوامر CSS المتعلقة بالمثال:





span.benefit {
color:red;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

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


التجميع بالعنصر

العنصر يستخدم في العناصر كما رأيت في المثال السابق، العنصر

يستخدم لتجميع العناصر.

هذا هو الاختلاف الوحيد، تجميع العناصر باستخدام

يعمل بنفس الطريقة، لنلقي نظرة على مثال لقائمتين تحويان أسماء الرؤساء الأمريكيين مقسمة حسب الأحزاب التي ينتمون لها:

• فرانكلين روزفيلت


• هاري ترومن


• جون كينيدي


• ليندون جونسون


• جيمي كارتر


• بيل كلينون

• دوايت أيزنهاور


• ريتشارد نيكسون


• جيرالد فورد


• رونالد ريغان


• جورج بوش


• جورج دبليو بوش

وفي ملف CSS سنستخدم التجميع كما في المثال أعلاه بنفس الطريقة:





#democrats {
background:blue;
}

#republicans {
background:red;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

في الأمثلة لاسابقة استخدامنا

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

المصدر: شبكة رواد الجزائر

فتاة العرب ; توقيع العضو

الدرس 9: نموذج الصندوق


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


نموذج الصندوق في CSS


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


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





Article 1:



All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood





بإضافة بعض الألوان وتحديد بعض المعلومات حول الخطوط يمكن للمثال أن يصبح بهذا الشكل:


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


المثال يحوي عنصرين و، نموذج الصندوق للعنصرين سيظهر بهذا الشكل:


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


حتى لو بدى المثال معقداً، الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها من خلال CSS.


الخصائص التي تتحكم بالصناديق المختلفة هي: padding وmargin وborder، في الدرسين اللاحقين سنتعامل مع هذه الخصائص الثلاثة.




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


ملخص


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

الدرس 10: الحاشية والحشو


في الدرس الماضي تعرفنا على نموذج الصندوق، في هذ الدرس سنلقي نظرة على كيفية تغيير شكل العناصر بتغيير إعدادات خاصية margin وpadding.
تعديل خاصية margin لعنصر ما


كل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية margin تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة، أنظر إلى الرسم التوضيحي في للمزيد من التوضيح.

في المثال الأول لنلقي نظرة على كيفية تحديد الحاشية "margin" للصفحة نفسها أي للعنصر ، الرسم أدناه يوضح كيف نريد للحاشية أن تكون في الصفحة.


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


في ملف CSS سنكتب التالي:





body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}




أو يمكننا تجميع كل هذه السطور في سطر واحد أنيق:





body {
margin: 100px 40px 10px 70px;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

يمكنك تحديد الحاشية بنفس الطريقة لمعظم العناصر، فمثلاً يمكنك تحديد الحاشية لكل الفقرات النصية للعنصر

:





body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

تعديل خاصية padding لعنصر ما


الحشو
يمكن التعبير عنه بأنه "ما في داخل العنصر نفسه" والحشو لا يؤثر في
المسافية بين العنصر والآخر، بل يحدد المسافة في العنصر نفسه بين محتويات
العنصر والإطار.


استخدام الحشو "padding" يمكن توضيحه بمثال بسيط حيث كل العناوين لها ألوان خلفية:





h1 {
background: yellow;
}

h2 {
background: orange;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

بتحديد الحشو لكل عنوان يمكن تغيير حجم العنصر الداخلي الذي يحيط بالعنوان من كل جهة:





h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

ملخص


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

نموذج الصندوق - الإطارات 11: Borders


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




سماكة الإطار "border-width"


سماكة الإطار تحدد من خلال القيمة border-width
والذي يمكن تحديد قيمته من خلال الكلمات thin وmedium وthick، أو من خلال
قيمة رقمية تحدد سمكه بالبكسل، الرسم التوضيحي يبين هذه القيم ونتائجها:


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


ألوان الإطارات "border-color"


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




الخاصية border-color تحدد لون الإطارة، قيمة هذه الخاصية هي قيم الألوان العادية مثل "#123456" و"rgb(123,123,123)" أو أسماء الألوان مثل "yellow".


تصميم الإطارات "border-style"


هناك
أنواع مختلفة من الإطارات يمكنك أن تختار منها، في المثال التوضيحي أدناه
هناك 8 أنواع من الإطارات كما يعرضها إكسبلورر 5.5، كل الأمثلة المعروضة
تستخدم اللون "gold" وقيمة سماكة الإطار محددة بالقيمة "thick" وتذكر أنك
تستطيع عرض الإطار بألوان وسماكة مختلفة.

القيم none أو hiddem يمكن أن تستخدم عندما تريد إخفاء الإطار.


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


أمثلة لإطارات


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

و

و، النتيجة قد لا تكون جميلة لكن المثال يوضح الإمكانيات المتعددة:





h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}









• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  


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





h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}









• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  


جمع كل الخصائص "border"


كما هو الحال مع خصائص مختلفة، يمكن أن تجمع بين خصائص الجداول المختلفة في خاصية واحدة، ألقي نظرة على هذا المثال:





p {
border-width: 1px;
border-style: solid;
border-color: blue;
}




يمكن اختصارها هكذا:





p {
border: 1px solid blue;
}




ملخص


في هذا الدرس تعلمت أن الإطارات في CSS لها عدد لا محدود من الخيارات.

في الدرس التالي سنلقي نظرة على نموذج الصندوق وبالتحديد العرض والارتفاع.