الدرس : 25 : طريقة تنسيق جميع مشاركات المدونة بلوجر (Blogger) بنقرة واحدة باستخدام CSS


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



 هناك طرق أخرى لتنسيق النص بإستخدام html 
  1. لون النص color
  2. موضع النص text-align
  3. تزيين النص text-decoration
  4. تحويل النص text-transform
  5. مسافة بداية النص text-indent
  6. إتجاه النص direction
  7. المسافة بين الحروف letter-spacing
  8. المسافة بين السطور line-height
  9. المسافة بين الكلمات word-spacing
    هذا هو المثال الذى سنجرب عليه
    <p id='main'>مدونة المنصب</p>
    أولا: لون النص color
    هناك 3 طرق لإضافة لون الخط هى
    1. إسم اللون مثل red , green , yellow .....
    2. كود اللون مثل  FFFFFF#  و هى للون الأبيض .. أكواد الألوان كاملة
    3. القيمة RGB للون   مثل    (255,255,255)rgb  و هى للون الابيض .. أكواد الألوان كاملة

    #main {
    color: #FFFFFF;
    background-colo: black;
    }
     فتكون كالتالى
    مدونة المنصب

    لاحظ لقد إستخدمت لون الخلفية فقط للتذكير .. بالإضافة للون الخط
    ثانيا: موضع النص text-align
    هذا المتغير يستخدم لضبط و ضع النص سواء أكان في اليمين right أو اليسار left أو الوسط center أو الملائم justify  و هذه القيمة تستخدم لجعل الكتابة متمددة حتى تملئ السطر بالكامل ..
    #main {text-align: left;}
    #main {text-align: right;}
    #main {text-align: center;}
    #main {text-align: justify;}
    ثالثا: تزيين النص text-decoration
    تستخدم لتزيين النص عن طريق إستخدام الخط المستقيم سواء أكان خط فوق النص overline أو خط تحت النص underline أو خط على النص line-through   .. لاحظ التالى
    إذا كان CSS  كالتالى
    #main {text-decoration: underline;}
    #main {text-decoration: line-through;}
    #main {text-decoration: overline;}
    فيكون الناتج كالتالى بالترتيب
    مدونة المنصب

    مدونة المنصب

    مدونة المنصب
    رابعا: تحويل النص text-transform
    هذا المتغير يستخدم في تحديد شكل الخط بين .. هل الحروف كلها كبيرة uppercase أم صغيرة lowercase أم بدايتها كبير و أخرها صغير capitalize ؟؟ ...  و هى تستخدم فقط فى غير اللغة العربية كالتالى
    #main {text-transform: uppercase;}
    #main {text-transform: lowercase;}
    #main {text-transform: capitalize;}
    خامسا: فاصل بداية السطر text-indent
    و تستخدم لوضع مسافة في بداية النص و هى كالتالى
    #main {text-indent: 40px;}
    و يمكنك تغيير 40 إلى أى رقم أخر حسب حجم المسافة التى تريدها
    سادسا: إتجاه النص direction
    وهى إتجاه النص من اليسار إلى اليمين ltr  كما في اللغة الإنجليزية أو من اليمين إلى اليسار rtl كما في اللغة العربية
    #main {direction: ltr;}
    #main {direction: rtl;}


    سابعا: المسافة بين الحروف letter-spacing

    و تستخدم القيم بيكسل px و يمكن إستخدام القيم بالسالب كالتالى
    #main {letter-spacing: -2px}
    و يكون الناتج
    مدونةالمنصب
    لقد قمت بتقليل المسافة إلى 2- فقلت المسافة و يمكن زيادتها حسب الرغبة



    ثامنا: المسافة بين السطور line-height

    و تستخدم القيم بيكسل px أو رقم 1 أو 2 أو 3 أو ....   أو نسبة مؤية 100% أو 150% أو ......
    #main {line-height: 70%}



    تاسعا: المسافة بين الكلمات word-spacing

    و تستخدم القيمة بيكسل px كالتالى
    #main {word-spacing: 10px;}
    فيكون الناتج
    مدونة المنصب
    ** لا حظ أنه يمكنك إستخدام جميع هذه القيم أو إحداها أو بعضها .. لا يوجد أى مشكلة

     رابط الموضوع الأصلي هنا : 


    لمعرفة كيفية وضع هذه الأكواد في مدونتك بالطريق الصحيحة تابع هذا المقطع




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

    فمرحبا بحضرتكم ومتابعة شيقة
    أذا كان لديك اي سؤال لا تتردد في وضعه أسفل هذا الشرح

    ليست هناك تعليقات:

    إرسال تعليق