الفصل الثالث التنسيقات النصية (Text Styling) في CSS

Byahmed nabel كورس CSS

إليك كورس كامل عن التنسيقات النصية (Text Styling) في CSS:

1. مقدمة عن التنسيقات النصية

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

2. تحديد لون النص (Text Color)

  • يمكنك تغيير لون النص باستخدام خاصية color:
  • مثال:
    css
    p {
    color: red;
    }
  • يمكن استخدام الألوان المسماة (مثل red, blue, green) أو الألوان الست عشرية (مثل #ff0000 للون الأحمر) أو RGB (مثل rgb(255, 0, 0)).

3. حجم النص (Font Size)

  • تحدد خاصية font-size حجم النص في العناصر.
  • يمكنك تحديد الحجم بوحدات مختلفة مثل بكسل (px)، نسبة مئوية (%)، إي إم (em)، و ريَم (rem).
  • مثال:
    css
    p {
    font-size: 18px; /* حجم ثابت */
    }

    h1 {
    font-size: 3em; /* حجم نسبي */
    }

4. نوع الخط (Font Family)

  • خاصية font-family تُستخدم لتحديد نوع الخط الذي سيتم استخدامه لعرض النصوص.
  • يمكنك تحديد خط محدد أو استخدام خطوط نظامية مثل serif, sans-serif.
  • مثال:
    css
    p {
    font-family: 'Arial', sans-serif;
    }

    h2 {
    font-family: 'Times New Roman', serif;
    }

  • نصيحة: استخدم مجموعة من الخطوط الاحتياطية لضمان توافق التصميم عبر جميع الأجهزة.

5. وزن الخط (Font Weight)

  • خاصية font-weight تتحكم في سمك النص.
  • القيم الشائعة هي:
    • normal (الافتراضي).
    • bold (سمك عريض).
    • أرقام من 100 إلى 900.
  • مثال:
    css
    h1 {
    font-weight: bold;
    }

    p {
    font-weight: 300; /* وزن خفيف */
    }

6. نمط الخط (Font Style)

  • خاصية font-style تتحكم في نمط النص:
    • normal: النص العادي.
    • italic: النص المائل.
    • oblique: نص مائل بزاوية.
  • مثال:
    css
    p {
    font-style: italic;
    }

    h2 {
    font-style: oblique;
    }

7. محاذاة النص (Text Alignment)

  • خاصية text-align تُستخدم لمحاذاة النص داخل العنصر:
    • القيم الشائعة هي left، right، center، و justify.
  • مثال:
    css
    p {
    text-align: center;
    }

    h1 {
    text-align: left;
    }

    div {
    text-align: justify;
    }

8. التباعد بين الأحرف (Letter Spacing)

  • خاصية letter-spacing تتحكم في المسافة بين الأحرف.
  • مثال:
    css
    h1 {
    letter-spacing: 2px;
    }

    p {
    letter-spacing: 1px;
    }

9. التباعد بين الكلمات (Word Spacing)

  • خاصية word-spacing تتحكم في المسافة بين الكلمات.
  • مثال:
    css
    p {
    word-spacing: 5px;
    }

10. ارتفاع السطر (Line Height)

  • خاصية line-height تتحكم في المسافة الرأسية بين الأسطر داخل النص.
  • مثال:
    css
    p {
    line-height: 1.5;
    }

11. التعدادات (Text Decorations)

  • خاصية text-decoration تُستخدم لتطبيق تأثيرات على النصوص مثل التسطير، التشطيب، التسطير المزدوج.
  • القيم الشائعة هي:
    • underline (تسطير).
    • line-through (خط من خلال النص).
    • overline (تسطير فوق النص).
    • none (إلغاء أي تأثيرات).
  • مثال:
    css
    a {
    text-decoration: underline;
    }

    del {
    text-decoration: line-through;
    }

12. حروف كبيرة وصغيرة (Text Transform)

  • خاصية text-transform تُستخدم لتحويل النص إلى أحرف كبيرة، أحرف صغيرة، أو حروف أولية.
  • القيم:
    • uppercase (تحويل النص إلى أحرف كبيرة).
    • lowercase (تحويل النص إلى أحرف صغيرة).
    • capitalize (تحويل أول حرف من كل كلمة إلى حرف كبير).
  • مثال:
    css
    p {
    text-transform: uppercase;
    }

    h2 {
    text-transform: capitalize;
    }

13. تحديد النصوص المختارة (Text Selection)

  • يمكن تغيير مظهر النص عند تحديده باستخدام خاصية ::selection.
  • مثال:
    css
    ::selection {
    background-color: yellow;
    color: black;
    }

14. التأثيرات الحركية على النصوص (Text Effects)

أ. التظليل (Text Shadow)

  • خاصية text-shadow تُستخدم لإضافة ظلال للنصوص.
  • مثال:
    css
    h1 {
    text-shadow: 2px 2px 5px gray;
    }

ب. التأثيرات المتقدمة:

  • يمكن استخدام التأثيرات الحركية (مثل transform, transition) على النصوص لإضافة حركات متنوعة.

15. أمثلة عملية

  • تصميم نص رئيسي (Heading) مع تأثيرات CSS:
    html
    <html>
    <head>
    <style>
    h1 {
    color: #333;
    font-family: 'Arial', sans-serif;
    font-size: 48px;
    text-align: center;
    letter-spacing: 5px;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    }
    </style>
    </head>
    <body>
    <h1>مرحبًا بالعالم!</h1>
    </body>
    </html>
  • نص مائل مع تباعد الحروف:
    html
    <html>
    <head>
    <style>
    p {
    font-style: italic;
    letter-spacing: 2px;
    color: green;
    }
    </style>
    </head>
    <body>
    <p>هذا نص مائل مع تباعد بين الأحرف.</p>
    </body>
    </html>

16. ملخص الدرس

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

 

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *