السلام عليكم ورحمة الله وبركاته
لقد تم شرح الجزء الأول من تنسيق النصوص بتقنية - Css - وأذا أردة العودة إليه إضغط هنا
سادساً- المسافات بين الأحرف :
يمكنكنا زيادة او انقاص المسافة بين الاحرف عن طريق الخاصية letter-spaceing ولتغيير القيم نستخدم وحدة البيكسل px وهناك وحدات اخرى لكن البيكسل اكثرها استخداماً .
لزيادة المسافة نستخدم قيمة موجبة مثل 5px أما لإنقاص المسافة نستخدم قيمة سالبة مثل 4px- , نحو :
{; h1 { letter-spacing: 3px
{; h1 { letter-spacing: -4px
ملحوظة : يمكننا أستخدام هذه الخاصية للنصوص المكتوبة باللغة العربية .
سابعاً - المسافات بين الكلمات :
هذه الخاصية تشابه في عملها الخاصية السابقة حيث أنها تمكنك من التحكم بالمسافة بين الكلمات زيادتها أو انقاصها , ويمكننا فعل هذا بواسطة الخاصية word-spacing , ولتغيير القيم نستخدم وحدة البيكسل px .
لزيادة المسافة نستخدم قيمة موجبة مثل 5px أما لإنقاص المسافة نستخدم قيمة سالبة مثل 4px- , نحو :
{; h1 { word-spacing: 3px
{; h1 { word-spacing: -2px
ثامناً- المسافات بين الأسطر :
ستطيع زيادة أو انقاص المسافة بين الأسطر في الفقرات بواسطة الخاصية line-height (وتعني ارتفاع السطر) , أما القيمة فتكون بوحدة البيكسل .
لزيادة المسافة نستخدم قيمة كبيرة مثل 30px أما لإنقاص المسافة نستخدم قيمة صغيرة مثل 13px, نحو :
{;p { line-height: 35px
تاسعاً- تغيير أتجاه النص :
الاتجاه الافتراضي للنصوص في الويب هو من اليسار إلى اليمين , يعني لو كتبت نصاً باللغة العربية ستجد أنه يبدأ من اليسار ويتجه إلى اليمين ولكن يمكنك تغيير اتجاه النص بواسطة الخاصية direction .
لجعل النص يتجه من اليمين إلى اليسار نجعل قيمة الخاصية direction تساوي rtl (يعني right to left) , ولجعله يتجه من اليسار إلى اليمين نجعل قيمة الخاصية direction تساوي ltr (يعني left to right) , نحو :
{;h1 { direction: rtl
{;h2 { direction: ltr
عاشراً- التفاف النص :
للتحكم في إلتفاف النص بداخل أي عنصر (قد يكون هذا العنصر body أو div أو textarea .. وغيرها) , يمكنك هذا بواسطة الخاصية white-space , وهي تحمل قيمتين :
- القيمة الأولى : wrap
وهي القيمة الافتراضية , هذه القيمة تمكنك من جعل النص يلتف وينتقل إلى أسطر جديدة ولا يخرج عن إطار العنصر , نحو :
{;p { white-space: wrap
- القيمة الثانية : nowrap
هذه القيمة تمكنك من إيقاف التفاف النص وتجعل النص يصبح كله في سطر واحد فقط ،نحو :
{;p { white-space: nowrap
أحد عشر- المحاذة العمودية :
نستخدم المحاذاة العمودية عندما نضع صورة بداخل النص (مثلاً نضع الوسم img بداخل الوسم p ) عندها نحتاج إلى جعل النص محاذياً لأعلى الصورة او محاذياً لأسفلها أو محاذياً لوسط الصورة , ونستخدم في هذا الخاصية vertical-align .
ملحوظة : لا نطبق الخاصية vertical-align على النصوص... بل نطبقها مع الصورة التي نريد محاذاة النص معها .
1- كيف نجعل النص محاذياً لأعلى الصورة :
نجعل قيمة الخاصية vertical-align للصورة تساوي top , نحو:
<html>
<head>
<style>
{;img { vertical-align: top
</style>
</head>
<body dir="rtl">
<h3>
تمت محاذاة النص مع أعلى الصورة
<img src="homeblog7_logo.png" />
</h3>
</body>
</html>
2- كيف نجعل النص محاذياً أسفل الصورة :
نجعل قيمة الخاصية vertical-align للصورة تساوي bottom ,نحو:
قم بتغيير كود CSS في المثال السابق بهذا الكود :
{;img { vertical-align: bottom
3- كيف نجعل النص محاذياً وسط الصورة :
جعل قيمة الخاصية vertical-align للصورة تساوي middle , نحو :
قم بتغيير كود CSS في المثال السابق بهذا الكود :
{;img { vertical-align: middle
وأخيراً نترككم برعاية الله وتوفيقه
فريق عمل مدونة هوم بلوجر
0 Comments:
إرسال تعليق