1. تغيير نوع الخط (font-family):
p {
font-family: Arial, sans-serif;
}
- يمكنك تحديد أكثر من نوع، والمتصفح يختار أول نوع متاح.
- من الأفضل دائمًا إضافة نوع احتياطي مثل
sans-serifأوserif.
2. تغيير حجم الخط (font-size):
h1 {
font-size: 32px;
}
- وحدات شائعة:
px: بكسل (ثابت)emوrem: نسبي%: نسبة من العنصر الأب
مثال:
p {
font-size: 1.2em;
}
3. تغيير وزن الخط (font-weight):
strong {
font-weight: bold; /* أو 700 */
}
- القيم:
normal,bold, أو أرقام بين100و900.
4. تحويل حالة الأحرف (text-transform):
h2 {
text-transform: uppercase;
}
- القيم:
uppercase: كل الأحرف كبيرةlowercase: كل الأحرف صغيرةcapitalize: أول حرف كبير
5. محاذاة النص (text-align):
p {
text-align: center;
}
- القيم:
left,right,center,justify
6. تحديد المسافة بين الأسطر (line-height):
p {
line-height: 1.6;
}
7. تحديد المسافة بين الحروف (letter-spacing):
h1 {
letter-spacing: 2px;
}
مثال عملي:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
font-size: 36px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
text-align: justify;
}
.bold-text {
font-weight: bold;
}
</style>
</head>
<body>
<h1>مقدمة في تنسيق النصوص</h1>
<p>
هذا المثال يوضح كيفية تنسيق النص باستخدام CSS، مثل تغيير نوع الخط، حجمه، وزيادة المسافة بين الأحرف والأسطر.
</p>
<p class="bold-text">هذا نص بخط عريض.</p>
</body>
</html>
الواجب العملي:
- أنشئ صفحة فيها:
- عنوان بخط مميز، كبير الحجم.
- فقرة مبررة ومحاذاة مناسبة.
- نص بخط عريض وحروف كبيرة.
- جرّب استخدام وحدات
emوrem.
