عرض العناصر 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> كعناصر على مستوى الكتلة:

مثال
تشغيل
  1. span {
  2. display: block;
  3. }
  4. a {
  5. display: block;
  6. }
ملاحظة:

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

قائمة بعناصر الكتلة
<address>
<article>
<aside>
<blockquote>
<details>
<dialog>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<header>
<hgroup>
<hr>
<li>
<main>
<nav>
<ol>
<p>
<pre>
<section>
<table>
<ul>

القيمة Inline

تتسبب القيمة inline للخاصية display في أن يتصرف العنصر كما لو كان عنصرًا مضمّناً inline-level element ، مثل عنصر <span> أو عنصر <a>. في المثال التالي سيتم عرض عنصري <p> و <li> كعناصر مضمنة:

مثال
تشغيل
  1. p {
  2. display: inline;
  3. }
  4. ul li {
  5. display: inline;
  6. }
قائمة بالعناصر المضمنة
<a>
<abbr>
<acronym>
<audio>
<b>
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<video>
<wbr>

القيمة Inline-Block

تتسبب القيمة inline-block للخاصية display في قيام العنصر بإنشاء مربع كتلة block box يتدفق مع المحتوى المحيط ، أي في نفس السطر مثل المحتوى المجاور. في المثال التالي سيتم عرض عنصري <div> و <span> ككتلة مضمنة:

مثال
تشغيل
  1. div {
  2. display: inline-block;
  3. }
  4. span {
  5. display: inline-block;
  6. }

القيمة None

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

مثال
تشغيل
  1. h1 {
  2. display: none;
  3. }
  4. p {
  5. display: none;
  6. }
ملاحظة:

القيمة none للخاصية display لا تنشئ صندوقًا غير مرئي بل لن ينشئ أي مربع على الإطلاق.

مثال يوضح الفرق بين القيم بشكل عملي

مثال
تشغيل
  1. span.a {
  2. display: inline;
  3. width: 100px;
  4. height: 100px;
  5. padding: 5px;
  6. border: 1px solid blue;;
  7. background-color: yellow;
  8. }
  9. span.b {
  10. display: inline-block;
  11. width: 100px;
  12. height: 100px;
  13. padding: 5px;
  14. border: 1px solid blue;;
  15. background-color: yellow;
  16. }
  17. span.c {
  18. display: block;
  19. width: 100px;
  20. height: 100px;
  21. padding: 5px;
  22. border: 1px solid blue;;
  23. background-color: yellow;
  24. }
« التالي السابق »