آشنایی با استایل ها در HTML

همه ی عناصر HTML  صفتی به نام Style  دارند که میتوان با مقداردهی آن ظاهر عنصر مورد نظر را تغییر داد. در این فصل قصد داریم به بعضی از مثال های رایجی که برای این صفت وجود دارد بپردازیم. 


به نمونه مثال زیر دقت کنید : 

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>
خودتان امتحان کنید

در مثال بالا سه پاراگراف وجود دارد که هر کدام از آنها مقدار صفت Style برایشان مقدار دهی شده است.  


صفت Style در HTML

در نمونه کد زیر میتوانید نحوه ی مقدار دهی صفت Style  را برای عناصر HTML مشاهده کنید :

<tagname style="property:value;">

Property صفتی از جنس CSS  و value یک مقدار از جنس CSS است.
در ادامه ی این نوشته در مورد صفات و مقادیر CSS که میتوانیم در صفت Style به کار ببریم توضیحاتی  ارائه خواهم داد.


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

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

در نمونه مثال زیر رنگ پس زمینه صفحه با رنگ powderblue مقدار دهی شده است.

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
خودتان امتحان کنید

رنگ متن در HTML

صفت color رنگ متن را برای عنصر HTML مشخص میکند. 

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
خودتان امتحان کنید

فونت ها در HTML

صفت font-family فونتی را که برای عنصر HTML استفاده میشود مشخص میکند:

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
خودتان امتحان کنید

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

صفت font-size اندازه ی متن را برای عناصر HTML مشخص میکند.

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
خودتان امتحان کنید

ترازبندی متن در HTML

صفت text-align ترازبندی متن را برای عناصر HTML مشخص میکند.

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
خودتان امتحان کنید

خلاصه ی کلام :

  • از صفت style برای استایل دهی عناصر HTML استفاده کنید
  • از صفت background-color برای تعیین رنگ پس زمینه ی عناصر HTML استفاده کنید
  • از صفت color برای تعیین رنگ متن استفاده کنید.
  • از صفت font-family برای تعیین فونت متون در HTML استفاده کنید
  • از صفت font-size برای تعیین اندازه متون در HTML استفاده کنید.
  • از صفت text-align برای ترازبندی متون در HTML استفاده کنید.
     
منتشر شده در ۲۹ اردیبهشت ۱۳۹۶ حمید رضا ملکی ۱۹۱۸ بازدید
دیدگاه ها
محمد دوشنبه ۲۲ مرداد ۱۳۹۷

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

حمید رضا ملکی سه شنبه ۲۳ مرداد ۱۳۹۷

ممنون از نظر لطف شما

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید