خواص النصوص فى 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 تقوم بإعداد إتجاه النص، والقيم المحتملة هى:
- ltr: إختصار لـ left to right، تحدد إتجاه النص من اليمين لـ الشمال.
- 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; }
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 ظلًا إلى النص.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!