تنسيق النصوص في CSS 4

تنسيق النصوص في CSS

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

تنسيق النصوص هو جزء هام من تصميم صفحات الويب، ويمكن تحقيقه باستخدام CSS (Cascading Style Sheets). يسمح CSS بتحديد العديد من خصائص النصوص مثل الخطوط والألوان وحجم الخط والتباعد والترتيب والتحكم في الهوامش والتنسيقات الأخرى.

كما أنّ css تدعم مجموعة من الخصائص لتنسيق النصوص وهي:

1. text-indent.
2. text-align.
3. text-decoration.
4. letter-spacing.
5. text-transform.

وضع فراغ قبل أول سطر text-indent تنسيق النصوص في CSS

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

ليكن في ملف html فقرة بها إسم وصف عن CSS, و كود css سيكون بالشكل

p {
text-indent : 30px;
}

قيمنا بإستخدام الخاصية text-indent من اجل وضع فراغ قبل السطر الأول ووضعنا لها القيمة 30 بيكسل, و عند تشغيل هذا الكود سوف يطبع لنا الفقرة لكن قبلها يكون فراغ.

	CSS is an abbreviation of the English term Cascading Style Sheet,
which has been translated as 'flowing style sheets'. Whereas HTML is concerned
with describing the elements of web documents,
CSS is concerned with improving the look and feel of these elements.

نلاحظ بأن أول سطر يوجد قبله فراغ.

محاذاة النص text-align تنسيق النصوص في CSS

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

p { 
text-align : القيمة ;
}

زخرفة النص text-decoration تنسيق النصوص في CSS

خاصية text-decoration تستعمل في زخرفة النصوص, تتمكن من إضافة زخارف و تأثيرات على النص و تمكنك بأن تضيف سطر أسفل النص أو فوق النص أو في منتصف النص و لها عدة قيم و منها:

1. وضع سطر أسفل النص underline.
2. وضع سطر أعلى النص overline.
3. وضع سطر منتصف النص line-through.

لننشأ ثلاث عناوين في ملف html و نقوم بتنفيذ الزخرفة من خلال css.

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

في المثال السابق في الوسم h1 قمنا بإستخدام أن يكون وضع سطر أسفل النص و في h2 وضعنا سطر أعلى النص و في h3 وضعنا سطر في منتصف النص.

تحويل النص text-transform تنسيق النصوص في CSS

خاصية text-transform تلك الخاصية تتحكم في حجم الخط وكما يمكنها أيضاً تحويل النص على سبيل المثال يمكنها تحويل الأحرف من الصغير إلى الكبير مثل programmer تحولها الى PROGRAMMER وتأخذ بعض القيم للتحكم بالنص.

1. تكبير أول حرف من كل كلمة capitalize.
2. جعل كل الحروف كبيرة uppercase.
3. جعل كل الحروف صغيرة lowercase.
4. لا تقوم بعمل أي تأثيرات على النص none.

سوف نقوم بعمل 4 عناوين ضمن جسم الصفحة في ملف html ثم سوف نقوم بإعطائهم القيم عن طريق css بالشكل الآتي:

h1 {
    text-transform: capitalize;
}
h2 {
    text-transform: lowercase;
}
h3 {
    text-transform: uppercase;
}
h4 {
    text-transform: none;
}

قمنا بإنشاء 4 عناوين و هي من h1 حتى h4 ثم أعطيناهم القيم التي ذكرناها في الأعلى و هي في h1 سوف يقوم بتكبير أول حرف من كل كلمة و h2 سوف يجعل كل الحروف صغيرة في حال كانت كبيرة و h3 سوف يجعل كل الحروف صغيرة و h4 لن يقوم بتطبيق أي تأثير على النص.

المسافة بين الحروف lettrt-spacing تنسيق النصوص في CSS

خاصية lettrt-spacing تمكنك هذه الخاصية بالتحكم بين مسافات النصوص و يمكنك التحكم في المسافات بين النصوص أو الأحرف من خلالها, و القيم المستخدمة معها هي البكسل px ويمكنك التحكم في المسافات من خلال عدد المسافات بالبكسل.

h1 {
    letter-spacing : 10px;
}

قمنا بإستخدام خاصية تباعد المسافات بين الحروف letter-spacing و أعطيناها القيمة 10 بيكسل, و عندما نشغل هذا الكود سيكون بالشكل.

P r o g r a m m e r  T e c h
.