1. إستبعاد الملاحظة

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

الموضوع في 'منتدى الدورات العامة' بواسطة Ibrahem Smart, بتاريخ ‏يونيو 24, 2018.

  1. Ibrahem Smart

    Ibrahem Smart زيزوومى محترف

    إنضم إلينا في:
    ‏يناير 30, 2017
    المشاركات:
    1,828
    الإعجابات :
    996
    نقاط الجائزة:
    730
    الجنس:
    ذكر
    الإقامة:
    الاسكندرية
    برامج الحماية:
    ESET
    نظام التشغيل:
    Windows 7


    بسملة.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
     
    راجية الجنة و النوميدي معجبون بهذا.

مشاركة هذه الصفحة

جاري تحميل الصفحة...