SaynaServer
April 6th, 2012, 15:25
http://takide.in/wp-content/uploads/2012/03/text-on-image.jpg (http://takide.in/wp-content/uploads/2012/03/text-on-image.jpg)
براتون یک آموزش سی اس اس آماده کردم که یکی از کاربرانمون درخواستشو کرده بودند.آموزش به طور کامل توضیح داده شده و در آخر هم دموی حاصل کار رو قرار دادم
خب برای شروع یک فایل در برنامه ی Notepad یا Dreamweaver با پسوند CSS ایجاد کنید و مراحل زیر رو انجام بدید :
اول باید یک تگ با اسم body بنویسید و بک سری کد توی اون قرار بدید ، ایم جا تگ رو به همراه کد هاش مشاهده می کنید ( البته هر قالبی این کد رو داره و بیشتر از ۱ بار نباید ازش استفاده کنید )
body {
background: url(images/bg.png) repeat ;
font-family : tahoma, sans-serif;
font-size: 8pt;
color: #fff;
direction: rtl;
}
background همونطور که از اسمش مشخصه برای تعیین پس زمینه ی اصلی قالبتون هست
font-family این خط برای تنظیم فونت شاخص قالب هست
font-size این خط برای تنظیم اندازه ی فونت هست
color این خط برای تعیین رنگ نوشته ی شماست
direction این قسمت هم برای راست چین کردن هست که در قالب های فارسی باید ازش استفاده بشه
- خب حالا شما باید یک تگ درست کنید و در نهایت اون رو در قالب فراخوانی کنید ، اسم این تگ رو می تونید به دلخواه انتخاب کنید که من اینجا اسمش رو box میذارم
.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background: url(images/bg.png) repeat ;
font-family : tahoma, sans-serif;
font-size: 8pt;
color: #fff;
direction: rtl;
}
.box {
background: url(images/box.png) no-repeat;
text-align: justify;
color: #ffd800;
margin: 0 auto;
width: 352px;
height: 128px;
}
</style>
</head><body>
<div class="box">متن مورد نظر</div>
</body>
</html>
برای مشاهده ی دمو اینجا (http://takide.in/wp-content/uploads/2012/03/demo.html) کلیک کنید
براتون یک آموزش سی اس اس آماده کردم که یکی از کاربرانمون درخواستشو کرده بودند.آموزش به طور کامل توضیح داده شده و در آخر هم دموی حاصل کار رو قرار دادم
خب برای شروع یک فایل در برنامه ی Notepad یا Dreamweaver با پسوند CSS ایجاد کنید و مراحل زیر رو انجام بدید :
اول باید یک تگ با اسم body بنویسید و بک سری کد توی اون قرار بدید ، ایم جا تگ رو به همراه کد هاش مشاهده می کنید ( البته هر قالبی این کد رو داره و بیشتر از ۱ بار نباید ازش استفاده کنید )
body {
background: url(images/bg.png) repeat ;
font-family : tahoma, sans-serif;
font-size: 8pt;
color: #fff;
direction: rtl;
}
background همونطور که از اسمش مشخصه برای تعیین پس زمینه ی اصلی قالبتون هست
font-family این خط برای تنظیم فونت شاخص قالب هست
font-size این خط برای تنظیم اندازه ی فونت هست
color این خط برای تعیین رنگ نوشته ی شماست
direction این قسمت هم برای راست چین کردن هست که در قالب های فارسی باید ازش استفاده بشه
- خب حالا شما باید یک تگ درست کنید و در نهایت اون رو در قالب فراخوانی کنید ، اسم این تگ رو می تونید به دلخواه انتخاب کنید که من اینجا اسمش رو box میذارم
.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background: url(images/bg.png) repeat ;
font-family : tahoma, sans-serif;
font-size: 8pt;
color: #fff;
direction: rtl;
}
.box {
background: url(images/box.png) no-repeat;
text-align: justify;
color: #ffd800;
margin: 0 auto;
width: 352px;
height: 128px;
}
</style>
</head><body>
<div class="box">متن مورد نظر</div>
</body>
</html>
برای مشاهده ی دمو اینجا (http://takide.in/wp-content/uploads/2012/03/demo.html) کلیک کنید