http://IRNON.com کار با تصویر زمینه ما با استفاده از شناسه background در تگ BODY می توانستیم برای صفحه تصویر زمینه مشخص کنیم. اما با استفاده از استایل می توانیم کنترل بیشتری بر این تصویر زمینه داشته باشیم چه این تصویر زمینه برای کل صفحه استفاده شود چه برای قسمت مشخصی از صفحه. برای مثال می توانیم تصویر زمینه را به گونه ای تعریف کنیم که تکرار نشود، ثابت باشد، یا برای آن نقطه شروع تعیین کنیم. برخی از این خواص در لینک زیر قابل مشاهده میباشند : http://IRNON.com/css/css_background.asp برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید. مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل به صورت زیر تعریف کرد: کد: در این صورت تصویر زمینه ای مشابه سایت ما خواهید داشت. می توانید آنرا امتحان کنید background-repeat همانطور که در درس قبل ملاحظه کردید در مورد background-image توضیحاتی داده شد. در اینجا به سایر ویژگیهای مربوط به تصویر زمینه می پردازیم. این ویژگی تعیین کننده نوع تکرار شدن تصویر زمینه است. در اینجا مقادیری را که می توان به این ویژگی اختصاص داد بیان می کنیم: repeat این مقدار تعیین می کند که تصویر زمینه در صورتی که از اندازه پنجره کوچکتر بود هم به صورت افقی و هم عمودی تکرار شود تا همه زمینه پنجره را بپوشاند. no-repeat این گزینه مشخص می کند که تصویر زمینه نباید تکرار شود حتی اگر از اندازه پنجره کوچکتر بود. repeat-x این گزینه مشخص می کند که تصویر باید به صورت افقی تکرار شود نه عمودی. repeat-y این گزینه مشخص می کند که تصویر زمینه باید به صورت عمودی تکرار شود. background-attachment از این ویژگی برای تعیین موقعیت تصویر زمینه در هنگام بالا و پایین بردن صفحه به وسیله اسکرول بار در پنجره مرورگر است. مقادیر زیر را می توان برای این ویژگی استفاده کرد: scroll اگر این گزینه را انتخاب کنید تصویر زمینه به همراه محتویات صفحه به بالا و پایین می رود. fixed با انتخاب این گزینه مشخص می کنید که تصویر زمینه در هنگام حرکت کردن محتویات صفحه باید ثابت بماند و حرکت نکند. کد زیر را می توان برای مشخص کردن تصویر زمینه ثابت در بخش HEAD متن استفاده کرد کد: 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 این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد می توانیم به جای گزینه های بالا از مقادیری در مقیاس پیکسل یا درصد قرار دهیم تا تصویر زمینه را در هر فاصله ای از بالا و سمت چپ صفحه که بخواهیم قرار دهیم. در این روش فقط کافیست مقدار فاصله از سمت چپ صفحه را نوشته و مقیاس آن را مشخص کنیم و با یک فاصله مقدار فاصله از بالای صفحه همراه با مقیاس آنرا بنویسیم. به مثال زیر توجه کنید در این مثال از یک تصویر به عنوان زمینه صفحه استفاده شده است که در فاصله ۲۰ پیکسل از بالا و ۴۰ پیکسل از چپ صفحه قرار می گیرد. در ضمن از ویژگی background-attachment: fixed استفاده شده است تا در صورت حرکت دادن صفحه زمینه به صورت ثابت قرار بگیرد. کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم: کد: http://IRNON.com ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ آموزش CSS قسمت چهاردهم با استفاده از استایل این امکان وجود دارد که شکل نشانگر ماوس را وقتی روی قسمت مشخصی از صفحه قرار می گیرد تغییر دهیم. به این منظور می توانیم از ویژگی زیر در استایل مربوط به تگ مورد نظر استفاده کنیم: cursor: نوع نشانگری که مورد نظر ماست برای مثال فرض کنید می خواهیم وقتی نشانگر ماوس روی یک قسمت متن قرار می گیرد به شکل ساعت شنی در آید. می توانیم به صورت زیر عمل کنیم : کد: ماوس خود را روی این متن قرار دهید . اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در تگهای HTML است. در جدول زیر برخی از مقادیر مختلف این ویژگی که شکل نشانگر ماوس را عوض می کنند آورده شده است auto این گزینه نشانگر ماوس را با توجه به تنظیمات مرورگر کاربر تغییر می دهد. crosshair نشانگر ماوس به صورت به علاوه در می آید. default نشانگر ماوس به صورت همان فلش همیشگی در می آید. move نشانگر به شکلی در می آید که در هنگام جا به جا کردن چیزی به خود می گیرد. pointer نشانگر به شکل دست در می آید. help یک علامت سؤال کنار پیکان نشانگر ماوس قرار می گیرد. text به شکلی در می آید که بر روی متنها به خود می گیرد. wait به شکل ساعت شنی در می آید. n-resize یک فلش به سمت شمال s-resize یک فلش به سمت جنوب e-resize یک فلش به سمت مشرق w-resize یک فلش به سمت مغرب ne-resize یک فلش به سمت شمال شرقی nw-resize یک فلش به سمت شمال غربی se-resize یک فلش به سمت جنوب شرقی sw-resize یک فلش به سمت جنوب غربی ۲ پاسخ در “آموزش CSS - قسمت ۱۴ - نشانگر موس” مجید گفت: آذر ۹م, ۱۳۸۷ at ۹:۳۹ ب.ظ ممنون از سایت خوبتون و با آرزوی موفقیت یه سوال و اینکه اگه بخوایم کلا نشانگر ماوس رو عوض کنیم .مثلا غیر از نشانگر های خود ویندوز . یه نشانگر جدید طراحی کنیم و تو صفحه وب ازش استفاده کنیم چیکار باید کرد. خودم چند روش امتحان کردم ولی جواب نداده. پیشنهادی دارید؟ admin گفت: آذر ۱۱م, ۱۳۸۷ at ۹:۴۰ ق.ظ کدی در css وجود داره به نام cursor که برای تعویض نشانگر موس روی یک ناحیه استفاده میشه مثلا : h۲ { cursor: crosshair } در این حالت هرجا که که با استایل h۲ بنویسید نشانگر موس به شکل + در می آید . همچنین شما میتونید نشانگر موسی طراحی کنید با پسور Cur بعد در کد css بنویسید : cursor : url(”address/name.cur”) address/name.cur مسیر فایل شما می باشد http://IRNON.com ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ آموزش CSS قسمت پانزدهم با استفاده از CSS می توانیم نحوه نمایش دادن لینکها را در صفحه تنظیم کنیم. به صورتی که استفاده از جاوا اسکرپت در صفحه تا حد زیادی کم می شود. از طریق استفاده از استایل می توانیم رنگ لینکها، اندازه فونت آنها، زیر خط لینکها، رنگ زمینه هر لینک و بسیاری دیگر از خواص لینکها را تغییر دهیم. برای اینکه بتوانیم از همه خواصی که برای لینکها در CSS وجود دارد استفاده کنیم بهتر است تا استایل را در بخش HEAD متن خود یا در فایلهای CSS خارجی که به صفحه پیوند می شوند استفاده کنیم. در هر دو صورت مراحل انجام کار شبیه هم است. ما در اینجا به استایل را در بخش HEAD متن تعریف می کنیم. برای کار با لینکها در CSS می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید: a:link و a این مشخصه ها نحوه نمایش لینکهایی را که در صفحه وجود دارند و هنوز روی آنها کلیک نشده است تنظیم می کنند. a:hover این مشخصه وضعیت لینک را وقتی که نشانگر ماوس روی آن قرار دارن تنظیم می کند. a:active این قسمت مشخص کننده وضعیت لینکی است که بر روی آن کلیک می شود. a:visited این مشخصه برای لینکهایی که در بازدیدهای قبلی مورد استفاده قرار گرفته اند استفاده می شود. برای کار کردن با لینکها ما در قسمت HEAD متن از مشخصه های بالا استفاده می کنیم. یعنی کد زیر را در بخش HEAD متن وارد می کنیم . همچنین میتوانیم از Style خارجی استفاده کنیم که قبلا توضیح داده شده است کد: برای هر ویژگی بالا می توانید مشخصات خاص خود را تعریف کنید برای مثال می تواند رنگ از مشخصه bachkground-color برای تعیین رنگ زمینه لینک وقتی که ماوس روی ان قرار می گیرد استفاده کنید یا از color برای تعیین رنگ متن لینکها. به طور کلی می توانید از بیشتر مشخصه هایی که برای متن ها کارایی دارند در مورد لینکها هم استفاده کنید برای مثال font-family و font-size و border و … در اینجا یک مثال مطرح می کنیم که در آن لینکهای صفحه به رنگ سبز نمایش داده می شوند با اندازه فونت ۱۲pt و بدون زیرخط، وقتی که ماوس روی آنها قرار می گیرد رنگ آنها قرمز می شود و رنگ زمینه متفاوتی پیدا می کنند همچنین یک کادر نیز اطراف آنها به وجود می آید. در موقع کلیک کردن رنگ لینک سفید می شود و لینکهایی که در دفعات قبلی کلیک شده اند با زیر خط نمایش داده می شوند. برای ساختن لینکهایی با مشخصاتی که بیان شد می توانیم از کد زیر در قسمت HEAD متن یا استایل خارجی استفاده کنیم: کد: ما میتوانیم برای اینکه تنها لینک های قسمت خاصی از صفحه به شکل مورد نظر باشد از ID استفاده کنیم کد: #pre a:link,#pre a { color:green; font-size:۱۰pt; text-decoration:none } #pre a:hover { color:red; background-color:#۶۶۹۹CC; border:#۰۰۶۶۹۹ ۲px solid; text-decoration:none } #pre a:active { color: White } #pre a:visited { text-decoration: underline; color:#۰۰۳۳۹۹ } در این کد ها ما از ID استفاده کرده ایم . حال برای اینکه لینک ها مثلا یک Div در صفحه به این صورت باشند باید ID مورد نظر را برای Div خود تعریف کنیم کد:

کدهای مربوط به لینکها
http://IRNON.com