-
July 17th, 2012, 15:23
#61
عضو جدید
پاسخ : آموزش css
در صورتی که می خواهید از رنگهای بیشتری استفاده کنید و بهتر بتوانید رنگ مو رد نظر خود را انتخاب کنید می توانید از معادل هگزادسیمال رنگها استفاده کنید. در این صورت می توانید از 216 رنگ مورد استفاده در وب رنگ مورد نظر خود را انتخاب کنید.
اگر جدول مربوط به معادل هگزادسیمال رنگها را می خواهید اینجا را کلیک کنید. (لینک در پنجره جدید باز می شود)
در اینجا به ذکر چند مثال برای استفاده از ویژگی color می پردازیم. ما در اینجا از شناسه style برای تعریف کردن این ویژگی استفاده می کنیم اما به خاطر داشته باشید که می توانیم این ویژگی را برای یک تگ مشخص یا به صورت class و id در بخش HEAD متن یا استایل خارجی نیز به کار ببریم.
برای مثال در استفاده از color برای تغییر رنگ متن یک جدول می توانیم کد جدول را به صورت زیر بنویسیم:
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012 15:23
# ADS
-
July 17th, 2012, 15:24
#62
عضو جدید
پاسخ : آموزش css
کد HTML:
<table border="1" style="color: red"> <tr>
<td>
این متن به رنگ قرمز نمایش داده می شود.
</td>
</tr>
</table>
نتیجه کد بالا با کدی که در پایین آمده است یکسان است:
کد HTML:
<table border="1" style="color: #FF0000">
<tr>
<td>
این متن به رنگ قرمز نمایش داده می شود.
</td>
</tr>
</table>
نتیجه هر دو کد بالا به صورت زیر است:
این متن به رنگ قرمز نمایش داده می شود. |
به یاد داشته باشید که می توانید از ویژگی color برای هر کدام از سطرها یا سلولهای یک جدول به صورت جداگانه استفاده کنید. فقط کافیست تا "style="color: XXX را در هر قسمت قرار دهید و رنگ مورد نظر خود را به جای XXX قرار دهید.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 15:25
#63
عضو جدید
پاسخ : آموزش css
تغییر رنگ و تصویر زمینه عناصر HTML با CSS
background-color
این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.
در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:
کد HTML:
<p>متن بدون زمینه. <span style="background-color: yellow">این قسمت زمینه زرد دارد.</span></p>
این هم متن نهایی:متن بدون زمینه. این قسمت زمینه زرد دارد.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 15:27
#64
عضو جدید
پاسخ : آموزش css
همینطور می توانیم از این ویژگی برای تغییر زمینه یک جدول یا DIV هم استفاده کنیم:
کد HTML:
<table border="1" style="background-color: #FFC0CB">
<td>سلول اول</td>
<td>سلول دوم</td>
</table>
این هم جدول به دست آمده:
شما حتی می توانید از این ویژگی برای سلولهای یک جدول به صورت جداگانه استفاده کنید.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 15:28
#65
عضو جدید
پاسخ : آموزش css
یک نمونه دیگر از موارد استفاده این ویژگی در طراحی فرمهاست. به مثال زیر توجه کنید:
کد HTML:
<form action="some_script>
نام : <input type="text" size="30" style="background-color: #009900">
</form>
این هم فرم آزمایشی ما:
نام :
توجه داشته باشید که در این ویژگی هم می توانیم از نام رنگ ها و هم از معادل هگزادسیمال آنها استفاده کنیم.
شما می توانید با استفاده از این ویژگی در تگ body رنگ زمینه صفحه را هم تغییر دهید. در مورد تصویر زمینه هم که در قسمت بعد به آن می پردازیم می توان به همین صورت عمل کرد.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 15:29
#66
عضو جدید
پاسخ : آموزش css
background-image
این ویژگی برای مشخص کردن تصویر زمینه به کار می رود.کاربرد background-image همانند background-color است با این تفاوت که به جای مشخص کردن رنگ باید یک تصویر را تعیین کنیم. این ویژگی به صورت زیر نوشته می شود.
کد HTML:
[HTML]background-image:url(آدرس تصویر مورد نظر)
[/HTML]بعد از نام ویژگی باید از url برای مشخص کردن آدرس تصویر استفاده کنیم. آدرس تصویری که می خواهیم به عنوان زمینه استفاده کنیم نیازی نیست بین علامتهای نقل قول ( " ) قرار گیرد ولی باید بین دو پرانتز قرار گیرد.
به یک مثال در این رابطه توجه کنید:
کد HTML:
<span style="background-image: url(http://www.neopersia.org/css/example1.gif)">برای این span از تصویر زمینه استفاده شده است.</span>
می توانید نتیجه کد بالا را مشاهده کنید:
برای این span از تصویر زمینه استفاده شده است.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 15:35
#67
عضو جدید
پاسخ : آموزش css
از این ویژگی می توان تقریباً برای همه اجزای صفحه استفاده کرد. در اینجا برای یک جدول از آن استفاده کرده ایم:
کد HTML:
<table border="1" style="background-image: url(http://www.neopersia.org/css/example1.gif)">
<td>محتویات سلول اول</td>
<td>محتویات سلول دوم</td>
</table>
جدول به دست آمده مانند زیر است:
محتویات سلول اول |
محتویات سلول دوم |
همانطور که برای text box از رنگ زمینه استفاده کردیم برای آن از تصویر زمینه هم می توانیم استفاده کنیم. در اینجا از این ویژگی برای یک textarea استفاده می کنیم:
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 15:37
#68
عضو جدید
پاسخ : آموزش css
کد HTML:
<form>
<textarea rows="8" cols="60" style="background-image:url(http://www.neopersia.org/css/example1.gif)">
</textarea>
</form>
نتیجه را ملاحظه کنید:
متاسفانه نتیجه در این فرم قابل مشاهده نیست در این آدرس امتحان کنین:
Tryit Editor v1.5
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 15:44
#69
عضو جدید
پاسخ : آموزش css
کار با تصویر زمینه در طراحی صفحات با استایل
ما با استفاده از شناسه
background در تگ
BODY می توانستیم برای صفحه تصویر زمینه مشخص کنیم. اما با استفاده از استایل می توانیم کنترل بیشتری بر این تصویر زمینه داشته باشیم چه این تصویر زمینه برای کل صفحه استفاده شود چه برای قسمت مشخصی از صفحه. برای مثال می توانیم تصویر زمینه را به گونه ای تعریف کنیم که تکرار نشود، ثابت باشد، یا برای آن نقطه شروع تعیین کنیم. برخی از این خواص را می توانید در جدول زیر ملاحظه کنید:
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 15:45
#70
عضو جدید
پاسخ : آموزش css
توضیحات |
مقادیر قابل استفاده |
ویژگی |
مشخص کننده محل قرار گرفتن تصویر در اینترنت است |
آدرس محل قرار گرفتن تصویر |
background-image: url(url) |
نوع تکرار تصویر را مشخص می کند |
repeat, no-repeat, repeat-x, repeat-y |
background-repeat: مقدار ویژگی |
مشخص می کند که آیا تصویر زمینه با اسکرول کردن صفحه حرکت می کند یا در جای خود ثابت می ماند |
scroll, fixed |
background-attachment: مقدار ویژگی |
موقعیت تصویر زمینه در صفحه را مشخص می کند |
مقدار اول:
top, center, bottom,
عددی در مقیاس پیکسل، عددی در مقیاس درصد
مقدار دوم:
left, center, right,
عددی در مقیاس پیکسل، عددی در مقیاس درصد |
background-position: مقدار دوممقدار اول |
برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید. مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل به صورت زیر تعریف کرد:
کد HTML:
<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/index.jpg);
background-repeat:repeat-y }
-->
</style>
در این صورت تصویر زمینه ای مشابه سایت ما خواهید داشت. می توانید آنرا امتحان کنید.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-