الدرس الرابع

النتسيق والألوان :

 

تستخدم الخاصية او السمة style   لإضافة تنسيق او لون .

 

مثال يوضح استخدام style  تفير لون الخلفية .

 

 

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

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

</body>

 

 
   

وأيضا يمكن استخدامها للعناوين والفقرات

 

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

 

 
   

 

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

# يمكن كتابة هذه الخواص مجتمعة في وسم واحد  ويفصل بينهما علامة فاصلة منقوطة.

<h1 style="color:blue; font-family: verdana; font-size :20">This is a heading</h1>

 

 


مثال :

 

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

 

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

<p style="font-family:arial; text-align:center">This is a paragraph.</p>

</body>

 

 

 
   

 

الالون :

الألوان لديها اكثر من تنيسق او طريقة لكتابة اللون

  1. اسم اللون .    bule
  2. كود اللون .

الكود له ثلاث صيغ  :

  • Rgb
  • HEX
  • HSL

 

هذا مثال علي درجة من اللون الأحمر  كلها تمثل نفس اللون .

 

HEX  #F9441E   

 RGB  249, 68, 30   

HSL   11, 88%, 55%

والان نري طريقة  استخدام هذه الصيغ مع وسم  STYLE

 

<p style="color: #F9441E;">This is a paragraph.</p>

 

<p style="color:RGB(249, 68, 30);">This is a paragraph.</p>

 

    <p style="color:HSL(11, 88%, 55%);">This is a paragraph.</p>