CSS Academy · درس

محاذاة النص وزخرفته وتباعده

حاذِ النص، وأضف تسطيرًا أو شطبًا، وتحكّم في تباعد الأحرف والأسطر.

محاذاة النص وزخرفته وتباعده درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

text-align

تتحكم text-align في المحاذاة الأفقية للمحتوى المضمّن داخل حاوية كتلية.

<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>

text-align: justify

تمدّد justify الأسطر لملء عرض الحاوية بالكامل، وذلك بإضافة مسافات بين الكلمات. استخدمها مع hyphens: auto لتجنّب الفجوات غير المتناسقة في الحاويات الضيقة.

<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>

text-decoration

تضيف text-decoration خطوطًا إلى النص. وتُستخدم عادةً لتسطير الروابط أو شطب المحتوى المحذوف.

<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>

الصيغة التفصيلية لـ text-decoration

تُعدّ text-decoration اختصارًا لخصائص الخط، والنمط، واللون، والسُمك:

<a href="#">Wavy red underline link</a>

text-transform

تغيّر text-transform حالة الأحرف في النص من دون تعديل HTML الأساسي:

<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>

text-indent

تُزاح السطر الأول من العنصر الكتلي باستخدام text-indent. استخدم قيمة سالبة مع حشوة مطابقة لإخفاء النص بطريقة ميسّرة الوصول (استبدال الصور).

<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>

white-space

تتحكم white-space في كيفية معالجة المسافات البيضاء وفواصل الأسطر في HTML المصدر:

normal — طيّ المسافات البيضاء والالتفاف عند الكلمات
nowrap — منع التفاف السطر
pre — الحفاظ على المسافات البيضاء ومنع الالتفاف
pre-wrap — الحفاظ على المسافات البيضاء والسماح بالالتفاف

<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
  return true;
}</pre>

letter-spacing

تحدّد letter-spacing مسافة إضافية بين المحارف. وتُباعد القيم الموجبة بين أشكال الحروف، بينما تقرّبها القيم السالبة من بعضها. استخدم em للتحجيم النسبي.

<p class="spaced">spaced heading text</p>

word-spacing

تضيف word-spacing مسافة إضافية بين الكلمات. ونادرًا ما تكون ضرورية، لكنها مفيدة لضبط النص المُحاذى أو العناوين البارزة بدقة.

<h1>Word Spaced Heading Example</h1>

text-overflow: ellipsis

اقتطع النص المتجاوز باستخدام علامة الحذف. ويتطلب ذلك overflow: hidden وwhite-space: nowrap.

<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>

النص الرأسي باستخدام writing-mode

تغيّر writing-mode اتجاه تدفق النص. وبدمجها مع text-orientation، تتيح إنشاء نصوص رأسية بلغات CJK أو تسميات مُدارة إبداعيًا.

<div class="label">Vertical Label Text</div>

تحقق سريع

ما الخصائص الثلاث المطلوبة لعرض علامة الحذف عند تجاوز النص؟

خلاصة

تضع text-align المحتوى المضمّن داخل حاويته. وتضيف text-decoration الخطوط أو تزيلها. وتغيّر text-transform حالة الأحرف. ويُعد الجمع بين white-space: nowrap وoverflow: hidden وtext-overflow: ellipsis الطريقة التقليدية لاقتطاع النص.

الأسئلة الشائعة

هل درس «محاذاة النص وزخرفته وتباعده» مجاني؟

نعم — نص درس «محاذاة النص وزخرفته وتباعده» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «محاذاة النص وزخرفته وتباعده»؟

حاذِ النص، وأضف تسطيرًا أو شطبًا، وتحكّم في تباعد الأحرف والأسطر. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «محاذاة النص وزخرفته وتباعده»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy