-
July 17th, 2012, 15:50
#71
عضو جدید
پاسخ : آموزش css
background-repeat
همانطور که در درس قبل ملاحظه کردید در مورد background-image توضیحاتی داده شد. در اینجا به سایر ویژگیهای مربوط به تصویر زمینه می پردازیم.
این ویژگی تعیین کننده نوع تکرار شدن تصویر زمینه است. در اینجا مقادیری را که می توان به این ویژگی اختصاص داد بیان می کنیم:
- repeat
این مقدار تعیین می کند که تصویر زمینه در صورتی که از اندازه پنجره کوچکتر بود هم به صورت افقی و هم عمودی تکرار شود تا همه زمینه پنجره را بپوشاند. - no-repeat
این گزینه مشخص می کند که تصویر زمینه نباید تکرار شود حتی اگر از اندازه پنجره کوچکتر بود. - repeat-x
این گزینه مشخص می کند که تصویر باید به صورت افقی تکرار شود نه عمودی. - repeat-y
این گزینه مشخص می کند که تصویر زمینه باید به صورت عمودی تکرار شود.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012 15:50
# ADS
-
July 17th, 2012, 15:52
#72
عضو جدید
پاسخ : آموزش css
background-attachment
از این ویژگی برای تعیین موقعیت تصویر زمینه در هنگام بالا و پایین بردن صفحه به وسیله اسکرول بار در پنجره مرورگر است. مقادیر زیر را می توان برای این ویژگی استفاده کرد:
- scroll
اگر این گزینه را انتخاب کنید تصویر زمینه به همراه محتویات صفحه به بالا و پایین می رود. - fixed
با انتخاب این گزینه مشخص می کنید که تصویر زمینه در هنگام حرکت کردن محتویات صفحه باید ثابت بماند و حرکت نکند.
کد زیر را می توان برای مشخص کردن تصویر زمینه ثابت در بخش HEAD متن استفاده کرد. در این مثال لوگوی سایت ما به عنوان زمینه ثابت در نظر گرفته شده است. برای مشاهده یک نمونه از این تصویر زمینه اینجا را کلیک کنید.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 15:58
#73
عضو جدید
پاسخ : آموزش css
کد HTML:
<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/cssBGtest.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center }
-->
</style>
این مثال را به یاد داشته باشید. دوباره از آن استفاده خواهیم کرد. در درس بعدی به سایر ویژگیهای مرتبط با تصویر زمینه می پردازیم.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 16:01
#74
عضو جدید
پاسخ : آموزش css
تنظیمات موقعیت عکس زمینه عناصر صفحه با CSS
background-position
این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو مقدار می توانیم موقعیت عمودی و افقی تصویر در صفحه را تعیین کنیم. توجه داشته باشید که این دو مقدار باید با یک فاصله خالی از هم جدا شوند نه کاما یا نقطه ویرگول.
دو مقداری که می توان به این ویژگی اختصاص داد از مقادیر زیر انتخاب می شوند:
- top, center, or bottom
- left, center, or right
برای این ویژگی باید از هر دسته از مقادیر بالا فقط یکی انتخاب شود. در اینجا می توانید برخی از موارد قابل استفاده را مشاهده کنید:
- background-position:top right
این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد. - background-position:center right
این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد. - background-position:bottom center
این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 16:02
#75
عضو جدید
پاسخ : آموزش css
می توانیم به جای گزینه های بالا از مقادیری در مقیاس پیکسل یا درصد قرار دهیم تا تصویر زمینه را در هر فاصله ای از بالا و سمت چپ صفحه که بخواهیم قرار دهیم. در این روش فقط کافیست مقدار فاصله از سمت چپ صفحه را نوشته و مقیاس آن را مشخص کنیم و با یک فاصله مقدار فاصله از بالای صفحه همراه با مقیاس آنرا بنویسیم. به مثال زیر توجه کنید:
در این مثال از لوگوی سایت ما به عنوان زمینه صفحه استفاده شده است که در فاصله 20 پیکسل از بالا و 40 پیکسل از چپ صفحه قرار می گیرد. در ضمن از ویژگی background-attachment: fixed استفاده شده است تا در صورت حرکت دادن صفحه زمینه به صورت ثابت قرار بگیرد. کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم:
کد HTML:
<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/cssBGtest.jpg);
background-attachment:fixed;
background-position:40px 20px }
-->
</style>
برای مشاهده نتیجه اینجا را کلیک کنید.
با ترکیب کردن ویژگیهایی که توضیح داده شد می توانیم انواع تصویر زمینه مختلف و جالبی را به وجود بیاوریم. می توانید این کار را انجام دهید و تنوع آنرا ملاحظه کنید.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 16:03
#76
عضو جدید
پاسخ : آموزش css
تغییر شکل نشانگر ماوس با استفاده از استایل
با استفاده از استایل این امکان وجود دارد که شکل نشانگر ماوس را وقتی روی قسمت مشخصی از صفحه قرار می گیرد تغییر دهیم. به این منظور می توانیم از ویژگی زیر در استایل مربوط به تگ مورد نظر استفاده کنیم:
کد HTML:
cursor: نوع نشانگری که مورد نظر ماست
برای مثال فرض کنید می خواهیم وقتی نشانگر ماوس روی یک قسمت متن قرار می گیرد به شکل ساعت شنی در آید. می توانیم به صورت زیر عمل کنیم (ما برای مشخص شدن متن از رنگ قرمز در تگ span استفاده کرده ایم.):
کد HTML:
<span style="cursor: wait; color: red">ماوس خود را روی این متن قرار دهید.</span>
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 16:04
#77
عضو جدید
پاسخ : آموزش css
نتیجه را می توانید اینجا مشاهده کنید:
ماوس خود را روی این متن قرار دهید.
اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در تگهای HTML است.
در جدول زیر برخی از مقادیر مختلف این ویژگی که شکل نشانگر ماوس را عوض می کنند آورده شده است. می توانید ماوس خود را بر روی توضیحات این گزینه ها نگه دارید تا ببینید به چه شکلی در می آید.
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 16:07
#78
عضو جدید
پاسخ : آموزش css
مقدار قابل استفاده |
توضیحات |
auto |
این گزینه نشانگر ماوس را با توجه به تنظیمات مرورگر کاربر تغییر می دهد. |
crosshair |
نشانگر ماوس به صورت به علاوه در می آید. |
default |
نشانگر ماوس به صورت همان فلش همیشگی در می آید. |
move |
نشانگر به شکلی در می آید که در هنگام جا به جا کردن چیزی به خود می گیرد. |
pointer |
نشانگر به شکل دست در می آید. |
help |
یک علامت سؤال کنار پیکان نشانگر ماوس قرار می گیرد. |
text |
به شکلی در می آید که بر روی متنها به خود می گیرد. |
wait |
به شکل ساعت شنی در می آید. |
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 16:10
#79
عضو جدید
پاسخ : آموزش css
n-resize |
یک فلش به سمت شمال |
s-resize |
یک فلش به سمت جنوب |
e-resize |
یک فلش به سمت مشرق |
w-resize |
یک فلش به سمت مغرب |
ne-resize |
یک فلش به سمت شمال شرقی |
nw-resize |
یک فلش به سمت شمال غربی |
se-resize |
یک فلش به سمت جنوب شرقی |
sw-resize |
یک فلش به سمت جنوب غربی |
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-
-
July 17th, 2012, 16:17
#80
عضو جدید
پاسخ : آموزش css
اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل
با استفاده از css می توانیم نحوه نمایش دادن لینکها را در صفحه تنظیم کنیم. به صورتی که استفاده از جاوا اسکرپت در صفحه تا حد زیادی کم می شود. از طریق استفاده از استایل می توانیم رنگ لینکها، اندازه فونت آنها، زیر خط لینکها، رنگ زمینه هر لینک و بسیاری دیگر از خواص لینکها را تغییر دهیم.
برای اینکه بتوانیم از همه خواصی که برای لینکها در css وجود دارد استفاده کنیم بهتر است تا استایل را در بخش head متن خود یا در فایلهای css خارجی که به صفحه پیوند می شوند استفاده کنیم. در هر دو صورت مراحل انجام کار شبیه هم است. ما در اینجا به استایل را در بخش head متن تعریف می کنیم.
برای کار با لینکها در css می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید:
************** هاست نامحدود سالیانه 13600 تومان با دامین رایگان .ir *************
http://www.webhostingtalk.ir/f20/53561/
**********نمایندگی هاست لینوکس نامحدود با دامین رایگان .ir ماهیانه فقط 13000 تومان *************
-