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