تنسيق النص
وعلى غرار هذا النص مع بعض من خصائص تنسيق النص. يستخدم عنوان ل text-align, text-transform ، و color خصائص. وبادئة الفقرة، الانحياز، ويتم تحديد المسافة بين الحروف. تتم إزالة التسطير من هذا اللون "انها محاولة لنفسك" الارتباط.
لون الخط
و color يستخدم خاصية لتعيين لون النص.
مع CSS، وغالبا ما يتم تحديد اللون عن طريق:
- اسم اللون - مثل "red"
- قيمة HEX - مثل "#ff0000"
- قيمة RGB - مثل "rgb(255,0,0)"
انظروا إلى قيم اللون CSS للحصول على قائمة كاملة من القيم الألوان الممكنة.
يتم تعريف لون النص الافتراضي لصفحة في محدد الجسم.
 | ملاحظة: للحصول علىW3C المتوافقة مع CSS: إذا قمت بتعريف color الملكية، يجب عليك أيضا تحديد background-color الممتلكات. |
|---|
محاذاة النص
و text-align يستخدم الملكية لضبط المحاذاة الأفقية للنص.
نص يمكن ترك أو محاذاة اليمين، تركزت، أو تبريره.
المثال التالي يوضح بالوسط، واليسار واليمين النص محاذاة (محاذاة اليسار هو الافتراضي إذا تم ترك إلى اليمين اتجاه النص، ومحاذاة اليمين هو الافتراضي إذا اتجاه النص من اليمين إلى اليسار):
عندما text-align تم تعيين الخاصية إلى "justify" ، ويمتد كل سطر بحيث كل سطر يحتوي العرض على قدم المساواة، والهوامش اليمنى واليسرى على التوالي (كما هو الحال في المجلات والصحف):
الديكور النص
و text-decoration يستخدم خاصية لتعيين أو إزالة الزينة من النص.
قيمة text-decoration: none; وكثيرا ما يستخدم لإزالة تسطير من الروابط التالية:
وغيرها من text-decoration تستخدم القيم لتزيين النص:
مثال
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} انها محاولة لنفسك » | ملاحظة: لا ينصح لتسطير النص غير وصلة، وهذا غالبا ما يخلط القارئ. |
|---|
تحويل النص
ل text-transform يستخدم الخاصية لتحديد الأحرف الكبيرة والصغيرة في النص.
ويمكن استخدامه لتحويل كل شيء إلى الأحرف الكبيرة أو الصغيرة، أو تكبير الحرف الأول من كل كلمة:
مثال
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} انها محاولة لنفسك » المسافة البادئة النص
و text-indent يستخدم الخاصية لتحديد المسافة البادئة للسطر الأول من النص:
المسافات بين الحروف
و letter-spacing يستخدم الخاصية لتحديد المسافة بين الحروف في النص.
يوضح المثال التالي كيفية زيادة أو إنقاص المسافة بين الأحرف:
ارتفاع خط
على line-height يستخدم خاصية لتحديد المسافة بين السطور:
اتجاه النص
في direction يستخدم خاصية لتغيير اتجاه النص من عنصر:
كلمة تباعد
و word-spacing يستخدم الخاصية لتحديد المسافة بين الكلمات في النص.
يوضح المثال التالي كيفية زيادة أو إنقاص مسافة بين الكلمات:
المزيد من الأمثلة
تعطيل التفاف النص داخل عنصر
يوضح هذا المثال كيفية تعطيل التفاف النص داخل عنصر.
المحاذاة العمودية للصورة
يوضح هذا المثال كيفية تعيين محاذاة عمودية من صورة في النص.
إضافة الظل إلى نص
يوضح هذا المثال كيفية إضافة الظل إلى النص.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »
جميع خصائص CSS النص
| الملكية | وصف |
|---|---|
| color | يحدد لون النص |
| direction | تحدد اتجاه النص / الكتابة الاتجاه |
| letter-spacing | يزيد أو يقلل من المسافة بين الأحرف في النص |
| line-height | تحدد ارتفاع الخط |
| text-align | يحدد المحاذاة الأفقية النص |
| text-decoration | يحدد اضاف الديكور إلى نص |
| text-indent | يحدد المسافة البادئة للسطر الأول في كتلة النص |
| text-shadow | يحدد تأثير الظل وأضاف إلى نص |
| text-transform | تسيطر على رسملة النص |
| unicode-bidi | تستخدم جنبا إلى جنب مع الاتجاه الملكية لتعيين أو العودة إذا كان ينبغي تجاوز النص لدعم لغات متعددة في نفس الوثيقة |
| vertical-align | يحدد المحاذاة العمودية عنصر |
| white-space | تحدد كيفية التعامل مع الفضاء الأبيض داخل عنصر |
| word-spacing | يزيد أو يقلل من مسافة بين الكلمات في النص |