تنسيق النصوص
اليوم سنتحدث عن تنسيق النصوص داخل 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;}
وإذا كنت تريد متابعة هذه الدورة على اليوتيوب اضغط على صورة اليوتيوب الآتية.
ليست هناك تعليقات:
إرسال تعليق