دليل CSS

قواعد CSS (RULES)

جميع خصائص CSS

خصائص الخلايا الفارغة CSS خصائص الاتجاه CSS

استخدام خاصية display CSS والمعاينة

تحدد خاصية display CSS نوع المربعات التي يتم إنشاؤها بواسطة العنصر.

الجدول أدناه يوضح كيفية استخدام هذه الخاصية ونسخة التاريخ، وكيفية استخدام الخاصية في نصوص JavaScript.

القيمة الافتراضية:	inline
التطبيق:	جميع العناصر
الوراثة:	لا يوجد
يمكن تفعيله للرسوم المتحركة:	لايرجى الرجوع إلى خصائص.
الإصدار:	CSS 1،2،3
النص البرمجي JavaScript:	العدة.style.display="block"

التعليمات

قيمة خاصية display قد تكون مختلفة عن الجذرالتعليقمحددعنصرالقيم المختلفة.
إذا تم تعيين قيمة خاصية display إلى none، فإن العنصر لا يولد أي مربع، ولا يؤثر على التخطيط بأي شكل من الأشكال؛ سيتم حذف العنصر ومحتواه من بنية النص بشكل كامل، وسيتم عرض الوثيقة كما لو لم يكن العنصر موجودًا في شجرة الوثيقة.

النص الظاهر باستخدام القواعد

تكون قواعد النص التالية لهذه الخاصية:

inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit

في المثال أدناه، يتم عرض كيفية استخدام خاصية display.

المثال

　　div {
　　　display: inline;
　　}
　　span {
　　　display: block;
　　}

الاختبار لرؤية‹/›

قيمة الخاصية

الجدول أدناه يصف قيم هذه الخاصية.

القيمة	وصف
inline	يولدمستوىالمربعات.
block	يولدعنصرالمربعات.
المحتوى	العنصر نفسه لا يولد أي مربع، ولكن بنيةالعنصروالصيغة الافتراضيةيولد المربع ويشتغل النص بشكل طبيعي.
flex	يولد العنصر عنصرًاالصندوق التمدد.
flow	يستخدم العنصر ترتيب التدفق (ترتيب الحجرة وترتيب النص) لترتيب محتوياته.
flow-root	يولد العنصر حجرة مكعبة ويستخدم ترتيب التدفق لترتيب محتوياته.
grid	يولد العنصر حجرة مستوى شبكة مستوى عالي.
inline-block	يولد العنصر حجرة مكعبة تشبه الحجرة المدمجة في التخطيط.
inline-flex	يولد العنصر حجرة مستوى داخلية لمحتويات المرونة.
inline-grid	يولد العنصر حجرة مستوى داخلية لمحتويات الشبكة.
inline-table	سلوك هذا العنصر يشبه جدولًا، مثل حجرة نصية داخلية.
list-item	يولد العنصر حجرة مكعبة للاحتواء على المحتوى، وحجرة نصية داخلية لعلامات القائمة.
run-in	يولد هذا العنصر كحجرة أو كحجرة نصية داخلية بناءً على السياق.
table	سلوك هذا العنصر يشبه<table>عنصر HTML.
table-caption	سلوك هذا العنصر يشبه<caption>عنصر HTML.
table-column-group	سلوك هذا العنصر يشبه<colgroup>عنصر HTML.
table-header-group	سلوك هذا العنصر يشبه<thead>عنصر HTML.
table-footer-group	سلوك هذا العنصر يشبه<tfoot>عنصر HTML.
table-row-group	سلوك هذا العنصر يشبه<tbody>عنصر HTML.
table-cell	سلوك هذا العنصر يشبه<td>عنصر HTML.
table-column	سلوك هذا العنصر يشبه<col>عنصر HTML.
table-row	سلوك هذا العنصر يشبه<tr>عنصر HTML.
none	إغلاق عرض العنصر. حتى إذا كانت خاصية عرض جميع العناصر الفرعية معروضة كـ none، سيتم إغلاق العرض.
initial	قم بتعيين هذه الخاصية إلى قيمتها الافتراضية.
inherit	إذا تم تحديد، فإن العنصر المرتبط يأخذ قيمة خاصية عرض الأب.

التوافق مع المتصفح

تطابق خاصية عرض المتصفح، الأرقام في الجدول أدناه تمثل أحدث إصدار من المتصفح يدعم هذه الخاصية؛ جميع المتصفحات الرئيسية يدعمون هذه الخاصية.

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 7+

تحذير:القيم، مثل contents،flow-root،run-in وما إلى ذلك، يتم دعمها بشكل سيء في معظم المتصفحات. من الأفضل تجنب استخدامها مؤقتًا.

قراءة متعمقة

يرجى الرجوع إلى التعليمات التالية:عرض CSS.

خصائص مرتبطة:visibility,float,position.

خصائص الخلايا الفارغة CSS خصائص الاتجاه CSS