استثمر للحياة

برمجة و تصميم و تطوير المواقع

زخرفة النصوص و الروابط في css

حجم الخط

استثمر للحياة

كيف تتحكم فى الوان النصوص المكتوبة ... و شكل النص ايضا .... و كيف تتحكم فى الروابط 
و شكلها و ما هي الفئة المزيفة

 

النصوص و الكتابة

 تلوين النص :

و يستخدم لها  ; اسم اللون : color فى داخل العنصر المراد تلوينه .

investolife

 

 محاذاة النص " text-align "

خاصية text-align  تعمل على محاذاة النص  نحو اليسار "left"  أو اليمين "right"  أو في المنتصف "centredوبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص على كامل مساحة السطر .

investolife

 

 إتجاه كتابة النص " direction"

تستخدم لتحديد اتجاه الكتابة من اليسار إلى اليمين direction:ltr و هذا هو المختار , أو من اليمين إلى اليسار direction:rtl و يستخدم للغة العربية .

 

investolife

 

 زخرفة النص " text-decoration "

الخاصية text-decoration تسمح  بإضافة زخارف أو تأثيرات على النص ، فمثلاً يمكنك أن تضيف سطراً أسفل النصأو فوقه أو عليه . علماً بأن الخاصية Blink  تظهر الخط ذو ميض و لكنها لا تعمل فى كل المتصفحات .

investolife

أما فى حالة رغبتنا في إيقاف عمل التأثيرلت نستخدم none

investolife

 

 المسافة البادئة  " text-indent "

تستخدم المسافة البادئة لإضافة لمسات أنيقة للفقرات , حيث تجعل كل فقرة تبدء بعد مسافة ما , حددناها هنا  ب 50 px

   

investolife

 المسافة بين الحروف "letter-spacing"

تستخدم هذه الخاصية لتحديد المسافة  بين كل حرف وآخر ، فمثلاً إذا أردت مسافة 2px بين الحروف في العناوين <h1> , أما اذا رغبت فى حروف متلاصقة فضع قيمة سالبة .

investolife

 

 المسافة بين الكلمات " word-spacing "

تستخدم هذه الخاصية لتحديد المسافة  بين الكلمات ، فى المثال جعلنا هذه المسافة   30px

 

 المسافة بين الأسطر  " line -height "

investolife

 

 

 تحويل النص "text-transform"

خاصية text-transform تتحكم بحجم الخط في اللغات اللاتينية فقط .

 

capitalize

تقوم بتكبير الحرف الأول من كل كلمة .

uppercase

تجعل كل الحروف كبيرة .

lowercase

ستجعل كل الحروف صغيرة .

none

لن تقوم بعمل أي تأثير .

investolife

 

 وضع صورة داخل كتابة " direction:rtl "

investolife

 

شاهد المثال

 

 الروابط

 

تسمح لنا CSS بتحديد تأثيرات مختلفة لكل رابط , من حيث  إن كان المستخدم لم يزور هذا الرابط  أو زاره أو كان الرابط  نشطاً أو فى حالة وقوف  مؤشر الفأرة فوق الرابط .  سنستخدم الفئة المزيفة pseudo-classes . فتعالوا نعرف ما هي الفئة المزيفة أو pseudo-class و لها حالات أربع

  •  الفئة : link  تشير للروابط التي لم يزورها  المستخدم .

  •  الفئة : visited  تشير للروابط التي زارها المستخدم . 

  •  الفئة : active  تستخدم للروابط النشطة .

  •  الفئة : hover  تستخدم عندما يكون مؤشر الفأرة فوق الرابط .

 

 استخدام  الالوان  مع الروابط

investolife

 

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

investolife

 

 استخدام  الحروف الكبيرة والصغيرة مع الروابط

investolife

 إزالة السطر من أسفل الرابط

investolife

 

هذا مثــــــــــــال يشمل كل هذه الخصائص

 

 عمل إطار للرابط

هذا المثال يقوم بعمل أطار للرابط

شاهد المثال

 

الكتابة و الخطوط Font Family
مرجع  لكل أدوات css
التجميع  class  & id

 

 

الموضوع  :  زخرفة النصوص و الروابط في css المرجع : استثمر للحياة  investolife 

اعلان تجاري
اعلان 468