الدرس : 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;}

فيكون الناتج

مدونة المنصب

** لا حظ أنه يمكنك إستخدام جميع هذه القيم أو إحداها أو بعضها .. لا يوجد أى مشكلة

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


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

---

 ملاحظة هامة :

من أجل المزيد من خدمتكم وإجابة على استفساراتكم أرجو التكرم بالتواصل معنا على الإيميل الخاص

 أو صفحة الفيس بوك الرسمية

لضمان وصول جميع نصائحنا إليكم

يجب عمل اعجاب على جميع منشوراتنا

• شارك منشورتنا مع أصدقائك وذكرهم بمشاركتها مع أصدقائهم

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

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