السلام عليكم، سنرى في هذا الدرس أهم خواص التعديل على النصوص بـ CSS، حيث سنتطرق إلى :
* الخاصية 'DIRECTION'
* الخاصية 'TEXT-ALIGN'
* الخاصية 'TEXT-TRANSFORM'
* الخاصية 'TEXT-DECORATION'
* الخاصية 'TEXT-INDENT'
* الخاصية 'TEXT-SHADOW'
* الخاصية 'LINE-HEIGHT'
* الخاصية 'VERTICAL-ALIGN'
الخاصية DIRECTION
الخاصية 'DIRECTION' هي خاصية تمنح الوجهة للنصوص حسب لغة النص، و هي الخاصية الرئيسية لتعريب القوالب الأجنبية للمواقع و التطبيقات، و تقبل قيمتين خاصتين و قيمتين من القيم الشاملة Global Values.
القيم الخاصة للخاصية DIRECTION
• LTR : هي القيمة التلقائية، و تمنح الوجهة للنص من اليسار إلى اليمين، و خصوصاً للنص الذي يُكتب بلغة من اليسار إلى اليمين كاللغة الإنجليزية مثلاً.
• RTL : قيمة تمنح الوجهة للنص من اليمين إلى اليسار، و خصوصاً للنص الذي يُكتب بلغة من اليمين إلى اليسار كالعربية مثلاً.
القيم الشاملة للخاصية DIRECTION
• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'DIRECTION'، تُورِّث القيمة 'INHERIT' للعنصر وجهة النص من العنصر المحتوي له.
• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'DIRECTION'، تُرجِع القيمة 'INITIAL' وجهة النص إلى الوجهة التلقائية التي هي LTR.
الخاصية TEXT-ALIGN
الخاصية 'TEXT-ALIGN' هي خاصية إما تُحدِّد مكان النصوص نسبة إلى العنصر المحتوي لها، أو تعطيها تنسيق معين، و تقبل أربع قيم خاصة و قيمتين شاملتين.
القيم الخاصة للخاصية TEXT-ALIGN
• LEFT : هي القيمة التلقائية بالنسبة للنص الذي يكتب بلغة LTR، و تُظهِر النص في يسار العنصر المحتوي له.
• RIGHT : هي القيمة التلقائية بالنسبة للنص الذي يكتب بلغة RTL، و تُظهِر النص في يمين العنصر المحتوي له.
• CENTER : قيمة تُظهر النص في الوسط الأفقي للعنصر المحتوي له.
• JUSTIFY : قيمة تُغيّر تنسيق النص بجعل جميع أسطره متساوية الطول.
القيم الشاملة للخاصية TEXT-ALIGN
• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-ALIGN'، تُورِّث القيمة 'INHERIT' للنص المكان أو التنسيق من العنصر المحتوي.
• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-ALIGN'، تُرجِع القيمة 'INITIAL' النص إلى الوضعية الأولية له حسب نوع اللغة التي هو مكتوب بها، أي هل LTR أو RTL.
الخاصية TEXT-TRANSFORM
الخاصية 'TEXT-TRANSFORM' هي خاصية تغير حجم حروف النصوص إلى حروف كبيرة أو صغيرة أو تغير الحرف الأول من كل كلمة في النص إلى حرف كبير (Capital)، و هي مخصصة للنصوص المكتوبة بلغات من نوع LTR، و تقبل أربع قيم خاصة و قيمتين شاملتين.
القيم الخاصة للخاصية TEXT-TRANSFORM
• LOWERCASE : قيمة تجعل كل حروف النص كبيرة.
• UPPERCASE : قيمة تجعل كل حروف النص صغيرة.
• CAPITALIZE : قيمة تجعل الحرف الأول من كل كلمة في النص حرف كبير.
• NONE : هي القيمة التلقائية الخاصية، و تستعمَل لتعطيل حجم حروف النص في حالة إرثه من العنصر المحتوي.
القيم الشاملة للخاصية TEXT-TRANSFORM
• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-TRANSFORM'، تُورِّث القيمة 'INHERIT' للنص حجم حروفه من العنصر المحتوي.
• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-TRANSFORM'، تُرجِع القيمة 'INITIAL' حروف النص إلى الوضعية الأولية أي التنسيق التلقائي.
الخاصية TEXT-DECORATION
الخاصية 'TEXT-DECORATION' هي خاصية تعطي للنصوص الديكور أو تعطل منها الديكور، و تقبل أربع قيم خاصة و قيمتين شاملتين.
القيم الخاصة للخاصية TEXT-DECORATION
• UNDERLINE : قيمة تجعل خط تحت النص.
• OVERLINE : قيمة تجعل خط فوق النص.
• LINE-THROUGH : قيمة تجعل خط وسط النص.
• NONE : قيمة تعطل الديكور من النص، و تُستعمَل لتعطيل ديكور التنسيق التلقائي للـ HTML كالديكور التلقائي الذي في الروابط و القوائم.. و تستعمَل أيضاً لحذف إرث ديكور من العنصر المحتوي.
القيم الشاملة للخاصية TEXT-DECORATION
• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-DECORATION'، تُورِّث القيمة 'INHERIT' للنص الديكور من العنصر المحتوي.
• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-DECORATION'، تجعل القيمة 'INITIAL' النص يظهر بالديكور الأولي، أي التنسيق التلقائي.
الخاصية TEXT-INDENT
الخاصية 'TEXT-INDENT' هي خاصية تمنح إزاحة النصوص أفقياً، و تقبل ثلاث أنواع قيم و هم القيم المطلقة، القيم النسبية و القيم الشاملة.
القيم المطلقة و القيم النسبية للخاصية TEXT-INDENT
تقبل الخاصية 'TEXT-INDENT' جميع وحدات القيم المطلقة و القيم النسبية (يمكنكم التطرق إلى ماهية القيم المطلقة و القيم النسبية و وحداتهما في هذا الدرس) لكن الإزاحة تتم حسب نوع لغة النص، فمثلاً إذا أردنا إزاحة نص مكتوب باللغة العربية التي هي لغة RTL يميناً، يجب إقحام قيمة سالبة، و إذا أردنا إزاحته يساراً يجب إقحام قيمة موجبة، و العكس بالنسبة للغات LTR.
القيم الشاملة للخاصية TEXT-INDENT
• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-INDENT'، تُورِّث القيمة 'INHERIT' للنص الإزاحة الأفقية من العنصر المحتوي.
• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-INDENT'، تعطل القيمة 'INITIAL' الإزاحة.
الخاصية TEXT-SHADOW
الخاصية 'TEXT-SHADOW' هي خاصية تمنح ظل للنصوص، وتقبل قيمتين خاصتين و قيمتين شاملتين.
القيم الخاصة للخاصية TEXT-SHADOW
• القيمة الخاصة المركبة : تكون القيمة الخاصة المركبة للخاصية 'TEXT-SHADOW' كالآتي Nx Ny Nr Nc
- Nx هي القيمة المسؤولة على تغيير الإزاحة الأفقية للظل، و هي إجبارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية، و بكونها قيمة موجبة سيزاح الظل يميناً، أما بكونها قيمة سالبة سيزاح الظل يساراً.
- Ny هي القيمة المسؤولة على تغيير الإزاحة العمودية للظل، و هي إجبارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية، و بكونها قيمة موجبة سيزاح الظل إلى الأسفل، أما بكونها قيمة سالبة سيزاح الظل إلى الأعلى.
- Nr هي القيمة المسؤولة على تغيير شعاع الإنتشار الضبابي للظل، و هي اختيارية في القيمة، و تكون عبارة عن قيمة مطلقة أو قيمة نسبية.
- Nc هي القيمة المسؤولة على تغيير لون الظل، و هي اختيارية في القيمة، و تكون عبارة عن قيمة بإسم اللون أو بـ Hexadecimal أو بـ RGB أو بـ RGBa.
يمكن إنشاء بالقيمة الخاصة المركبة ظل مزاح عن النص بإعطاء لـ Nx و Ny قيم سالبة أو موجبة أو مختلطة، و يمكن إنشاء بالقيمة الخاصة المركبة ظل موسَّط، و ذلك بإعطاء لـ Nx و Ny قيم منعدمة تساوي 0.
• NONE : هي القيمة التلقائية للخاصية بحيث عند تواجدها تقوم بحذف الظل الموروث من العنصر المحتوي.
القيم الشاملة للخاصية TEXT-SHADOW
• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'TEXT-SHADOW'، تُورِّث القيمة 'INHERIT' للنص الظل من العنصر المحتوي.
• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'TEXT-SHADOW'، ترجع القيمة 'INITIAL' النص إلى القيمة التلقائية للخاصية التي هي 'NONE'، و بالتالي تقوم بحذف الظل من النص.
الفيديو التوضيحي للدرس
الخاصية LINE-HEIGHT
الخاصية 'LINE-HEIGHT' هي خاصية تمنح إمكانية التعديل على المسافة التي بين أسطر النصوص، و تقبل خمس أنواع قيم و هم قيمة خاصة، قيمة الأرقام، القيم المطلقة، القيم النسبية و القيم الشاملة.
القيمة الخاصة للخاصية LINE-HEIGHT
تسمى القيمة الخاصة للخاصية 'LINE-HEIGHT' بـ 'NORMAL'، و هي القيمة التلقائية للخاصية بحيث في تواجدها تكون المسافة بين السطور حسب التنسيق التلقائي.
قيمة الأرقام للخاصية LINE-HEIGHT
يكتب في قيمة الخاصية 'LINE-HEIGHT' رقم يضرب في قيمة 'FONT-SIZE' لخط النص ليكون الجداء هو المسافة بين أسطر النص.
القيم المطلقة للخاصية LINE-HEIGHT
تقبل الخاصية 'LINE-HEIGHT' جميع وحدات القيم المطلقة.
القيم النسبية للخاصية LINE-HEIGHT
تقبل الخاصية 'LINE-HEIGHT' جميع القيم النسبية.
القيم الشاملة للخاصية LINE-HEIGHT
• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'LINE-HEIGHT'، تُورِّث القيمة 'INHERIT' للنص المسافة بين أسطره من العنصر المحتوي له.
• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'LINE-HEIGHT'، ترجع القيمة 'INITIAL' المسافة بين أسطر النص إلى المسافة الأولية حسب التنسيق التلقائي.
الخاصية VERTICAL-ALIGN
الخاصية 'VERTICAL-ALIGN' هي خاصية تمنح إمكانية التعديل على الإزاحة العمودية أو ما تعرف بالمحاذاة للعنصر نسبة إلى عناصر أخرى Inline معه، و تقبل أربع أنواع قيم و هم القيم الخاصة، القيم المطلقة، القيم النسبية و القيم الشاملة.
القيم الخاصة للخاصية VERTICAL-ALIGN
• BASELINE : هي القيمة التلقائية للخاصية بحيث عند تواجدها تكون الوضعية العمودية للعنصر هي نفس الوضعية العمودية للعناصر الـ Inline معه.
• SUPER : قيمة تزيح العنصر إلى خط الأساس المرتفع للعنصر المحتوي له.
• SUB : قيمة تزيح العنصر إلى خط الأساس المنخفض للعنصر المحتوي له.
• TOP : قيمة تُمكِّن محاذاة العنصر مع أعلى عنصر في السطر.
• MIDDLE : قيمة تضع العنصر في المنتصف العمودي للعنصر المحتوي له.
• BOTTOM : قيمة تُمكِّن محاذاة العنصر مع أدنى عنصر في السطر.
• TEXT-TOP : قيمة تُمكِّن محاذاة العنصر مع أعلى الخط للعنصر المحتوي له.
• TEXT-BOTTOM : قيمة تُمكِّن محاذاة العنصر مع أدنى الخط للعنصر المحتوي له.
القيم المطلقة للخاصية VERTICAL-ALIGN
تقبل الخاصية VERTICAL-ALIGN جميع وحدات القيم المطلقة مع الأخذ بعين الإعتبار القيم الموجبة و السالبة، فالموجبة تزيح العنصر إلى الأعلى، أما السالبة فتزيح العنصر إلى الأسفل.
القيم النسبية للخاصية VERTICAL-ALIGN
تقبل الخاصية VERTICAL-ALIGN جميع القيم النسبية مع الأخذ بعين الإعتبار القيم الموجبة و السالبة، فالموجبة تزيح العنصر إلى الأعلى نسبة إلى 'LINE-HEIGHT'، أما السالبة فتزيح العنصر إلى الأسفل نسبة إلى 'LINE-HEIGHT'.
القيم الشاملة للخاصية VERTICAL-ALIGN
• INHERIT : قيمة شاملة تورث العنصر ستايل خواص CSS من العنصر المحتوي له، و في حالة الخاصية 'VERTICAL-ALIGN'، تُورِّث القيمة 'INHERIT' للعنصر المحاذاة من العنصر المحتوي له.
• INITIAL : قيمة شاملة تُرجع العنصر إلى القيم التلقائية لخواص CSS، و في حالة الخاصية 'VERTICAL-ALIGN'، تُرجع القيمة 'INITIAL' العنصر إلى الوضعية العمودية الأولية له، أي التنسيق التلقائي.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس