با عرض سلام و خسته نباشید خدمت کاربران عزیز وبسایت پرنیان طرح
در این قسمت میخواهیم با استایل html و نحوه استایل دادن به محتوا و عناصر صفحه آشنا شویم.
معرفی style ها:
داخل تگی که میخواهیم استایل بدهیم style را مینویسیم و نوع خاصیت و مقدار آن را مشخص میکنیم.
خصوصیات همان ویژگی ها در css هستند و مقدار خصوصیات همان مقدار است که برای ویژگی ها در css اعمال میشد.
style داخل تگ های HTML برای تغییر ظاهر تگ نوشته میشود و هر چه به عنوان مقادیر داخل style نوشته میشود در واقع همان دستورات css است.
رنگ پس زمینه در HTML:
برای رنگ دادن به پس زمینه از صفت background-color در HTML استفاده مینماییم و مقدار دلخواهمان را به آن میدهیم.
[html]
<body style=”background-color:blue;”>
</body>
[/html]
در تگ body مقدار background-color را blue قرار دادیم و رنگ پس زمینه را آبی کردیم.
رنگ دادن به متن در HTML:
از صفت color برای رنگ دادن به متن استفاده میکنیم و رنگ مورد نظر را مقدار دهی میکنیم.
[html]
<p style=”color:red;”>
رنگ این نوشته قرمز است.
</p>
[/html]
به تگ p استایل دادیم و مقدارش را رنگ قرمز دادیم.
فونت دادن به نوشته ها در HTML:
استفاده از صفت font-family و دادن مقدار (فونتی که میخواهیم) برای نوشته اعمال میشود.
[html]
<h2 style=”font-family:verdana;”>
این یک عنوان با فونت verdana است.
</h2>
[/html]
در تگ h2 فونت نوشته را با صفت font-family با مقدار verdana تعیین نمودیم.
اندازه دادن به متن در HTML:
از صفت font-size برای تعیین اندازه متن استفاده میکنیم.
[html]
<p style=”font-size:150%;”>
سایز این نوشته 150% است.
</p>
[/html]
در تگ p اندازه متن را با مقدار 150% در صفت font-size مشخص نمودیم.
چینش محتوا در HTML:
صفت text-align چینش محتوا را مشخص میکند سمت راست , وسط و سمت چپ را میتوانیم مقدار دهیم.
[html]
<p style=”text-align: right;”>جهت چینش این نوشته از سمت راست است</p>
<p style=”text-align : center;”>جهت چینش این نوشته وسط چین است</p>
<p style=”text-align : left;”>جهت چینش این نوشته از سمت چپ میباشد</p>
[/html]
در کدهای بالا مقدار های right چینش از راست مقدار center چینش از وسط و مقدار left چینش از چپ در صفت text-align تعریف گردید.
عکس دادن به پس زمینه در HTML:
برای تصویر دادن به پس زمینه از Background-image استفاده میکنیم و آدرس عکس را در قسمت url مینویسیم.
[html]
<body style=”background-image:url(image1.png);”>
</body>
[/html]
در تگ body عکس پس زمینه را با صفت background-image با دادن آدرس عکس را در قسمت url قرار دادیم.
تا آموزش های بعدی همراه ما باشید….
منبع سایت www.w3schools.com