شاركـ أصدقائك

كورس HTML | شرح الأنماط (styles) | موقع فولدرات

الرئيسية / الحاسب الآلي / لغات البرمجة / HTML / كورس HTML | شرح الأنماط (styles)

القرآن الكريم كامل المصحف الذكي (جديد) , المصحف النصي

شرح html للمبتدئين

تستخدم سمة نمط HTML Style لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم وغيرها.

مثال :

<!DOCTYPE html>
<html>
<body>
 
<p>السلام عليكم</p>
<p style="color:red;">السلام عليكم</p>
<p style="color:green;">السلام عليكم</p>
<p style="font-size:50px;">السلام عليكم</p>

</body>
</html>

الناتج كالآتي :

html style شرح إضافة لون للخط و تغيير حجم الخط

سمة نمط HTML :

يمكن تحديد نمط عنصر HTML باستخدام سمة النمط attribute.

تحتوي سمة نمط HTML على بناء الجملة التالي:

<tagname style="property:value;">

لون الخلفية : background-color

تحدد خاصية لون الخلفية لعنصر HTML.

مثال:

<!DOCTYPE html>
<html>
<body style="background-color:orange;">
 
<h1>هنا عنوان الصفحة</h1>
<p>هنا تكون الفقرة </p>
 
</body>
</html>

الناتج كالآتي :

html style شرح إضافة لون للخلفية background

مثال آخر:

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
 
<h1>هنا عنوان الصفحة</h1>
<p>هنا تكون الفقرة </p>
 
</body>
</html>

الناتج كالآتي :

html style شرح إضافة لون للخلفية background

لون الخط : color

تحدد خاصية لون النص لعنصر HTML.

مثال:

<!DOCTYPE html>
<html>
<body>
 
<h1 style="color:blue;">هنا عنوان الصفحة</h1>
<p style="color:red;">هنا تكون الفقرة</p>
 
</body>
</html>

الناتج كالآتي :

html style شرح color background

نوع الخط : font-family

تحدد خاصية عائلة الخطوط في CSS الخط الذي سيتم استخدامه لعنصر HTML.

مثال:

<!DOCTYPE html>
<html>
<body>
 
<h1 style="font-family:courier;">هنا عنوان الصفحة</h1>
<p style="font-family:arial;">هنا تكون الفقرة</p>
 
</body>
</html>

الناتج كالآتي :

html style شرح font-family background

حجم الخط : font-size

تحدد خاصية حجم النص لعنصر HTML.

مثال:

<!DOCTYPE html>
<html>
<body>
 
<h1 style="font-size:70px;">هنا عنوان الصفحة</h1>
<p style="font-size:50px;">هنا تكون الفقرة</p>
 
</body>
</html>

الناتج كالآتي :

html style شرح حجم الخط background

محاذاة النص : text-align

تحدد خاصية محاذاة النص لعنصر HTML.

مثال:

<!DOCTYPE html>
<html>
<body>
 
<h1 style="text-align:center;">هنا عنوان الصفحة</h1>
<p style="text-align:center;">هنا تكون الفقرة</p>
 
</body>
</html>