با عرض سلام خدمت کاربران عزیز سایت codetalk.net. در این قسمت قصد داریم به آموزش استایل ها در html بپردازیم؛ با ما همراه باشید.

استایل ها در html

با استفاده از خصوصیت style میتوانیم برای یک عنصر، یک استایل تنظیم کنیم. برای مثال رنگ متن عنصر یا پس زمینه آن را تغیر بدهیم.

خصوصیت style به شکل زیر تعریف می شود:

<tagname style=”مقدار : خاصیت مورد نظر ;”>

منظور از خاصیت، یک خاصیت css میباشد که در آموزش CSS3 با آنها آشنا خواهیم شد.

رنگ پس زمینه در html

خاصیت background-color برای عناصر html یک رنگ پس زمینه تنظیم میکند.

مثلاً میخواهیم رنگ پس زمینه صفحه را که به صورت پیش فرض سفید است، به رنگ زرد تغیر دهیم؛ برای این کار خصوصیت style را برای عنصر body تعریف میکنیم و سپس خاصیت background-color را درون style نوشته و مقدار آن را برابر با yellow قرار می دهیم.

کد ما به صورت زیر خواهد بود :

نتیجه آن به شکل زیر است :

استایل ها در html

همچنین میتوانیم علاوه بر تغیر رنگ پس زمینه body ، رنگ پس زمینه بقیه عناصر مثل <p> و <h1> را نیز تغیر دهیم.

برای این کار خصوصیت style را به عناصر <p> و <h1> اضافه میکنیم .

استایل ها در html

رنگ متن در html

با استفاده از خاصیت color میتوانیم رنگ متن یک عنصر را تغیر دهیم. مثلاً میخواهیم رنگ متن یک پاراگراف را به قرمز و رنگ متن یک سرفصل را به آبی تغیر دهیم.

برای این کار خصوصیت style را برای هر کدام از عناصر بالا نوشته و مقدار خاصیت color آن را به ترتیب برابر با red و blue قرار میدهیم.

استایل ها در html

فونت ها در html

با استفاده از خاصیت font-family میتوانیم یک فونت برای عناصر html تعیین کنیم. برای مثال برای عنصر <p> فونت verdana و برای عنصر <h1> فونت arial را تعیین میکنیم.

اندازه متن در html

خاصیت font-size اندازه متن را تغیر میدهد.برای مثال میخواهیم سایز متن عنصر <p> را ۳ برابر و سایز متن عنصر <h1> را ۱٫۵ برابر کنیم. کد ما به صورت زیر خواهد بود:

و نتیجه آن به شکل زیر میباشد:

استایل ها در html

در مثال بالا، برای مقدار دهی خاصیت font-size از % استفاده کردیم. علاوه بر % میتوانیم از واحد هایی همچون px،em و … استفاده کنیم که در آموزش css با آن ها آشنا خواهیم شد.

تراز متن در html

از خاصیت text-align برای تعریف تراز متن (تراز از چپ ، وسط یا راست) در html استفاده میکنیم. مقادیری که میتوانیم به آن اختصاص دهیم عبارت است از :

left (چپ) ، center (وسط) و right (راست).

برای مثال سه عنصر <h3>،<h2>،<h1> داریم. میخواهیم عنصر <h1> تراز چپ، عنصر <h2> تراز وسط و عنصر <h3> تراز راست داشته باشد:

نتیجه کد بالا به صورت زیر است :

استایل ها در html

در آموزش css تمامی موارد بالا به طور مفصل توضیح داده خواهد شد.

خلاصه آموزش

  • برای استایل دهی به عناصر html از خصوصیت style استفاده میکنیم.
  • برای تنظیم رنگ پس زمینه از خاصیت background-color استفاده میکنیم.
  • از خاصیت color برای تغیر رنگ متن عناصر استفاده میکنیم.
  • برای تغیر فونت از خاصیت font-family استفاده میکنیم.
  • خاصیت font-size اندازه متن را تغیر میدهد.
  • برای تراز بندی متن از خاصیت text-align استفاده میکنیم.

 

منابع مورد استفاده در این آموزش

لینک منبع


دیگر قسمت ها

قسمت اول

قسمت دوم

قسمت سوم

قسمت چهارم

قسمت پنجم


منبع : کدتاک


نویسنده میثم شمس