عرض العناصر Display Elements
الخاصية Display في لغة CSS
تحدد لغة CSS القيمة الافتراضية للخاصية display لجميع عناصر HTML ، على سبيل المثال يتم تقديم عنصر <div> ككتلة block ، بينما يتم عرض العنصر <span> بشكل مضمن inline.
تغير القيمة الإفتراضية للخاصية Display
يؤدي تجاوز القيمة الافتراضية للخاصية display للعنصر إلى تغير طريقة عرض العنصر في صفحة الويب . على سبيل المثال ، تغيير عنصر على مستوى مضمّن inline-level ليتم عرضه كعنصر على مستوى الكتلة block-level أو تغيير عنصر مستوى الكتلة ليتم عرضه كعنصر على مستوى مضمّن.
تعد الخاصية display واحدة من أقوى الخصائص في لغة CSS. وتكمن قوتها في إنشاء صفحات ويب تبدو بطريقة مختلفة ، ولكنها لا تزال تتبع معايير الويب.
في هذا الدرس سوف نتعلم قيم الخاصية display الأكثر استخدامًا.
القيمة Block
تجبر القيمة block للخاصية display العنصر على التصرف مثل عنصر مستوى الكتلة block-level element ، مثل عنصر <div> أو <p>. في المثال التالي سيتم عرض عنصري <span> و <a> كعناصر على مستوى الكتلة:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>القيمة Block</title>
<style>
body {
direction:rtl;
text-align:center;
font-size:30px;
}
span {
display: block;
background: #F0E68C;
}
a {
display: block;
background: #90EE90;
}
</style>
</head>
<body>
<p>
<a href="https://alawirisaddam.blogspot.com/" target="_top">Visit alawirisaddam.com</a>
<br>
<span>يُنشئ عنصر span هذا صندوق كتلة block box.</span>
</p>
</body>
</html>
المخرجات
يؤدي تغيير نوع عرض عنصر ما إلى تغيير سلوك عرض العنصر فقط ، وليس نوع العنصر الذي هو عليه. على سبيل المثال ، إضافة الخاصية display لعنصر مضمن بالشكل التالي display: block ؛ لا يسمح بتداخل عنصر كتلة بداخله.
قائمة بعناصر الكتلة
القيمة Inline
تتسبب القيمة inline للخاصية display في أن يتصرف العنصر كما لو كان عنصرًا مضمّناً inline-level element ، مثل عنصر <span> أو عنصر <a>. في المثال التالي سيتم عرض عنصري <p> و <li> كعناصر مضمنة:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>القيمة Inline
</title>
<style>
body {
direction:rtl;
text-align:center;
font-size:30px;
}
p {
display: inline;
background: #8FBC8F;
padding: 10px;
}
ul li {
display: inline;
margin: 10px;
}
</style>
</head>
<body>
<p>اصبح عرض عنصر الفقرة هذا بشكل صندوق مضمن inline box.</p>
<p>هذه الفقرة أيضا </p>
<ul>
<li>البند الاول</li>
<li>البند الثاني</li>
<li>البند الثالث</li>
<li>البند الرابع</li>
<li>البند الخامس</li>
</ul>
</body>
</html>
المخرجات
قائمة بالعناصر المضمنة
القيمة Inline-Block
تتسبب القيمة inline-block للخاصية display في قيام العنصر بإنشاء مربع كتلة block box يتدفق مع المحتوى المحيط ، أي في نفس السطر مثل المحتوى المجاور. في المثال التالي سيتم عرض عنصري <div> و <span> ككتلة مضمنة:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>القيمة Inline-Block</title>
<style>
body {
direction:rtl;
text-align:center;
font-size:30px;
}
div {
display:inline-block;
background: #90EE90;
padding: 10px;
}
span {
display: inline-block;
background: #F08080;
padding: 10px;
}
</style>
</head>
<body>
<div>
<span>يقوم عنصر span هذا وعنصر div الاب الخاص به بإنشاء مربع كتلة مضمنة inline-block box.</span>
<span>وهذا ايضا</span>
</div>
</body>
</html>
المخرجات
القيمة None
تؤدي القيمة none ببساطة إلى عدم إنشاء العنصر لأي مربعات على الإطلاق. لا تُنشئ عناصر الابناء أي مربعات أيضًا ، حتى إذا تم تحديد قيمة للخاصية display الخاصة بها على شيء آخر غير none. يتم عرض صفحة الويب كما لو أن العنصر غير موجود في شجرة المستند.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>القيمة None
</title>
<style>
body {
direction:rtl;
text-align:center;
font-size:26px;
}
h1 {
display: none;
border : 5px solid blue;
background : lightgray;
}
p {
border : 5px solid blue;
background : lightgray;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>تؤدي القمية <code>none</code> للخاصية <code>display</code> ببساطة إلى عدم إنشاء العنصر لأي مربعات على الإطلاق.</p>
</body>
</html>
المخرجات
القيمة none للخاصية display لا تنشئ صندوقًا غير مرئي بل لن ينشئ أي مربع على الإطلاق.
مثال يوضح الفرق بين القيم بشكل عملي
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>الخاصية Displayck</title>
<style>
body {
font-size:22px;
}
h1 {
direction:rtl;
text-align:center
}
span.a {
display: inline; /* القيمة الإفتراضية لعنصر span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>الخاصية Display في لغة CSS</h1>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
</body>
</html>
المخرجات
التحكم في رؤية العناصر
الخاصية Visibility في لغة CSS
يمكننا استخدام الخاصية visibility للتحكم في ما إذا كان العنصر مرئيًا أم لا. يمكن أن تأخذ هذه الخاصية إحدى القيم التالية المدرجة في الجدول أدناه:
تغير القيمة الإفتراضية للخاصية Display
يؤدي تجاوز القيمة الافتراضية للخاصية display للعنصر إلى تغير طريقة عرض العنصر في صفحة الويب . على سبيل المثال ، تغيير عنصر على مستوى مضمّن inline-level ليتم عرضه كعنصر على مستوى الكتلة block-level أو تغيير عنصر مستوى الكتلة ليتم عرضه كعنصر على مستوى مضمّن.
| القيمة | الوصف |
|---|---|
| visible | القيمة الافتراضية. الصندوق ومحتوياته مرئيان. |
| hidden | الصندوق ومحتوياته غير مرئيين ، لكنهما لا يزالان يؤثران على تنسيق الصفحة. |
| collapse | تؤدي هذه القيمة إلى إزالة الصف أو العمود بالكامل من العرض. تُستخدم هذه القيمة لعناصر الصفوف ومجموعة الصفوف والأعمدة ومجموعة الأعمدة. |
| inherit | تحدد أن قيمة الخاصية visibility يجب أن يتم اكتسابها من العنصر الأب ، أي تأخذ نفس قيمة الخاصية visibility كما هي محددة للعنصر الأب. |
visibility: collapse; تزيل العناصر الداخلية من الجدول ، لكنها لا تؤثر على تخطيط الجدول نهائياً. سيتم ملء المساحة التي كانت تشغلها هذه العناصر من قبل العناصر المجاورة لها.
اما اذا تم استخدام القيمة collapse لعناصر أخرى غير عناصر الجدول ، فسيكون تأثيرها نفس تأثير القيمة hidden .
الفرق بين الخاصية Visibility و الخاصية Display
يبدو للوهلة الأولى أن الخصائص display و visibility لها نفس التأثير ، لكنها في الواقع مختلفة تمامًا وغالبًا ما يتم الخلط بينها من قبل مطورين الويب الجدد.
-
visibility: hidden;تعمل على إخفاء العنصر ، لكنه لا يزال يشغل مساحة داخل مخطط صفحة الويب. وستكون العناصر الأبناء للصندوق المخفي مرئية إذا تم ضبط إمكانية الرؤية على أن تكون مرئية. -
display: none;بهذه الطريقة نقوم بإيقاف عرض العنصر تماما مما يؤدي إلى إزالته من شجرة المستند ولن يشغل أي مساحة ، على الرغم من أن كود HTML الخاص به لا يزال موجودا في الكود المصدري. أيضًا يتم إيقاف عرض جميع العناصر الموجودة بداخله (العناصر الابناء لهذا العنصر) ، حتى إذا تم تحديد قيمة الخاصيةdisplayالخاصة بها على شيء آخر غيرnone.
العرض التالي يوضح تأثير الخصائص display و visibility على مخطط صفحة الويب.