این آموزش در تاریخ ۱۳۹۹/۰۲/۱۲ آپدیت شده است.
آموزش کار با صفت Style در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با صفت Style در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با صفت Style در HTML
اگر بخش های قبلی از آموزش زبان HTML را دنبال کرده باشید، ما در بخش کار با صفات کمی و بطور کوتاه با صفت Style آشنا شدیم، حال در این بخش بطور کامل میخواهیم با این صفت در HTML آشنا شویم.
این صفت در دسته ی صفات عمومی HTML می باشد، منظور از عمومی بودن یک صفت یعنی اینکه این صفت میتونه در اکثر و یا تمامی تگ های HTML مورد استفاده قرار بگیرد.
من خودم به شخصه این صفت رو خیلی دوس دارم و بنظره من صفت Style یکی از جذاب ترین صفات در زبان HTML می باشد، که به راحتی با استفاده از آن میتوان برای تگ های HTML استایل تعریف کرد.
دوستان عزیز وقتی ما میگیم صفت ، یعنی اینکه یک صفت میتونه و باید درون یک تگ مورد استفاده قرار بگیرد، در نتیجه الان وقتی ما میگیم صفت Style یعنی ما باید از این صفت درون تگ های HTML استفاده نماییم.
شکل کلی برای استفاده از صفت Style در تگ های HTML بصورت زیر می باشد :
|
1 |
<tagname style=" property:value; "> |
که tagname نام تگی است که قرار است براش استایل تعریف نماییم و property و value نیز به ترتیب ویژگی و مقدارش می باشد که میخواهیم بروی تگ مورد نظر اعمال نماییم.
دوستان عزیز و محترم دستوراتی که میتونن درون این صفت قرار بگیرند در واقع همون دستورات CSS هستند، در نتیجه شما برای استفاده از این صفت باید دستورات CSS را بلد باشید.
پیشنهاد میکنم آموزش قدم به قدم زبان CSS فری لرن را دنبال نمایید.
Free-Learn
پس همونطور که گفتم ما میتونیم به راحتی از دستورات CSS درون صفت Style استفاده نماییم، لذا تعداد دستورات یا ویژگی های زبان CSS زیاد می باشند و قرار نیست من همه ی این دستورات رو در این بخش ارائه دهم بلکه فقط چندین دستور پرکاربرد رو برای شما دوستان محترم ارائه میدهم.
در ادامه و در این بخش میخواهیم با ویژگی های زیر برای استفاده در صفت Style آشنا شویم:
- Background-color – برای تنظیم رنگ پس زمینه یک عنصر
- Color – برای تنظیم رنگ متن یک عنصر
- Font-size – برای تنظیم اندازه متن یا فونت یک عنصر
- Text-align – برای تنظیم مکان قرار گیری متن موجود در یک عنصر
- Background-Image – برای گذاشتن عکس/تصویر در پس زمینه یک عنصر
Free-Learn
HTML Background Color
ما با استفاده از ویژگی background-color میتوانیم یک رنگ را برای پس زمینه یک عنصر در HTML مشخص نماییم، لطفا به مثال زیر و نحوه نوشتن این ویژگی در صفت Style توجه نمایید.
سلام خوبی؟ الان پشت زمینه این عنصر قرمز است
|
1 2 3 4 5 6 7 |
<body> <p style="background-color:red;"> Free-Learn </p> </body> |
Free-Learn
HTML Text Color
ما با استفاده از ویژگی color میتوانیم رنگ متن موجود در یک عنصر را در HTML مشخص نماییم، لطفا به مثال زیر و نحوه نوشتن این ویژگی در صفت Style توجه نمایید.
سلام خوبی؟ الان رنگ متن این عنصر آبی هست
|
1 2 3 4 5 6 7 |
<body> <p style="color:blue;"> Salam Khobi? </p> </body> |
Free-Learn
HTML Text Size
ما با استفاده از ویژگی font-size میتوانیم اندازه متن یا فونت یک عنصر را در HTML مشخص نماییم، لطفا به مثال زیر و نحوه نوشتن این ویژگی در صفت Style توجه نمایید.
وای چقد من بزرگ شدم
|
1 2 3 4 5 6 7 |
<body> <p style="font-size:40px;"> Salam Khobi? </p> </body> |
Free-Learn
HTML Text Alignment
ما با استفاده از ویژگی text-align میتوانیم مکان قرار گیری یک متن را در یک عنصر مشخص نماییم، لطفا به مثال زیر و نحوه نوشتن این ویژگی در صفت Style توجه نمایید.
در HTML بصورت پیش فرض جهت قرار گیری تمامی عناصر از سمت چپ می باشد.
من سمت چپم
من وسطم
من سمت راستم
|
1 2 3 4 5 6 7 |
<body> <p style="text-align:left;">Free-Learn</p> <p style="text-align:center;">Free-Learn</p> <p style="text-align:right;">Free-Learn</p> </body> |
Free-Learn
HTML Background-Image
ما با استفاده از ویژگی background-image میتوانیم یک تصویر یا عکس را برای پس زمینه ی یک عنصر/تگ تنظیم و یا تعریف نماییم.
سلام خوبی؟
|
1 2 3 4 5 6 |
<body style="background-image:url(images/bg1.jpg);"> <p>سلام خوبی؟ من صادق هستم</p> <p>مدیر وبسایت آموزشی فری لرن</p> </body> |
خب دوستان اینم از بخش آموزش کار با صفت Style در HTML که به پایان رسید – لطفا در بخش های بعدی همچنان با من همراه باشید تا موارد بیشتری را از HTML یاد بگیرید.
