صفة Style هي الاستخدام الأبسط للغة CSS داخل صفحات الويب، فبالعادة يُمكن كتابة ملف التنسيق بشكل مُنفصل ثم نقوم بإستعادئه داخل صفحة الويب.
وتُوفر الصفة Style مجموعة كبيرة من الخيارات التي يُمكن استخدامها، فبعد التعرّف على خيار تغيير اللون، دعنا نستخدم خيارات تغيير حجم الخط ونوعه.
- قُم بإنشاء ملف جديد مع كتابة الوسوم الأساسية.
- قُم بكتابة ثلاثة فقرات باستخدام وسم p لتحصل على الشيفرة
<html> <head> <title> كيف برمجة | تغيير حجم الخط ونوعه </title> </head> <body> <p style="">فقرة أولى بحجم خط مُختلف</p> <p style="">فقرة ثانية بنوع خط مُختلف</p> <p style="">فقرة ثالثة بنوع خط مُختلف</p> </body> </html> - الآن نستخدم في الفقرة الأولى الخيار font-size والذي من خلاله يُمكن التحكم بحجم الخط، القيم التي يُمكن استخدامها كثيرة، حيث يُمكن كتابة small، x-small أو medium. كما يُمكن كتابة القيمة بشكل رقمي مع تحديد الوحدة مثل “٪”، “px” بيسكل، “em” أو “pt”.
- في مثالنا سنستخدم البيكسل كوحدة لتمثيل الأرقام، وبعد إضافة أي قيمة نحصل على الشيفرة
<p style="font-size:20px;">فقرة أولى بحجم خط مُختلف</p>
- بعد حفظ الصفحة ومعاينة التغييرات تُلاحظ عرض فقرة بحجم الخط الذي قُمت بتحديده، قم بتغيير القيمة من 20 إلى 40 لتلاحظ الفرق من جديد.
- لتغيير نوع الخط يُمكن الإستعانة بخيار font-family، ومن الخطوط الشهيرة Tahoma أو Times New Roman، في مثالنا سنستخدم أكثر من خط لمشاهدة الفرق
<p style="font-family:Tahoma;">فقرة ثانية بنوع خط مُختلف</p> <p style="font-family:'Times New Roman';">فقرة ثالثة بنوع خط مُختلف</p> - تُلاحظ أن كل جملة من الجمل الجديدة تظهر بخط مُختلف عن الآخر، ويُمكنك تجربة المزيد من الخطوط حيث يُمكن فتح برامج مثل مايكروسوفت وورد للإطلاع على الخطوط الموجودة.
- مُلاحظة هامة جدًا: يجب تضمين اسم الخط ضمن “اسم الخط” في حالة كان مُكونًا من أكثر من قسم مثل Times New Roman، أما خط Tahoma فيُمكن كتابته دون علامات التنصيص.
قد تتساءل عن إمكانية استخدام أكثر من خيار لنفس العنصر، فمثلًا قد ترغب بعرض فقرة بخط Tahoma وبحجم 40 بيسكل هذا بالطبع مُمكن ويتم بالطريقة التالية
<p style="font-family:Tahoma; font-size:40px; color:RED;">فقرة ثانية بنوع خط مُختلف</p>
بهذه الطريقة نكون قد تعرّفنا على طريقة كتابة شيفرات باستخدام CSS :)، نعم الأمر بهذه البساطة وسنستعرض فيما بعد طريقة كتابة هذه الشيفرات في ملف مُنفصل.
وفقكم الله
مشكور جدا والله يعطيك العافية