سبد خرید

بستن سبد خرید

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

تعداد محصول: 0 کل قیمت: تومان0

style در HTML

درباره Attribute ها در جلسه قبل به صورت مختصر صحبت کردیم و در اینجا بیشتر درباره Attribute ها آشنا خواهید شد.

زمان مطالعه: 10 دقیقه

style در HTML یا استایل دهی style یا ضاهر سازی در html که درباره Attribute ها در جلسه قبل به صورت مختصر صحبت کردیم و در اینجا بیشتر درباره Attribute ها یا خاصیت style آشنا خواهید شد.

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

تغییر سبک نمایش ظاهری المان های HTML با استفاده از ویژگی style انجام می شود.

برای مثال

<!DOCTYPE html> 
<html>
     <body> 
         <p>ما یه تیم هستیم</p> 
         <p style="color:red;">متن قرمز می شود</p> 
         <p style="color:blue;">متن آبی می شود</p> 
        <p style="font-size:36px;">متن بزرگ می شود</p> 
    </body> 
</html>

 

نحوه تعریف کد به این صورت است:

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

 

در مثال فوق tagname همان عنصر می باشد. مانند تگ a یا تگ p یا تگ h1. عبارت style همان خاصیت style می باشد.  هر آن چه به عنوان مقادیر ویژگی style (در کلمه ی property) برای هر المان HTML نوشته می شود همان دستورات CSS است (درباره css در آینده خواهیم گفت).

 

رنگ پس زمینه صفحه HTML

ویژگی background-color رنگ پس زمینه را مشخص می کند.

در مثال زیر رنگ پس زمینه سند html را به رنگ طلایی تبدیل می کند

<!DOCTYPE html>
<html>
    <body style="background-color:gold;"> 
        <h1>آموزش استایل در اچ تی ام ال</h1>
    </body>
</html>

 

رنگ متن در HTML

با خصوصیت color برای تعریف رنگ متن یا نوشته در ویژگی style در تگ های HTML استفاده می شود:

توجه داشته باشید: با خاصیت color رنگ پس زمینه ایجاد نمی شود، بلکه فقز خود متن.

مثال:

<!DOCTYPE html>
<html>
    <body>
        <h1 style="color:red;">این متن تیتر است و به رنگ قرمز است</h1>
        <p style="color:blue;">این یک پاراگراف است و به رنگ آبی است</p>
    </body>
</html>

 

 

فونت در HTML

خصوصیت font-family برای تعریف نوع قلم مورد استفاده برای نوشتن متن در ویژگی style در تگ های HTML استفاده می شود:

مثال:

<!DOCTYPE html> 
<html> 
    <body> 
        <h1 style="font-family:verdana;">wellcome to learn HTML</h1> 
        <p style="font-family:courier;">i'm a web developer</p> 
    </body> 
</html>

 

نکته: در نسخه های قبلی یا ورژن های قبلی یعنی از HTML4 به پایین، به جای استفاده از این روش یک المان HTML به نام تگ <font> نیز وجود داشت که امکان تغییر فونت را با استفاده از تگ، فراهم می کرد. ولی امروزه در نسخه های جدید و با استاندارد HTML5 استفاده نمی شود.

 

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

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

مثال:

<!DOCTYPE html>
<html>
<body>

    <h1 style="font-size:300%">این یک عنوان با اندازه قلم 3 برابر یا 300% است</h1>
    <p style="font-size:160%">این یک پاراگراف با اندازه قلم 160% بزرگ تر است.</p>
    <p style="font-size:18px">این یک پاراگراف با اندازه قلم 18 پیکسل است.</p>
    <p>این یک پاراگراف با اندازه قلم پیش فرض است.</p>

</body>
</html>

 

 

تراز متن در HTML

خصوصیت text-align برای تعریف تراز متن (تراز متن به صورت چپ، وسط یا راست است) در ویژگی style در تگ های HTML استفاده می شود:

مثال:

<!DOCTYPE html>
<html>
    <body>
        <h1 style="text-align:center;">تیتر وسط چین شده</h1>
        <p style="text-align:right;">پاراگراف راست چین شده</p>
    </body>
</html>

 

نکته: در نسخه قبلی HTML به نام تگ <center> نیز وجود داشت که امکان تراز از وسط (وسط چین کردن) متن را با استفاده از تگ، فراهم می کرد. ولی امروزه در نسخه های جدید و با استاندارد HTML5 استفاده نمی شود.

خلاصه:
  • با استفاده از خصوصیت background-color می توانید رنگ پس زمینه تگ مورد نظر را تغییر دهید
  • با استفاده از خصوصیت color می توانید رنگ متن تگ مورد نظر را تغییر دهید
  • با استفاده از خصوصیت font-family می توانید نوع قلم (فونت) متن تگ مورد نظر را تغییر دهید
  • با استفاده از خصوصیت font-size می توانید اندازه قلم (اندازه فونت) متن تگ مورد نظر را تغییر دهید
  • با استفاده از خصوصیت text-align می توانید تراز متن تگ مورد نظر را تغییر دهید

پست های مشابه

19تیر 1400

CSS چیست و نقش آن در طراحی وب سایت که در این پست، طراحی و ساخت سایت را توضیح می دهیم، پس با ما همراه باشید. امروزه نرم افزارهایی برای طراحی وب سایت پدید آمده است که این امکان را می دهد که حتی بدون نیاز به دانش برنامه نویسی وب سایتی تولید و توسعه […]

97

0

28خرداد 1400

نمایش لودینگ یا نوار بارگذاری با CSS ، در این مقاله نحوه ی پروژه ایجاد لودینگ یا نوار بارگذاری کامل صفحه وب که با CSS نوشته شده را توضیح میدهیم.نمایش لودینگ صفحه یا بارگذاری کامل آن Preloader

139

0

27خرداد 1400

این پروژه ی بوم برخورددهنده به این صورت است که وقتی بوم ها یا مربع ها باهم برخورد می کنند…

55

0

دیدگاه و پرسش