الكورس

Advertisements

خاصية display فى CSS


سيعلمك هذا الفصل خاصية display فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.


 

خاصية display فى CSS

 

تعد خاصية display أهم خاصية CSS للتحكم في layout الصفحة. حيث تحدد خاصية display فى CSS كيف يتم عرض عنصر ما.

لكل عنصر HTML قيمة عرض افتراضية اعتمادًا على نوع العنصر.

قيمة العرض الافتراضية لمعظم العناصر هي block أو inline.

 

مثال للتوضيح:

<style>
    div {
        display: block;
        border: 1px solid;
    }

    span {
        display: inline;
        border: 1px solid;
    }
</style>

<div>This is block element!</div><br />
<span>This is inline element!</span>
This is block element!

This is inline element!

 

العنصر الـ Block

 

يبدأ عنصر block دائمًا على خط جديد ويأخذ العرض الكامل المتاح (يمتد إلى اليسار واليمين قدر الإمكان).

يقوم عنصر الـ block بتوليد مربع عنصر، مما يولد فواصل أسطر قبل وبعد العنصر عندما يكون في التدفق الطبيعي.

أمثلة على بعض العناصر block:

 

مثال على عنصر block:

<style>
    div {
        border: 1px solid;
    }
</style>

<div>Block element example!</div>
Block element example!

 

العنصر الـ Inline

 

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

أمثلة على العناصر inline:

 

مثال على عنصر inline:

<style>
    span {
        border: 1px solid;
    }
</style>

<span>Inline element example!</span>
Inline element example!

 

تغيير قيمة الـ display الافتراضية للعناصر

 

كما ذكر ، كل عنصر له قيمة عرض افتراضية، ومع ذلك يمكنك تغيير هذه القيمة، أى يمكنك تحويل العناصر الـ block إلى عناصر inline والعكس.

 

مثال للتوضيح:

<style>
    div {
        display: inline;
        border: 1px solid;
    }

    span {
        display: block;
        border: 1px solid;
    }
</style>

<div>Now this element inline!</div><br />
<span>Now this element block!</span>
Now this element inline!

Now this element block!

تعيين خاصية display لعنصر إلى تغيير طريقة عرض العنصر فقط ، وليس نوع العنصر، لذلك عنصر inline مع display: block؛ لا يسمح بوجود عناصر block أخرى بداخله.


Advertisements

 

Display none

 

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

<style>
    div {
        border: 1px solid;
    }

    div p {
        display: none
    }
</style>

<div>
    <h2>Example</h2>
    <p>Hello World!</p>
</div>

Example

Hello World!

تٌستخدم هذه القيمة بشكل شائع مع JavaScript لإخفاء العناصر وإظهارها دون حذفها وإعادة إنشائها.

 

يمكنك أيضًا إستخدام ;visibility:hidden لإخفاء العنصر، لكن سيظل العنصر يشغل نفس المساحة كما كان من قبل (سيتم إخفاء العنصر ، ولكن لا يزال يؤثر على layout الصفحة)، على عكس ;display: none يقوم بإخفاء وإزالة العنصر نهائيًا كما لو كان غير موجود:

<style>
    div {
        border: 1px solid;
    }

    div p {
        visibility: hidden;
    }
</style>

<div>
    <h2>Visibility Example</h2>
    <p>Hello World!</p>
</div>

Visibility Example

Hello World!



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements