إعـــــــلان

تقليص
لا يوجد إعلان حتى الآن.

درس (5) النصوص (دورة تعلم لغة css)

تقليص
هذا الموضوع مغلق.
X
X
 
  • تصفية - فلترة
  • الوقت
  • عرض
إلغاء تحديد الكل
مشاركات جديدة

  • درس (5) النصوص (دورة تعلم لغة css)

    [frame="7 85"]
    بسم الله الرحمن الرحيم
    الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
    وبعد,

    ((دورة تعلم لغة CSS))

    درس 5: النصوص:-

    تنسيق وإضافة طراز إلى النصوص هي مسألة أساسية لمصممي المواقع،
    في هذا الدرس ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها CSS لتنسيق النص،
    سنتحدث عن هذه الخصائص في هذا الدرس:

    • text-indent
    • text-align
    • text-decoration
    • letter-spacing
    • text-transform

    وضع فارغ قبل أول سطر "text-indent"

    الخاصية text-indent تسمح لك بإضافة لمسة أنيقة إلى الفقرات بوضع مسافة فارغة قبل أول سطر من الفقرة، في المثال أدناه وضعنا القيمة 30px لكل الفقرات التي تستخدم العنصر <p>:
    كود:
    p {
    [SIZE=4][COLOR=Blue][LEFT]     text-indent: 30px;
    } [/LEFT]
    شاهد المثال

    محاذاة النص "text-align"

    خاصية text-align تشبه في HTML خاصية "align" التي كانت تستخدم في الماضي،
    النص يمكن محاذاته نحو اليسار "left" أو اليمين "right" أو في المنتصف "centred"
    وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين كما تفعل بعض الصحف والمجلات.

    في المثال أدناه النص في رأس الجدول <th> قمنا بمحاذاته نحو اليمين، بينما البيانات في الجدول <td> حاذيناها نحو المنتصف أما النص في الفقرات فقمنا بمحاذاته من الجانبين:
    كود:
    th {
    [SIZE=4][COLOR=Blue][LEFT]     text-align: [B]right;[/B]
    }
    
    td {
        text-align: [B]center;[/B]
    }
    
    p {
        text-align: [B]justify;[/B]
    }
    [/LEFT]
    [/COLOR][/SIZE]

    شاهد المثال

    زخرفة النص "text-decoration"

    الخاصية text-decoration تمكنك من إضافة زخارف أو تأثيرات على النص، فمثلاً يمكنك أن تضيف سطراً أسفل النص، أو فوقه أو عليه،
    في المثال الآتي كل عناصر <h1> وضعنا أسفلها خطاً أما <h2> فهي العناوين التي فوقها خط و<h3> قمنا بوضع الخط عليها.

    كود:
    h1 {
    [SIZE=4][COLOR=Blue][LEFT]     text-decoration: [B]underline[/B];
    }
    
    h2 {
        text-decoration: [B]overline[/B];
    }
    
    h3 {
        text-decoration: [B]line-through[/B];
    }[/LEFT]
     [/COLOR][/SIZE]
    شاهد المثال

    المسافة بين الحروف "letter-spacing"
    الخاصية letter-spacing تمكنك من الفصل بين الحروف
    القيمة المحددة لهذه الخاصية هي ببساطة عرض المسافة التي تريدها بين كل حرف وآخر،
    فمثلاً إذا أردت مسافة 3px بين الحروف في الفقرات <p> و6px
    بين الحروف في العناوين <h1> فعليك أن تكتب الخصائص بهذا الشكل:

    كود:
    [SIZE=4][COLOR=Blue]h1 {
        letter-spacing: [B]6px;[/B]
    }
    
    p {
        letter-spacing: [B]3px;[/B]
    }[/COLOR][/SIZE]

    تحويل النص "text-transform"

    خاصية text-transform تتحكم بحجم الخط في اللغات الغربية ، يمكنك أن تختار بين القيم capitalize أو uppercase أو lowercase، وبغض النظر عن كيفية ظهور النص الأصلي.
    فمثلاً كلمة "headline" يمكن أن تظهر للمستخدم بهذا الشكل "HEADLINE" أو بهذا الشكل "Headline"، هناك أربع قيم يمكنك استخدامها مع القيم text-transform:

    capitalize
    تقوم بتكبير الحرف الأول من كل كلمة
    مثال: "mahmoud afifi" ستصبح "Mahmoud Afifi"

    و
    uppercase
    تجعل كل الحروف كبيرة،
    مثال:
    "mahmoud afifi" ستصبح "MAHMOUD AFIFI"
    و
    lowercase
    ستجعل كل الحروف صغيرة،
    مثال: "
    MAHMOUD AFIFI" ستصبح "mahmoud afifi"

    و
    none
    لن تقوم بعمل أي تأثير، النص سيظهر كما كتب في ملف HTML.

    كمثال، سنقوم باستخدام قائمة أسماء،
    الأسماء كلها تستخدم العنصر <li> أى (Llist item)
    ، ولنقل أننا نريد للأسماء أن يظهر حرفها الأول كبيراً أما العناوين فنريد كل حروفها كبيرة.
    جرب وألقي نظرة على HTML لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة.

    كود:
    [SIZE=4][COLOR=Blue]h1 {
        text-transform: [B]uppercase;[/B]
    }
    
    li {
        text-transform: [B]capitalize;[/B]
    }[/COLOR][/SIZE]
    شاهد المثال

    ملخص

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


    [/COLOR][/SIZE]

    [/frame]

  • #2
    رد: درس (5) النصوص (دورة تعلم لغة css)

    جزاك الله خيرا اخي محمود وبارك الله فيك

    تعليق


    • #3
      رد: درس (5) النصوص (دورة تعلم لغة css)

      جزاك الله خيرا أخى محمود على هذه الدروس المفيدة

      إن شاء الله عندنا نقترب من الإنتهاء نقوم بعمل تطبيقات خاصة على الدروس
      ويكون هناك واجب منزلي للتطبيق

      تعليق


      • #4
        رد: درس (5) النصوص (دورة تعلم لغة css)

        بارك الله فيك اخي محمود

        تعليق


        • #5
          رد: درس (5) النصوص (دورة تعلم لغة css)

          المشاركة الأصلية بواسطة أبو يوسف مشاهدة المشاركة
          جزاك الله خيرا اخي محمود وبارك الله فيك
          أمين وإياك أخى أبو يوسف

          تعليق


          • #6
            رد: درس (5) النصوص (دورة تعلم لغة css)

            المشاركة الأصلية بواسطة abohmam مشاهدة المشاركة
            جزاك الله خيرا أخى محمود على هذه الدروس المفيدة

            إن شاء الله عندنا نقترب من الإنتهاء نقوم بعمل تطبيقات خاصة على الدروس
            ويكون هناك واجب منزلي للتطبيق
            جزاك الله خيرا أخى أبو همام وإن شاء الله نتابع دروسك الرائعه وربنا يوفقنا فى الواجبات :abc_145:

            تعليق


            • #7
              رد: درس (5) النصوص (دورة تعلم لغة css)

              شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

              تعليق


              • #8
                رد: درس (5) النصوص (دورة تعلم لغة css)

                شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

                تعليق


                • #9
                  رد: درس (5) النصوص (دورة تعلم لغة css)

                  شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

                  تعليق


                  • #10
                    بسم الله الرحمن الرحيم

                    مشكور وجزاك الله كل خير على هذا الدرس من لغة ال css


                    جعله الله في ميزان حسناتك


                    أخوك المحب لك في الله / لؤي (أبو العبد)

                    تعليق

                    مواضيع تهمك

                    تقليص

                    المنتدى: القسم العام نشرت بواسطة: Reem2Rabeh الوقت: 04-23-2025 الساعة 04:27 PM
                    المنتدى: ضبط وتوكيد الجودة نشرت بواسطة: HeaD Master الوقت: 04-15-2025 الساعة 09:30 AM
                    المنتدى: التصنيع والانتاج نشرت بواسطة: HeaD Master الوقت: 04-11-2025 الساعة 01:08 PM
                    المنتدى: القسم العام نشرت بواسطة: نوال الخطيب الوقت: 03-19-2025 الساعة 03:07 AM
                    المنتدى: الكمبيوتر والإنترنت نشرت بواسطة: عوض السوداني الوقت: 03-18-2025 الساعة 07:22 AM
                    يعمل...
                    X