الدرس 18 · الوحدة 6: تنسيق صفحات الويب باستخدام CSS
الخطوط والنصوص والروابط
نجعل النص مريحًا للقراءة، والروابط واضحة وجميلة. ⏱ نحو 20 دقيقة.
بعد هذا الدرس ستستطيع أن:
- تختار نوع الخط مع بدائل احتياطية، وتجلب خطًّا من
Google Fonts. - تضبط الحجم والوزن ومسافة الأسطر.
- تحاذي النص وتزخرفه مع مراعاة العربية.
- تنسّق حالات الرابط وتصنع رابطًا بشكل زر.
١نوع الخط: font-family
نكتب قائمة خطوط بالترتيب: يستخدم المتصفح أول خط موجود في جهاز الزائر، وإن لم يجده انتقل إلى التالي. ونختمها دائمًا بنوع عام مثل sans-serif:
<p class="a">خط Tahoma الموجود في أغلب الأجهزة</p><p class="b">خط Tajawal من Google Fonts</p>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap'); .a { font-family: Tahoma, Arial, sans-serif; }.b { font-family: 'Tajawal', sans-serif; font-size: 20px; }
الخط الذي ليس في جهاز الزائر نجلبه من fonts.google.com: اختر الخط، وانسخ سطر <link> إلى head صفحتك (أو سطر @import إلى أول ملف CSS)، ثم استخدم اسمه في font-family. اسم الخط الذي فيه مسافة يُكتب بين علامتي تنصيص.
٢الحجم والوزن والمسافة بين الأسطر
<h2>عنوان القسم</h2><p>نص الفقرة بحجم مريح للقراءة، والمسافة بين أسطرها واسعة قليلًا حتى لا تتزاحم الحروف العربية بنقاطها وتشكيلها.</p>
h2 { font-size: 28px; font-weight: 800;}p { font-size: 18px; line-height: 1.8;}
| الخاصية | قيم شائعة | ملاحظة |
|---|---|---|
font-size | 16px أو 1.2rem | rem نسبة إلى حجم الصفحة الأساسي (16px عادة)، فتتكيّف مع إعدادات الزائر. |
font-weight | 400 عادي، 700 عريض، أو bold | |
line-height | 1.6 إلى 1.9 | رقم بلا وحدة يعني «مرة ونصف حجم الخط» وهكذا. العربية تحتاج مسافة أوسع. |
٣محاذاة النص وزخرفته
<h2 class="center">عنوان في الوسط</h2><p class="just">فقرة طويلة محاذاة من الجانبين، فتبدو حوافها مستقيمة مثل الكتب والصحف، وهذا مناسب للنصوص الطويلة.</p><p class="old">السعر القديم</p>
.center { text-align: center; }.just { text-align: justify; }.old { text-decoration: line-through; color: gray; }
| الخاصية | القيم |
|---|---|
text-align | right و left و center و justify. في صفحة RTL الافتراضي يمين. |
text-decoration | underline خط تحته، line-through خط وسطه، none بلا خط. |
٤تنسيق الروابط وحالاتها
للرابط أربع حالات، نكتبها بهذا الترتيب: :link ثم :visited ثم :hover ثم :active:
<p>اقرأ <a href="#">سياسة الخصوصية</a> قبل التسجيل.</p><a class="btn" href="#">اطلب الآن</a>
a { color: #1D5FB4; text-decoration: none;}a:hover { text-decoration: underline;}a:visited { color: #6B3FA0;}.btn { display: inline-block; background: #E07A1F; color: white; padding: 8px 18px; border-radius: 8px;}.btn:hover { background: #C0620F; text-decoration: none;}
| الحالة | متى؟ |
|---|---|
:link | رابط لم يُزر بعد. |
:visited | رابط زاره المستخدم. |
:hover | المؤشر فوقه. |
:active | لحظة الضغط عليه. |
الرابط الذي يبدو زرًّا مجرد <a> عليه تنسيق؛ وهذه أشهر طريقة لصنع أزرار «اطلب الآن» في المواقع.
توقّع وتحقّق
لماذا نكتب عدة خطوط في font-family؟
يستخدم أول خط موجود.
مسافة الأسطر المناسبة للعربية تقريبًا:
العربية تحتاج مسافة أوسع.
إزالة الخط تحت الرابط:
text-decoration.أي حالة لرابط زاره المستخدم من قبل؟
visited.الخلاصة
font-familyقائمة خطوط تنتهي بنوع عام مثلsans-serif.font-sizeوfont-weightوline-height(العربية: 1.6 إلى 1.9).text-alignللمحاذاة، وtext-decorationللخط تحت النص أو وسطه.- حالات الرابط:
linkثمvisitedثمhoverثمactive.
تحدٍّ برمجي: مقال مقروء
متوسطنسّق مقالًا عن القهوة ليكون مريحًا للقراءة، ونسّق روابطه.
المطلوب:
- خط الصفحة body هو Tajawal (من Google Fonts) مع
sans-serifاحتياطيًّا. - حجم خط الفقرات 18px ومسافة أسطرها 1.8.
- العنوان h1 في الوسط ووزنه 700.
- الروابط a بلا خط تحتها، ولونها #1D5FB4.
- عند المرور على الرابط يظهر الخط تحته.
👀 اعرض شكل الناتج المطلوب
✓ التحقق الآلي من حلّك:
- خط body هو Tajawal مع
sans-serif. - الفقرات 18px ومسافة أسطرها 1.8.
- h1 في الوسط ووزنه 700.
- الروابط بلا خط ولونها #1D5FB4.
- قاعدة
a:hoverتضيف خطًّا تحت الرابط.
💡 تلميح 1
font-family: 'Tajawal', sans-serif;💡 تلميح 2
line-height: 1.8; (رقم بلا وحدة)حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
<h1>رحلة القهوة</h1><p>بدأت القهوة في اليمن، ثم انتشرت إلى العالم. اقرأ <a href="#">تاريخ القهوة</a> بالتفصيل.</p><p>اليوم تُزرع في أكثر من 70 دولة، وتُشرب ملايين الأكواب كل يوم.</p>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap'); body { font-family: 'Tajawal', sans-serif;}h1 { text-align: center; font-weight: 700;}p { font-size: 18px; line-height: 1.8;}a { color: #1D5FB4; text-decoration: none;}a:hover { text-decoration: underline;}