تنسيق النصوص فى لغة سى اس اس CSS

تنسيق النصوص في لغة CSS ، يمكنك تغيير لون النص وزخرفة النص وإرتفاع الخط وإتجاه النص ومحاذاة النص وما إلى ذلك.

كيفية تنسيق النصوص بإستخدام CSS

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

ولكن لايمكننا الإستغناء عن دراسة وتعلم HTML لأنها تستخدم فى إنشاء كامل المحتوى فى الموقع ولكن الذى ينقصنا هو تجميل هذا المحتوى وضبط الألوان والصور لكى يكون ذو شكل جذاب وأنيق وغير ممل والذى تم تعويضه بظهور لغة CSS فى سنة 1996 والتى أظهرت الناحية الجمالية والأشكال والألوان فى التى نراها الآن فى جميع المواقع على الإنترنت .

ولم تظهر لغة CSS مرة واحدة بل تطورت بالتدريج من الإصدار الأول والذى كنا نراه على متصفحات الإنترنت القديمة فى الويندوز إلى إصدارها الأخير الإصدار الحالي CSS3 والتى نراها فى المتصفحات الحديثة جوجل كروم وموزيلا فايرفوكس ومتصفح مايكروسوفت إيدج الجديد .

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

دعونا نرى بعض الأمثلة -

1- محاذاة النص فى لغة CSS

لتعيين محاذاة النص بإستخدام لغة CSS ، إستخدم خاصية محاذاة النص. فيما يلي قيم الممتلكات المحتملة .

محاذاة النص :  يمكن أن يكون  يسار/  يمين/  مركز/  ضبط  وغيرها. 

text-align: left|right|center|justify|initial|inherit;

مثال

 

دعونا نرى مثالاً لتعيين محاذاة النص :

;text-align: justify

لضبط إرتفاع الخط ، إستخدم خاصية line-height. Following -

إرتفاع الخط : يمكن أن يكون طبيعي/الطول /القيمة الإبتدائية وغيرها.

line-height: normal |number |length |initial |inherit

div {
   line-height: 1.9;
}

2- زخارف نصية فى لغة CSS

لزخرفة وتزيين النص في لغة CSS ، يمكنك إستخدم خاصية زخرفة النص كخاصية مختصرة للخصائص التالية فى سي اس اس :

text-decoration-line
text-decoration-color
text-decoration-style

.demo {
   text-decoration: overline underline;
}

<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>

Output

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

الدرس التالي :  خاصية  white-space وخاصية word-wrap فى CSS .