تنسيق النصوص



لون النص


تستخدم خاصية اللون 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زيادة أو نقصان المسافة بين الكلمات في النص





هناك تعليق واحد:

  1. لتلوين حرف واحد في كلمة عربية نستخدم وسم "الضم الصفري" zwj ، مثال اذا كنت اريد تلوين حرف التاء في كلمة كتاب بلون معين في html:
    ك ‍ ت ‍ اب.
    واما في لغات البرمجة الاخرى استخدم اليونيكود u200D :
    - اذا كان الحرف في بداية الكلمة اضع اليونيكود بعده.
    - اذا كان الحرف في وسط الكلمة اضع اليونيكود قبله وبعده.
    - اذا كان الحرف في نهاية الكلمة اضع الحرف قبله فقط.

    ردحذف