تنسيق النصوص Styling Text

اللون color

الخاصة color
يمكن تلوين النص في صفحة الانترنت باستخدام الخاصة color
ويوجد ثلاثة طرق لكتابة اللون كما مر معنا في تلوين الخلفية في الدرس 4
مثال :

color:blue;">tahasoft.com

كما نلاحظ أن طريقة كتابة خاصية التلوين باستخدام الأمر color ثم نقطتين ثم نكتب اللون
النتيجة :
tahasoft.com
مثال آخر:

 css درس التلوين في 


 في منتدى طه سوفت  للبرامج css دورة

النتيجة:

css درس التلوين في
في منتدى طه سوفت للبرامج css دورة

________________________________

جرب بنفسك الأكواد السابقة في صفحة محرر أكواد html أو بإنشاء ملفات html , css وتجربتها على جهازك

محاذاة النصوص Text Alignment

الخاصة text-align
وهي المحاذاة التي نعرفها في برامج الأوفيس

طريقة كتابة هذا الامر في css

text-align:xxxxxx;

حيث نضع بدلاً من xxxxxx نوع المحاذاة

وهي على أربعة أنواع :
1- محاذاة النص إلى اليمين

text-align:right;

2-محاذاة النص إلى اليسار

text-align:left;

3-توسيط النص

text-align:center;

4-ضبط النص

text-align:justify;

مثال شامل

نص متوسط


نص في جهة اليمين


نص في جهة اليسار 


نص مضبوط - دورة منتدى طه سوفت للبرامج في تصميم  وبرمجة مواقع الانترنت نص مضبوط - دورة منتدى طه سوفت للبرامج في تصميم  وبرمجة مواقع الانترنت نص مضبوط - دورة منتدى طه سوفت للبرامج في تصميم  وبرمجة مواقع الانترنت نص مضبوط - دورة منتدى طه سوفت للبرامج في تصميم  وبرمجة مواقع الانترنت نص مضبوط - دورة منتدى طه سوفت للبرامج في تصميم  وبرمجة مواقع الانترنت 

النتيجة :

تلوين خلفية النص

يتم ذلك من خلال background-color
مثال

tahasoft.com

كما نرى الخاصة نفسها التي وردت سابقاً background-color في تلوين الخلفية استخدمت للنص
النتيجة :

ملاحظة

: في الأكواد السابقة في الأمثلة التي وردت أحاول التنويع في أماكن وطرق كتابة كود css حتى نبقى على تواصل ونتذكر ما سبق من دروس

زخرفة / ديكور النص

يتم ذلك من خلال text-decoration و لنرى هذه الخاصية معاً بالأمثلة :
مثال :

نص فوقه خط


نص يخترقه خط


نص تحته خط


نص يومض

النتيجة :


ملاحظة :
آخر عبارة "نص يومض" هي عبارة عن نص يظهر ويختفي كل ثانية تقريباً ولكن هذه الخاصة في CSS تعمل على المتصفح Firefox فقط

مثال آخر
خاصية text-decoration مفيدة في التعامل مع الروابط وسنتوسع في هذا لاحقاً
وحالياً سنضع مثال ضمن ما أخذناه من خواص

طه سوفت


طه سوفت

النتيجة :

الرابط الأول هو رابط طبيعي كما أخذنا في دروس Html وفي الثاني وضعنا خاصية text-decoration:none
فظهر بدون خط تحته و لاحقاً سنرى كيف نغير من تنسيق النص عند مرور الماوس وضغطها فوق الرابط

تنسيق حالة الأحرف الصغير والكبيرة في css

يتم ذلك من خلال الخاصة text-transform
ولها عدة حالات
uppercase لجعل النص بأحرف كبيرة
lowercase لجعل النص بأحرف صغيرة
capitalize لجعل الحرف الاول من كل كلمة في الجملة يظهر بشكل كبير
طبعاً تفيد الحالات الثلاثة هذه فقط مع الجمل الانكليزية وليس العربية
مثال :

This is a text.


This is a text.


This is a text.

النتيجة :

انزياح النص text-indent

مثال

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


الحمد لله رب العالمين


الرحمن الرحيم

النتيجة :

لاحظ المسافة البادئة التي ظهرت بعرض 50 بكسل

التباعد بين الأحرف letter-spacing

مثال :

أحرف متباعدة


أحرف متقاربة

النتيجة :

التباعد بين الكلمات word-spacing

مثال :

كلمات متباعدة


كلمات متقاربة

النتيجة :

التفاف النص

الخاصة white-space
مثال :

طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت  للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج  طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت  للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج  طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج 







طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت  للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج  طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت  للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج  طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج طه سوفت للبرامج 

عند تطبيق المثال السابق على محرر الأكواد
سنلاحظ أن النص الأول الذي يحمل الخاصة nowarp سيظهر كاملاً على سطر واحد
أما النص الثاني سيظهر على شكل عدة أسطر حسب ما يتسع له عرض الشاشة

النتيجة ( مع تلوين الأول بالأصفر والثاني بالأحمر)





انتهى درسنا لهذا اليوم ونلتقي بكم في الدرس التالي مع تنسيق الخطوط
مع التذكير إلى عشاق النسخ واللصق بأن هذه الدروس أعدت في منتدى طه سوفت للبرامج
لا تنسوا التدريب المستمر والمتواصل ولا تتردد بأي سؤال يخطر ببالك .
المصدر : طه سوفت للبرامج tahasoft.com
وبالتوفيق للجميع