More

[ دورة CSS ] التصميم CSS – الدرس الثاني – تنسيق النصوص

" Here you can search for everything you want and you will find it as soon as possible "

لون النص

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

باستخدام لغة CSS يمكنك استخدام احدى هذه الطرق لتلوين نص معين

  • باستخدام قيمة HEX مثال “#FFFFFF”
  • باستخدام قيمة RGB مثال “rgb(255,0,0)”
  • باستخدام اسم اللون مثل “Red”

ان اللون الافتراضي للصفحة معرّف من خلال المنتقى body

مثال

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

ملاحظة : اذا قمت بتحديد خاصية اللون color فعندها يجب أيضاً ان تحدّد لون الخلفية background-color أيضاً

Click Here To See URL To Download

محاذاة النص

تستخدم خاصية محاذاة النص text-align لضبط المحاذاة بشكل أفقي للنص

Click Here To See URL To Download

يمكن للنص أن يتم محاذاته للوسط center أو لليمين right أو اليسار left أو ممدد justify
عند استخدام القيمة ممدد justify فهذا يعني كل سطر سيتم تمديده ويكون مساوٍ
له في العرض كما أن هوامش اليمين واليسار مستقيمة (كما في الجرائد
والمجلات)

مثال

Click Here To See URL To Download
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

زخرفة النص text decoration

تستخدم خاصية زخرفة النص text-decoration لضبط أو ازالة زخرفة معينة للنص

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

مثال

a {text-decoration:none;}

كما يمكن ايضاً زخرفة النص

مثال

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

ملاحظة : لايفضّل وضع خط تحت اي نص مالم يكن رابط تشعبي لأنه يسبب بعض الارتباك للمستخدم

تحويل النص Text Transformation

تستخدم خاصية تحويل النص وذلك لتحويل النص لأحرف صغيرة lowercase أو أحرف كبيرة uppercase
تستخدم لتحويل النص كله لأحرف كبيرة أو أحرف صغيرة أو تكبير الحرف الأول لكل كلمة
ملاحظة : تستخدم هذه الخاصية فقط مع الكلمات باللغة الإنكليزية وليس اللغة العربية

مثال

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

تباعد النص Text Indentation

تستخدم خاصية تباعد النص لتحديد تباعد السطر الأول من فقرة معينة ( تستخدم مع فقرات اللغة الانكليزية)

مثال

p {text-indent:50px;}
الخاصية الشرح
color تغيير لون النص
direction تحديد وجهة النص أو وجهة الكتابة يمين يسار أو يسار يمين
letter-spacing زيادة أو نقصان المسافة بين الأحرف في النص
line-height تحديد ارتفاع النص
text-align تحديد المحاذاة الأفقية للنص
text-decoration تحديد الزخرفة المضافة للنص
text-indent تحديد الفجوة في السطر الأول لمجموعة النص
text-shadow تحديد تأثيرات الظل المضافة على النص
text-transform التحكم بالأحرف الكبيرة و الصغيرة للنص
vertical-align تحديد المحاذاة العمودية للعنصر
white-space تحديد كيفية التحكم بالمسافات داخل العناصر
word-spacing زيادة أو نقصان المسافة بين الكلمات في النص
Tags
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker