5- CSS : تنسيق النص بتسعة قيم

 

بسم الله الرحمن الرحيم

 

سنتحدث في هذا الدرس عن تركيب الخطوط و تنسيقها داخل الموقع أو المدونة من خلال عدة متغيرات هى كالتالى

 هناك طرق أخرى لتنسيق النص بإستخدام html في الدرس السادس

1. لون النص color
2. موضع النص text-align
3. تزيين النص text-decoration
4. تحويل النص text-transform
5. مسافة بداية النص text-indent
6. إتجاه النص direction
7. المسافة بين الحروف letter-spacing
8. المسافة بين السطور line-height
9. المسافة بين الكلمات word-spacing

هذا هو المثال الذى سنجرب عليه

<p id='main'>مدونة عالم نت</p>

 

 

أولا: لون النص color

 

هناك 3 طرق لإضافة لون الخط هى

 

1. إسم اللون مثل red , green , yellow .....
2. كود اللون مثل  FFFFFF#  و هى للون الأبيض .. أكواد الألوان كاملة
3. القيمة RGB للون   مثل    (255,255,255)rgb  و هى للون الابيض .. أكواد الألوان كاملة

#main {

color: #FFFFFF;

background-colo: black;

}

 فتكون كالتالى

مدونة عالم نت

لاحظ لقد إستخدمت لون الخلفية من الدرس السابق (تصميم الخلفية) فقط للتذكير .. بالإضافة للون الخط

 

 

ثانيا: موضع النص text-align

 

هذا المتغير يستخدم لضبط و ضع النص سواء أكان في اليمين right أو اليسار left أو الوسط center أو الملائم justify  و هذه القيمة تستخدم لجعل الكتابة متمددة حتى تملئ السطر بالكامل ..

#main {text-align: left;}

#main {text-align: right;}

#main {text-align: center;}

#main {text-align: justify;}

 

 

ثالثا: تزيين النص text-decoration

 

تستخدم لتزيين النص عن طريق إستخدام الخط المستقيم سواء أكان خط فوق النص overline أو خط تحت النص underline أو خط على النص line-through   .. لاحظ التالى

إذا كان CSS  كالتالى

#main {text-decoration: underline;}

#main {text-decoration: line-through;}

#main {text-decoration: overline;}

 

فيكون الناتج كالتالى بالترتيب

مدونة عالم نت

مدونة عالم نت

مدونة عالم نت

 

رابعا: تحويل النص text-transform

 

هذا المتغير يستخدم في تحديد شكل الخط بين .. هل الحروف كلها كبيرة uppercase أم صغيرة lowercase أم بدايتها كبير و أخرها صغير capitalize ؟؟ ...  و هى تستخدم فقط فى غير اللغة العربية كالتالى
 

#main {text-transform: uppercase;}

#main {text-transform: lowercase;}

#main {text-transform: capitalize;}

 

 

 

خامسا: فاصل بداية السطر text-indent

 

و تستخدم لوضع مسافة في بداية النص و هى كالتالى

#main {text-indent: 40px;}

و يمكنك تغيير 40 إلى أى رقم أخر حسب حجم المسافة التى تريدها

 

 

 

سادسا: إتجاه النص direction

 

وهى إتجاه النص من اليسار إلى اليمين ltr  كما في اللغة الإنجليزية أو من اليمين إلى اليسار rtl كما في اللغة العربية
 

#main {direction: ltr;}

#main {direction: rtl;}

سابعا: المسافة بين الحروف letter-spacing

و تستخدم القيم بيكسل px و يمكن إستخدام القيم بالسالب كالتالى

#main {letter-spacing: -2px}

و يكون الناتج

مدونة عالم نت

لقد قمت بتقليل المسافة إلى 2- فقلت المسافة و يمكن زيادتها حسب الرغبة



ثامنا: المسافة بين السطور line-height

و تستخدم القيم بيكسل px أو رقم 1 أو 2 أو 3 أو ....   أو نسبة مؤية 100% أو 150% أو ......

#main {line-height: 70%}

تاسعا: المسافة بين الكلمات word-spacing

و تستخدم القيمة بيكسل px كالتالى

#main {word-spacing: 10px;}

فيكون الناتج

مدونة عالم نت

 

 

** لا حظ أنه يمكنك إستخدام جميع هذه القيم أو إحداها أو بعضها .. لا يوجد أى مشكلة