تأثيرات على الكتابة في css
دائماً مع تنسيق النص بلغة CSS3 و في هاته الحصة سنتطرق إلى:
- تسطير الكتابة ( تسطير من تحت، تشطيب، خط فوق الكتابة و وميض )
- تصفيف الكتابة ( يمين، يسار، وسط و ضبط الكتابة )
تسطير الكتابة :
في هذا الصدد يـتيح لنا CSS خاصية text-decoration التي تسمح بتسطير الكتابة و قيم أخرى كما يلي:
underline: تسطير.
line-through: تشطيب.
overline: خط فوق الكتابة.
blink: كتابة تُحْدِث و ميض . و هذا النوع لا يعمل مع كل المتصفحات ( لا يعمل مثلاً مع Internet Explorer و Google Chrome.)
وهنا سنجرب تأثيرات text-decoration :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.salutations { text-decoration: overline; } /*خط فوق الكتابة */ h1 { text-decoration: blink; } /* خط بوميض */ h2 { text-decoration: underline; } /* خط مسطر */ em { text-decoration: line-through; } /* خط مشطب */ p { text-decoration: normal; } /* خط عادي */ |
تأثيرات على الكتابة في css
تنسيق النص ” L’alignement du texte “
تسمح لنا لغة CSS بالقيام بجميع التنسيقات المعروفة: اليسار، الوسط، اليمين و الضبط ( justifié ).
هاته العملية جد مهمة، و يجب معرفة مدى أهمية استعمالها في تنسيق محتويات الموقع :
left (يسار) : سيتم إزاحة النص إلى اليسار.
Centre (الوسط): سيتم توسيط النص
Right ( اليمين) : سيتم إزاحة النص إلى اليمين.
justify : النص سيم ضبطه من كلا الطرفين. و هذا النوع من التنسيق يستعمل بشكل اعتيادي في نصوص الصحف و المجلات، لأنه لا يترك أي مساحة بيضاء في نهاية الأسطر.
وهنا نجرب تنسيقات مختلفة :
نفتح محرر النصوص و اليكن : Notepad++
و نلصق فيه هاته الشفيرة:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html dir="rtl"> <head> <meta charset = "utf-8"/> <link rel="stylesheet" href="style.css" /> <title>الفصل الثاني في برمجة مواقع االويب </title> </head> <body> <h1> هنا العنوان في الوسط </h1> <h2> هنا الكتابة تظهر في اليمين</h2> <p> أهلاً و مرحباً بكم في موقعي الجديد ! تسمح لنا لغة CSS بالقيام بجميع التنسيقات المعروفة: اليسار، الوسط، اليمين و الضبط ( justifié ).هاته العملية جد مهمة، و يجب معرفة مدى أهمية استعمالها في تنسيق محتويات الموقع : justify : النص سيم ضبطه من كلا الطرفين. و هذا النوع من التنسيق يستعمل بشكل اعتيادي في نصوص الصحف و المجلات، لأنه لا يترك أي مساحة بيضاء في نهاية الأسطر. </p> <p class="signature"> موقع جابيسم </p> </body> </html> |
سجل المحتوى في ملف بامتداد HTML.
ثم افتح محرر النصوص مرة أخرى و ألصق هاته الشفيرة:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h1 { text-align: center; } h2 { text-align: right; } p { text-align: justify; } .signature { text-align: left; } |
سجل المحتوى في ملف بامتداد CSS واليكن style.css ثم افتح ملف html و اضغط على F5 و شاهد النتيجة المطابقة لهذا الشكل:
محاذاة النص: وسط، يمين، ضبط و يسار
إذا توصلت إلى نفس النتيجة ، فأنت متتبع جيد! أشجعك و أتمنى لك مسيرة موفقة!
الرجوع لقائمة المزيد من تنسيقات النصوص