فاصلة
  • HTML
  • ?
    : ترتيب الدرس
  • 17
    عدد الدروس
  • ?
    أخر تحديث

الأنماط في لغة HTML

من هنا يبدأ الأبداع في استلام زمام الأمور , ومن هنا ايضاً يتم صناعة التصاميم الأحترافية , سنتحدث الأن عن خاصية Style , هي خاصية مسؤلة عن اضافة تصميم للوسم من حيث الألوان والحجم وكل ما يخطر علي عقلك ,يمكنك أن تقوم به بواسطة الوسم Style .

يوجد لغة أخري تسمي لغة Css وهي اللغة التي يتم ربطها باللغة HTML  لأضافة التصميم للموقع , وخاصية Style هي المسؤلة عن ربط لغة HTML  بــ Css

وسنتعلم اليوم خصائص ببسيطة من لغة Css لأضافتها الي الــ HTML بواسطة خاصية Style لتوضيح الفكرة

  • الخاصية Style هي مسئولة عن تطبيق اوامر CSS علي لغة HTML
  • يتم كتابة الخاصية Style  بداخل الوسم المطلوب تصميمة
  • يتم كتابة اكواد Css داخل الخاصية Style


لون الخط  Color

لون الخط من اهم الأشياء في التصميم لأن النصوص هي مرشد المستخدم في الموقع ويجب الأهتمام بها للوصول إلي درجة مرضية عن التصميم ,ولنفترض بأنك قمت بزيارة موقع ,أول شيء سوف تنظر إلية في الموقع هي النصوص لأجل معرفة عن ماذا يتحدث الموقع وما هو تخصصة ,في بعض التصاميم انت بحاجة الي لون خط أحمر او أخضر او غيرها من الألوان علي حسب متطلبات التصميم الذي تقوم بأنشاءة ,ولهذا نستخدم الخاصية Color وهي الخاصية المسؤولة عن تغيير لون الخط .  

<p style="color:green">Text Here</p>

الأمر عبارة عن تغيير لون االفقرة الي اللون الأخضر عن طريق الخاصية Style بداخلها الخاصية color وتم أختيار القيمة green وهو اللون الأخضر ,ويمكنك التحكم في الألوان عن طريق اكواد الــ hex أو الــ rgb

<p style="color:#008000">Text Here</p>
<p style="color:rgb(0,128,0)">Text Here</p>


حجم الخط Font Size

حجم الخط من الخصائص الهامة في لغة CSS لأنها تقوم بأختيار المقاس المناسب للخط ليتوافق مع المظهر العام للموقع ,ولنفترض مثلاً بأنك تقوم بكتابة نصوص في الموقع ويجب ان تكون النصوص بحجم اصغر من حجمها الطبيعي ,في تلك الحالة يجب تغيير الحجم الطبيعي للنصوص الي حجم أصغر لتوافق مع شكل التصمصم ,مع العلم بأن الحجم الطبيعي للخط في حالة عدم التعديل علية هو 16px .

  • عند اعطاء حجم محدد للخط نستخدم وحدات قياس الحجم  ومنها القيمة Pixel ويتم أختصارها الي الحرف p
  • يوجد وحدات قياس أخري لحجم الخط سنتعرف عليها في درس وحدات القياس
  • لا يوجد حد معين لأستخدام حجم الخط بحيث يمكنك أستخدام الحجم من 0  الي ما لا نهاية
 
<p style="font-size:20px">فقرة بحجم 20</p>
<p style="font-size:40px">فقرة بحجم 40</p>


محاذاة النص Text-align

تستخدم خاصية text-align  لتحديد مكان النص , وتأخذ ثلاثة قيم (اليمين- المنتصف - الشمال) (Left- Center- Right) يتم أستخدام الخاصية للتبديل بين النصوص الذي سيتم عرضها أقصي اليمين مثل اللغة العربية والنصوص الذي ستعرض أقصي الشمال مثل اللغة الاجنبية.

<p style="text-align:right">فقرة في يمين الصفحة</p>
<p style="text-align:left">فقرة في اقصي شمال الصفحة</p>
<p style="text-align:center">فقرة في منتصف الصفحة</p>


لون الخلفية Background-color

خاصية Background-color  مسؤولة عن تغيير لون الخلفية للعنصر وهي مختلفة عن خاصية color المسؤولة عن تغيير لون الخط ,لأن خلفية العنصر هي المساحة التي يأخذها العنصر من الصفحة ,

  • تستخدم خاصية Background-color لتغيير لون خلفية العنصر
  • الخلفية هي الجزء الموجود خلف العنصر في حالة النصوص كالتالي   Web 
  • يمكن أستخدام خاصية Background-color مع كل العناصر في HTML

 الكود التالي سيقوم بتغيير لون الخلفية الكاملة للموقع إالي اللون الأخضر  بسبب أضافة التأثير Background-color في الوسم body  ,لأن الوسم body هو واجهة الموقع بالكامل ,وعند تغيير اي شيء بداخلها سوف يظهر علي كامل الموقع .

<body style="background-color:green">


ملخص الدرس Style

  • الخاصية Color  هي المسؤولة عن تغيير لون الخط
  • الخاصية Font-Size  هي المسؤلة عن تغيير حجم الخط
  • الخاصية Text-Align  هي المسؤولة عن محاذاة النص
  • الخاصية Background-Color  هي المسؤولة عن تغيير لون الخلفية الخاصة بالعنصر
 
الأدوات أساسيات العناصر خصائص العناوين الفقرات الأنماط التنسيق التعليقات الألوان الروابط الصور الجداول القوائم الترتيب النماذج الميتا تاج