خاصية CSS display
تعد خاصيه css display من أهم الخواص في لغة CSS لأنها تستخدم في طريقه عرض وإظهار العنصر والتحكم به .
لكل عنصر قيمة عرض إفتراضية وفقًا لطبيعته.
لكل عنصر في صفحة الويب أبعاد( طول وعرض) ويمكن تقسيم الصفحة علي أنها أشكال رباعية وتحدد خاصية CSS display سلوك هذه الاشكال.
:CSS display values
- display: inline;
- display: inline-block;
- display: block;
- display: run-in;
- display: none;
1) CSS display inline:
: العناصر المضمنة (بسطر واحد) ومثال عليها
- <span>
- <a>
- <em>
- <b> etc.
- p {
- display: inline;
- }
- <p>HTML </p>
- <p>CSS </p>
Output:
HTML CSS
2) CSS display inline-block:
يختلف هذا النوع عن inline في أنه يمكنك ضبط العرض والأرتفاع.
- p {
- display: inline-block;
- }
- <p>HTML </p>
- <p>CSS </p>
Output:
HTML CSS
3) CSS display block:
يأخذ العنصر شكل الوحدة المتناسقه مثل الجسم المتماسك وهذا لأنه يضم كلام متصل مثل paragraph ,headers , ويصبح هناك فاصل حوله .
- p {
- display: block;
- }
- <p>HTML </p>
- <p>CSS </p>
Output:
HTML
CSS
4) CSS display run-in:
تلك الخاصية توضح شكل العنصر:
1- سطر متناسق
2 - كتلة ووحدة واحده.
هذه الخاصية لا تعمل في Mozilla Firefox. تلك العناصر ليس لها صندوق معين.
تحتوي CSS على قيمة run in مثل هذه:
h3 {
display: run-in;
}
أنواع العرض:(داخلية وخارجية)
- p {
- display: run-in;
- }
- <p>HTML </p>
- <p>CSS </p>
Output:
HTML
CSS
5) CSS display none:
تزيل القيمة "بلا" (none) العنصر من الصفحة تماماً. لن تأخذ أي مساحة.
- <style>
- h1.hidden {
- display: none;
- }
- </style>
- <h1>This heading is visible.</h1>
- <h1 class="hidden">This is not visible.</h1>
- <p> this text is free of spacing</p>
Output:
This heading is visible.
this text is free of spacing
تعليقات
إرسال تعليق