انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 11
دورة لغة CSS

تباعد النصوص في لغة CSSCSS Text Spacing

ستتعلم في هذا الدرس التحكم في المسافة البادئة وتباعد الحروف وارتفاع السطر وتباعد الكلمات باستخدام text-indent وletter-spacing وline-height وword-spacing.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
14
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
10,581
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

CSS Text Indentation تباعد النصوص في لغة CSS

تحدد text-indent المسافة البادئة للسطر الأول من الحاوية الكتلية في الاستخدام المعتاد. تبدأ من inline-start: اليسار مع LTR واليمين مع RTL.

  • تقبل أطوالًا مثل px وem؛ ليست px الوحدة الوحيدة.
  • النسبة المئوية تحسب من الحجم الداخلي للحاوية على المحور السطري.
  • القيم السالبة تزيح بداية السطر إلى الخارج. توجد قيم إضافية مثل hanging وeach-line خارج أمثلتنا الأساسية.

text indent syntax

طريقة كتابة خاصية text-indent في لغة CSS.

CSS 
text-indent:value;

text indent values

قيم خاصية text-indent في لغة CSS.

CSS 
text-indent:50px|20%;

CSS text indentation

خاصية text-indent في لغة CSS.

HTML 
p
{
 text-indent: 50px;
}
جرّب بنفسك

CSS Letter Spacing تباعد الحروف في لغة CSS

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

  • normal للتباعد الطبيعي.
  • أطوال مثل 3px أو0.2em، ويمكن أن تكون سالبة لتقليل التباعد.
  • الصيغة الحديثة تقبل نسبة مئوية من font-size المستخدم، وفق CSS Text Level4؛ راجع دعم المتصفح عند استخدامها.
  • القيم الكبيرة جدًا أو السالبة جدًا قد تجعل الأحرف متباعدة أو متراكبة وصعبة القراءة.

letter-spacing syntax

طريقة كتابة خاصية letter-spacing في لغة CSS.

CSS 
letter-spacing:value;

letter-spacing values

قيم خاصية letter-spacing في لغة CSS.

CSS 
letter-spacing:50px|20%;

CSS letter spacing

خاصية letter-spacing في لغة CSS.

HTML 
h1 
{
  letter-spacing: 3px;
}

h2 
{
  letter-spacing: -3px;
}
جرّب بنفسك

CSS Line Height ارتفاع خط النصوص في لغة CSS

تحدد line-height ارتفاع صندوق السطر وتؤثر في المسافة بين الأسطر؛ ليست أمرًا لنقل النص إلى أعلى أو أسفل الصفحة.

  • normal تعتمد على الخط والمتصفح.
  • العدد بلا وحدة، مثل1.8، يضرب في حجم خط العنصر.
  • يمكن استخدام طول، مثل24px، أو نسبة من حجم خط العنصر، مثل180%.
  • القيم الصغيرة قد تسبب تداخل الأسطر؛ تستخدم الأمثلة الصغيرة هنا لإظهار الأثر، وليست توصية للنصوص الطويلة.

line-height syntax

طريقة كتابة خاصية line-height في لغة CSS.

CSS 
line-height:value;

line-height values

قيم خاصية line-height في لغة CSS.

CSS 
line-height:normal|number|length|percentage|initial|inherit;

CSS line height

خاصية line-height في لغة CSS.

HTML 
p.small 
{
  line-height: 0.7;
}

p.big
{
  line-height: 1.8;
}
جرّب بنفسك

CSS line height percentage

القيمة10% تحسب من حجم خط العنصر، فتنتج ارتفاعًا صغيرًا جدًا وقد تتداخل الأسطر. الفقرة ذات class="big" لا تملك قاعدة خاصة في هذا المثال وتبقى بالقيمة الافتراضية.

HTML 
.small
{
  line-height: 10%;
}
جرّب بنفسك

CSS line height length

القيمة10px ارتفاع ثابت للسطر، وقد تكون أصغر من حجم الخط. الفقرة ذات class="big" لا تملك قاعدة خاصة هنا.

HTML 
.small
{
  line-height: 10px;
}
جرّب بنفسك

CSS Word Spacing تباعد الكلمات في لغة CSS

تضيف word-spacing مسافة إلى التباعد الأصلي بين الكلمات. القيمة normal هي التباعد الذي يحدده الخط والمتصفح؛ ليست رقمًا ثابتًا يساوي0.25em.

  • تقبل أطوالًا مثل10px أو0.2em، ومنها القيم السالبة لتقليل التباعد.
  • تسمح الصيغة الحديثة بنسبة مئوية من font-size؛ يجب مراعاة دعم المتصفح.
  • يقارن المثال بين تباعد زائد10px وتباعد أقل بقيمة-5px.

word-spacing syntax

طريقة كتابة خاصية word-spacing في لغة CSS.

CSS 
word-spacing:value;

word-spacing values

قيم خاصية word-spacing في لغة CSS.

CSS 
word-spacing:normal|length|initial|inherit;

CSS word spacing

خاصية word-spacing في لغة CSS.

HTML 
h1 
{
  word-spacing: 10px;
}

h2 
{
  word-spacing: -5px;
}
جرّب بنفسك

مشاركة

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

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

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

المصطلحات12

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

0 / 12 مفهومةأول بطاقة، أول خطوة
01 Spacing مسافات / تباعد
للمراجعة
02 Text نص
للمراجعة
03 Indentation المسافة الفارغة
للمراجعة
04 Property خاصية
للمراجعة
05 Value قيمة
للمراجعة
06 Letter خطاب / رسالة
للمراجعة
07 Minus علامة الناقص
للمراجعة
08 Line سطر / خط
للمراجعة
09 Height ارتفاع
للمراجعة
10 Word كلمة
للمراجعة
11 White بيضاء / أبيض
للمراجعة
12 Space مسافة
للمراجعة

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

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

الاختصارات3

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

0 / 3 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 Indent Indent
Indentation
المسافة الفارغة
للمراجعة
03 Px Px
Pixel
وحدة قياس الPixel
للمراجعة

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

مساحة التحدي

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

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

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

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

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

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

ماهي الخاصية التي تستخدم لكي نترك مساحة فارغة في بداية اول سطر في الفقرات النصية ؟

____
02

في ماذا تستخدم خاصية letter-spacing ؟

03

ماهي الخاصية التي تستخدم في تحديد المسافة الموجودة بين اسطر النصوص ؟

____
04

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

05

ماهي القيمة التي تستخدم مع خاصية white-space لحذف الفراغات الزائدة الموجودة بين الكلمات ؟

____