منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

Display CSS شرح

من المعروف ان جميع عناصر ال html تنقسم الىعناصر blockوعناصر inline

ولكن باستخدام لغة ال CSS يمكن تغيير خواص العناصر بمعنى انه اذا كان العنصر inline فيُمكن تحويله الى block .. وذلك عن طريق خاصية display في CSS

خاصية display في CSS لها العديد من القيم واشهرهم:

Display:
inline;
block;
inline-block;
none;
flex;
grid;



1 display: inline;

من خواص العنصر ال inline هو ان العنصر:
- يكون على نفس الخط
لا يُسمح لك ان تُحدد له خاصية ال height ولا خاصية ال width


2 display: block;

من خواص العنصر ال block هو ان العنصر:
- يكون في سطر مستقل بذاته بمعنى ان قبله <br> وبعده <br>
- يُسمح للعناصر ال block ان تُحدد لهم خاصيه ال height وخاصيه ال width


3display: inline-block;

نستخدم هذا الكود في حالة إذا أردنا عمل ميكس بين العناصر ال inline والعناصر ال block
بمعنى ان من خواص العناصر ال inline-block انها:
- تكون على نفس الخط (مثل العناصر ال inline)
- يُمكن ان نُحدد لها قيمه ال height وقيمة ال width (مثل العناصر ال block)

-العناصر الـــــ blockيكون عرضها هو العرض الكلي للعنصر لاب ( وسيتم شرح معني العنصر الاب في الدروس القادمة )

-العناصر الـــــ inlineوالعناصر الـــــ inline-blockيتحدد عرضها علي حسب المُحتوي الذي بداخلها


4 display: none;

نستخدم هذا الكود في حالة إذا أردنا حذف العنصر؛ ويُستخدم كثيرا مع لغة ال JavaScript لإخفاء واظهار العناصر عند الضغط على زر معين مثلا.


خلي بالك يوجد فرق كبير بين ال display: none; وال visibility: hidden; وتم شرح الفرق بينهم بالتفصيل في الفيديو الخاص بهذا الدرس في الدقيقة 13


5 display: flex;

صعب جدا انى اشرحه في سطرين تلاته ولذلك هيكون له درس وفيديو خاص به.


6 display: grid;

صعب جدا انى اشرحه في سطرين تلاته ولذلك هيكون له درس وفيديو خاص به.



Do not waste your time and start with us, now 😍