دليل لتنسيق النص في CSS

عند تصميم موقع ويب ، يعد تنسيق النص جانبًا مهمًا لإنشاء واجهة جذابة وقابلة للقراءة.

يوفر CSS العديد من الخصائص التي تسمح لك بتخصيص العديد من عناصر النص ، بما في ذلك لون الخط والحجم والعائلة والمحاذاة والتباعد والمزيد.

يوجد أدناه دليل تفصيلي حول كل خاصية من خصائص تنسيق النص ، بالإضافة إلى أمثلة لكل خاصية.

 

لون الخط

المعلمة: قيمة اللون ، والتي يمكن أن تكون اسم لون(على سبيل المثال red) ، أو رمز سداسي عشري(على سبيل المثال ، "# FF0000") ، أو قيمة RGB(على سبيل المثال ، "rgb(255 ، 0 ، 0)") ، أو قيمة RGBA(على سبيل المثال ، "rgba(255 ، 0 ، 0 ، 0.5)").

p {  
  color: blue;  
}  

 

حجم الخط

المعلمة: قيمة حجم يمكن أن تكون بالبكسل(على سبيل المثال ، "16px") ، وحدات em(على سبيل المثال ، "1em") ، وحدات rem(على سبيل المثال ، "1.2rem") ، وحدات عرض منفذ العرض(على سبيل المثال ، "10vw") أو وحدات ارتفاع منفذ العرض(على سبيل المثال ، "5vh") أو وحدات أخرى.

h1 {  
  font-size: 24px;  
}  

 

خط العائلة

المعلمة: قائمة عائلة الخطوط المحددة بالترتيب المفضل. يمكنك تحديد اسم الخط(على سبيل المثال Arial) أو تضمين أسماء الخطوط التي تحتوي على أحرف خاصة بين علامتي اقتباس مزدوجتين(على سبيل المثال ، " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

وزن الخط ونمطه

المعلمة font-weight: normal(default) ، bold ، bolder ، lighter ، أو القيم الرقمية من 100 إلى 900.

المعلمة font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

زخرفة النص

المعلمة: "none"(default), "underline", "overline", "line-through"  أو مجموعة من القيم مفصولة بمسافات.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

محاذاة النص

المعلمة "left"(default), "right", "center" or "justify":.

p {  
  text-align: center;  
}  

 

ارتفاع الخط والهوامش

ارتفاع خط المعلمة: قيمة رقمية أو نسبة مئوية من حجم الخط الحالي.

هامش المعلمة: قيمة قياس ، مثل وحدات البكسل(بكسل) ، وحدات em(em) ، وحدات rem(rem) ، إلخ.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

تخطيط نص متعدد الأعمدة

المعلمة: عدد صحيح موجب أو "auto"(default).

.container {  
  column-count: 2;  
}  

 

تغيير لون النص عند التمرير

لا توجد معلمة محددة ، استخدم فقط الفئة الزائفة :hover.

a:hover {  
  color: red;  
}  

 

تغيير لون النص في الحالة(نشط ، تمت زيارته)

لا توجد معلمة محددة ، استخدم فقط الفئات الزائفة :active  و :visited.

a:visited {  
  color: purple;  
}  

 

نأمل أن تكون التفسيرات والأمثلة المذكورة أعلاه قد ساعدتك في فهم كيفية استخدام وتخصيص خصائص تنسيق النص في CSS لإنشاء واجهة نصية جذابة ومرئية على موقع الويب الخاص بك.