درس دورة تعلم لغة CSS | خواص النصوص - الجزء الأول (6)

المصدر: دورة تعلم لغة CSS | خواص النصوص - الجزء الأول (6)
في منتدى : منتدى الدّورات العامّة ولُغات البرمجة

مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
اليوم سأشرح لكم في دورة تعلم لغة CSS

خواص النصوص
الجزء الأول

------------------------------------------------------------

خواص النصوص 9 خواص لذلك لم أشرحها في درس واحد بل قسمتها لثلاث أجزاء كل جزء نشرح فيه 3 خواص بالتفصيل حتى تفهموا الخاصية التي نشرحها جيدًا فالتعلم بالتقسيم افضل من التعلم دفعةً واحدةً

وهذه الخواص ليست لتغيير او تنسيق الخط بل لعمل بعض التعديلات على النص نفسه وبعد الانتهاء من خواص النصوص سنشرح الخطوط باذن الله

------------------------------------------------------------

line-height

اذا كنت مثلًا قمت بعمل Paragraph في HTML وكان قد أخذ اكثر من سطر في الصفحة فنجد ان المتصفح يحدد مسافة معينة بين الأسطر فلتحديد هذه المسافة بين الأسطر نستخدم line-height وهذه مثال:

قمت بعمل Paragraph في الصفحة مكون من عدة اسطر





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

في CSS قمت باستدعاء وسم p الذي هو (Paragraph) لاقوم بالتعديل عليه

وأعطيته line-height بمسافة 50 بيكسل (50 بيكسل بين كل سطر والأخر)



وهذه هي النتيجة



اذًا خاصية line-height تقوم بتحديد المسافة بين كل سطر والأخر عن طريق البيكسلات

------------------------------------------------------------

text-align

مثلًا إذا قمت بعمل عنصر (div) في الصفحة وأخذ بعض الخواص التي تجعله كصندوق (خلفية وعرض وطول) ويكون داخل هذا العنصر جمله ونحن نريد تحديد مكان هذه الجملة في العنصر بالظبط فهنا نستخدم خاصية text-align لتحديد مكان النص في العنصر

فانا قمت بعمل ديف في Html وداخله جمله



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



اعطيناه عرض وارتفاع ولون للخلفية ولون للنص الذي سيكتب داخله فهذه النتيجة



الان نحن نريد ان نقوم بتغيير مكان النص مثلًا في المنتصف أو اليمين أو الشمال

فهنا نستخدم text-align وقيمها (center & left & right)

فهنا سأعطي النص text-align في المنتصف center



فأصبح النص في منتصف العنصر (الصندوق)



فهذه الخاصية سوف تفيدك جدًا في تصاميمك التي ستقوم بها بعد تعلمك للغة CSS واصداراتها الأخرى

اذًا text-align لتحديد مكان النص في العنصر ( يمين & شمال & وسط )

------------------------------------------------------------

direction

هي مثل text-align فهي توضح من أين سيتم كتابة النص (اتجاه الكتابه) وتأخذ قيمتين هما ( ltr & rtl ) وهما اختصارين لـ ( Left To Right & Right To Left ) من الشمال لليمين ومن اليمين للشمال

فهنا مثلًا قمت بكتابة نص باللغة الانجليزية فطبيعي أن يكتب من الشمال لأنه إنجليزي



ولكن اذا أعطيته direction بقيمة rtl من اليمين الى الشمال



فسيكتب من اليمين



ونفس الأمر مع اللغة العربية اذا اعطيتها ltr تكتب من الشمال

اذا direction لتحديد اتجاه كتابة النصوص ويمكن استخدامها مع القوائم في HTML لعكسها فمثلًا اذا كانت قائمة الرئيسية في النهاية يمكنك عن طريق direction وضعها في البداية واذا كنت تريد ان تكون صفحتك كاملة من اليمين إلى الشمال (عربية) تقوم بكتابة هذا الكود في CSS



وهكذا شرحنا أول جزء من خواص النصوص

------------------------------------------------------------

خلاصة الدرس
​

• خواص النصوص للتنسيق شكل النصوص وليس الخط المستخدم فيها​
• المتصفح يقوم بعمل مسافات معينة بين كل سطر والأخر ويتم تحديدها بخاصية line-height​
• المسافات يتم قياسها بالبيكسل px​
• لتحديد مكان النص في العنصر نستخدم text-align​
• اي div يكون له عرض وارتفاع وخلفية يعتبر صندوق في الصفحة ويمكن اضافة بعض الخواص الأخرى له ليكون شكله أجمل​
• لتحديد اتجاه الكتابة في الصفحة نستخدم direction​
• اذا قمنا بتطبيق direction بقيمة rtl على وسم html (الصفحة كلها) ستكون كل الصفحة عربية ومن اليمين للشمال​

​