CSS

CSS – مظھر النصوص والخطوط

Text-transform:

ھذه الخاصیة تستخدم لتغییر حالة الأحرف ما بین صغیرة او كبیرة , وتأخذ احد ھذه القیم :

1 .Uppercase لجعل الحروف كبیرة .
2 .lowercase لجعل الحروف صغیر .
3 .capitalize يقوم بجعل الحرف الأول من كل كلمة حرفا ً كبیرا.

مثال :

p { text-transform:uppercase; }

text-indent:

تستخدم ھذه الخاصیة لترك مسافة فاصلة في بدایة كل فقرة , وھي تأخذ قیمة رقمیة مثلا ً :-
20px

مثال :

p { text-indent:10px; }

  • ویمكن اعطاء قیمة رقمیة كبیرة بالسالب لیختفي النص الظاھر من على العنصر وھذا یستخدم
    غالبا ً مع الأزرار والروابط , مثال

a{ text-indent:-9999px; }

text-decoration:

وھي تضع خط تحت الوصلة التشعبیة او النص المكتوب وتحدد مكان الخط في الاسفل او
الاعلى او المنتصف او عدم ظھور اي خط , وھي تأخذ احد الخواص التالیة :

1 .underline تجعل خط اسفل النص .
2 .overline تجعل خط فوق النص .
3 .through-line تقوم بجعل الخط في منتصف النص.
4 .none تخفي الخط ولا تقوم بجعله ظاھر .

مثال:

a { text-decoration:none; }

text-align:

وھي تستخدم لمحاذاة النص وتحدید مكانھ كما تقوم أيضا بمساواة اسطر الفقرة , وھي تأخذ احد القیم
التالیة :

1 .left تقوم بمحاذاة النص إلى الجھة الیسرى.
2 .right تقوم بمحاذاة النص إلى الجھة الیمنى .
3 .top لمحاذاة النص إلى الأعلى .
4 .bottom لمحاذاة النص إلى الأسفل .
5 .center لمحاذاة النص إلى المنتصف .
6 .justify تقوم بجعل جمیع اسطر الفقرة متساویة .

مثال:

p { text-align:left; }

direction

تستخدم ھذه الخاصیة لتحدید اتجاه النص من الیمین إلى الیسار او بالعكس , وتأخذ القیمتین
التالیتین :

1 .rtl من الیمین إلى الیسار .
2 .ltr من الیسار إلى الیمین .

مثال:

body { direction:rtl; }

letter-spacing:

تستخدم ھذه الخاصیة لتبعد بین الحروف في الكلمة الواحدة وتأخذ قیمة رقمیة .

مثال:

p { letter-spacing:10px; }

word-spacing:

تستخدم ھذه الخاصیة للتبعید بین الكلمات ( بین كلمة وكلمة أخرى ) وھي تأخذ قیمة رقمیة .

مثال:

p { word-spacing:10px; }

white-space:

في الـ html اذا كتبنا نص وضغطنا enter من لوحة المفاتیح كتبنا نص آخر فأنھ سیظھر في
الموقع وكأنھ نص واحد أي وكأننا لم نضغط على enter ) وطبعا ً حتى لو ضغطنا أكثر من
مرة ) وإذا أردنا أن یظھر في الموقع سطر جدید كلما نضغط على enter نستخدم ھذه
الخاصیة ونسند لھا القیمة pre , ولاحظ أن في ھذه القیمة سیحسب الفراغات وكل المسافات
المتروكة , وإذا أردناه أن یحسب فقط الالأسطر الجدیدة ولا یحسب الفراغات نضع القیمة
pre-line

مثال:

white-space:pre-line;
line-height:

تستخدم ھذه الخاصیة لتحدید التباعد بین اسطر الكتابة , بمعنى لو كان لدینا نص كبیر یمتد لعدة
اسطر یمكننا التحكم بتباعد ھذه الأسطر من خلال ھذه الخاصیة , مع ملاحظة أن ھذه الخاصیة
تطبق إذا كان ھذا النص الكبیر في فقرة واحدة ( وسم html واحد ) ولیس في أكثر من فقرة ,
وھي تأخذ قیمة رقمیة .

مثال:

p { line-height:30px; }

text-shadow:

ھذه خاصیة جدیدة في CSS3 , وھي تستخدم لإظھار ظل للنصوص وتأخذ ثلاثة قیم رقمیة
وقیمة لونیة , حیث إن القیمة الأولى تمثل بعد الظل عن النص بشكل أفقي والقیمة الثنیة تمثل
بعد الظل عن النص بشكل عمودي والقیمة الثالثة تمثل شدة وضوح الظل أما الأخیرة وھي
القیمة اللونیة فھي تمثل لون الظل .

مثال:

h2 { text-shadow:10px 10px 5px #333; }

ویمكن أن نضیف أكثر من ظل لنفس النص وذلك بكتابة القیم الأربعة أسفل قیم
خاصیة الظل الأولى مع استبدال الفارزة المنقوطة في نھایة الخاصیة الأولى إلى
فارزة فقط .

مثال:

text-shadow:7px 5px 3px #333,
10px 10px 3px #fff;
وبنفس الطریقة یمكن إضافة ظل ثالث أو رابع أو أكثر كما نشاء .

ھناك مجموعة جدیدة من الخصائص تستخدم في CSS3 للتعدیل على النصوص ویجب أن
نسبقھا بالبادئة الخاصة بكل متصفح لتعرض في المتصفحات المختلفة , وھي موضحة في
الجدول في الأسفل :

خصائص الخطوط

font-style:

تستخدم ھذه الخاصیة للتحكم بالخطوط وتأخذ احد القیم التالیة :

1 .italic تجعل الخط مائل .
2 .normal ھي القیمة الافتراضیة و تقوم بجعل الخط عادي

مثال:

p { font-style:italic; }

font-size:

وھي تستخدم لتحدید حجم الخط وتأخذ قیمة رقمیة مثلا ً 10pt

مثال:

p { font-size:13pt; }

font-family:

وھي تستخدم لتحدید نوع الخطوتكون قیمتھا عبارة عن اسم الخط مثلا ً andalus , ویمكن أن
تأخذ قیم أخرى بالإضافة إلى اسم الخط وھي اسم عائلة من العوائل الثلاثة وھي :

1 .serif-sans یفضل استعمالھا مع اللغة الانجلیزیة .
2 .monospace ینصح باستعمالھا مع الشیفرات الحاسوبیة مثل شیفرات لغات
البرمجة .
serif .3

مثال:

body { font-family:tahoma; }

font-weight:

وھي تستخدم لتحدید سماكة الخط , ونأخذ احد القیم التالیة :

1 .bold تجعل الخط سمیك .
2 .normal ھي القیمة الافتراضیة و تقوم بجعل النص طبیعي

مثال:

p { font-weight:bold; }

font:

تمكننا ھذه الخاصیة من تطبیق مجموعة من تأثیرات الخط بشكل مختصر حیث إنھا ستأخذ عدة
قیم وكل قیمة تمثل تأثیر خاصیة معینة .

مثال:

p { font:italic bold 15px Tahoma; }
مع ملاحظة أن ھذه القیم یتم كتابتھا بالترتیب وأي قیمة لا نریدھا یمكن أن لا نكتبھا , حیث إن
القیمة الأولى تمثل شكل الخط والثانیة تمثل سمك الخط والثالثة تمثل حجم الخط والرابعة تمثل
نوع الخط .

color:

تستخدم ھذه الخاصیة لتحدید لون الخط وھي تاخذ قیمة لونیة .

مثال:

p { color:#00ffcc; }