تنسيق النصوص في CSS | ستايلات CSS


تحتوي لغة CSS على مجموعة من السمات التي يمكن استخدامها لتغيير لون النصوص ومحاذاة النصوص. في هذا الدرس سنتناول هذه الصفات.


صفة اللون

تُستخدم سمة اللون لتحديد لون النص.

باستخدام لغة CSS، عادة ما يتم تحديد اللون على النحو التالي:

     ● اسم لون - مثل "أحمر"
     ● قيمة سداسية عشرية - مثل "ff0000 #"
     ● قيمة RGB - مثل (255،0،0) rgb

يتم تعيين لون النص الافتراضي للصفحة في محدد النص:  

body {
color: blue;
}

h1 {
color: green;
}

في المثال أعلاه، تم ضبط قيمة لون النص على "أزرق" لمحدد النص. يتم تطبيق هذه القيمة بالوراثة على العناصر الموضوعة في نص الصفحة.


محاذاة النص

تُستخدم سمة محاذاة النص لتعيين نوع المحاذاة الأفقية للنصوص. يمكن أن يكون النص يسارًا ويمينًا ومتوسطًا ويضبط.

يُظهر المثال التالي المحاذاة الوسطى واليسرى واليمنى للنصوص (إذا كان اتجاه النص من اليسار إلى اليمين، فإن المحاذاة إلى اليسار هي القيمة الافتراضية، وإذا كان اتجاه النص من اليمين إلى اليسار، فإن المحاذاة اليمنى هي القيمة الافتراضية)

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

عند ضبط خاصية محاذاة النص، يتم توسيع كل سطر حتى يصبح طوله مساويًا لبقية السطور، وتكون الهوامش اليمنى واليسرى متطابقتين (مثل المجلات والصحف).

div {
text-align: justify;
}

زخرفة نص صفة

تُستخدم سمة زخرفة النص لتعيين زخارف النص أو إزالتها.


a {
text-decoration: none;
}

تُستخدم قيم زخرفة النص الأخرى لتزيين النصوص:

h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

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

تُستخدم سمة تحويل النص لتحديد الأحرف الكبيرة والصغيرة في النصوص الإنجليزية.

يمكن استخدام هذه الصفة لتحويل الأحرف الصغيرة إلى أحرف كبيرة والعكس صحيح وتحويل الأحرف الأولى من كل كلمة إلى أحرف كبيرة:

p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

المسافة البادئة للسطر الأول

تُستخدم سمة المسافة البادئة للنص لتحديد المسافة البادئة للسطر الأول من النص:

p {
text-indent: 50px;
}

صفة تباعد الحروف

تُستخدم سمة تباعد الأحرف لتحديد المسافة بين الأحرف في النصوص.

يوضح المثال التالي كيفية زيادة أو تقليل المسافة بين الأحرف:

h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}

صفة ارتفاع الخط 

تُستخدم سمة ارتفاع الخط لتحديد المسافة بين السطور:

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

سمة الاتجاه

تُستخدم خاصية direction لتغيير اتجاه النصوص في العنصر:

p {
direction: rtl;
}

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

تُستخدم خاصية تباعد الكلمات لتحديد المسافة بين الكلمات في النص.

يوضح المثال التالي كيفية زيادة أو تقليل المسافة بين الكلمات:

h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}

الظلال إلى النصوص

تُستخدم سمة ظل النص لإضافة الظلال إلى النصوص.

في المثال أدناه، قيمة الظل الأفقي هي 3 بكسل، وبالنسبة لموقع الظل العمودي، هذه القيمة تساوي 2 بكسل، ولون الظل أحمر.

h1 {
text-shadow: 3px 2px red;
}


كلمات مفتاحية: