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