سمة style

يتبع هذا العنصر ل لغة css ويتم توصييف عناصر html واعطائها بعض الاشكال والخصائص من خلالة

<اسم_الوسم style=”قيمتها:الخاصية;“>

مثال

<body style="background-color:red;">

سوف تتعلم المزيد عن css فيما بعد


لون خلفية HTML

تحدد الخاصية “background-color” لون الخلفية لعناصر HTML.

سوف يعين هذا المثال لون الخلفية لصفحة إلى اللون الاحمر

مثل

<!DOCTYPE html>
<html>
<body style="background-color:red;">

<h1>اول عنوان لي</h1>
<p>اول قطعة لي</p>

</body>

</html>

لون نص HTML

تحدد الخاصية color لون النص لعنصر معين

مثل

<!DOCTYPE html>
<html>
<body style="background-color:red;">

<h1 style="color:blue;">اول عنوان لي</h1>
<p style="color:wight;">اول قطعة لي</p>

</body>

</html>

خطوط HTML

تعرف الخاصية font-family الخط المراد استخدامه لعنصر معين ويوجد الكثير من الخطوط سنأخذ احدها كمثال

يوجد الكثير والكثير من الخطوط بأشكال مختلفة لكل

مثل

<!DOCTYPE html>
<html>
<body style="background-color:red;">
  
<h1 style="font-family:courier;">انت هو الافضل</h1>
<p style="font-family:courier;">انت هو الافضل</p>
  <!-- لاحظ الاختلاف بين النصين -->
<h1>انت هو الافضل</h1>
<p>انت هو الافضل</p>
  
</body>
</html>

حجم نص HTML

تحدد الخاصية font-size حجم النص لعنصر معين متجاهلا نوع الخط ان كان <h1> او حتي <p>

مثل

<!DOCTYPE html>
<html>
<body>
 
<h1 style="font-size:300%;">انت هو الافضل</h1>
<p style="font-size:160%;">انت هو الافضل</p>
    <!-- لاحظ الاختلاف بين النصين --> 
  <h1>انت هو الافضل</h1>
<p>انت هو الافضل</p>
</body>
</html>

محاذاة نص HTML

تحدد الخاصية text-align محاذاة النص الأفقي لعنصر معين وتقوم هي بتحريكة حسبا تصف انت

مثل

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">انت هو الافضل</h1>
<p style="text-align:right;">انت هو الافضل</p>
  <p style="text-align:left;">انت هو الافضل</p>
      <!-- لاحظ الاختلاف بين النصين --> 
<h1>انت هو الافضل</h1>
<p>انت هو الافضل</p>
</body>
</html>

هل يمكن استخدام العديد من الخواص في ان واحد؟

نعم صحيح كما خمنت صديقي يمكنك جمع عدد من الخواص في عنصر واحد شرط عدم تضاربها

كمثال لا يمكنك وصف العنصر بتحريكه الي المنتصف ثم تقوم باضافة بعده تحريكه الي اليسار

ستعمل احد الخواص متجاهلة الأخري غير ذلك سيكون كل شئ جيد

ايضا يمكن وضع خلفية للنص دون باقي العناصر

مثال

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;font-size:160%;color:blue;">انت هو الافضل</h1>
  <!-- لاحظ العنصر اصبح وراءه لون احمر بدون تلوين خلفية باقي العناصر -->
<p style="text-align:right;background-color:red;">انت هو الافضل</p>
  <p style="text-align:left;">انت هو الافضل</p>

</body>
</html>

ملخص الفصل

  • يتم استخدام السمة style لتصميم عناصر
  • استخدام background-color لون الخلفية
  • يتم استخدام color ألوان النص
  • استخدام font-family خطوط النص
  • يتم استخدام font-size لتغيير أحجام النص
  • استخدم text-align لمحاذاة النص وتحريكة