جاري التحميل...

النص في CSS

لقد حدّدت أحجام الصناديق وتحكّمت في الـ overflow. الآن شكّل الكلمات نفسها. خصائص النص في CSS تدير المحاذاة والتسطير وحالة الأحرف والمسافات وارتفاع السطر — دون تغيير عائلة الخط بعد (ذلك الدرس التالي).

أدوات النص اليومية

📊 خصائص النص الشائعة

الخاصية دورها اليومي
text-align يحاذي النص في سطره: يسار، يمين، وسط، justify
text-decoration يضيف أو يزيل تسطيرًا أو خطًا فوقيًا أو خط شطب
text-transform يغيّر حالة الأحرف: كبيرة، صغيرة، capitalize
line-height يضبط ارتفاع كل سطر — مفتاح لقراءة الفقرات
letter-spacing يضبط المسافة بين الأحرف

حاذِ النص

text-align يضع النص على المحور الأفقي لكتلته الحاوية.

توسيط عنوان

css
CSS Code 
.hero-title {
text-align: center;
color: #0f172a;
}

الزخرفة — التسطير وأصدقاؤه

text-decoration يرسم خطوطًا على النص. الروابط غالبًا مسطّرة؛ أزل ذلك بـ none، أو أضف underline / line-through حين يحتاج التصميم.

عينات الزخرفة

css
CSS Code 
.link-quiet {
text-decoration: none;
color: #2563eb;
}

.sale {
text-decoration: line-through;
color: #64748b;
}

.note {
text-decoration: underline;
}

حوّل حالة الأحرف

text-transform يغيّر مظهر الأحرف دون إعادة كتابة نص HTML.

تحويلات الحالة

css
CSS Code 
.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}

.city {
text-transform: capitalize;
}

ارتفاع السطر لفقرات قابلة للقراءة

line-height يتحكم في الإيقاع العمودي للأسطر. قيم بلا وحدة مثل 1.5 تتناسب مع حجم الخط وهي اختيار هادئ لنص المتن.

ارتفاع سطر مريح

css
CSS Code 
.article p {
line-height: 1.6;
color: #334155;
}

تباعد الأحرف — لمسة خفيفة

قليل من letter-spacing قد يفتح عنوانًا قصيرًا. اترك فقرات المتن طبيعية غالبًا إلا إذا احتاج التصميم ذلك حقًا.

عنوان مع تباعد خفيف

css
CSS Code 
.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}

جرّب بنفسك

  1. وسّط h1 بـ text-align: center.
  2. أزل تسطير رابط بـ text-decoration: none، ثم أعد تسطير hover إن أحببت.
  3. اجعل تسمية صغيرة بأحرف كبيرة عبر text-transform: uppercase.
  4. اضبط line-height الفقرة على 1.6 وقارن مع 1.2.
  5. حرّك عنوانًا قليلًا بـ letter-spacing صغير — ثم تحقق أنه ما زال مقروءًا.

أخطاء شائعة

  • استخدام text-align: center على أمل توسيط تخطيط الكتلة كله (مهمة تخطيط، لا نص فقط)
  • ترك كل الروابط مسطّرة حين يريد التصميم روابط هادئة — أو إزالة التسطير بلا إشارة أخرى
  • جلب عمل font-family وfont-size إلى هنا (ينتمي لدرس الخطوط)
  • letter-spacing ضخم على فقرات طويلة (يصعب القراءة)
  • خلط أدوات ثلاث نقاط فيضان النص مع هذه الأساسيات (لاحقًا)

ملخص

  • text-align يحاذي النص يسارًا أو يمينًا أو وسطًا أو justify
  • text-decoration يضيف أو يزيل التسطير والخطوط المشابهة
  • text-transform يغيّر حالة الأحرف دون تحرير HTML
  • line-height يشكّل قابلية قراءة الفقرة
  • letter-spacing خفيف قد يصقل عناوين قصيرة
  • الخطوط تأتي تاليًا؛ أبقِ هذا الدرس على جلوس النص وقراءته

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 26 من 35
Css درس تعليمي