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

CSS الطول و العرض

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

CSS border : الحدود CSS تزيين المحتوى


قبل الحديث عن العلبة النموذجية ، لا بأس من التعرف على خاصيات تحديد طول و عرض الوسوم .
يمكننا تحديد طول و عرض وسم الكتلة بالبيكسل (px) أو بالنسبة المئوية (%) . و تُوفّر لنا CSS خاصّيتين ، واحدة للطّول و أخرى للعرض :

  • width : عَرْض الكُتلة بالبيكسل أو النسبة المئوية
  • height : طول الكُتلة بالبيكسل أو النسبة المئوية

CSS width

كما لاحظتم لغاية الآن ، كلما كتبتم نصّاً داخل وسم من وسوم الكتلة ، إلا و يأخذ كل عرض الصّفحة تلقائيّا ، حيث لم يكن باستطاعتكم التّحكم فيه . لنرى هذا النّص على سبيل المثال :

<h1>Lorem ipsum</h1>

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat , pretium a, enim. Pellentesque congue. Ut risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit
</p>
مشاهدة النتيجة

سطور النص داخل وسم p ، تمتدّ من يسار أو يمين شاشة حاسوبكم ولا تنتهي إلاّ عند نهايتها . فلنَضَع إذاً حدّاً لِمُغالاتها . سنحدّدُ العرض الذي نريده لقطعتنا و ذلك باستعمال خاصية width . و سنرى النتيجة التي سنحصُلُ عليها . نأخذ نفس الفقرة السابقة

p{
   width: 50%;
}
مشاهدة النتيجة

CSS height

لتحديد طول الوسم نستعمل الخاصية height . مثال :

p {
   width:50%;
   height: 150px;
}
مشاهدة النتيجة


كما لاحظتم ، لم يطرأ أي تغيير على طول الفقرة . و لم تقم الخاصية height بعملها أي تحديد الطول بقيمة 150px فقط . فكلّما زاد طول النص إلاّ و زادت الكتلة طولاً و لا تعير أي اهتمام للطّول الذي حدّدناه إذاً لتقطيع الفقرة و جعلها تساوي الطول الذي أردناه ، نحتاج لخاصّية أخرى و هي overflow و تأخذ القيم التالية :

  • visible : سيتمّ تحديد طول الكتلة تلقائيا موازاةً مع طول النص . أي ان النص سيكون مرئيا بالكامل
  • hidden : سيتمّ تقطيع النص حسب الطول الذي اخترناه ، و سيتم تجاهل المحتوى الذي يزيدُ على هذا الطول فلن يظهر على المتصفح
  • scroll : هنا أيضا سيتم تقطيع النص حسب الطول المُحدّد ، لكن هذه المرّة لن نتجاهل باقي المحتوى ، إذ سيضع المتصفّحُ عارضة لاستعراضه
  • auto : نترُكُ الخيار للمتصفّح لتحديد وضع عارضة للإستعراض أم لا

خذوا الآن فقرة المثال السابق و جرّبوا هذه القيم ، سأعطيكم مثالاً و أنتم أكملوا الباقي :

p {
    width:50%;
    height:150px;
    overflow:scroll;
}
مشاهدة النتيجة