سنتحدث في هذا
الدرس عن تركيب الخطوط و تنسيقها داخل الموقع أو المدونة من خلال عدة متغيرات هى كالتالى
هناك طرق أخرى لتنسيق النص بإستخدام html
- لون النص color
- موضع النص text-align
- تزيين النص text-decoration
- تحويل النص text-transform
- مسافة بداية النص text-indent
- إتجاه النص direction
- المسافة بين الحروف letter-spacing
- المسافة بين السطور line-height
- المسافة بين الكلمات word-spacing
هذا هو المثال الذى سنجرب عليه
<p id='main'>مدونة المنصب</p>
أولا: لون النص color
هناك 3 طرق لإضافة لون الخط هى
- إسم اللون مثل red , green , yellow .....
- كود اللون مثل FFFFFF# و هى للون الأبيض .. أكواد الألوان كاملة
- القيمة RGB للون مثل (255,255,255)rgb و هى للون الابيض .. أكواد الألوان كاملة
#main {
color: #FFFFFF;
background-colo: black;
}
مدونة المنصب
مدونة المنصب
سابعا: المسافة بين الحروف letter-spacing
و تستخدم القيم بيكسل px و يمكن إستخدام القيم بالسالب كالتالى
ثامنا: المسافة بين السطور line-height
تاسعا: المسافة بين الكلمات word-spacing
و تستخدم القيمة بيكسل px كالتالى
فتكون كالتالى
مدونة المنصب
لاحظ لقد إستخدمت لون الخلفية فقط للتذكير .. بالإضافة للون الخط
ثانيا: موضع النص 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;}
فيكون الناتج
مدونة المنصب
** لا حظ أنه يمكنك إستخدام جميع هذه القيم أو إحداها أو بعضها .. لا يوجد أى مشكلة
ملاحظة
هامة :
من أجل المزيد
من خدمتكم وإجابة على استفساراتكم أرجو التكرم بالتواصل معنا على الإيميل الخاص
لضمان وصول
جميع نصائحنا إليكم
يجب عمل اعجاب
على جميع منشوراتنا
• شارك
منشورتنا مع أصدقائك وذكرهم بمشاركتها مع أصدقائهم
• لا تنس أن
تضع رابط صفحتنا في الجروبات والمنتديات التي تظهر على صفحتكم الشخصية
فمرحبا
بحضرتكم ومتابعة شيقة
أذا كان لديك اي سؤال لا تتردد في وضعه أسفل هذا الشرح
أذا كان لديك اي سؤال لا تتردد في وضعه أسفل هذا الشرح