ويژگي استايل براي عناصرhtml يك ويژگي مركب ميباشد .بدين معني كه باآن ميتوان ويژگيهاي متعدد از جمله رنگ ، فونت ، اندازه فونت و...را تعريف نمود.
مثال ـ دراين مثال براي سه پاراگراف باstyle ويژگي اعلام شده است . مثال را اجرا كنيد ونتيجه را مشاهده كنيد.
<html> <body> <p>I am normal</p> <p style="color:red;">I am red</p> <p style="color:blue;">I am blue</p> <p style="font-size:50px;">I am big</p> </body> </html>
براي عناصرhtml با style ميتوان مقادير ويژگي هاي سبكشان رااعلام كرد .فرمت كلي مطابق زيراست.
ويژگيها ومقادير اعلامي در استايل، ويژگي ومقدار درفرمتCSS ميباشند .
نكته ـ در موردCSS مطالب اختصاصي بيشتري ارائه ميگردد.
ويژگيCSS background-color رنگ پس زمينه را براي عناصرHTML تعريف مينمايد .
مثال ـ در مثال زير رنگ پس زمينه صفحه را رنگpowderblue مقدار دهي ميكند.
<!DOCTYPE html> <html> <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
مثال ـ رنگ پس زمينه براي دو عنصرمختلف صفحه تنطيم ميشود.
<body> <h1style="background-color:powderblue;">This is a heading</h1> <p style="background-color:tomato;">This is a paragraph.</p> </body>
ويژگيCSS color در استايل رنگ متن عنصري را در صفحه تعريف ميكند .
مثال ـ درمثال زير رنگ متن دو عنصر<h1> و<p> را تعريف ميكند.
<h1style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
ويژگيCSS font-family فونت عناصرHTML را تعريف مينمايد .
مثال ـ تعريف فونت براي دو عنصر صفحه
<!DOCTYPE html> <html> <body> <h1style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> </body> </html>
ويژگيCSS font-size اندازه فونت متن را براي عنصر HTML تعريف مي نمايد .
مثال ـ استفاده ازfont-size
<!DOCTYPE html> <html> <body> <h1style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> </body> </html>
ويژگيCSS text-align تراز افقي متن عناصر Html را تعريف ميكند.تراز ميتواند مقاديرright,left و center را داشته باشد .
مثال ـ در اين مثال متن دو عنصر صفحه در مركز خطوط نمايش داده ميشوند.
<!DOCTYPE html> <html> <body> <h1style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> </body> </html>