انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 56
دورة لغة CSS

عرض العناصر في لغة CSSCSS Display

سوف تتعلم في هذا الدرس طريقة عرض عناصر HTML سواء عرض أفقي أو عرض رأسي تٌصف العناصر بجار بعضها لبعض أو تُصف أسفل بعض عن طريق خاصية display في لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
20
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
7,498
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

CSS Display عرض العناصر في لغة CSS

تٌعرض عناصر HTML علي المتُصفح داخل صفحة الويب في الوضع الأفتراضي بطريقتين:

  • block تُعرض العناصر علي هيئة كٌتل وهي أن العنصر له طريقة عرض رأسية وهي أن يحجز العنصر عرض الشاشة بالكامل ولا يٌمكن صف عناصر بجانبة وتكون جميع العناصر أسفل بعضها لبعض مثل عناصر  <p> و <div> و <h1>.
  • inline تُعرض العناصر علي هيئة تسلسلية وهي أن العنصر له طريقة عرض أفقية وهي أن العنصر لا يحجز عرض الشاشة بالكامل و يٌمكن صف عناصر بجانبة وتكون جميع العناصر بجوار بعضها لبعض مثل عناصر  <span> و <a> و <img>. 


لماذا تُستخدم خاصية display في لغة CSS؟

  • لتغيير طريقة عرض العناصر من الوضع الأفتراضي سواء كان block أو inline إلي عكسه فيمكن تحويل block إلي inline ويمكن تحويل inline إلي block.
  • يمكن تغيير طريقة عرض العناصر إلي طرق مٌختلفة كطريقة inline-block أو flex أو grid وغيرها الكثير من طرق العرض.

ملاحظة: سوف نتعرف في هذا الدرس فقط عن طريقة عرض block وطريقة العرض inline وطريقة العرض inline-block فقط وباقي طرق العرض سوف نتعرف عليها بالتفصيل في دروس مُنفصلة.


قيم خاصية display في هذا الدرس بلغة CSS:

  • none تُستخدم لأخفاء العنصر من صفحة الويب.
  • block تُستخدم لتحويل وضع العنصر الأفتراضي من display inline إلي display block.
  • inline تُستخدم لتحويل وضع العنصر الأفتراضي من display block إلي display inline.
  • inline-block تُستخدم لتحويل وضع العنصر الأفتراضي من display block أو display inline إلي display inline-block.
display inline

display inline

display block

display block

display inline-block

display inline-block

CSS display syntax

طريقة كتابة خاصية display في لغة CSS.

HTML 
display:value;

CSS display values

قيم خاصية display في لغة CSS.

HTML 
display:none|inline|block|inline-block|contents|flex|grid|inline-flex|inline-grid|inline-table|list-item|run-in|table|table-caption|table-column-group|table-header-group|table-footer-group|table-row-group|table-cell|table-column|table-row|initial|inherit;

CSS display none خاصية display مع القيمة none في لغة CSS

تُستخدم خاصية display في لغة CSS مع القيمة none لأخفاء العنصر من صفحة الويب دون ترك مكان له داخل صفحة الويب.

CSS display none

خاصية display مع القيمة none في لغة CSS.

HTML 
p
{
  display: none;
}
جرّب بنفسك

CSS display block خاصية display مع القيمة block في لغة CSS

العناصر التي تكون طريقة عرضها من النوع display block دائماً تأتي في سطر جديد ويكون لها عرض 100% وتحجز العرض بالكامل ولا يمُكن صف عناصر أخري بجوارها.


العناصر من النوع display block تُعرض بالشكل التالي:

  • دائماً تكون في سطر أو صف جديد.
  • لا يُمكن صف عناصر أخري بجوارها.
  • دائماً تحجز عرض الصفحة المتبقي بالكامل.


العناصر التي تكون في الوضع الأفتراضي طريقة عرضها display block:

  • <div>
  • <h1> to <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>


خاصية display مع القيمة block في لغة CSS

CSS display inline without block

تٌعرض بعض العناصر في الوضع الطبيعي display inline شاهد هذا المثال قبل تحويلها إلي display block في لغة CSS.

HTML 
span
{
  border:red solid 1px;
}
جرّب بنفسك

CSS display block

تحويل العناصر التي تٌعرض في الوضع الطبيعي display inline إلي طريقة عرض مٌختلفة وهي display block في لغة CSS.

HTML 
span
{
  border:red solid 1px;
  display: block;
}
جرّب بنفسك

CSS display inline خاصية display مع القيمة inline في لغة CSS

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


العناصر من النوع display block تُعرض بالشكل التالي:

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


العناصر التي تكون في الوضع الأفتراضي طريقة عرضها display inline:

  • <span>
  • <a>
  • <img>
خاصية display مع القيمة inline في لغة CSS

CSS display block without inlline

تٌعرض بعض العناصر في الوضع الطبيعي display block شاهد هذا المثال قبل تحويلها إلي display inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
}
جرّب بنفسك

CSS display inline

تحويل العناصر التي تٌعرض في الوضع الطبيعي display block إلي طريقة عرض مٌختلفة وهي display inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
}
جرّب بنفسك

CSS display inline block خاصية display مع القيمة inline-block في لغة CSS

العناصر التي تكون طريقة عرضها من النوع display inline-block دائماً تكون بجانب بعضها لعبض إذا كان لها مساحة في نفس السطر أو الصف ولا يكون لها عرض أكبر من عرض محتواها الداخلي وهي تجمع بين مميزات inline و block.


العناصر من النوع display block تُعرض بالشكل التالي:

  • دائماً تكون في نفس السطر إذا كان لها مساحة في هذا السطر.
  • دائماً يكون معها عناصر أخري علي نفس السطر.
  • لا تقوم بحجز عرض الصفحة المتبقي ولها عرض بحجم المحتوي الداخلي فقط.
  • تجمع بين مميزات inline و block فهي تقبل التأثير الناتج عن الخصائص التالية padding و margin و height و width.

ملاحظة: لا يوجد في لغة HTML عناصر في وضعها الأفتراضي display inline-block ويمكن تحويل أي عنصر إلي وضعية display inline-block بلغة CSS عن طريق خاصية display.

خاصية display مع القيمة inline-block في لغة CSS

CSS display block without inline block

تٌعرض بعض العناصر في الوضع الطبيعي display block شاهد هذا المثال قبل تحويلها إلي display-inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
}
جرّب بنفسك

CSS display inline block

تحويل العناصر التي تٌعرض في الوضع الطبيعي display block إلي طريقة عرض مٌختلفة وهي display inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline-block;
}
جرّب بنفسك

CSS display inline without inline block

تٌعرض بعض العناصر في الوضع الطبيعي display inline شاهد هذا المثال قبل تحويلها إلي display-inline في لغة CSS.

HTML 
span
{
  border:red solid 1px;
}
جرّب بنفسك

CSS display inline block with span

تحويل العناصر التي تٌعرض في الوضع الطبيعي display inline إلي طريقة عرض مٌختلفة وهي display inline في لغة CSS.

HTML 
span
{
  border:red solid 1px;
  display:inline-block;
}
جرّب بنفسك

CSS display inline problem مشكلة خاصية display مع القيمة inline في لغة CSS

مشكلة تحدث عند أستخدام خاصية display مع القيمة inline مع خصائص height و width و padding و margin في لغة CSS.

CSS display inline with height

لا تعمل خاصية height مع خاصية display مع القيمة inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
  height:400px
}
جرّب بنفسك

CSS display inline with width

لا تعمل خاصية width مع خاصية display مع القيمة inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
  width:400px
}
جرّب بنفسك

CSS display inline with padding top

لا تعمل خاصية padding-top مع خاصية display مع القيمة inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
  padding-top:100px;
}
جرّب بنفسك

CSS display inline with margin top

لا تعمل خاصية margin-top مع خاصية display مع القيمة inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
  margin-top:100px;
}
جرّب بنفسك

CSS display inline with margin bottom

لا تعمل خاصية margin-bottom مع خاصية display مع القيمة inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
  margin-bottom:100px;
}
جرّب بنفسك

CSS display inline without problem خاصية display مع القيمة inline في لغة CSS بدون مشكله في هذه الحالات

لا تحدث أي مشكلة عند استخدام خاصية display مع القيمة inline مع خصائص padding-left و padding-right و margin-left و margin-right في لغة CSS.

CSS display inline with padding left

تعمل خاصية padding-left مع خاصية display مع القيمة inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
  padding-left:100px;
}
جرّب بنفسك

CSS display inline with padding right

تعمل خاصية padding-right مع خاصية display مع القيمة inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
  padding-right:100px;
}
جرّب بنفسك

CSS display inline with margin left

تعمل خاصية margin-left مع خاصية display مع القيمة inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
  margin-left:100px;
}
جرّب بنفسك

CSS display inline with margin right

تعمل خاصية margin-left مع خاصية display مع القيمة inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline;
  margin-right:100px;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات26

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 26 مفهومةأول بطاقة، أول خطوة
01 Display شاشة
للمراجعة
02 Element عنصر
للمراجعة
03 Inline مضمن
للمراجعة
04 Block كتلة
للمراجعة
05 Property خاصية
للمراجعة
06 Page صفحة
للمراجعة
07 Layout تخطيط
للمراجعة
08 Elements عناصر
للمراجعة
09 Full Width العرض كاملاً
للمراجعة
10 Padding حشو
للمراجعة
11 Margin هامش
للمراجعة
12 Height ارتفاع
للمراجعة
13 Width عرض
للمراجعة
14 Padding-Top حشو علوي
للمراجعة
15 Padding-Bottom حشو سفلي
للمراجعة
16 Margin-Top هامش علوي
للمراجعة
17 Margin-Bottom هامش سفلي
للمراجعة
18 Padding-Left حشو من اليسار
للمراجعة
19 Padding-Right حشو من اليمين
للمراجعة
20 Margin-Left هامش من اليسار
للمراجعة
21 Margin-Right هامش من اليمين
للمراجعة
22 Properties خصائص
للمراجعة
23 None لاشئ
للمراجعة
24 Java Script لغة برمجة موجهة للكائنات
للمراجعة
25 Visibility الرؤية
للمراجعة
26 Hidden مخفي
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات2

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 2 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

4أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي4 أسئلة تنتظرك
01

ماهي الخاصية التي تمكننا من تحديد النوع الذي يتم به عرض العنصر علي المتصفح ؟

____
02

ماهي القيمة التي تستخدم مع خاصية display لتقوم بعرض العناصر بشكل افقي ولا تفصل كل عنصر عن الاخر بسطر جديد ؟

____
03

ماهي القيمة التي تستخدم مع خاصية display لتقوم بعرض العناصر بشكل عمودي وتفصل كل عنصر عن الاخر بسطر جديد ؟

____
04

ماهي القيمة التي تستخدم مع خاصية display لتقوم بأخفاء عناصر ال HTML من صفحة الويب ؟