CSS تموضع المحتوى

display و visibility

آخر تحيين: 05-01-2015

CSS float CSS تنظيم المحتوى


الفرق بين وسوم الكتل و الوسوم الداخلية


صورة توضيحية . الخلفية الزرقاء تحتوي على وسم من نوع الكتلة (block) ، و الخلفية الصفراء على وسم داخلي (inline) :


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

<!DOCTYPE html>
<html dir="rtl">
<head>
 <meta charset="utf-8">
 <style>
  div,span
  {
    width: 200px;       /* العرض */
    height : 100px;     /* الطول */
    text-align: center; /* ترصيف النص */
    border: 1px solid #000; /* حدود الوسم*/
  }
 </style>
</head>
<body>

  <div> وسم الكتلة </div>
  <span> وسم داخلي </span>
  
</body>
</html>
مشاهدة النتيجة


الخاصيات التالية "width, height, text-align" ، أحدثت مفعولها على وسم الكتلة "div" ، لكن بقيت دون تأثير على وسم "span" . سيكون من المؤسف ان لا نستعملها أيضاً على الوسوم الدّاخلية . لما ستضيفه من تأثيرات جميلة . بما أننا في عصر المساواة ، وجب علينا إذابة هذا التمييز ، فلا فرق بين وسم و آخر في نيل حظه من الأنماط . من الآن ، يمكن للوسوم الداخلية أن تحظى بكل ميزات وسوم الكتلة ، و بنفس الطريقة ، يمكننا حرمان وسم الكتلة من ميزاته و تحويل طريقة عرضه كأنه وسم داخلي .
هذا جدول بسيط يضم بعض الوسوم التي رأيناها :

block و inline
وسوم الكتلة : Blockوسوم داخلية : inline
<h1>,<h2>...<strong>
<p><em>
<div><span>
<ul>,<ol>,<li><img>
<dl><a>
......

CSS display

لتحويل وسوم الكتلة (block) إلى وسوم داخلية (inline) و العكس صحيح . نستعمل الخاصية display ، و تتوفّر على كثير من القيم . لن نهتم إلاّ بالضرورية وهي :

  • inline : تحويل وسم الكتلة إلى عنصر داخلي
  • block : عكس الأولى : تحويل الوسم الدّاخلي إلى عنصر الكُتلة
  • inline-block: تحويل الوسم إلى عنصر داخلي في تصرفه ، مع إعطائه ميزات عنصر الكتلة
  • none : إخفاء عرض الكتلة من قبل المُتصفّح

مثال :
خذوا نفس الشيفرة السابقة ، سنحاول تغيير وسم div إلى وسم داخلي و نقوم بالعكس بالنسبة لوسم span

span
{
   display: block; /* تحويل الوسم الداخلي لعنصر الكتلة*/
}
div
{
   display : inline /* تحويل وسم الكتلة إلى عنصر داخلي */
}
مشاهدة النتيجة

ما الفائدة من وراء عملية تحويل الوسوم ؟

لفوائد شتّى ، كونوا على يقين بطريقة أو بأخرى ، أثناء إنشاء موقعكم ، ستلجؤون لاستعمال الخاصّية display . مثال :
أريد أن أنشيء قائمة للرّوابط ، باستعمال اللائحة ul . لكن لديّ مشكلة بسيطة ، أريد أن تكون عناصر اللائحة (li) كُلّها في سطرٍ واحد . التوضيح :

العرض التلقائي للمتصفح :

  • الإستقبال
  • الخدمات
  • إتصل بنا

بدل هذا العرض العمودي للعناصر ، أريد لائحة أفقية كالتالي :

  1. الإستقبال |
  2. الخدمات |
  3. إتصل بنا

لترجمة هذا إلى لغة CSS سنضيف القيمة inline للخاصية display

.in-line li
{
  display:inline;
}
 <h3> لائحة الرّوابط بدون استعمال خاصّية display </h3>
 <ul>
    <li><a href="#"> الإستقبال</a></li>
    <li><a href="#"> الخدمات </a></li>
    <li><a href="#"> اتصل بنا </a></li>
 </ul>

 <h3> لائحة الرّوابط باستعمال خاصّية display </h3>
 <ul class="in-line">
    <li><a href="#"> الإستقبال</a></li> 
    <li><a href="#"> الخدمات </a></li> 
    <li><a href="#"> اتصل بنا </a></li> 
 </ul>
مشاهدة النتيجة

inline-block

تجمع القيمة inline-block بين ميزات وسم الكتلة و الوسم الداخلي ، إذ ترغم الوسم على قبوله لعناصر أخرى أن تتدفّق إلى جنبه كما تُمكّنه من جميع ميزات وسم الكتلة ، لنرى مثالا بسيطا لما يمكننا فعله بهذه القيمة .
تخيلوا أنكم تريدون تقسيم صفحتكم إلى ثلاثة أعمدة على الشكل التالي :



للحصول على هذه النتيجة سنستعمل مثلا ثلاثة وسوم div ، و نطبق عليها نمط : inline-block

<div class="inlineBlock">
  سرمد جلت منول فيافي علق المصيف ، جعجع خلت المارق صدى . لكن قٍفا المثول نبأ ، زمراً ناسم إن الفرشخند طول . عول خفي الملى ساد الجب عن دال .   علق المت المارق صدى . لكن قٍفافي علق  
</div>
<div class="inlineBlock">
  سرمد جلت منول فيافي علق المصيف ، جعجع خلت المارق صدى . لكن قٍفا المثول نبأ ، زمراً ناسم إن الفرشخند طول . عول خفي الملى ساد الجب عن دال .  افي علق المت المارق صدى . لكن قٍفافي علق الم <br>  المثول نبأ ، زمراً ناس . لمصيف ، جعجع خلت المارق صدى . لكن قٍفا المثول نبأ ، زمراً ناسم إن الفرشخند طول . عول خفي الملى ساد الجب عن دال . افي علق المت المارق صدى . لك 
</div>
<div class="inlineBlock">
  المثول نبأ ، زمراً ناس . لمصيف ، جعجع خلت المارق صدى . لكن قٍفا
</div>
.inlineBlock
{
  width:150px;
  display: inline-block;
}
مشاهدة النتيجة


ستحصلون على نتيجة شبيهة بهذه :




لقد أتاحت لنا القيمة inline-block ترصيف وسوم div واحدا جنب الآخر . لقد تعمّدت أن أعطيكم محتويات مختلفة لتلاحظوا طول كل كتلة و طريقة ترصيف محتواها من أسفل إلى أعلى . و الحصول على هذا الشكل الغير المتجانس .
إذاً ، لتغيير هذا التصرّف التلقائي و إرغام المحتوى ليبدأ من أعلى إلى أسفل في كل وسم ، سنحتاج إلى خاصية جديدة ، وهي vertical-align و نعطيها القيمة top
كما يمكننا أيضا تحديد طول الكتل إذا أردنا الحصول على كتل متجانسة


.inlineBlock
{
  width:150px;
  height:350px;
  display: inline-block;
  vertical-align: top;
}
مشاهدة النتيجة



vertical : تعني عموديّا .
align : ترصيف ، تموضع .
تتيح لنا الخاصية vertical-align التحكم في التموضع العمودي للعناصر . و هي داعمة للقيمة inline-block . و يمكننا إعطاءها ثلاث قيم :

  • top : أعلى
  • middle : وسط
  • bottom : أسفل

سنرى أمثلة أخرى للقيمة inline-block في الدروس القادمة . أما الآن سأضع أمامكم خلاصة ما رأيناه لحد الآن في هذا الدرس حتى أسهل عليكم المقارنة و التمييز بين القيم الثلاث للخاصية display :


المقارنة بين inline و block و inline-block
inlineblockinline-block
عنصر داخليعنصر الكتلةعنصر داخلي في تصرفه مع احتفاظه بخصائص عنصر الكتلة
يمكنه احتواء وسوم داخلية أخرى . و لا يسمح البتة وضع وسم الكتلة داخلهيمكنه احتواء جميع الوسوميمكنه احتواء جميع الوسوم
لا يأخذ بعين الإعتبار مجموعة من خاصيات CSS مثل :
width ,height ,text-align
margin-top, padding-top
margin-bottom, padding-bottom
يأخذ بعين الإعتبار جميع خاصيات CSSيأخذ بعين الإعتبار جميع خاصيات CSS
يسمح لعناصر أخرى أن تتمركز إلى جانبه سواء يمينه أو يسارهلا يسمح لأي عنصر أن يأخذ مكانه إلى جانبه ، بل يُرغم المحتوى الذي يليه أن يتمركز تحته .يجمع بين خصائص الوسم الداخلي إذ يسمح للعناصر الأخرى أن تتواجد جنبه . و خصائص وسم الكتلة .

إخفاء الكتلة

لإخفاء عرض الكتلة على المتصفح ، نستعمل الخاصية display و نعطيها القيمة none

h1.hide{display: none;}
مشاهدة النتيجة


قمنا بإخفاء محتوى الوسم h1، و كأنه غير موجود ، حتى المكان الذي كان يتواجد فيه لم يعد متوفّرا .
يمكننا الحصول على نفس النتيجة تقريبا . مع استعمال خاصية أخرى ، و هي visibility و إعطائها قيمة hidden . و الفرق بينهما أن هذه الخاصية رغم إخفاء الوسم إلا أنها تحافظ على المكان الذي يتواجد فيه ، فارغا .

h1.hide{visibility: hidden;
مشاهدة النتيجة


يمكن إعطاء هذه الخاصية 4 قيم ، و التي تهمنا حاليا هي :

  • hidden : إخفاء
  • visible : إظهار
عملية تحويل الوسوم تتم في جانب لغة CSS . أما لغة HTML فالوسوم ستحتفظ دائما بعائلتها . أ ي أن وسوم الكتلة ستبقى دائما كذلك و لو طبقنا عليها ;display:inline و نفس الشيء للوسوم الداخلية . فلا يحق و لا يجوز إطلاقا لوسم داخلي حتى لو طبقنا عليه ;display:block أن يحتوي داخله وسما آخر من نوع الكتلة