HTML Styles
تُستخدم سمة نمط HTML لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم والمزيد.
سمة نمط HTML
يمكن تحديد نمط (style)عنصر HTML باستخدام سمة النمط.
تحتوي سمة نمط HTML على بناء الجملة التالي:
<tagname style = "property: value؛">
حيث property هي خاصية سي اس اس و value قيمة سي اس اس
سوف تتعلم المزيد عن CSS لاحقًا في دروس سي اس اس ان شاء الله.
لون الخلفية : Background Color
تحدد خاصية لون الخلفية Background Color في CSS لون الخلفية لعنصر HTML.
مثال
-------------------
<body style="background-color:powderblue;">
<h1>هذا عنزان</h1>
<p>هذه فقرة.</p>
</body>
------------------------------------------------
في المثال السابق يتم وضع خلفية للمستند باللون الازرق الفاتح يظهر المثال في المتصفح بالشكل :
هذا عنوان
هذه فقرة.
مثال آخر:
-------------------
<body>
<h1 style="background-color:powderblue;">هذا عنوان</h1>
<p style="background-color:tomato;">هذه فقرة.</p>
</body>
---------------------------------------------
في هذا المثال لوننا كل من خلفية العنوان والفقرة بلونين مختلفين يظهر المثال في المتصفح بالشكل :
هذا عنوان
هذه فقرة.
لون الخط : Text Color
تحدد خاصية لون CSS لون النص لعنصر HTML:
مثال :
-------------------
<h1 style = "color: blue؛"> هذا عنوان </ h1>
<p style = "color: red؛"> هذه فقرة. </ p>
----------------------------------
يظهر المثال السابق في المتصفح بالشكل :
هذا عنوان
هذه فقرة.
الخطوط : Fonts
تحدد خاصية عائلة الخطوط (font-family)في CSS الخط الذي سيتم استخدامه لعنصر HTML:
مثال :
-----------------------
<h1 style="font-family:verdana;">هذا عنوان</h1>
<p style="font-family:courier;">هذه فقرة.</p>
----------------------------------------
يظهر المثال بالشكل :
هذا عنوان
هذه فقرة.
حجم الخط : Text Size
تحدد خاصية حجم font-size الخط في CSS حجم النص لعنصر HTML:
مثال :
-----------------
<h1 style="font-size:300%;">هذا عنوان</h1>
<p style="font-size:160%;">هذه فقرة.</p>
-------------------------------------
يظهر المثال السابق في المتصفح بالشكل :
هذا عنوان
هذه فقرة.
محاذاة النص : Text Alignment
تحدد خاصية محاذاة النص text-align في CSS محاذاة النص الأفقية لعنصر HTML:
مثال :
-------------------
<h1 style="text-align:right;">عنوان في اليمين</h1>
<p style="text-align:right;">فقرة في اليمين.</p>
-------------------------------------
يظهر هذا المثال بالشكل :
هذا عنوان
هذه فقرة.
ملخص الدرس :
- استخدم سمة النمط
styleلتصميم عناصر HTML - استخدم لون الخلفية background-color لتلوين الخلفية
- استخدم اللونcolor لتلوين النص
- استخدم مجموعة الخطوط font-family لخطوط النص
- استخدم حجم الخط font-size لتغيير حجم النص
- استخدم محاذاة النص text-align لمحاذاة النص
انتهى الدرس .
ليست هناك تعليقات:
إرسال تعليق