استایل دهی در HTML | آموزش کامل + نمونه کد

قبلی بعدی

استایل دهی

به وسیله استایل دهی و CSS می توانیم سند HTML را زیبا کنیم.

CSS یک زبان نشانه گذاری برای استایل دادن به المان های HTML است.

با CSS می توانید:

در ادامه با روش درون خطی (inline) استایل دهی آشنا می شوید.

یکی از روش های استایل دادن به المان های HTML، روش inline است.

برای اضافه کردن CSS به صورت inline:

1. ابتدا در سند HTML خود، المان مورد نظر را انتخاب کنید.

<h1>inline style</h1>

2. سپس ویژگی CSS یا CSS Property را به المان اضافه کنید. (""=style)

<h1 style="">inline style</h1>

3. حالا می توانید کد های CSS خود را بین کوتیشن ها اضافه کنید.

<h1 style="color: red; font-size: 12px;">inline style</h1>

کد های CSS در قالب name: value; نوشته می شوند و در انتهای آن باید ; گذاشت. به نمونه کد بالا توجه کنید:

در واقع به وسیله ; انتهای هر دستور CSS را مشخص می کنیم.

نکته: به علامت : دونقطه یا کالُن گفته می شود.

نکته: به علامت ; سِمیکالُن یا semicolon گفته می شود.

برای تغییر رنگ متن باید از ویژگی color استفاده کنیم.

<h1 style="color: red;">رنگ متن</h1>

در زیر نام تعدادی از رنگ ها گذاشته شده است.

red

blue

yellow

green

orange

purple

gray

black

اکثر مرورگرها از 140 نام رنگ پشتیبانی می کنند. که در بخش رنگ ها به آن پرداخته شده است

نکته: برای مشاهده کامل رنگ های css به صفحه رنگ ها مراجعه کنید.

برای تغییر رنگ پس زمینه از ویژگی background-color استفاده می کنیم.

<h1 style="background-color: blue;">رنگ پس زمینه<h1>

برای تغییر اندازه متن باید از ویژگی font-size استفاده کنیم.

<h1 style="font-size: 9px;">اندازه متن</h1>

نکته: برای تعیین اندازه متن باید از (عدد) + (واحد اندازه گیری) استفاده کرد. در نمونه کد بالا از واحد پیکسل (px) استفاده شده است.

نکته: برای مشاهده کامل واحدهای اندازه گیری css به صفحه واحد ها مراجعه کنید.

برای تغییر چیدمان متن باید از ویژگی text-align استفاده کنیم.

<h1 style="text-align: center;">چیدمان متن</h1>

خاصیت text-align دارای مقادیر زیر است:

قبلی بعدی

توسعه دهندگان

احسان اسلامی