بكل الحب نلتقى من جديد

الرجاء قرائة الموضوع كاملاً وعدم القفز بين السطور لتوضيح ما قد يغيب عنك والإستفادة من إستخدام الشرح لأقصى درجة .





-الدرس 5: النصوص


تنسيق وإضافة طراز إلى النصوص هي مسئلة أساسية لمصممي المواقع ،
في هذا الدرس ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها CSS
لتنسيق النص،
سنتحدث عن هذه الخصائص في هذا الدرس:

• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform

وضع فارغ قبل أول سطر "text-indent"


الخاصية text-indent تسمح لك بإضافة لمسة أنيقة إلى الفقرات بوضع مسافة فارغة قبل أول سطر من الفقرة،

في المثال أدناه وضعنا القيمة 30px لكل الفقرات التي تستخدم العنصر
:

كود:
p { text-indent: 30px; }
محاذاة النص "text-align"



خاصية text-align تشبه في HTML خاصية "align" التي كانت تستخدم في الماضي،

النص يمكن محاذاته نحو اليسار "left" أو اليمين "right" أو في المنتصف "centred" وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين كما تفعل بعض الصحف والمجلات.
في المثال أدناه النص في رأس الجدول <font color="Red"th/font> قمنا بمحاذاته نحو اليمين،

بينما البيانات في الجدول <font color="Red"td/font> حاذيناها نحو المنتصف أما النص في الفقرات فقمنا بمحاذاته من الجانبين:
كود:
th { text-align: right; }
td { text-align: center; }
p { text-align: justify; }
زخرفة النص "text-decoration"


الخاصية text-decoration تمكنك من إضافة زخارف أو تأثيرات على النص ،
فمثلاً يمكنك أن تضيف سطراً أسفل النص،
أو فوقه أو عليه ،

في المثال الآتي كل عناصر <font color="Navy"font color="Blue"h1/font/font> وضعنا أسفلها خطاً أما <font color="DeepSkyBlue"h2/font> فهي العناوين التي فوقها خط و <font color="RoyalBlue"h3/font> قمنا بوضع الخط عليها.
كود:
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
المسافة بين الحروف "letter-spacing"

the spacing between text characters can be specified using the property letter-spacing،

القيمة المحددة لهذه الخاصية هي ببساطة عرض المسافة التي تريدها بين كل حرف وآخر،

فمثلاً إذا أردت مسافة 3px بين الحروف في الفقرات <font color="DeepSkyBlue"p/font> و 6px بين الحروف في العناوين <font color="Navy"font color="Blue"h1/font/font> فعليك أن تكتب الخصائص بهذا الشكل :
كود:
h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; }

تحويل النص "text-transform"

خاصيةtext-transform
تتحكم بحجم الخط في اللغات الغربية،



يمكنك أن تختار بين القيم capitalize أو uppercase أو lowercase ،

وبغض النظر عن كيفية ظهور النص الأصلي .
فمثلاً كلمة "headline" يمكن أن تظهر للمستخدم بهذا الشكل "HEADLINE" أو بهذا الشكل "Headline"،

هناك أربع قيم يمكنك استخدامها مع القيم text-transform:
capitalize
تقوم بتكبير الحرف الأول من كل كلمة مثال: "john doe" ستصبح "John Doe".
uppercase
تجعل كل الحروف كبيرة،

مثال: "john doe" ستصبح "JOHN DOE".
lowercase
ستجعل كل الحروف صغيرة،

مثال: "JOHN DOE" ستصبح "john doe".

none
لن تقوم بعمل أي تأثير ،

النص سيظهر كما كتب في ملف HTML .
كمثال ،

سنقوم باستخدام قائمة أسماء ،

الأسماء كلها تستخدم العنصر ،

كود:
(list-item)
ولنقل أننا نريد الأسماء أن يظهر حرفها الأول كبيراً أما العناوين فنريد كل حروفها كبيرة.
جرب وألقي نظرة على HTML لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة.
كود:
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
مـــلـــخــص
في الدروس الثلاثة الأخيرة تعلمنا الكثير من خصائص CSS ،

لكن هناك الكثير في هذه التقنية

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

وفي ختام هذا الشرح أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ….

سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha