زهير طه

22

4,248

دورة برمجة مواقع الانترنت - لغة css - الدرس 7 - تنسيق النصوص Styling Text



تنسيق النصوص 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
وبالتوفيق للجميع

التعليقات (1)

اياد طه     

مبدع اخونا وحبيبنا
ابو زوز
الله يعطيك العافية