آموزش css

[hostime]

<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>

این مثال را به یاد داشته باشید. دوباره از آن استفاده خواهیم کرد. در درس بعدی به سایر ویژگیهای مرتبط با تصویر زمینه می پردازیم.

[hostime]

تنظیمات موقعیت عکس زمینه عناصر صفحه با 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
  این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.

[hostime]

می توانیم به جای گزینه های بالا از مقادیری در مقیاس پیکسل یا درصد قرار دهیم تا تصویر زمینه را در هر فاصله ای از بالا و سمت چپ صفحه که بخواهیم قرار دهیم. در این روش فقط کافیست مقدار فاصله از سمت چپ صفحه را نوشته و مقیاس آن را مشخص کنیم و با یک فاصله مقدار فاصله از بالای صفحه همراه با مقیاس آنرا بنویسیم. به مثال زیر توجه کنید:
در این مثال از لوگوی سایت ما به عنوان زمینه صفحه استفاده شده است که در فاصله 20 پیکسل از بالا و 40 پیکسل از چپ صفحه قرار می گیرد. در ضمن از ویژگی background-attachment: fixed استفاده شده است تا در صورت حرکت دادن صفحه زمینه به صورت ثابت قرار بگیرد. کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم:

<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/cssBGtest.jpg);
background-attachment:fixed;
background-position:40px 20px }
-->
</style>

برای مشاهده نتیجه اینجا را کلیک کنید.
با ترکیب کردن ویژگیهایی که توضیح داده شد می توانیم انواع تصویر زمینه مختلف و جالبی را به وجود بیاوریم. می توانید این کار را انجام دهید و تنوع آنرا ملاحظه کنید.

[hostime]

تغییر شکل نشانگر ماوس با استفاده از استایل

با استفاده از استایل این امکان وجود دارد که شکل نشانگر ماوس را وقتی روی قسمت مشخصی از صفحه قرار می گیرد تغییر دهیم. به این منظور می توانیم از ویژگی زیر در استایل مربوط به تگ مورد نظر استفاده کنیم:

cursor: نوع نشانگری که مورد نظر ماست

برای مثال فرض کنید می خواهیم وقتی نشانگر ماوس روی یک قسمت متن قرار می گیرد به شکل ساعت شنی در آید. می توانیم به صورت زیر عمل کنیم (ما برای مشخص شدن متن از رنگ قرمز در تگ span استفاده کرده ایم.):

<span style="cursor: wait; color: red">ماوس خود را روی این متن قرار دهید.</span>

[hostime]

نتیجه را می توانید اینجا مشاهده کنید:
ماوس خود را روی این متن قرار دهید.
اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در تگهای HTML است.
در جدول زیر برخی از مقادیر مختلف این ویژگی که شکل نشانگر ماوس را عوض می کنند آورده شده است. می توانید ماوس خود را بر روی توضیحات این گزینه ها نگه دارید تا ببینید به چه شکلی در می آید.

[hostime]

مقدار قابل استفاده	توضیحات

auto	این گزینه نشانگر ماوس را با توجه به تنظیمات مرورگر کاربر تغییر می دهد.

crosshair	نشانگر ماوس به صورت به علاوه در می آید.

default	نشانگر ماوس به صورت همان فلش همیشگی در می آید.

move	نشانگر به شکلی در می آید که در هنگام جا به جا کردن چیزی به خود می گیرد.

pointer	نشانگر به شکل دست در می آید.

help	یک علامت سؤال کنار پیکان نشانگر ماوس قرار می گیرد.

text	به شکلی در می آید که بر روی متنها به خود می گیرد.

wait	به شکل ساعت شنی در می آید.

[hostime]

n-resize	یک فلش به سمت شمال

s-resize	یک فلش به سمت جنوب

e-resize	یک فلش به سمت مشرق

w-resize	یک فلش به سمت مغرب

ne-resize	یک فلش به سمت شمال شرقی

nw-resize	یک فلش به سمت شمال غربی

se-resize	یک فلش به سمت جنوب شرقی

sw-resize	یک فلش به سمت جنوب غربی

[hostime]

• a:link و a
  این مشخصه ها نحوه نمایش لینکهایی را که در صفحه وجود دارند و هنوز روی آنها کلیک نشده است تنظیم می کنند.
• a:hover
  این مشخصه وضعیت لینک را وقتی که نشانگر ماوس روی آن قرار دارن تنظیم می کند.
• a:active
  این قسمت مشخص کننده وضعیت لینکی است که بر روی آن کلیک می شود.
• a:visited
  این مشخصه برای لینکهایی که در بازدیدهای قبلی مورد استفاده قرار گرفته اند استفاده می شود.

[hostime]

absolute

ویژگی position:absolute مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.
در اینجا می توانید یک مثال را در مورد استفاده از ویژگی position:absolute در صفحه ببینید:

<div style="position:absolute; top:65px; right:20px; border:double #0033cc; width:350px; color:#ffff00; background-color:#33cccc; height: 40px;">این div در موقعیت تعیین شده در کد آن نمایش داده می شود.</div>

همانطور که در کد بالا می بینید برای DIV موقعیتی با فاصله 65 پیکسل از بالای صفحه و 20 پیکسل از سمت راست صفحه تعیین کرده ایم. با کلیک کردن بر روی لینک زیر می توانید نتیجه را مشاهده کنید:

استفاده از absolute برای ویژگی position ( لینک در یک پنجره جدید باز خواهد شد ).

[hostime]

مانند COLOR در تگ FONT رنگها در این ویژگی به دو صورت تعیین می شوند. شکل کلی این ویژگی به صورت زیر است:

color: نام رنگ مورد نظر
color:#معادل هگزادسیمال رنگ

اگر می خواهید از رنگهای معمولی که با نام شناخته می شوند استفاده کنید کافی است تا نام رنگ مورد نظر خود را در این ویژگی استفاده کنید. این روش ساده تر است ولی انعطاف پذیری کمتری هم دارد چون تنها می توانید رنگ مورد نظر خود را از بین تعداد اندکی نام رنگ انتخاب کنید.