القائمة الرئيسية

الصفحات

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

خاصية CSS display 

تعد خاصيه 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




 

reaction:

تعليقات