}
فتكون كالتالى
مدونة المنصب
لاحظ لقد إستخدمت لون الخلفية فقط للتذكير .. بالإضافة للون الخط
ثانيا: موضع النص 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;}
فيكون الناتج
مدونة المنصب
** لا حظ أنه يمكنك إستخدام جميع هذه القيم أو إحداها أو بعضها .. لا يوجد أى مشكلة
رابط الموضوع الأصلي هنا :
لمعرفة كيفية وضع هذه الأكواد في مدونتك بالطريق الصحيحة تابع هذا المقطع
