تنسيق النصوص

لون النص

تستخدم خاصية اللون color لتلوين نص معين

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

  • باستخدام قيمة HEX مثال “#FFFFFF”
  • باستخدام قيمة RGB مثال “rgb(255,0,0)”
  • باستخدام اسم اللون مثل “Red”

ان اللون الافتراضي للصفحة معرّف من خلال المنتقى body

مثال

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

ملاحظة : اذا قمت بتحديد خاصية اللون color فعندها يجب أيضاً ان تحدّد لون الخلفية background-color أيضاً


محاذاة النص

تستخدم خاصية محاذاة النص text-align لضبط المحاذاة بشكل أفقي للنص

يمكن للنص أن يتم محاذاته للوسط center أو لليمين right أو اليسار left أو ممدد justify
عند استخدام القيمة ممدد justify فهذا يعني كل سطر سيتم تمديده ويكون مساوٍ له في العرض كما أن هوامش اليمين واليسار مستقيمة (كما في الجرائد والمجلات)

مثال

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

زخرفة النص text decoration

تستخدم خاصية زخرفة النص text-decoration لضبط أو ازالة زخرفة معينة للنص

تستخدم بشكل واسع زخرفة النص لإزالة الخط من تحت النص ضمن الرابط التشعبي لأهداف زخرفية

مثال

a {text-decoration:none;}

كما يمكن ايضاً زخرفة النص

مثال

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

ملاحظة : لايفضّل وضع خط تحت اي نص مالم يكن رابط تشعبي لأنه يسبب بعض الارتباك للمستخدم


تحويل النص Text Transformation

تستخدم خاصية تحويل النص وذلك لتحويل النص لأحرف صغيرة lowercase أو أحرف كبيرة uppercase
تستخدم لتحويل النص كله لأحرف كبيرة أو أحرف صغيرة أو تكبير الحرف الأول لكل كلمة
ملاحظة : تستخدم هذه الخاصية فقط مع الكلمات باللغة الإنكليزية وليس اللغة العربية

مثال

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

تباعد النص Text Indentation

تستخدم خاصية تباعد النص لتحديد تباعد السطر الأول من فقرة معينة ( تستخدم مع فقرات اللغة الانكليزية)

مثال

p {text-indent:50px;}

الخاصية الشرح
color تغيير لون النص
direction تحديد وجهة النص أو وجهة الكتابة يمين يسار أو يسار يمين
letter-spacing زيادة أو نقصان المسافة بين الأحرف في النص
line-height تحديد ارتفاع النص
text-align تحديد المحاذاة الأفقية للنص
text-decoration تحديد الزخرفة المضافة للنص
text-indent تحديد الفجوة في السطر الأول لمجموعة النص
text-shadow تحديد تأثيرات الظل المضافة على النص
text-transform التحكم بالأحرف الكبيرة و الصغيرة للنص
vertical-align تحديد المحاذاة العمودية للعنصر
white-space تحديد كيفية التحكم بالمسافات داخل العناصر
word-spacing زيادة أو نقصان المسافة بين الكلمات في النص