CSS – النصوص Text

هناك العديد من الخصائص Properties التي تستطيع تغير هيئة النصوص. سنقوم باستعراضها.

في هذا الدرس سنضيف اطر CSS باستخدام طريقة التضمين embedding. وذلك لتسهيل الشرح، لكن دائما يفضل استخدام ملفات خارجية.

تحديد اللون color

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

<p >paragraph paragraph paragraph paragraph paragraph.</p>

p{
	color:blue;
}

الناتج

تحديد محازاة النص text-align

تستخدم الخاصية text-align لتغير محازاة النصوص في الفقرة، سواء كان لليمين او لليسار او للمنتصف.

<div style="border-width: 2px;border-style: groove;background-color:#f1f1f1;direction:ltr;">
	<p style = "text-align:right;">Align Right!!</p>
	<p style = "text-align:left;">Align Left!!</p>
	<p style = "text-align:center;">Align Center!!</p>
</div>

الناتج

وضع مسافة/فراغ اول النص text-indent

تستخدم الخاصية text-indent لوضع مسافة اول النص. ونستطيع تغير مقدار المسافة كالتي:

<p style = "text-indent:20px;">20px indentation</p>
<p style = "text-indent:50px;">50px indentation</p>

الناتج

وضع ديكور على النص text-decoration

تستخدم الخاصية text-decoration لوضع خط اسفل النص او عليه او اعلاه.

<p style="text-decoration:underline;">Under The Line.</p>
<p style="text-decoration:line-through;">Through The Line.</p>
<p style="text-decoration:overline;">Over The Line.</p>

الناتج

وضع ظل للنص text-shadow

تستخدم الخاصية text-shadow لوضع ظل للنص. هناك 4 قيم يتم ادخالهم لتحديد شكل الظل:

1. موضع الظل الافقي.
2. موضع الظل الرأسي.
3. قطر الضباب blur
4. لون الظل.

<p style = "text-shadow:2px 2px 2px red;">Shadowed Text.</p>

الناتج

تحديد حالة الحروف text-transform

تستخدم الخاصية text-transform لتحديد حالة الحروف الى capital او small.

<p style = "text-transform:capitalize;">Text capitalized.</p>
<p style = "text-transform:uppercase;">Text uppercase.</p>
<p style = "text-transform:lowercase;">Text lowercase.</p>

الناتج

تحديد اتجاة الكتابة direction

تستخدم الخاصية direction لتحديد اتجاة الكتابة من اليمين الى اليسار rtl:right to left لكي تتناسب مع اللغات مثل العربي او من اليسار الى اليمين ltr:left to right.

<p style = "direction:rtl;">الكتابة من اليمين الى اليسار right to left</p>
<p style = "direction:ltr;">الكتابة من اليسار الى اليمين left to right</p>

الناتج

تحديد المسافات بين الكلمات word-spacing

تستخدم الخاصية word-spacing لتحديد المسافات بين الكلمات.

<p style="word-spacing:20px;">paragraph paragraph paragraph paragraph paragraph.</p>
<p style="word-spacing:30px;">paragraph paragraph paragraph paragraph paragraph.</p>

الناتج

تحديد المسافات بين الحروف letter-spacing

تستخدم الخاصية letter-spacing لتحديد المسافات بين الحروف. تلك الخاصية قد لا تكون مناسبة مع اللغة العربية حيث ان الحروف متصلة.

<p style="letter-spacing:5px;">paragraph paragraph paragraph paragraph paragraph.</p>

الناتج