كيفية استخدام صفة Style لتغيير حجم الخط ونوعه

صفة Style هي الاستخدام الأبسط للغة CSS داخل صفحات الويب، فبالعادة يُمكن كتابة ملف التنسيق بشكل مُنفصل ثم نقوم بإستعادئه داخل صفحة الويب.

وتُوفر الصفة Style مجموعة كبيرة من الخيارات التي يُمكن استخدامها، فبعد التعرّف على خيار تغيير اللون، دعنا نستخدم خيارات تغيير حجم الخط ونوعه.

قُم بإنشاء ملف جديد مع كتابة الوسوم الأساسية.

قُم بكتابة ثلاثة فقرات باستخدام وسم p لتحصل على الشيفرة

<html> <head> <title> كيف برمجة | تغيير حجم الخط ونوعه </title> </head> <body> فقرة أولى بحجم خط مُختلف فقرة ثانية بنوع خط مُختلف فقرة ثالثة بنوع خط مُختلف </body> </html>

1

2

3

4

5

6

7

8

9

10 <html>

<head>

<title> كيف برمجة | تغيير حجم الخط ونوعه </title>

</head>

<body>

فقرة أولى بحجم خط مُختلف

فقرة ثانية بنوع خط مُختلف

فقرة ثالثة بنوع خط مُختلف

</body>

</html>

الآن نستخدم في الفقرة الأولى الخيار font-size والذي من خلاله يُمكن التحكم بحجم الخط، القيم التي يُمكن استخدامها كثيرة، حيث يُمكن كتابة small، x-small أو medium. كما يُمكن كتابة القيمة بشكل رقمي مع تحديد الوحدة مثل “٪”، “px” بيسكل، “em” أو “pt”.
في مثالنا سنستخدم البيكسل كوحدة لتمثيل الأرقام، وبعد إضافة أي قيمة نحصل على الشيفرة

XHTML

 فقرة أولى بحجم خط مُختلف

1

فقرة أولى بحجم خط مُختلف
بعد حفظ الصفحة ومعاينة التغييرات تُلاحظ عرض فقرة بحجم الخط الذي قُمت بتحديده، قم بتغيير القيمة من 20 إلى 40 لتلاحظ الفرق من جديد.

لتغيير نوع الخط يُمكن الإستعانة بخيار font-family، ومن الخطوط الشهيرة Tahoma أو Times New Roman، في مثالنا سنستخدم أكثر من خط لمشاهدة الفرق

فقرة ثانية بنوع خط مُختلف فقرة ثالثة بنوع خط مُختلف

1 2	<p style="font-family:Tahoma;">فقرة ثانية بنوع خط مُختلف</p> <p style="font-family:'Times New Roman';">فقرة ثالثة بنوع خط مُختلف</p>

تُلاحظ أن كل جملة من الجمل الجديدة تظهر بخط مُختلف عن الآخر، ويُمكنك تجربة المزيد من الخطوط حيث يُمكن فتح برامج مثل مايكروسوفت وورد للإطلاع على الخطوط الموجودة.
مُلاحظة هامة جدًا: يجب تضمين اسم الخط ضمن “اسم الخط” في حالة كان مُكونًا من أكثر من قسم مثل Times New Roman، أما خط Tahoma فيُمكن كتابته دون علامات التنصيص.

قد تتساءل عن إمكانية استخدام أكثر من خيار لنفس العنصر، فمثلًا قد ترغب بعرض فقرة بخط Tahoma وبحجم 40 بيسكل هذا بالطبع مُمكن ويتم بالطريقة التالية

فقرة ثانية بنوع خط مُختلف

1	<p style="font-family:Tahoma; font-size:40px; color:RED;">فقرة ثانية بنوع خط مُختلف</p>

بهذه الطريقة نكون قد تعرّفنا على طريقة كتابة شيفرات باستخدام CSS :)، نعم الأمر بهذه البساطة وسنستعرض فيما بعد طريقة كتابة هذه الشيفرات في ملف مُنفصل.

Arlina Theme

Arlina Design merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar blogger dan template khusus blogger.

Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi Anda semua. Terima kasih.

كيفية استخدام صفة Style لتغيير حجم الخط ونوعه

صفة Style هي الاستخدام الأبسط للغة CSS داخل صفحات الويب، فبالعادة يُمكن كتابة ملف التنسيق بشكل مُنفصل ثم نقوم بإستعادئه داخل صفحة الويب.

وتُوفر الصفة Style مجموعة كبيرة من الخيارات التي يُمكن استخدامها، فبعد التعرّف على خيار تغيير اللون، دعنا نستخدم خيارات تغيير حجم الخط ونوعه.

قُم بإنشاء ملف جديد مع كتابة الوسوم الأساسية.

قُم بكتابة ثلاثة فقرات باستخدام وسم p لتحصل على الشيفرة

XHTML

1

2

3

4

5

6

7

8

9

10

<html>

<head>

<title> كيف برمجة | تغيير حجم الخط ونوعه </title>

</head>

<body>

<p style="">فقرة أولى بحجم خط مُختلف</p>

<p style="">فقرة ثانية بنوع خط مُختلف</p>

<p style="">فقرة ثالثة بنوع خط مُختلف</p>

</body>

</html>

في مثالنا سنستخدم البيكسل كوحدة لتمثيل الأرقام، وبعد إضافة أي قيمة نحصل على الشيفرة

XHTML

<p style="font-size:20px;"> فقرة أولى بحجم خط مُختلف</p>

1

<p style="font-size:20px;">فقرة أولى بحجم خط مُختلف</p>

بعد حفظ الصفحة ومعاينة التغييرات تُلاحظ عرض فقرة بحجم الخط الذي قُمت بتحديده، قم بتغيير القيمة من 20 إلى 40 لتلاحظ الفرق من جديد.

لتغيير نوع الخط يُمكن الإستعانة بخيار font-family، ومن الخطوط الشهيرة Tahoma أو Times New Roman، في مثالنا سنستخدم أكثر من خط لمشاهدة الفرق

XHTML

<p style="font-family:Tahoma;"> فقرة ثانية بنوع خط مُختلف</p> <p style="font-family:'Times New Roman';"> فقرة ثالثة بنوع خط مُختلف</p>

1

2

<p style="font-family:Tahoma;">فقرة ثانية بنوع خط مُختلف</p>

<p style="font-family:'Times New Roman';">فقرة ثالثة بنوع خط مُختلف</p>

تُلاحظ أن كل جملة من الجمل الجديدة تظهر بخط مُختلف عن الآخر، ويُمكنك تجربة المزيد من الخطوط حيث يُمكن فتح برامج مثل مايكروسوفت وورد للإطلاع على الخطوط الموجودة.

مُلاحظة هامة جدًا: يجب تضمين اسم الخط ضمن “اسم الخط” في حالة كان مُكونًا من أكثر من قسم مثل Times New Roman، أما خط Tahoma فيُمكن كتابته دون علامات التنصيص.

قد تتساءل عن إمكانية استخدام أكثر من خيار لنفس العنصر، فمثلًا قد ترغب بعرض فقرة بخط Tahoma وبحجم 40 بيسكل هذا بالطبع مُمكن ويتم بالطريقة التالية

XHTML

<p style="font-family:Tahoma; font-size:40px; color:RED;"> فقرة ثانية بنوع خط مُختلف</p>

1

<p style="font-family:Tahoma; font-size:40px; color:RED;">فقرة ثانية بنوع خط مُختلف</p>

بهذه الطريقة نكون قد تعرّفنا على طريقة كتابة شيفرات باستخدام CSS :)، نعم الأمر بهذه البساطة وسنستعرض فيما بعد طريقة كتابة هذه الشيفرات في ملف مُنفصل.

Artikel Terkait

Penulisan markup di komentar

No comments