انتقل إلى محتوى الدرس
الدرس 08
دورة لغة CSS

محاذاة النصوص في لغة CSSCSS Text Alignment

ستتعلم في هذا الدرس محاذاة محتوى السطور أفقيًا باستخدام text-align، والفرق بين left وright وcenter وjustify والقيم التي تتبع اتجاه النص.

أقسام الدرس
5
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
11,475
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

CSS text align خاصية text-align في لغة CSS

تحدد text-align محاذاة المحتوى السطري داخل صندوق السطر في حاوية كتلية؛ في الكتابة الأفقية تضبط محاذاة النص أفقيًا، ولا تنقل صندوق العنصر نفسه.

  • left وright للمحاذاة مع الحافة اليسرى أو اليمنى.
  • center لتوسيط محتوى كل سطر.
  • justify لضبط المسافات حتى تصطف الحافتان؛ السطر الأخير لا يمدد افتراضيًا بالطريقة نفسها.
  • start وend يتبعان اتجاه النص؛ start يمين مع RTL ويسار مع LTR.
خاصية text-align في لغة CSS

text-align syntax

طريقة كتابة خاصية text-align.

CSS
text-align: value;

text-align values

قيم خاصية text-align.

CSS
text-align: left|right|center|justify|initial|inherit;

CSS text align left القيمة left مع خاصية text-align في لغة CSS

تًستخدم خاصية  text-align مع القيمة left لتغيير طريقة بدأ النص ويبدأ من جهة اليسار داخل عناصر HTML بلغة CSS.

CSS text align left

تبدأ النصوص من جهة يسار العنصر عن طريق إستخدام الخاصية text-align والقيمة left في لغة CSS.

HTML
p
{
text-align:left;
}

CSS text align right القيمة right مع خاصية text-align في لغة CSS

تًستخدم خاصية  text-align مع القيمة right لتغيير طريقة بدأ النص ويبدأ من جهة اليمين داخل عناصر HTML بلغة CSS.

CSS text align right

تبدأ النصوص من جهة يمين العنصر عن طريق إستخدام الخاصية text-align والقيمة right في لغة CSS.

HTML
p
{
text-align:right;
}

CSS text align center القيمة center مع خاصية text-align في لغة CSS

توسّط القيمة center محتوى كل سطر داخل مساحة العنصر؛ ليست أمرًا لبدء الكلمات من نقطة المنتصف ثم امتدادها في اتجاه واحد.

CSS text align center

يتوسط محتوى السطور باستخدام text-align: center.

HTML
p
{
text-align:center;
}

CSS text align justify القيمة justify مع خاصية text-align في لغة CSS

تضبط text-align: justify المسافات داخل السطور لتصطف الحافتان. يبقى السطر الأخير عند البداية افتراضيًا، ولا تمدد الخاصية كل سطر قصير تلقائيًا.

CSS text align justify

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

HTML
p
{
text-align:justify;
}

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات11

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 11 مفهومةأول بطاقة، أول خطوة
01 Text Alignment محاذاة النص
للمراجعة
02 Align محاذاة
للمراجعة
03 Text نص
للمراجعة
04 Value قيمة
للمراجعة
05 Left يسار
للمراجعة
06 Center في المنتصف
للمراجعة
07 Justify توزيع المسافات
للمراجعة
08 Direction اتجاه
للمراجعة
09 Properties خصائص
للمراجعة
10 Vertical عمودي
للمراجعة
11 Property خاصية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات3

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 3 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 Rtl Rtl
Right to Left
من اليمين إلي اليسار
للمراجعة
03 Ltr Ltr
Left to Right
من اليسار إلي اليمين
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

6أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي6 أسئلة تنتظرك
01

ما هو اسم الخاصية التي تستخدم في تحديد مكان النصوص ؟

____
02

ماهي القيمة التي تستخدم في جعل السطور متساوية باستخدام خاصية text-align ؟

03

ماهي الخاصية التي تستخدم في تحديد اتجاه عرض النص ؟

____
04

ماهي القيمة التي تستخدم في جعل النصوص تعرض من اليمين الي اليسار ؟

05

ماهي القيمة التي تستخدم في جعل النصوص تعرض من اليسار الي اليمين ؟

06

في ماذا تستخدم خاصية vertical-align ؟