مرجع CSS
خصوصیت left
مثال
تنظیم فاصله تصویر از لبه سمت چپ والدش به میزان 5 پیکسل:
{
position:absolute;
left:5px;
}
تعریف و کاربرد
با استفاده از خصوصیت left، هنگامی که عنصر به صورت absolute مکان دهی شده است، می توان لبه سمت چپ عنصر را نسبت به والدش به چپ یا راست جا به جا کرد.
برای مکان دهی relative، خصوصیت left لبه سمت چپ عنصر را نسبت به مکان عادی خودش به سمت چپ یا راست جا به جا می کند.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.left="50px" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت left را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| auto | مرورگر لبه سمت چپ را محاسبه می کند. این مقدار پیش فرض است. | |
| length | لبه سمت چپ را در واحدهای پیکس و سانتی متر و غیره مشخص می کند. | |
| % | لبه سمت چپ یک عنصر را نسبت به عنصر والدش به درصد مشخص می کند. مقادیر منفی قابل قبول است. | |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت overflow
مثال
تنظیم کردن خصوصیت overflow برای scroll شدن عنصر:
{
width:150px;
height:150px;
overflow:scroll;
}
تعریف و کاربرد
با استفاده از خصوصیت overflow می توان مشخص کرد هنگامی که محتوا سرریز می شود، چه اتفاقی رخ دهد.
| مقدار پیشفرض | visible |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.overflow="scroll" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت overflow را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| visible |
سرریز برش داده نمی شود و محتوا از کادر عنصر بیرون می زند. این مقدار پیش فرض است. |
|
| hidden |
سرریز برش داده می شود و محتوای سرریز شده نمایش داده نمی شود. |
|
| scroll |
سرریز برش داده می شود اما همواره یک scroll-bar به محتوا اضافه می شود تا محتوای سرریز شده را مشاهده کرد. |
|
| auto |
اگر سرریز برش داده شد. هنگامی که سرریز رخ می دهد یک scroll-bar به محتوا اضافه شود |
|
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت position
مثال
مکان دهی عنصر <h2>
{
position:absolute;
left:100px;
top:150px;
}
در انتهای این آموزش، مثال های بیشتری را خواهید دید.
تعریف و کاربرد
با استفاده از خصوصیت position، می توان روش مکان دهی به یک عنصر را مشخص کرد (static, relative, absolute or fixed).
| مقدار پیشفرض | static |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.position="absolute" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت positionرا پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| static |
موقعيت عنصر در همان جايي که کد آنها را مي نويسيد ديده مي شود. |
|
| absolute |
موقعيت عنصر نسبت به اولین عنصر والدش که مکان دهی شده است (گه مکان دهی استاتیک نباشد) نمايش داده مي شود. |
|
| fixed |
موقعیت عنصر نسبت به پنجره مرورگر مکان دهی می شود. به عبارت دیگر، موقعيت عنصر حتي در صورتي که به بالا و پايين صفحه برويم(scrolled) يا اندازه پنجره مرورگر را تغييردهيم، در همان موقعيت قبلي باقي مي ماند. |
|
| relative |
يک عنصر نسبت به مکان عادي خودش، مکان دهي مي شود. |
|
| inherit |
تعیین می کند که باید از عنصر والدش ارث بری داشته باشد. |
خصوصیت right
مثال
تنظیم فاصله تصویر از لبه سمت راست والدش به میزان 5 پیکسل:
{
position:absolute;
right:5px;
}
تعریف و کاربرد
با استفاده از خصوصیت right، هنگامی که عنصر به صورت absolute مکان دهی شده است، می توان لبه سمت راست عنصر را نسبت به والدش به چپ یا راست جا به جا کرد.
برای مکان دهی relative، خصوصیت right لبه سمت راست عنصر را نسبت به مکان عادی خودش به سمت چپ یا راست جا به جا می کند.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.right="50px" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت right را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| auto | مرورگر لبه سمت راست را محاسبه می کند. این مقدار پیش فرض است. | |
| length |
لبه سمت راست را در واحدهای پیکس و سانتی متر و غیره مشخص می کند. |
|
| % | لبه سمت راست یک عنصر را نسبت به عنصر والدش به درصد مشخص می کند. مقادیر منفی قابل قبول است. | |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت top
مثال
لبه بالایی تصویر را نسبت به لبه پایینی عنصر والدش، 5 پیکسل پایین تر می برد.
{
position:absolute;
top:5px;
}
تعریف و کاربرد
برای عناصری که مکان آن ها absolute است، ویژگی top لبه بالایی عنصر را نسبت به عنصر والدش، بالا یا پایین می برد.
برای عناصری که مکان آن ها relative است، ویژگی top لبه بالایی عنصر را نسبت به مکان خودش، بالا یا پایین می برد.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.top="50px" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت top را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| auto |
مقدار پیش فرض می باشد، به مرورگر اجازه می دهد که مکان لبه بالایی عنصر را محاسبه کند. |
|
| length |
اجازه می دهد که لبه بالایی در px، cm، و غیره مقدار دهی شود. مقادیر منفی نیز قابل قبول است. |
|
| % |
مکان لبه بالایی را نسبت به والدش به صورت درصدی محاسبه می کند. مقادیر منفی نیز غیر قابل قبول است. |
|
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت visibility
مثال
مخفی کردن عنصر <h2>:
{
visibility:hidden;
}
در انتهای این آموزش، مثال های بیشتری را خواهید دید.
تعریف و کاربرد
با استفاده از خصوصیت visibility می توانید، یک عنصر را نمایش بدهید یا آن را مخفی کنید.
نکته: در خصوصیت visibility حتی عناصر مخفی نیز فضای صفحه را اشغال می کند، بعبارتی فضای آنها رزرو شده باقی می ماند. با استفاده از خصوصیت "display" می توانید عناصر را جوری مخفی نمایید که اثری از آنها در صفحه باقی نماند.
| مقدار پیشفرض | visible |
|---|---|
| ارث بری | بله |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.visibility="hidden" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت visibility را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| visible |
مقدار پیش فرض. عنصر نمایش داده می شود. |
|
| hidden |
عنصر مخفی می شود. (اما هنوز فضای برای عنصر رزرو باقی می ماند.) |
|
| collapse |
فقط برای جدول به کار می رود. collapse یک ستون یا ردیف را حذف می کند، اما روی چیدمان جدول تاثیری ندارد. فضایی که برای ردیف یا ستون نگه داشته شده بود، برای محتواهای دیگر در دسترس است. اگر collapse برای عنصری استفاده شود مانند "hidden" با آن رفتار می شود. |
|
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت z-index
مثال
در مثال زیر، خصوصیت z-index برای تصویر تنظیم شده است:
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
تعریف و کاربرد
خصوصيت z-index ترتيب عناصر را مشخص مي کند (کدام عنصر بايد جلو يا پشت ديگر عناصر باشد)
يک عنصر با z-index بزرگتر هميشه جلوتر از عنصري با z-index کوچکتر قرار مي گيرد.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.zIndex="1" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت z-index را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| auto | ترتیب عنصر معادل ترتیب والدش قرار می گیرد. این مقدار پیش فرض است. | |
| number | ترتیب عنصر معادل عدد مشخص شده، تنظیم می شود. مقادیر منفی نیز قابل قبول است. | |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
|
خصوصیت page-break-after
مثال
تنظیم خصوصیت page break برای جدول تا همیشه بعد از آن یک break ایجاد شود:
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
تعریف و کاربرد
با استفاده از خصوصیت page-break-after می توان رفتار مربوط به شکستن صفحه (رفتن به صفحه بعد) را بعد از یک عنصر تنظیم کرد.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.pageBreakAfter="always" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت page-break-after را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات |
|---|---|
| auto |
در صورت لزوم بعد از عنصر یک page break می گذارد. این مقدار پیش فرض است. |
| always |
همواره بعد از عنصر یک page break درج می کند. |
| avoid |
اجازه درج page break بعد از عنصر را نمی دهد. |
| left |
تا زمانی که به یک صفحه خالی سمت چپ برسد، بعد از عنصر page break درج می کند. |
| right |
تا زمانی که به یک صفحه خالی سمت راست برسد، بعد از عنصر page break درج می کند. |
| inherit |
تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت page-break-before
مثال
تنظیم خصوصیت page break برای عنصر h1 تا همیشه قبل از آن یک break ایجاد شود:
<head>
<style>
@media print
{
h1 {page-break-before:always}
}
</style>
</head>
<body>
....
</body>
</html>
تعریف و کاربرد
با استفاده از خصوصیت page-break-before می توان رفتار مربوط به شکستن صفحه (رفتن به صفحه بعد) را قبل از یک عنصر تنظیم کرد.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.pageBreakBefore="always" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت page-break-before را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات |
|---|---|
| auto |
در صورت لزوم قبل از عنصر یک page break می گذارد. این مقدار پیش فرض است. |
| always |
همواره قبل از عنصر یک page break درج می کند. |
| avoid |
اجازه درج page break قبل از عنصر را نمی دهد. |
| left |
تا زمانی که به یک صفحه خالی سمت چپ برسد، قبل از عنصر page break درج می کند. |
| right |
تا زمانی که به یک صفحه خالی سمت راست برسد، قبل از عنصر page break درج می کند. |
| inherit |
تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت page-break-inside
مثال
تنظیم خصوصیت page break برای جدول تا هیچگاه داخل آن یک break ایجاد نشود:
<head>
<style>
@media print
{
table {page-break-inside:avoid}
}
</style>
</head>
<body>
....
</body>
</html>
تعریف و کاربرد
با استفاده از خصوصیت page-break-before می توان رفتار مربوط به شکستن صفحه (رفتن به صفحه بعد) داخل یک عنصر را تنظیم کرد.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.pageBreakInside="avoid" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت page-break-inside را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات |
|---|---|
| auto |
در صورت لزوم داخل یک page break می گذارد. این مقدار پیش فرض است. |
| avoid |
اجازه درج page break داخل عنصر را نمی دهد. |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت border-collapse
مثال
تبدیل لبه های دوخطی به یک خطی در table:
{
border-collapse:collapse;
}
تعریف و کاربرد
با استفاده از خاصیت border-collapse، می توانید لبه های دوخطی یک جدول را به لبه های یک خطی و مجزا تبدیل نمایید. (در HTML لبه های جدول بصورت پیشفرض دوخطی است)
| مقدار پیشفرض | separate |
|---|---|
| ارث بری | بله |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.borderCollapse="collapse" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت border-collapse را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| collapse | زمانی که خصوصیت های border-spacing و empty-cells در نظر گرفته نشوند، لبه های دوخطی یک جدول را به لبه های یک خطی و مجزا تبدیل می کند. | |
| separate | زمانی که خصوصیت های border-spacing و empty-cells در نظر گرفته شوند، لبه های جدول را به لبه های دو خطی تبدیل می کند. | |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت border-spacing
مثال
تنظیم خصوصیت border-spacing برای یک جدول:
{
border-collapse:separate;
border-spacing:10px 50px;
}
تعریف و کاربرد
با استفاده از خصوصیت border-spacing، می توانید فاصله بین لبه ها در سلول های مجاور یک جدول را مشخص نمایید. (فاصله سلول ها از یکدیگر)
| مقدار پیشفرض | مشخص نشده |
|---|---|
| ارث بری | بله |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.borderSpacing="15px" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت border-spacing را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| length length |
فاصله بین سول های یک جدول را مشخص می کند. مقادیر منفی قابل قبول نیست.
|
|
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت caption-side
مثال
مکان قرار گیری عنوان جدول را مشخص می کند:
{
caption-side:bottom;
}
تعریف و کاربرد
با استفاده از خاصیت caption-side می توانیم مکان قرار گیری عنوان جدول را مشخص کنیم.
| مقدار پیشفرض | top |
|---|---|
| ارث بری | بله |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.captionSide="bottom" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت caption-side را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| top | عنوان جدول را در بالای آن قرار می دهد. | |
| bottom | عنوان جدول را در پایین آن قرار می دهد. | |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت empty-cells
مثال
مخفی کردن پس زمینه و لبه سلول خالی در جدول:
{
border-collapse:separate;
empty-cells:hide;
}
تعریف و کاربرد
با استفاده از خصوصیت empty-cells می توان تنظیم کرد که پس زمینه و لبه یک سلول خالی، در جدول را نمایش داد یا نه. (تنها برای لبه های seperated)
| مقدار پیشفرض | show |
|---|---|
| ارث بری | بله |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.emptyCells="hide" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت empty-cells را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| hide | لبه و پس زمینه سلول خالی، نمایش داده نمی شود. | |
| show |
لبه و پس زمینه سلول خالی، نمایش داده می شود. |
|
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
|
خصوصیت table-layout
مثال
تنظیم نحوه چیدمان ظاهری جدول:
{
table-layout:fixed;
}
تعریف و کاربرد
با استفاده از خصوصیت table-layout می توان الگوریتم چیدمان ظاهری جدول را تنظیم کرد.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.tableLayout="fixed" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت table-layout را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| auto |
الگوریتم چیدمان جدول به صورت اتوماتیک(این مقدار پیش فرض است):
|
|
| fixed |
الگوریتم چیدمان جدول به صورت ثابت:
|
|
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |