الكورس

Advertisements

خواص النصوص فى CSS


CSS Texts – سيتم شرح خواص النصوص فى CSS فى هذا الفصل، مع بعض الأمثلة التوضيحية.


 

خواص النصوص CSS Text Properties

 

توفر CSS خصائص للتحكم فى حجم ولون وشكل وإتجاه النصوص والكثير من الخواص الأخرى، هنتعرف عليهم فى هذا الفصل.

 


 

1) لون الخط – CSS Text color

 

يتم استخدام خاصية color لتعيين لون النص.

يمكن أن تكون القيمة المحتملة أي اسم لون بأي تنسيق صالح:

  • إسم اللون مباشرًا، مثل “black”.
  • HEX، مثل “000#”.
  • RGB، مثل “(rgb (0,0,0”.
  • HSL، مثل “(hsl(0, 0%, 0%“.

 

يوضح المثال التالي كيفية تعيين لون النص:

p {
  color: blue;  
}

CSS is very easy!


 

2. إتجاه النص – CSS Text Direction

 

خاصية direction تقوم بإعداد إتجاه النص، والقيم المحتملة هى:

  1. ltr: إختصار لـ left to right، تحدد إتجاه النص من اليمين لـ الشمال.
  2. rtl: إختصار لـ  right to left، تحدد إتجاه النص من الشمال لـ اليمين.

 

مثال للتوضيح عن كيفية تعيين اتجاه النص:

p {
  direction: rtl;
}

صلى على محمد


 

3) محاذاة النص – CSS Text Alignment

 

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

p {
 text-align: center;  
}
            
p {
 text-align: right;  
}
            
p {
 text-align: left;  
}
            
p {
 text-align: justify;  
}

Center

Right

Left

Justify

المحاذاة اليسرى هي الافتراضية إذا كان اتجاه النص من اليسار إلى اليمين، والمحاذاة اليمنى هي الافتراضية إذا كان اتجاه النص من اليمين إلى اليسار.

عند تعيين خاصية محاذاة النص على “Justify” ، يتم تمديد كل سطر بحيث يكون لكل سطر عرض متساوٍ ، ويكون الـ margin الأيمن والأيسر مستقيمتين.


 

4) زخرفة النص – CSS Text Decoration

 

يتم استخدام خاصية text-decoration لتعيين أو إزالة الزخارف من النص.

القيم المحتملة هي:

  • none.
  • underline.
  • overline.
  • line-through.
  • blink.

 

يوضح المثال التالي كيفية تزيين نص:

p.overline {
  text-decoration: overline;
}

p.line-through {
  text-decoration: line-through;
}

p.underline {
  text-decoration: underline;
}

Center

Right

Underline

 

من الإستخدامات الشائعة لخاصية text-decoration، إستخدامة لإزالة التسطير من الروابط، كالتالى:

a {
  text-decoration: none;
}

Advertisements

 

5) تحويل النص – CSS Text Transformation

 

يتم استخدام خاصية text-transform لتحديد الأحرف الكبيرة والصغيرة في النص.

يمكن استخدامه لتحويل كل شيء إلى أحرف كبيرة أو صغيرة ، أو تكبير الحرف الأول من كل كلمة، القيم الممكنة:

  • none.
  • capitalize.
  • uppercase.
  • lowercase.

 

مثال للتوضيح:

p.none {
  text-transform: none;
}

h1.capitalize {
  text-transform: capitalize;
}
            
h2.uppercase {
  text-transform: uppercase;
}

h3.lowercase {
  text-transform: lowercase;
}

None transform

Capitalize transform

Uppercase transform

Lowercase transform


 

6) المسافة البادئة – CSS Text Indentation

 

يتم استخدام خاصية text-indent للنص لتحديد المسافة البادئة للسطر الأول من النص، كالتالى:

p {
  text-indent: 10px;
}

Text Indentation


 

7) تباعد الحروف – CSS Letter Spacing

 

يتم استخدام خاصية letter-spacing لتحديد المسافة بين الأحرف في النص، كالتالى:

p {
  letter-spacing: 5px;
}

p {
  letter-spacing: -5px;
}

Positive Letter Spacing Example

Negative Spacing Example


 

8) ارتفاع الخط – CSS Line Height

 

تُستخدم خاصية line-height لتحديد المسافة بين السطور، كالتالى:

p {
  line-height: 0.9;
}

Pellentesque in ipsum id orci porta dapibus.
Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat.
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.


 

9) تباعد الكلمات – CSS Word Spacing

 

يتم استخدام خاصية word-spacing لتحديد المسافة بين الكلمات في النص. كالتالى:

p {
  word-spacing: 5px;
}

p {
  word-spacing: -5px;
}

Word spacing with positive value.

Word spacing with negative value.


 

10) المساحة البيضاء – CSS White Space

 

تحدد خاصية white-space كيفية معالجة المسافة البيضاء داخل العنصر. كالتالى:

p {
  white-space: pre-line;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


 

11) ظل النص – CSS Text Shadow

 

تضيف خاصية text-shadow ظلًا إلى النص. كالتالى:

p.firstExample {
  text-shadow: 1px 2px;
}
        
p.secondExample {
  text-shadow: 1px 2px blue;
}
p.thirdExample {
  text-shadow: 3px 3px 5px blue;
}

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque.

Pellentesque in ipsum id orci porta dapibus.

Cras ultricies ligula sed magna dictum porta.

قد لا يدعم text-shadow كل المتصفحات.


 

ملخص الفصل

 

  • يتم استخدام خاصية color لتعيين لون النص.
  • خاصية direction تقوم بإعداد إتجاه النص.
  • تُستخدم خاصية text-align لتعيين المحاذاة الأفقية للنص.
  • يتم استخدام خاصية text-decoration لتعيين أو إزالة الزخارف من النص.
  • يتم استخدام خاصية text-transform لتحديد الأحرف الكبيرة والصغيرة في النص.
  • يتم استخدام خاصية text-indent للنص لتحديد المسافة البادئة للسطر الأول من النص.
  • يتم استخدام خاصية letter-spacing لتحديد المسافة بين الأحرف في النص.
  • تُستخدم خاصية line-height لتحديد المسافة بين السطور.
  • يتم استخدام خاصية word-spacing لتحديد المسافة بين الكلمات في النص.
  • تحدد خاصية white-space كيفية معالجة المسافة البيضاء داخل العنصر.
  • تضيف خاصية text-shadow ظلًا إلى النص.

 



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements