خاصية display فى لغة سى اس اس CSS

خاصية CSS display 

تعد خاصيه css display من أهم الخواص في لغة CSS لأنها تستخدم في طريقه عرض وإظهار العنصر والتحكم به .
لكل عنصر قيمة عرض إفتراضية وفقًا لطبيعته.

لكل عنصر في صفحة الويب أبعاد( طول وعرض) ويمكن تقسيم الصفحة علي أنها أشكال رباعية وتحدد خاصية CSS display سلوك هذه الاشكال.

:CSS display values

1. display: inline;
2. display: inline-block;
3. display: block;
4. display: run-in;
5. display: none;

1) CSS display inline:

:  العناصر المضمنة  (بسطر واحد) ومثال عليها

• <span>
• <a>
• <em>
• <b> etc.

1. p {  
2. display: inline;   
3. }  
4. <p>HTML </p>  
5. <p>CSS </p>  

Output:

 HTML CSS 

2) CSS display inline-block:

يختلف هذا النوع عن inline في أنه يمكنك ضبط العرض والأرتفاع.

1. p {  
2. display: inline-block;   
3. }  

1. <p>HTML </p>  
2. <p>CSS </p>  

Output:

HTML  CSS 

3) CSS display block:

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

1. p {  
2. display: block;   
3. }  
4. <p>HTML </p>  
5. <p>CSS </p>  

Output:

HTML 

CSS 

4) CSS display run-in:

تلك الخاصية توضح شكل العنصر:

1- سطر متناسق  

2 - كتلة ووحدة واحده.

هذه الخاصية لا تعمل في Mozilla Firefox. تلك العناصر ليس لها صندوق معين.

تحتوي CSS على قيمة run in مثل هذه:

h3 {

  display: run-in;

}

أنواع العرض:(داخلية وخارجية) 

1. p {  
2. display: run-in;   
3. }  
4. <p>HTML </p>  
5. <p>CSS </p>  

Output:

HTML 

CSS 

5) CSS display none:

تزيل القيمة "بلا" (none) العنصر من الصفحة تماماً. لن تأخذ أي مساحة.

1. <style>  
2. h1.hidden {  
3.     display: none;  
4. }  
5. </style>  
6. <h1>This heading is visible.</h1>  
7. <h1 class="hidden">This is not visible.</h1>  
8. <p> this text is free of spacing</p>  

Output:

This heading is visible.

this text is free of spacing