0
عضویت / ورود
پنجشنبه، 23 اسفند 1403 ( جهش تولید با مشارکت مردم )

مرجع CSS

 
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت left

مثال

تنظیم فاصله تصویر از لبه سمت چپ والدش به میزان 5 پیکسل:

img
{
position:absolute;
left:5px;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت left، هنگامی که عنصر به صورت absolute مکان دهی شده است، می توان لبه سمت چپ عنصر را نسبت به والدش به چپ یا راست جا به جا کرد.

برای مکان دهی relative، خصوصیت left لبه سمت چپ عنصر را نسبت به مکان عادی خودش به سمت چپ یا راست جا به جا می کند.

توجه: در صورتی که position دارای مقدار static باشد، خصوصیت left هیچ تاثیری ندارد.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

 

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

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

سه شنبه 11 آذر 1393  2:14 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت overflow

مثال

تنظیم کردن خصوصیت overflow برای scroll شدن عنصر:

div 
{
width:150px;
height:150px;
overflow:scroll;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت overflow می توان مشخص کرد هنگامی که محتوا سرریز می شود، چه اتفاقی رخ دهد.

مقدار پیشفرض visible
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.overflow="scroll"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

مقدار توضیحات نمایش دادن
visible

سرریز برش داده نمی شود و محتوا از کادر عنصر بیرون می زند. این مقدار پیش فرض است.

 نمایش دادن »
hidden

سرریز برش داده می شود و محتوای سرریز شده نمایش داده نمی شود.

 نمایش دادن »
scroll

سرریز برش داده می شود اما همواره یک scroll-bar به محتوا اضافه می شود تا محتوای سرریز شده را مشاهده کرد.

 نمایش دادن »
auto

اگر سرریز برش داده شد. هنگامی که سرریز رخ می دهد یک scroll-bar به محتوا اضافه شود

 نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

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

سه شنبه 11 آذر 1393  2:15 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت position

مثال

مکان دهی عنصر <h2>

h2
{
position:absolute;
left:100px;
top:150px;
}
خودتان امتحان کنید »

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

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

با استفاده از خصوصیت position، می توان روش مکان دهی به یک عنصر را مشخص کرد (static, relative, absolute or fixed).

مقدار پیشفرض static
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.position="absolute"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

مقدار توضیحات نمایش دادن
static

موقعيت عنصر در همان جايي که کد آنها را مي نويسيد ديده مي شود.

 نمایش دادن »
absolute

موقعيت عنصر نسبت به اولین عنصر والدش که مکان دهی شده است (گه مکان دهی استاتیک نباشد) نمايش داده مي شود.

 نمایش دادن »
fixed

موقعیت عنصر نسبت به پنجره مرورگر مکان دهی می شود. به عبارت دیگر، موقعيت عنصر حتي در صورتي که به بالا و پايين صفحه برويم(scrolled) يا اندازه پنجره مرورگر را تغييردهيم، در همان موقعيت قبلي باقي مي ماند.

 نمایش دادن »
relative

يک عنصر نسبت به مکان عادي خودش، مکان دهي مي شود.

 نمایش دادن »
inherit

تعیین می کند که باید از عنصر والدش ارث بری داشته باشد.

  

 

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

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

سه شنبه 11 آذر 1393  2:16 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت right

مثال

تنظیم فاصله تصویر از لبه سمت راست والدش به میزان 5 پیکسل:

img
{
position:absolute;
right:5px;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت right، هنگامی که عنصر به صورت absolute مکان دهی شده است، می توان لبه سمت راست عنصر را نسبت به والدش به چپ یا راست جا به جا کرد.

برای مکان دهی relative، خصوصیت right لبه سمت راست عنصر را نسبت به مکان عادی خودش به سمت چپ یا راست جا به جا می کند.

توجه: در صورتی که position دارای مقدار static باشد، خصوصیت right هیچ تاثیری ندارد.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

مقدار توضیحات نمایش دادن
auto مرورگر لبه سمت راست را محاسبه می کند. این مقدار پیش فرض است. نمایش دادن »
length

 لبه سمت راست را در واحدهای پیکس و سانتی متر و غیره مشخص می کند.

 نمایش دادن »
% لبه سمت راست یک عنصر را نسبت به عنصر والدش به درصد مشخص می کند. مقادیر منفی قابل قبول است. نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

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

سه شنبه 11 آذر 1393  2:16 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت top

مثال


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

img
{
position:absolute;
top:5px;
}
خودتان امتحان کنید »

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

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

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

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

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

مقدار توضیحات نمایش دادن
auto

مقدار پیش فرض می باشد، به مرورگر اجازه می دهد که مکان لبه بالایی عنصر را محاسبه کند.

 نمایش دادن »
length

اجازه می دهد که لبه بالایی در px، cm، و غیره مقدار دهی شود. مقادیر منفی نیز قابل قبول است.

 نمایش دادن »
%

مکان لبه بالایی را نسبت به والدش به صورت درصدی محاسبه می کند. مقادیر منفی نیز غیر قابل قبول است.

 نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

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

سه شنبه 11 آذر 1393  2:17 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت visibility

مثال

مخفی کردن عنصر <h2>:

h2
{
visibility:hidden;
}
خودتان امتحان کنید »

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

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

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

نکته: در خصوصیت visibility حتی عناصر مخفی نیز فضای صفحه را اشغال می کند، بعبارتی فضای آنها رزرو شده باقی می ماند. با استفاده از خصوصیت "display" می توانید عناصر را جوری مخفی نمایید که اثری از آنها در صفحه باقی نماند.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

توجه: هیچ کدام از نسخه های Internet Explorer (حتی IE8) مقدار "inherit" را برای خصوصیت visibility پشتیبانی نمی کنند.

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

مقدار توضیحات نمایش دادن
visible

مقدار پیش فرض. عنصر نمایش داده می شود.

 نمایش دادن »
hidden

عنصر مخفی می شود. (اما هنوز فضای برای عنصر رزرو باقی می ماند.)

 نمایش دادن »
collapse

فقط برای جدول به کار می رود. collapse یک ستون یا ردیف را حذف می کند، اما روی چیدمان جدول تاثیری ندارد. فضایی که برای ردیف یا ستون نگه داشته شده بود، برای محتواهای دیگر در دسترس است.

اگر collapse برای عنصری استفاده شود مانند "hidden" با آن رفتار می شود.

 نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

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

سه شنبه 11 آذر 1393  2:18 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت z-index

مثال

در مثال زیر، خصوصیت z-index برای تصویر تنظیم شده است:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
خودتان امتحان کنید »

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

خصوصيت z-index ترتيب عناصر را مشخص مي کند (کدام عنصر بايد جلو يا پشت ديگر عناصر باشد)

يک عنصر با z-index بزرگتر هميشه جلوتر از عنصري با z-index کوچکتر قرار مي گيرد. 

توجه: خصوصیت z-index فقط در مواقعی کار می کند که عنصر با استفاده از خصوصیت position مکان دهی شده باشد.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

 

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

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

سه شنبه 11 آذر 1393  2:18 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت page-break-after

مثال

تنظیم خصوصیت page break برای جدول تا همیشه بعد از آن یک break ایجاد شود:

<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>

<body>
....
</body>
</html>

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

با استفاده از خصوصیت page-break-after می توان رفتار مربوط به شکستن صفحه (رفتن به صفحه بعد) را بعد از یک عنصر تنظیم کرد.

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

توجه: تا جایی که امکان دارد از خصوصیت های مربوط به شکستن صفحه (page-breaking) کمتر استفاده نمایید و از به کارگیری این خصوصیت در جداول، عناصر شناور، و عنصرهای block با حاشیه بپرهیزید.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

توجه: هیچ کدام از نسخه های Internet Explorer مقادیر "right" ،"left" یا "inherit" را برای این خصوصیت پشتیبانی نمی کنند.

توجه: مرورگر های Firefox، Chrome و Safari مقادیر "avoid"، "left" و "avoid" را برای این خصوصیت پشتیبانی نمی کنند.

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

مقدار توضیحات
auto

در صورت لزوم بعد از عنصر یک page break می گذارد. این مقدار پیش فرض است.
always

همواره بعد از عنصر یک page break درج می کند.
avoid

اجازه درج page break بعد از عنصر را نمی دهد.
left

تا زمانی که به یک صفحه خالی سمت چپ برسد، بعد از عنصر page break درج می کند.
right

تا زمانی که به یک صفحه خالی سمت راست برسد، بعد از عنصر page break درج می کند.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
 

 

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

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

سه شنبه 11 آذر 1393  2:19 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت page-break-before

مثال

تنظیم خصوصیت page break برای عنصر h1 تا همیشه قبل از آن یک break ایجاد شود:

<html>
<head>
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
</head>

<body>
....
</body>
</html>

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

با استفاده از خصوصیت page-break-before می توان رفتار مربوط به شکستن صفحه (رفتن به صفحه بعد) را قبل از یک عنصر تنظیم کرد.

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

توجه: تا جایی که امکان دارد از خصوصیت های مربوط به شکستن صفحه (page-breaking) کمتر استفاده نمایید و از به کارگیری این خصوصیت در جداول، عناصر شناور، و عنصرهای block با حاشیه بپرهیزید.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

توجه: هیچ کدام از نسخه های Internet Explorer مقادیر "left"، "right" یا "inherit" را برای این خصوصیت پشتیبانی نمی کنند.

توجه: مرورگر های Firefox، Chrome و Safari مقادیر "right"، "left" و "avoid" را برای این خصوصیت پشتیبانی نمی کنند.

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

مقدار توضیحات
auto

در صورت لزوم قبل از عنصر یک page break می گذارد. این مقدار پیش فرض است.
always

همواره قبل از عنصر یک page break درج می کند.
avoid

اجازه درج page break قبل از عنصر را نمی دهد.
left

تا زمانی که به یک صفحه خالی سمت چپ برسد، قبل از عنصر page break درج می کند.
right

تا زمانی که به یک صفحه خالی سمت راست برسد، قبل از عنصر page break درج می کند.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
 

 

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

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

سه شنبه 11 آذر 1393  2:20 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت page-break-inside

مثال

تنظیم خصوصیت page break برای جدول تا هیچگاه داخل آن یک break ایجاد نشود:

<html>
<head>
<style>
@media print
{
table {page-break-inside:avoid}
}
</style>
</head>

<body>
....
</body>
</html>

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

با استفاده از خصوصیت page-break-before می توان رفتار مربوط به شکستن صفحه (رفتن به صفحه بعد) داخل یک عنصر را تنظیم کرد.

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

توجه: تا جایی که امکان دارد از خصوصیت های مربوط به شکستن صفحه (page-breaking) کمتر استفاده نمایید و از به کارگیری این خصوصیت در جداول، عناصر شناور، و عنصرهای block با حاشیه بپرهیزید.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

توجه: هیچ کدام از نسخه های Internet Explorer مقدار "inherit" را برای این خصوصیت پشتیبانی نمی کنند.

توجه: مرورگر های Firefox، Chrome و Safari مقادیر  "avoid" را برای این خصوصیت پشتیبانی نمی کنند.

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

مقدار توضیحات
auto

در صورت لزوم داخل یک page break می گذارد. این مقدار پیش فرض است.
avoid

اجازه درج page break داخل عنصر را نمی دهد.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

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

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

سه شنبه 11 آذر 1393  2:20 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت border-collapse

مثال

تبدیل لبه های دوخطی به یک خطی در table:

table
{
border-collapse:collapse;
}
خودتان امتحان کنید »

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

با استفاده از خاصیت border-collapse، می توانید لبه های دوخطی یک جدول را به لبه های یک خطی و مجزا تبدیل نمایید. (در HTML لبه های جدول بصورت پیشفرض دوخطی است)

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

توجه: اگر اعلان DOCTYPE! را تنظیم نکنید، خصوصیت border-collapse ممکن است نتایج متفاوتی را تولید نماید.

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

مقدار توضیحات نمایش دادن
collapse زمانی که خصوصیت های border-spacing و empty-cells در نظر گرفته نشوند، لبه های دوخطی یک جدول را به لبه های یک خطی و مجزا تبدیل می کند. نمایش دادن »
separate زمانی که خصوصیت های border-spacing و empty-cells در نظر گرفته شوند، لبه های جدول را به لبه های دو خطی تبدیل می کند. نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

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

سه شنبه 11 آذر 1393  2:21 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت border-spacing

مثال

تنظیم خصوصیت border-spacing برای یک جدول:

table
{
border-collapse:separate;
border-spacing:10px 50px;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت border-spacing، می توانید فاصله بین لبه ها در سلول های مجاور یک جدول را مشخص نمایید. (فاصله سلول ها از یکدیگر)

مقدار پیشفرض مشخص نشده
ارث بری بله
نسخه CSS2
JavaScript ساختار object.style.borderSpacing="15px"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

توجه: مرورگر Internet Explorer 8 به DOCTYPE! نیاز دارد.

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

مقدار توضیحات نمایش دادن
length length فاصله بین سول های یک جدول را مشخص می کند. مقادیر منفی قابل قبول نیست.
  • اگر فقط یک مقدار مشخص شود، فاصله افقی و عمودی یکسان درنظر گرفته خواهد شد.
  • اگر دو مقدار مشخص شود، مقدار اول فاصله افقی را تنظیم می کند و مقدار دوم فاصله عمودی را تنظیم می کند.
 نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

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

سه شنبه 11 آذر 1393  2:22 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت caption-side

مثال

مکان قرار گیری عنوان جدول را مشخص می کند:

caption
{
caption-side:bottom;
}
خودتان امتحان کنید »

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

با استفاده از خاصیت caption-side می توانیم مکان قرار گیری عنوان جدول را مشخص کنیم.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

توجه: IE8 در صورتی که DOCTYPE! مشخص شده باشد، خاصیت caption-side را پشتیبانی می کند.

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

مقدار توضیحات نمایش دادن
top عنوان جدول را در بالای آن قرار می دهد. نمایش دادن »
bottom عنوان جدول را در پایین آن قرار می دهد. نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

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

سه شنبه 11 آذر 1393  2:23 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت empty-cells

مثال

مخفی کردن پس زمینه و لبه سلول خالی در جدول:

table
{
border-collapse:separate;
empty-cells:hide;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت empty-cells می توان تنظیم کرد که پس زمینه و لبه یک سلول خالی، در جدول را نمایش داد یا نه. (تنها برای لبه های seperated)

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

مقدار توضیحات نمایش دادن
hide لبه و پس زمینه سلول خالی، نمایش داده نمی شود. نمایش دادن »
show

لبه و پس زمینه سلول خالی، نمایش داده می شود.

 نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

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

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

سه شنبه 11 آذر 1393  2:24 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

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

خصوصیت table-layout

مثال

تنظیم نحوه چیدمان ظاهری جدول:

table
{
table-layout:fixed;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت table-layout می توان الگوریتم چیدمان ظاهری جدول را تنظیم کرد.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

مقدار توضیحات نمایش دادن
auto

الگوریتم چیدمان جدول به صورت اتوماتیک(این مقدار پیش فرض است):

  • عرض ستون معادل عریض ترین سلول است.
  • این چیدمان می تواند کند باشد، زیرا قبل از تشخیص چیدمان نهایی بایستی محتوای همه سلول ها خوانده شوند (تا عریض ترین سلول به دست آید).
 نمایش دادن »
fixed

الگوریتم چیدمان جدول به صورت ثابت:

  • چیدمان افقی جدول فقط به عرض جدول و عرض ستون ها وابسته است، و ارتباطی با محتوای سلول ها ندارد.
  • مرورگر با این چیدمان جدول را سریعتر از چیدمان اتوماتیک ترکیب بندی می کند.
  • مرورگر به محض دریافت اولین ردیف شروع به نمایش جدول می کند.
 نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

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

سه شنبه 11 آذر 1393  2:24 AM
تشکرات از این پست
دسترسی سریع به انجمن ها