Ibrahem Smart

زيزوومى ذهبى
إنضم
30 يناير 2017
المشاركات
1,832
مستوى التفاعل
1,081
النقاط
1,050
الإقامة
الاسكندرية
غير متصل
بسملة.png

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

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

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

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

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

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

line-height

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

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

1.png


2.png


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

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

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

3.png


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

4.png


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

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

text-align

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

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

5.png


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

6.png


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

7.png


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

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

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

8.png


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

9.png


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

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

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

direction

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

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

7.png


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

10.png


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

11.png


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

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

12.png


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

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

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

توقيع : Ibrahem Smart
عودة
أعلى