النص في CSS

خصائص النص في CSS تسمح لك بتحديد أنماط النص بسهولة وكفاءة، مثل اللون،طريقة التوجيه، المسافة، الزينة، والتغييرات.

استخدام CSS لتشكيل النص

يملك CSS عدة خصائص تستخدم لتحديد أنماط النص. هذه الخصائص تسمح لك بتحكم دقيق فيحرف،مسافة،كلمة،فقرةمن مظهرها البصري.

يمكنك تعيين الخاصيات النصية التالية للعناصر:

لون النص

لون النص يتم تحديده بواسطة CSS colorتعريف الخاصية.للإطلاع على معلومات أكثر حول color.

h1　{
　　　　color: #ff0000;
}
p　{
　　　　color: green;
}

توجيه النص

هذاtext-alignيستخدم الخصائص هذه لتحديد طريقة التوجيه الأفقية للنص.

القيم المحتملة لهذه الخاصية هي: left،right،center،justify،و inherit.

h1　{
　　　　text-align: center;
}
p　{
　　　　text-align:　justify;
}

زينة النص

هذاtext-decorationيستخدم هذا property لضبط أو إزالة تزيين النص.

القيم المحتملة لهذه الخاصية هي: none،underline،overline،line-through،blink و inherit. يجب تجنب استخدام هذه القيم في النص غير الموصوف بالروابط، حيث قد يسبب ذلك إرباكًا للزوار.

h1　{
　　　　text-decoration:　overline;
}
h2　{
　　　　text-decoration:　line-through;
}
h3　{
　　　　text-decoration:　underline;
}

حذف الخط الأسفل الافتراضي للروابط

يستخدم property text-decoration عادة لازالة الخط الأسفل الافتراضي من الروابط. قد يسبب حذف الخط الأسفل الافتراضي إرباكًا للزوار، إلا إذا قدمت توصيفات بصرية أخرى لجعله يبرز، مع تصميم نمط الروابط.

على سبيل المثال، يمكنك استخدام نقاط بدلاً من الخطوط المستقيمة في خط أسفل الروابط.

a　{
　　　　text-decoration:　none;
　　　　border-bottom:　1px　dotted;
}

تحويل النص

يستخدم property text-transform لضبط حجم النص.

يمكن استخدامها لضبط محتوى النص الخاص بالعنصر إلى أحرف كبيرة أو صغيرة أو لتحويل أول حرف من كل كلمة إلى حرف كبير. القيم المحتملة لـ property text-transform هي: none،capitalize،uppercase،lowercase و inherit.

p.up　{
　　　　text-transform:　uppercase;
}
p.cap　{
　　　　text-transform:　capitalize;
}
p.low　{
　　　　text-transform:　lowercase;
}

تدرج النص

يستخدم property text-indent لضبط تدرج النص الأول للعنصر. القيم المحتملة لـ property text-indent هي:النسبة المئوية(%)،الطولأو inherit.

المثال التالي يوضح كيفية تدرج السطر الأول من الفقرة.

p　{
　　　　text-indent:　100px;
}

مسافة الكلمة

property word-spacing تستخدم لضبط مسافة بين الكلمات.

• التباعد بين الأحرف قد يتأثر بطريقة تنسيق النص. انظرtext-alignالخصائص.

• عند الحفاظ على الفراغات، يؤثر كل حرف فراغ على مسافة الكلمة. يرجى الرجوع إلى CSS white-spaceالخصائص.

القيم المحتملة لهذه الخاصية هي:lengthمحدد الفواصل بين الكلمات،normal والوراثة.

p.one　{
　　　　word-spacing:　20px;
}
p.two　{
　　　　word-spacing:　20px;
　　　　text-align:　justify;
}
p.three　{
　　　　word-spacing:　20px;
　　　　white-space:　pre;
}

مسافة الحرف

هذاletter-spacingالخصائص تستخدم لضبط الفواصل بين أحرف النص.

القيم المحتملة لهذه الخاصية هي:lengthمحدد القيمة الافتراضية للفراغ بين الأحرف normal والفراغ الإضافي بين الأحرف والوراثة.

h1　{
　　　　letter-spacing:　-3px;
}
p　{
　　　　letter-spacing:　10px;
}

مسافة السطر

هذاline-heightتعريف الخاصية لارتفاع سطر النص (يسمى أيضًاLead）。

القيم المحتملة لهذه الخاصية هي:النسبة المئوية(%)،الطول،العدد،normal وinherit.

p　{
　　　　line-height:　1.2;
}

عندما تكون القيمة عددًا، يتم حساب الارتفاع بين السطور عن طريق ضرب حجم الخط للعنصر في الرقم. بينما تكون النسبة المئوية مقارنة حجم الخط للعنصر.

إذا كان قيمة الخاصية line-height أكبر منfont-sizeالقيمة للعنصر، فإن هذا الاختلاف (يسمىمقدم）مقسوم إلى نصفين (يسمىمقدم)، وتوزع بالتساوي في الصفوف العليا والسفلية للصندوق في in.

p　{
　　　　font-size:　14px;
　　　　line-height:　20px;
　　　　background-color:　#f0e68c;
}

للحصول على معلومات إضافية حول تنسيق النص، يرجى الرجوع إلىالخطوالنصالخصائص.