ماهي خاصية display في لغة CSS؟

بسم الله الرحمن الرحيم، السلام عليكم ورحمة الله وبركاته.

خاصية display في لغة CSS تُستخدم لتحديد كيفية عرض العنصر المحدد في الصفحة. تقبل هذه الخاصية العديد من القيم، وهي:

1) block: والتي تُجعل العنصر يحتل المساحة الكاملة المتاحة له في الصفحة، وتُجعل كل عناصر بعد العنصر المحدد تظهر في سطر جديد.

2) inline: والتي تُجعل العنصر يحتل المساحة اللازمة فقط لعرض محتواه، ويتم عرض كل العناصر في نفس السطر.

3) inline-block: والتي تجمع بين خاصيتي block و inline حيث يحتل العنصر المساحة اللازمة فقط لعرض محتواه ويتم عرضه في نفس السطر ويمكن تحديد عرض وارتفاع العنصر.

4) none: والتي تُخفي العنصر بالكامل وتُجعله غير مرئي.

وهنا مثال على كيفية استخدام الخاصية display في CSS:

CSS

div {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: blue;
}

في هذا المثال، نحن نستخدم الخاصية display لتحديد عرض وارتفاع العنصر div ونجعله يظهر في نفس السطر مع عناصر أخرى باستخدام القيمة inline-block. كما يتم تحديد لون خلفية العنصر عبر خاصية background-color.

أمثلة:

display بالقيمة block:

CSS

div {
    display: block;
    width: 200px;
    height: 200px;
    background-color: red;
}

في هذا المثال، تم استخدام القيمة block لجعل العنصر div يحتل المساحة الكاملة المتاحة له في الصفحة، وتم تحديد عرض وارتفاع العنصر ولون خلفيته.

وهذا مثال على استخدام الخاصية display بالقيمة inline:

CSS

span {
    display: inline;
    background-color: yellow;
}

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

وهذا مثال على استخدام الخاصية display بالقيمة inline-block:

CSS

button {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: green;
}

في هذا المثال، تم استخدام القيمة inline-block لجمع بين خاصيتي block و inline، حيث يحتل العنصر المساحة اللازمة فقط لعرض محتواه ويتم عرضه في نفس السطر وتم تحديد عرض وارتفاع العنصر ولون خلفيته.

وهذا مثال على استخدام الخاصية display بالقيمة none:

CSS

img {
    display: none;
}

في هذا المثال، تم استخدام القيمة none لإخفاء العنصر img بالكامل وجعله غير مرئي.
هكذا نكون قد إنتهينا هناك المزيد من القيم التي تقبلها الخاصية سنتعرف عليها إن شاء الله في دروسها الخاصة في الموقع.
أتمنى أن هذه الأمثلة ساعدتك على فهم كيفية استخدام الخاصية display في CSS بطريقة سلسة وواضحة. يمكن استخدام هذه الخاصية في تحديد كيفية عرض العناصر في صفحات الويب وتحديد الفراغات بين العناصر وتنسيق العناصر وتحسين تجربة المستخدم.