آموزش قرار دادن متن بر روی عکس
براتون یک آموزش سی اس اس آماده کردم که یکی از کاربرانمون درخواستشو کرده بودند.آموزش به طور کامل توضیح داده شده و در آخر هم دموی حاصل کار رو قرار دادم
خب برای شروع یک فایل در برنامه ی Notepad یا Dreamweaver با پسوند CSS ایجاد کنید و مراحل زیر رو انجام بدید :
اول باید یک تگ با اسم body بنویسید و بک سری کد توی اون قرار بدید ، ایم جا تگ رو به همراه کد هاش مشاهده می کنید ( البته هر قالبی این کد رو داره و بیشتر از ۱ بار نباید ازش استفاده کنید )
| background: url(images/bg.png) repeat ; |
| font-family : tahoma, sans-serif; |
background همونطور که از اسمش مشخصه برای تعیین پس زمینه ی اصلی قالبتون هست
font-family این خط برای تنظیم فونت شاخص قالب هست
font-size این خط برای تنظیم اندازه ی فونت هست
color این خط برای تعیین رنگ نوشته ی شماست
direction این قسمت هم برای راست چین کردن هست که در قالب های فارسی باید ازش استفاده بشه
- خب حالا شما باید یک تگ درست کنید و در نهایت اون رو در قالب فراخوانی کنید ، اسم این تگ رو می تونید به دلخواه انتخاب کنید که من اینجا اسمش رو box میذارم
کد HTML:
.box {
background: url(images/box.png) no-repeat;
text-align: justify;
color: #ffd800;margin: 0 auto;width: 352px;height: 128px;}
آدرس عکستون رو توی پرانتز قرار بدید و به این صورت توی قالبتون فراخوانیش کنید :
| <div class="box">متن مورد نظر</div> |
حالا برای نمایش مراحل بالا میتونید این کد ها رو در یک فایل با پسوند html سیو کنید
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| background: url(images/bg.png) repeat ; |
| font-family : tahoma, sans-serif; |
| background: url(images/box.png) no-repeat; |
| <div class="box">متن مورد نظر</div> |
برای مشاهده ی دمو اینجا کلیک کنید
