Header Ads

الإظهار والإخفاء



تحدد خاصية الاظهار display فيما اذا أو كيف يجب على العنصر الظهور بينما تحدد خاصية الاخفاء visibility فيما اذا كان العنصر ظاهر visible أو مخفي hidden




إخفاء عنصر باستخدام خاصيات display:none أو visibility:hidden


لإخفاء عنصر معين , يمكنك تخصيص ذلك من خلال ضبط خاصية الاظهار display : لا "none" أو ضبط خاصية المرئي visibility : مخفي "hidden" ولكن هذه الطريقتين تعطي نتائج مختلفة

تخفي خاصية visibility:hidden العنصر ولكن تحتفظ بنفس المساحة بالتصميم كما لو أنه لم يتم اخفائه . سيتم اخفاء العنصر ولكنه سيبقى مأثراً بتصميم الشكل .

مثال
h1.hidden {visibility:hidden;}


أما خاصية display:none فإنها تخفي العنصر بشكل كامل مع خفي مساحته التي كان يشغلها في التصميم أي عند خفي العنصر بهذه الخاصية سيختفي تماماً من الصفحة بدون وجود أي أثر له

h1.hidden {display:none;}





إظهار العناصر على شكل كتل block أو بنفس الخط inline

ان العناصر على شكل كتل هي عبارة عن عناصر تأخذ العرض الكلي بالاضافة الى سطر اضافي قبله وبعده

مثال على عناصر كتلية block

  • <h1>

  • <p>

  • <div>

بينما العناصر التي تكون بنفس الخط هي عبارة عن عناصر لها عرض معين ولاتحتوي على سطر اضافي

مثال عن عناصر في نفس الخط

  • <span>

  • <a>



تغيير ظهور العناصر


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

في المثال التالي تظهر عناصر القائمة بسطر واحد

li {display:inline;}


في المثال التالي يظهر كيف سيتم عرض العنصر span كمجموعات block
span {display:block;}


ملاحظة: ان تغيير نوع ظهور العنصر يعني تغيير شكل العنصر فقط بغض النظر عن نوع هذا العنصر



يتم التشغيل بواسطة Blogger.