غالبا ما يشعر مصممو الويب والمطورون بالحاجة إلى تغيير موضع الخط على صفحات الويب والمشاريع الخاصة بهم. يمكن أن تؤثر المسافة البادئة والمحاذاة وارتفاع الخط على إدراك النص والشعور العام للتصميم. في هذه المقالة ، سوف ننظر في بعض الطرق البسيطة لتغيير موقف النص باستخدام هتمل و كس.
الطريقة الأولى هي استخدام سمة محاذاة النص المغلق. يمكنك استخدامه لتحديد كيفية محاذاة النص داخل العنصر. على سبيل المثال ، ستقوم القيمة اليسرى بمحاذاة النص إلى اليسار ، واليمين إلى اليمين ، والوسط إلى المركز ، وتبرير محاذاة النص إلى عرض العنصر.
هناك طريقة أخرى لتغيير موضع النص وهي استخدام سمة هامش كس. يمكنك استخدامه لتعيين المسافة البادئة بين حدود العنصر ومحتوياته. على سبيل المثال ، ستحدد قيمة الهامش الأعلى الهامش في الأعلى ، والهامش السفلي في الأسفل ، والهامش الأيسر والهامش الأيمن في اليسار واليمين ، على التوالي. يمكنك تحديد القيم بالبكسل أو النسب المئوية أو وحدات القياس الأخرى.
يمكنك أيضا استخدام سمات الحشو وارتفاع الخط لتغيير موضع النص. باستخدام سمة الحشو ، يمكنك تعيين المسافة البادئة الداخلية بين حدود العنصر ومحتوياته. تحدد قيمة ارتفاع السطر ارتفاع سطر النص. يمكن أن يكون هذا مفيدا إذا كنت تريد زيادة أو تقليل المسافة بين السطور.
- طرق لتغيير موضع الخط على الموقع
- تغيير حجم الخط
- تغيير لون الخط والخلفية
- تغيير نمط الخط والمحاذاة
طرق لتغيير موضع الخط على الموقع
يمكن لمطوري الويب استخدام عدة طرق لتغيير موضع الخط على الموقع:
لمزيد من التحكم المعقد في موضع النص ، يمكنك استخدام العلامة "جدول". عند إنشاء جدول ، يمكنك تحديد قيم محاذاة النص الأفقية والعمودية المناسبة للخلايا. على سبيل المثال:
النص
هذه ليست سوى بعض الطرق لتغيير موضع الخط على الموقع. يمكن لمطوري الويب استخدام مجموعات مختلفة من كس و هتمل لتحقيق النتيجة المرجوة ، اعتمادا على المهمة وتصميم الموقع.
تغيير حجم الخط
يتم تغيير حجم الخط في هتمل باستخدام خاصية كس
حجم الخط
. تتيح لك هذه الخاصية تعيين حجم الخط بالبكسل أو النسب المئوية أو وحدات القياس الأخرى المتاحة.
لذلك كل الفقرات
سيكون لديهم حجم خط 18 بكسل.
بالإضافة إلى ذلك ، يمكنك تغيير حجم الخط لعناصر معينة فقط من خلال تطبيق الفئات أو المعرفات. على سبيل المثال:
.العنوان {
حجم الخط: 24 بكسل;
}
أو
# الشريط الجانبي ص {
حجم الخط: 14 بكسل;
}
سيكون لديهم حجم خط 24 بكسل. في الحالة الثانية ، فقط الفقرات داخل العنصر مع
معرف الشريط الجانبي
سيكون لديهم حجم خط 14 بكسل.
يمكنك أيضا استخدام وحدات القياس النسبية ، مثل النسب المئوية أو م ، لإنشاء تعديلات بناء على حجم الخط الأساسي. على سبيل المثال:
أو
ص {
باستخدام خاصية كس
حجم الخط
، يمكنك بسهولة تغيير حجم خط صفحة الويب وفقا لاحتياجاتك وتصميمك.
ص {
اللون: أحمر;
اللون: # فف0000;
}
حيث فف0000 هي القيمة السداسية العشرية للأحمر.يمكنك أيضا تغيير لون خلفية الخط باستخدام خاصية لون الخلفية. تعمل هذه الخاصية أيضا مع أسماء الألوان أو القيم السداسية العشرية.
ص {
لون الخلفية: أصفر;
}
إذا كنت ترغب في إنشاء تأثير متباين بين الخط والخلفية ، يمكنك استخدام خاصية لون الخلفية جنبا إلى جنب مع خاصية لون كس أخرى.
ص {
- لون الخلفية: أسود;
- اللون: أبيض;
- }
في هذه الحالة ، سيكون الخط أبيض وستكون الخلفية سوداء.
تغيير نمط الخط والمحاذاة
نموذج النص