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

بهاره حسنیبهاره حسنی
574 بازدید
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%;”>

سایز این نوشته ۱۵۰% است.

</p>

[/html]

در تگ p اندازه متن را با مقدار ۱۵۰% در صفت 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
اشتراک گذاری

نوشته های مرتبط

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

نشانی ایمیل شما منتشر نخواهد شد.

سبد خرید

سبد خرید شما خالی است.

ورود به سایت