بازار آنلاین نخل

0 %
محمدجواداسدی
توسعه دهنده وب
  • محل سکونت:
    کرمان
  • شهر:
    کرمان
html
CSS
java script
(PWA)Progressive Web App
WORDPRESS
react
react-native
PHP
  • photoshop
  • xd

سبک های HTML یا HTML Styles

۱۲ خرداد ۱۴۰۰

سبک های HTML یا HTML Styles

 

از ویژگیstyleدر HTML یا همان HTML Styles برای افزودن سبک ها به یک عنصر مانند رنگ ، قلم ، اندازه و موارد دیگر استفاده می شود .

مثال :

من قرمز هستم

من آبی هستم

من بزرگ هستم

 

 “خودتان امتحان کنید”

ویژگی سبک HTML

تنظیم سبک یک عنصر HTML می تواند با ویژگیstyle انجام شود .

ویژگی styleدر  HTML دارای نحو زیر است :

۱
<tagname style=”property:value;>

 

 

property یک ویژگی CSS است . value یک مقدار CSS است .

رنگ پس زمینه

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

مثال :

رنگ پس زمینه یک صفحه را روی property آبی تنظیم کنید :

۱
۲
۳
۴
۵
۶

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

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

</body>

 

 

 

 

 

 “خودتان امتحان کنید”

 

مثال :

رنگ زمینه را برای دو عنصر مختلف تنظیم کنید :

۱
۲
۳
۴
۵
۶

<body>

<h1 style=”background-color:powderblue;”>This is a heading</h1>
<p style=”background-color:tomato;”>This is a paragraph.</p>

</body>

 

 

 

 

 

 “خودتان امتحان کنید”

 

رنگ متن

ویژگی colorدر CSS رنگ متن را برای یک عنصر HTML تعریف می کند :

مثال :

۱
۲
<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

 

 

 

 “خودتان امتحان کنید”

 

قلم ها یا Fonts

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

مثال :

۱
۲
<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

 

 

 

 “خودتان امتحان کنید”

 

اندازه متن

ویژگی font-sizeدر CSS اندازه متن را برای یک عنصر HTML تعریف می کند :

مثال :

۱
۲
<h1 style=”font-size:300%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

 

 

 “خودتان امتحان کنید”

 

تراز متن

ویژگی text-alignدر CSS تراز بندی متن افقی برای یک عنصر HTML را تعریف می کند :

مثال :

۱
۲
<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”>Centered paragraph.</p>

 

 

 “خودتان امتحان کنید”

 

خلاصه ی مقاله

  • از این ویژگی style برای یک ظاهر طراحی شده در عناصر HTML استفاده کنید .
  • background-colorبرای رنگ پس زمینه استفاده کنید .
  • استفاده colorبرای رنگ متن
  • استفاده font-familyبرای فونت های متن
  • font-sizeبرای اندازه متن استفاده کنید .
  • text-alignبرای تراز بندی متن استفاده کنید .

در مقالات آینده سر وقت CSS خواهیم رفت و کامل آن را به شما آموزش خواهم داد.

 

تمامی مراحل آموزشی این دوره در آدرس HTML قرار دارد.

منتظر نظرات و پیشنهادات زیبای شما هستم .

ارسال شده در HTML, برنامه نویسان, طراحی وب, مطالب آموزشی, وببرچسپ ها:
یک دیدگاه بنویسید
© تمامی حفوق برای محمدجواداسدی میباشد
ایمیل: asadij313@gmail.com
تلفن تماس :09387370966
logo-samandehi

SPIN TO WIN!

  • Try your lucky to get discount coupon
  • 1 spin per email
  • No cheating
امتحان کن!!!
هرگز
بعدا یادآوری کن!
نه ، ممنون