0 Mustafa Mahmoud7 نشر 2 نوفمبر أرسل تقرير نشر 2 نوفمبر text-align : تستخدم هذه الخاصية لمحازاة النص أفقيا داخل العنصر أو محازاة العناصر السطرية مثل span و img وa وتأخذ عدة قيم مثل center - left - right. حالة كانت قيمتها right ستكون المحازاة للنص يمينيا ، وإذا كانت left تكون المحازاة للنص يسارا، وإذا كانت center تكون المحازاة في منتصف العنصر لاحظ هذا الكود والقيمة التي ذكرتها <div> <p style="text-align: right; background-color: blue;">النص في اليمين</p> <p style="text-align: center; background-color: yellow;">النص في المنتصف</p> <p style="text-align: left; background-color: red;">النص في اليسار</p> </div> تكون النتيجة له كالأتي line-height: تستخدم هذه الخاصية للتحكم في المسافة العمودية بين أسطر النص داخل عنصر معين. وتأخذ قيمة عن طريق وحدات نسبية من حجم الخط في هذا العنصر في حالة مثلا كانت القيمة له 1.5 وحجم الخط الافتراضي للعنصر 16px لذلك ستكون قيمة الـine-height هي 24px ويمكن كتابة القيمة بوحدة الـ pixel لا مشكلة ولكن يفضل أن تكون نسبية لاحظ الكود <div> <p style="background-color: rgb(45, 205, 233); line-height: 1.5;">Lorem ipsum dolor sit amet consectetur, adipisicing elit.Voluptate suscipit quaerat,vero consequuntur aut sequi iure velit dolorum corrupti aliquam, natus veniam eum quod illum assumenda doloremque, excepturi ea! Cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis distinctio minima ab, sapiente hic quasi similique ipsam nesciunt eaque et asperiores, in minus corporis temporibus officiis suscipit natus quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum odio ratione. Enim a rerum quidem soluta maxime eos. Laudantium culpa eaque alias natus ea dignissimos ratione saepe quis quasi?</p> <p style="background-color: rgb(233, 167, 45); line-height: 2;">Lorem ipsum dolor sit amet consectetur, adipisicing elit.Voluptate suscipit quaerat,vero consequuntur aut sequi iure velit dolorum corrupti aliquam, natus veniam eum quod illum assumenda doloremque, excepturi ea! Cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis distinctio minima ab, sapiente hic quasi similique ipsam nesciunt eaque et asperiores, in minus corporis temporibus officiis suscipit natus quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum odio ratione. Enim a rerum quidem soluta maxime eos. Laudantium culpa eaque alias natus ea dignissimos ratione saepe quis quasi?</p> <p style="background-color: rgb(253, 107, 155); line-height: 2.5;">Lorem ipsum dolor sit amet consectetur, adipisicing elit.Voluptate suscipit quaerat,vero consequuntur aut sequi iure velit dolorum corrupti aliquam, natus veniam eum quod illum assumenda doloremque, excepturi ea! Cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis distinctio minima ab, sapiente hic quasi similique ipsam nesciunt eaque et asperiores, in minus corporis temporibus officiis suscipit natus quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur illum odio ratione. Enim a rerum quidem soluta maxime eos. Laudantium culpa eaque alias natus ea dignissimos ratione saepe quis quasi?</p> </div> تكون النتيجة له كالأتي لاحظ المسافات بين الأسطر وإذا قمت بتغير حجم الخط للعنصر وكنت تستخدم القيمةللـ line-height بشكل نسبي ستتغيير بالطبع قيمة الـ line-height. للمزيد حول هاتين الخاصيتين يمكنك الإطلاع عليهم في موسوعة حسوب https://wiki.hsoub.com/CSS/text-align https://wiki.hsoub.com/CSS/line-height 1 اقتباس
السؤال
Eslam Ahmed Soliman Nafea
.
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.