parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت column-rule

مثال

مشخص کردن رنگ، ضخامت، و استایل خطی که بین ستون ها قرار دارد:

		div

		{

		column-rule:3px outset #ff00ff;

		-moz-column-rule:3px outset #ff00ff; /* Firefox */

		-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

مروگرهای Internet Explorer 10 و Opera خاصیت column-rule را پشتیبانی می کنند.

مرورگر Fitefox خاصیت جایگزین moz-column-rule- را پشتیبانی می کند.

مرورگرهای Safari و Chrome خاصیت جایگزین webkit-column-rule- را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت column-rule را پشتیبانی نمی کند.

تعریف و کاربرد

خصوصیت column-rule در واقع فرم مختصر شده ای برای تنظیم تمام خاصیت های *-column-rule می باشد.

با استفاده از خاصیت column-rule می توانیم، ضخامت، استایل و رنگ خط بین ستون ها را مشخص کنیم.

مقدار پیشفرض	medium none black
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.columnRule="3px outset #ff00ff"

نحوه استفاده

		column-rule: column-rule-width column-rule-style column-rule-color;

مقدار	توضیحات
column-rule-width	ضخامت (عرض) خط بین ستون ها را مشخص می کند.
column-rule-style	استایل خط بین ستون ها را مشخص می کند.
column-rule-color	رنگ خط بین ستون ها را مشخص می کند.

مثال - خودتان امتحان کنید

Column-count

متن داخل عنصر div را به سه ستون تقسیم می کند.

Column-gap

متن داخل عنصر div را به سه ستون تقسیم می کند که فاصله بین هر ستون با دیگری 30 پیکسل است.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:04 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت column-rule-color

مثال

مشخص کردن رنگ خط بین ستون ها:

		div

		{

		column-rule-color:#ff0000;

		-moz-column-rule-color:#ff0000; /* Firefox */

		-webkit-column-rule-color:#ff0000; /* Safari and Chrome */

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

مروگرهای Internet Explorer 10 و Opera خاصیت column-rule-color را پشتیبانی می کنند.

مرورگر Fitefox خاصیت جایگزین moz-column-rule-color- را پشتیبانی می کند.

مرورگرهای Safari و Chrome خاصیت جایگزین webkit-column-rule-color- را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت column-rule-color را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خاصیت column-rule-color می توانیم رنگ خط بین ستون ها را مشخص کنیم.

مقدار پیشفرض	black
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.columnRuleColor="#ff00ff"

نحوه استفاده

		column-rule-color: color;

مقدار	توضیحات	نمایش دادن
color	رنگ خط بین ستون ها را مشخص می کند.	نمایش دادن »

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:04 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت column-rule-style

مثال

مشخص کردن استایل خط بین ستون ها:

		div

		{

		column-rule-style:dotted;

		-moz-column-rule-style:dotted; /* Firefox */

		-webkit-column-rule-style:dotted; /* Safari and Chrome */

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

مروگرهای Internet Explorer 10 و Opera خاصیت column-rule-style را پشتیبانی می کنند.

مرورگر Fitefox خاصیت جایگزین moz-column-rule-style- را پشتیبانی می کند.

مرورگرهای Safari و Chrome خاصیت جایگزین webkit-column-rule-style- را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت column-rule-style را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خاصیت column-rule-color می توانیم استایل خط بین ستون ها را مشخص کنیم.

مقدار پیشفرض	none
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.columnRuleStyle="dotted"

نحوه استفاده

		column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

مقدار	توضیحات	نمایش دادن
none	هیچ قانونی برای خط بین دو ستون تعریف نشده است.	نمایش دادن »
hidden	یک قانون مخفی تعریف می کند.	نمایش دادن »
dotted	خط بین دو ستون به صورت نقطه چین نمایش داده می شود.	نمایش دادن »
dashed	خط بین دو ستون به صورت خط چین نمایش داده می شود.	نمایش دادن »
solid	خط بین دو ستون به صورت یکپارچه نمایش داده می شود.	نمایش دادن »
double	خط بین دو ستون به صورت دو خطه نمایش داده می شود.	نمایش دادن »
groove	خط بین دو ستون به صورت سه بعدی گود دار (groove) نمایش داده می شود. افکت بستگی به مقدار خصوصیت color و width دارد.	نمایش دادن »
ridge	خط بین دو ستون به صورت سه بعدی برجسته (ridge) نمایش داده می شود. افکت بستگی به مقدار خصوصیت color و width دارد.	نمایش دادن »
inset	خط بین دو ستون به صورت سه بعدی inset نمایش داده می شود. افکت بستگی به مقدار خصوصیت color و width دارد.	نمایش دادن »
outset	خط بین دو ستون به صورت سه بعدی outset نمایش داده می شود. افکت بستگی به مقدار خصوصیت color و width دارد.	نمایش دادن »

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:05 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت column-rule-width

مثال

مشخص کردن ضخامت بین دو ستون:

		div

		{

		column-rule-width:10px;

		-moz-column-rule-width:10px; /* Firefox */

		-webkit-column-rule-width:10px; /* Safari and Chrome */

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

مروگرهای Internet Explorer 10 و Opera خاصیت column-rule-width را پشتیبانی می کنند.

مرورگر Firefox خاصیت جایگزین moz-column-rule-width- را پشتیبانی می کند.

مرورگرهای Safari و Chrome خاصیت جایگزین webkit-column-rule-width- را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت column-rule-width را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خاصیت column-rule-width می توانیم ضخامت خط بین ستون ها را مشخص کنیم.

مقدار پیشفرض	medium
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.columnRuleWidth="thin"

نحوه استفاده

		column-rule-width: thin|medium|thick|length;

مقدار	توضیحات	نمایش دادن
thin	خط بین دو ستون نازک می باشد.	نمایش دادن »
medium	خط بین دو ستون متوسط است.	نمایش دادن »
thick	خط بین دو ستون ضخیم است.	نمایش دادن »
length	طول بین خط دو ستون را مشخص می کند.	نمایش دادن »

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:06 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت column-span

مثال

عنصر h2 در تمام ستون ها محصور می شود:

		h2

		{

		column-span:all;

		-webkit-column-span:all; /* Safari and Chrome */

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

مروگرهای Internet Explorer 10 و Opera خاصیت column-span را پشتیبانی می کنند.

مرورگرهای Safari و Chrome خاصیت جایگزین webkit-column-span- را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت column-column-span را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خاصیت column-span می توانیم مشخص کنیم که یک عنصر باید در چند ستون محصور و محدود شود.

مقدار پیشفرض	1
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.columnSpan="all"

نحوه استفاده

		column-span: 1|all;

مقدار	توضیحات	نمایش دادن
1	عنصر می بایست در یک ستون محصور شود.	نمایش دادن »
all	عنصر می بایست در تمام ستون ها محصور شود.	نمایش دادن »

مثال - خودتان امتحان کنید

Column-count

متن داخل عنصر div را به سه ستون تقسیم می کند.

Column-gap

متن داخل عنصر div را به سه ستون تقسیم می کند که فاصله بین هر ستون با دیگری 30 پیکسل است.

Column-rule

عرض، استایل و رنگ خطی که بین هر دو ستون قرار دارد را مشخص می کند.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:06 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت column-width

مثال

مشخص کردن ضخامت ستون ها:

		div

		{

		column-width:100px;

		-moz-column-width:100px; /* Firefox */

		-webkit-column-width:100px; /* Safari and Chrome */

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

مروگرهای Internet Explorer 10 و Opera خاصیت column-width را پشتیبانی می کنند.

مرورگر Firefox خاصیت جایگزین moz-column-width- را پشتیبانی می کند.

مرورگرهای Safari و Chrome خاصیت جایگزین webkit-column-width- را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت column-width را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت column-width می توانیم ضخامت ستون ها را تعیین کنیم.

مقدار پیشفرض	auto
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.columnWidth="100px"

نحوه استفاده

		column-width: auto|length;

مقدار	توضیحات	نمایش دادن
auto	ضخامت ستون توسط مرورگر تعیین می شود.	نمایش دادن »
length	مقداری که ضخامت ستون را مشخص می کند.	نمایش دادن »

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:07 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت columns

مثال

مشخص کردن ضخامت و تعداد ستون ها:

		div

		{

		columns:100px 3;

		-webkit-columns:100px 3; /* Safari and Chrome */

		-moz-columns:100px 3; /* Firefox */

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

مروگرهای Internet Explorer 10 و Opera خاصیت columns را پشتیبانی می کنند.

مرورگر Fitefox خاصیت جایگزین moz-columns- را پشتیبانی می کند.

مرورگرهای Safari و Chrome خاصیت جایگزین webkit-columns- را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت columns را پشتیبانی نمی کند.

تعریف و کاربرد

خاصیت columns فرم مختصر شده ای برای تنظیم خاصیت های column-width و column-count می باشد.

مقدار پیشفرض	auto auto
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.columns="100px 3"

نحوه استفاده

		columns: column-width column-count;

مقدار	توضیحات
column-width	ضخامت ستون ها را مشخص می کند.
column-count	تعداد ستون ها را مشخص می کند.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:07 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت padding-right

مثال

تنظیم padding راست برای عنصر p:

		p 

		{

		padding-right:2cm;

		}

خودتان امتحان کنید »

تعریف و کاربرد

با استفاده از خصوصیت padding-right می توانیم padding سمت راست یک عنصر را مقدار دهی کنیم. (فاصله بین border تا شروع محتوا، padding تلقی می شود).

اعداد منفی برای padding غیر قابل است.

مقدار پیشفرض	0
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.paddingRight="2cm"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت padding-right را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
length	میزان padding راست را به صورت پیکسل، سانتی متر، و ... مشخص می کند. پیش فرض 0px است.	نمایش دادن »
%	میزان padding راست را به صورت درصدی از عرض عنصر والدش محاسبه می کند.	نمایش دادن »
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:09 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت padding-top

مثال

تنظیم padding بالا برای عنصر p:

		p 

		{

		padding-top:2cm;

		}

خودتان امتحان کنید »

تعریف و کاربرد

با استفاده از خصوصیت padding-top می توانیم padding بالای یک عنصر را مقدار دهی کنیم. (فاصله بین border تا شروع محتوا، padding تلقی می شود).

اعداد منفی برای padding غیر قابل است.

مقدار پیشفرض	0
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.paddingTop="2cm"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت padding-top را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
length	میزان padding بالا را به صورت پیکسل، سانتی متر، و ... مشخص می کند. پیش فرض 0px است.	نمایش دادن »
%	میزان padding بالا را به صورت درصدی از عرض عنصر والدش محاسبه می کند.	نمایش دادن »
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:10 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت bottom

مثال

لبه پایینی تصویر را نسبت به لبه پایینی عنصر والدش، 5 پیکسل بالاتر می برد.

		img

		{

		position:absolute;

		bottom:5px;

		}

خودتان امتحان کنید »

تعریف و کاربرد

برای عناصری که مکان آن ها absolute است، ویژگی bottom لبه پایینی عنصر را نسبت به عنصر والدش، بالا یا پایین می برد.

برای عناصری که مکان آن ها relative است، ویژگی bottom لبه پایینی عنصر را نسبت به مکان خودش، بالا یا پایین می برد.

توجه: اگر ویژگی position دارای مقدار static باشد ("position:static") مقدار دهی به ویژگی bottom هیچ اثری ندارد.

مقدار پیشفرض	auto
ارث بری	خیر
نسخه	CSS2
JavaScript ساختار	object.style.bottom="50px"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت bottom را پشتیبانی می کنند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
auto	مقدار پیش فرض می باشد، به مرورگر اجازه می دهد که مکان لبه پایینی عنصر را محاسبه کند.	نمایش دادن »
length	اجازه می دهد که لبه پایینی در px، cm، و غیره مقدار دهی شود. مقادیر منفی نیز قابل قبول است.	نمایش دادن »
%	مکان لبه پایینی را نسبت به والدش به صورت درصدی محاسبه می کند. مقادیر منفی نیز غیر قابل قبول است.	نمایش دادن »
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:10 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت clear

مثال

هیچ عنصر شناوری در سمت چپ و راست پاراگراف مشخص شده وجود ندارد:

		img

		{

		float:left;

		}

		p.clear

		{

		clear:both;

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

تعریف و کاربرد

با استفاده از خاصیت clear مشخص می کنیم که در کدام سمت از یک عنصر، عناصر شناور دیگر اجازه قرار گیری ندارند.

مقدار پیشفرض	none
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.clear="left"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت clear را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.

مقدارهای خصوصیت

مقدار	توضیحات
left	عنصر شناور اجازه ندارد که در سمت چپ قرار گیرد.
right	عنصر شناور اجازه ندارد که در سمت راست قرار گیرد.
both	عنصر شناور اجازه ندارد در دو سمت چپ و راست قرار گیرد.
none	پیش فرض: اجازه می دهد عنصر شناور در هر دو طرف قرار گیرد.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:11 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت clip

مثال

برش یک تصویر:

		img 

		{

		position:absolute;

		clip:rect(0px,60px,200px,0px);

		}

خودتان امتحان کنید »

تعریف و کاربرد

اگر یک تصویر از عنصر والدش بزرگتر باشد، چه اتفاقی می افتد؟ با استفاده از خاصیت clip می توانید یک مستطیل برای بریدن عنصری که به صورت absoulote موقعیت دهی شده است، مشخص کنید.

توجه: وقتی "overflow:visible" باشد، خاصیت clip کار نمی کند.

مقدار پیشفرض	auto
ارث بری	خیر
نسخه	CSS2
JavaScript ساختار	object.style.clip="rect(0px,50px,50px,0px)"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت clip را پشتیبانی می کنند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
shape	یک عنصر را برش می دهد، مقادیر قابل قبول عبارنتد از: (rect (top, right, bottom, left	نمایش دادن »
auto	برش اعمال نمی شود. مقدار پیش فرض است.	نمایش دادن »
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:11 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت cursor

مثال

زمانی که موس روی <span>های مختلف می رود، شکل عادی موس تغییر می کند:

		span.crosshair {cursor:crosshair}

		span.help {cursor:help}

		span.wait {cursor:wait}

خودتان امتحان کنید »

تعریف و کاربرد

با استفاده از خصوصیت cursor، می توانید نحوه ی نمایش مکان نما را زمانی که به یک عنصر اشاره می کند تغییر دهید.

مقدار پیشفرض	auto
ارث بری	بله
نسخه	CSS2
JavaScript ساختار	object.style.cursor="crosshair"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت cursor را پشتیبانی می کنند.

مقدارهای خصوصیت

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:13 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت display

مثال

نمایش عنصر <P> به عنوان یک عنصر inline:

		p.inline

		{

		display:inline;

		}

خودتان امتحان کنید »

تعریف و کاربرد

با استفاده از خاصیت display می توانیم نوع boxی که برای عنصر به کار رفته است را مشخص کنیم.

مقدار پیشفرض	inline
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.display="block"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت display را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقادیر "inline-table", "table", "table-caption", "table-cell", column", "table-column-group", "table-row", "table-row-group", , و "inherit" را پشتیبانی نمی کند.

IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
inline	عناصر را به صورت inline نمایش می دهد (مانند <span>). این مقدار پیش فرض است.	نمایش دادن »
block	یک عنصر را به صورت block نمایش می دهد (مانند block).	نمایش دادن »
inline-block	یک ظرف inline تعریف می کند که عناصر داخل آن به صورت block نمایش داده می شود.
inline-table	عنصر را به صورت جدول inline نمایش می دهد.
list-item	عناصر را مانند عنصر li در نظر می گیرد.	نمایش دادن »
run-in	یک عنصر بسته به محتوا، یا به صورت block یا به صورت inline در نظر گرفته می شود.
table	عنصر را مانند عنصر جدول در نظر می گیرد.
table-caption	عناصر را مانند عنصر <caption> در نظر می گیرد.
table-column-group	عناصر را مانند <colgroup> در نظر می گیرد.
table-header-group	عناصر را مانند عنصر <thead> در نظر می گیرد.
table-footer-group	عناصر را مانند عنصر <tfoot> در نظر می گیرد.
table-row-group	عناصر را مانند عنصر <tbody> در نظر می گیرد.
table-cell	عناصر را مانند <td> در نظر می گیرد.
table-column	عناصر را مانند عنصر <col> در نظر می گیرد.
table-row	عناصر را مانند عنصر ردیف جدول <tr> در نظر می گیرد.
none	عنصر در هر صورت نشان داده نمی شود.	نمایش دادن »
inherit	مقدار خصوصیت display از عنصر والدش ارث بری می کند.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:13 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت float

مثال

شناور کردن عکس در سمت راست:

		img 

		{

		float:right;

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

تعریف و کاربرد

با استفاده از خصوصیت float مشخص می کنیم که آیا یک box (یا عنصر) باید شناور شود یا خیر.

توجه: عناصری که دارای مکان دهی absolute هستند خصوصیت float را در نظر نمی گیرند.

مقدار پیشفرض	none
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.cssFloat="left"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت float را پشتیبانی می کنند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
left	عنصر در سمت چپ شناور می شود.	نمایش دادن »
right	عنصر در سمت راست شناور می شود.	نمایش دادن »
none	عنصر شناور نمی شود و در مکان اصلی خود قرار می گیرد. این مقدار پیش فرض است.	نمایش دادن »
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 2:14 AM