استایل دادن در کد های html

بازدید: 641 بازدید
styles

همه ی المان ها در html دارای صفت style  هستند.

این صفت جهت تغییر دادن و زیبایی دادن به محتوای تگ های html است.

برای استایل دادن داخل کدهای html از روش (inline) استفاده میکنیم و مستقیما درون تگ ها استایل میدهیم.

با عرض سلام و خسته نباشید خدمت کاربران عزیز وبسایت پرنیان طرح

در این قسمت میخواهیم با استایل html و نحوه استایل دادن به محتوا و عناصر صفحه آشنا شویم.

معرفی style ها:

داخل تگی که میخواهیم استایل بدهیم style را مینویسیم و نوع خاصیت و مقدار آن را مشخص میکنیم.

خصوصیات همان ویژگی ها در css هستند و مقدار خصوصیات همان مقدار است که برای ویژگی ها در css اعمال میشد.

style داخل تگ های HTML برای تغییر ظاهر تگ نوشته میشود و هر چه به عنوان مقادیر داخل style  نوشته میشود در واقع همان دستورات css است.

html styles
html styles

رنگ پس زمینه در 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

 

دسته بندی آموزش html
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.