CSS

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

ستتعلم في هذا الدرس كيفية تباعد النصوص وعمل مسافات قبل السطر عن طريق خاصية Text Spacing في لغة CSS.

التاريخ

09 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

4323

المواضيع

24
الشروحات chevron_left CSS Text Spacing chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

تستخدم خاصية text-indent لعمل لتباعد النصوص من جهة اليمين أو من جهة اليسار علي حسب إتجاه النص هذه المسافات تكون في أول سطر فقط.

 قيم خاصية text-indent في لغة CSS:
  • length يتم تحديها بوحدة pixel بكسل px.
  • percentage يتم تحديدها بالنسبة المئوية ٪.


وظيفته خاصية text-indent في لغة CSS:
  • ترك مسافة قبل أول سطر.
text indent syntax

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

text-indent:value;
text indent values

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

text-indent:50px|20%;
CSS text indentation

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

p
{
 text-indent: 50px;
}

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

تستخدم خاصية letter-spacing لعمل تباعد بين الحروف هذه المسافات تكون بين كل حرف من الأحرف الأنجليزية في جميع السطور.

 قيم خاصية letter-spacing في لغة CSS:
  • length يتم تحديها بوحدة pixel بكسل px.
  • percentage يتم تحديدها بالنسبة المئوية ٪.


وظيفته خاصية letter-spacing في لغة CSS:
  • ترك مسافة بين كل حرف في جميع الأسطر.
letter-spacing syntax

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

letter-spacing:value;
letter-spacing values

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

letter-spacing:50px|20%;
CSS letter spacing

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

h1 
{
  letter-spacing: 3px;
}

h2 
{
  letter-spacing: -3px;
}

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

تستخدم خاصية line-height للتحكم في أرتفاع خط النصوص من السطر يمكن رفع النص لأعلي ولأسفل.

 قيم خاصية line-height في لغة CSS:
  • length يتم تحديها بوحدة pixel بكسل px.
  • number رقم سيتم ضربه font-size بحجم الخط الحالي لضبط ارتفاع الخط.
  • percentage يتم تحديدها بالنسبة المئوية ٪.


وظيفته خاصية line-height في لغة CSS:
  • تحريك النص لأعلي ولأسفل السطر.
line-height syntax

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

line-height:value;
line-height values

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

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

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

p.small 
{
  line-height: 0.7;
}

p.big
{
  line-height: 1.8;
}
CSS line height percentage

خاصية line-height في لغة CSS مع النسبة المئوية.

.small
{
  line-height: 10%;
}
CSS line height length

خاصية line-height في لغة CSS مع وحدة بكسل.

.small
{
  line-height: 10px;
}

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

تستخدم خاصية word-spacing للتحكم في تباعد الكلمات عن بعضها لبعض ولعمل مسافات فارغة بين الكلمات في لغة CSS.

 قيم خاصية word-spacing في لغة CSS:
  • length يتم تحديها بوحدة pixel بكسل px.
  • nurmal رقم يحدد المسافة العادية بين الكلمات (0.25em). هذا هو الافتراضي. 
وظيفته خاصية word-spacing في لغة CSS:
  • ترك مسافات بين كل كلمة والأخري.
word-spacing syntax

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

word-spacing:value;
word-spacing values

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

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

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

h1 
{
  word-spacing: 10px;
}

h2 
{
  word-spacing: -5px;
}
مصطلحات الدرس
Spacing
Spacing

مسافات / تباعد

Indentation
Indentation

المسافة الفارغة

Property
Property

خاصية

Value
Value

قيمة

Letter
Letter

خطاب / رسالة

Minus
Minus

علامة الناقص

Line
Line

سطر / خط

Height
Height

ارتفاع

Word
Word

كلمة

White
White

بيضاء / أبيض

Space
Space

مسافة

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
Indent
Indent

Indentation

المسافة الفارغة
Px
Px

Pixel

وحدة قياس الPixel
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.