تنسيق النصوص داخل لغة CSS الدرس |5| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الخميس، 19 ديسمبر 2019

تنسيق النصوص داخل لغة CSS الدرس |5|


تنسيق النصوص

اليوم سنتحدث عن تنسيق النصوص داخل css بعد كتابة الأكواد في لغة html سوف تظل النصوص ليس لها تنسيق بشكل جيد.

اليوم سنتابع معاً عن كيفية تنسيق تلك النصوص بإستخدام الـ css, تنسيق النصوص و مظهرها هي مسألة اساسية بالنسبة لمصممي المواقع لكي تجذب الزائر للموقع و ينبهر بعملك, كما أنّ css تدعم مجموعة من الخصائص لتنسيق النصوص وهي:
- text-indent
- text-align
- text-decoration
- letter-spacing
- text-transform

الخصائص المستخدمة في تنسيق النصوص في CSS

يوجد لدينا في لغة الـ CSS عدة خصائص تمكننا من تنسيق النصوص و الإهتمام بمظهرها كثيراً لكي تجذب زوار اكثر لموقعك.

خاصية text-indent

تتيح لك هذه الخاصية بوضع فراغ قبل أول السطر وتسمح لك بإضافة لمسة جميلة الى الفقرات بوضع مسافة فارغة قبل اول سطر, كما يمكن التحكم بها من خلال البكسل px على حسب أبعاد الفراغات الذي تريدها والشكل العام لها هو
p { 
text-indent : 30px;
}

خاصية text-align

يبدو اننا استخدمنا هذه الخاصية بشكل كبير في css and html, هذه الخاصية يمكنها التحكم في النص على المتصفح, وما اذا كنت اريد مكان ظهور النص على سبيل المثال يمين او يسار او في المنتصف وتأخذ معها بعض القيم وهي يسار الصفحة left منتصف الصفحة center يمين الصفحة right إضافة ايضا القيمة justify بمحاذاة النص من اليمين و اليسار ويكون الشكل العام لها
p { 
text-align : القيمة ;
}

خاصية text-decoration

تستعمل هذه الخاصية بزخرفة النص, تتمكن من إضافة زخارف وتأثيرات على النص وتمكنك بأن تضيف سطر اسفل النص أو فوق النص أو في منتصف النص ولها عدة قيم.
underline  سطر اسفل النص
overline  سطر اعلى النص
line-throgh  سطر منتصف النص

خاصية text-transform

تلك الخاصية تتحكم في حجم الخط وكما يمكنها أيضاً تحويل النص على سبيل المثال يمكنها تحويل الأحرف من الصغير إلى الكبير مثل
programmer تحولها الى PROGRAMMER وتأخذ بعض القيم للتحكم بالنص
capitaliz  تقوم بتكبير اول حرف من كل كلمة
uppercase  تجعل كل الحروف كبيرة
lowercase  تجعل كل الحروف صغيرة
none  لا تقوم بعمل اي تأثير على النص

الخاصية lettrt-spacing

تمكنك هذه الخاصية بالتحكم بين مسافات النصوص ويمكنك التحكم في المسافات بين النصوص أو الأحرف من خلالها, والقيم المستخدمة معها هي البكسل px ويمكنك التحكم في المسافات من خلال عدد المسافات بالبكسل :
p {
letter-spacing : 10px;
}

وإذا كنت تريد متابعة هذه الدورة على اليوتيوب اضغط على صورة اليوتيوب الآتية.
 
https://www.youtube.com/watch?v=r7Ol4lNRa3U&list=PLH80gdCdZJpzibQ3Onhqir5cyvrvEF_tR

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام