بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
سنبدأ اليوم بإذن الله في التطبيق العملي واستخدام خصائص css ، سننشئ ملف index.html داخل مجلد ، وملف css داخل نفس المجلد ونسميه مثلا style.css ونبدأ في تنسيق النصوص typographie .
سأجمع عدة خصائص في مثال واحد حتى لا تكون الصور كثيرة ، وقبل ذلك سأشرح كل خاصية على حدا ، ليكن كود html التالي :
خاصية color : تستخدم لإعطاء لون معين للنص ، وتكتب قيمتها بنظام السداسي Hexadecimal أو نظام rgb أو كتابة إسم اللون مباشرة ، وقد سبق لي أن شرحت نظام الألوان في دورة html فالمرجو العودة إليها لمن لا يعرف عنه شيئا.
خاصية text-align : تأخذ إحدى القيم right أو left أو center أو justify وبها نحدد موضع أو اتجاه النص .
خاصية line-height : تستخدم لتحديد المسافة بين سطور النص ، وتأخذ قيمة رقمية ب px أو em أو % .
وهذا مثال عملي على هذه الخصائص:
بالنسبة للفقرة p فقد قمت بتصغير عرضها width فقط كي يظهر لك تأثير text-align عندما تأخذ القيمة justify ، بحيث ينتظم النص من الجانبين تماما كما نفعل في برنامج word ، وهذه نتيجة الكود السابق:
خاصية text-transform : تستخدم مع الحروف الأجنبية لتحويل الحروف الصغيرة إلى كبيرة أو العكس ، وتأخذ القيمة uppercase أو lowercase .
خاصية letter-spacing : تتحكم في المسافة بين الحروف وتأخذ قيمة رقمية ب px أو em أو % ، وتستخدم مع الحروف الأجنبية .
خاصية word-spacing : تتحكم في المسافة بين الكلمات وتأخذ قيمة رقمية.
خاصية text-indent : تقوم بعمل إزاحة للسطر الأول إلى الداخل وتأخذ قيمة رقمية.
الآن سنضع كود html السابق ضمن تعليق لتعطيله ونكتب كود جديد :
سنقوم بعمل نفس الشيء في ملف css ، سنضع الكود السابق ضمن تعليق ، فقط التعليقات في لغة css تكتب بشكل مختلف ، وهذا مثال على تعليق من سطر واحد وتعليق من عدة أسطر :
وهذا هو كود css الجديد مع النتيجة :
نكتفي بهذا القدر ، وموعدنا في الدرس القادم مع استكمال خصائص التحكم في النصوص ، دمتم في رعاية الله وحفظه.