راسخون

مرجع CSS

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

خصوصیت 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 پیکسل است.

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

خصوصیت 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

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

 

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

خصوصیت 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 دارد.

 

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

خصوصیت 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 طول بین خط دو ستون را مشخص می کند.
 

 

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

خصوصیت 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

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

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

خصوصیت 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

مقداری که ضخامت ستون را مشخص می کند.
 

 

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

خصوصیت 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 تعداد ستون ها را مشخص می کند.

 

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

خصوصیت 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 تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

خصوصیت 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 تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

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

خصوصیت bottom

مثال

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

img
{
position:absolute;
bottom:5px;
}

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

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

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

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

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

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

    

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

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

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

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

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

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

 

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

خصوصیت clear

مثال

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

img
{
float:left;
}
p.clear
{
clear:both;
}

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

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

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

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

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

    

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

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

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

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

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

 

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

خصوصیت 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 را پشتیبانی می کنند.

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

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

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

 

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

خصوصیت cursor

مثال

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

span.crosshair {cursor:crosshair}
span.help {cursor:help}
span.wait {cursor:wait}

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

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

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

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

    

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

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

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

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

خصوصیت 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 از عنصر والدش ارث بری می کند.

  

 

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

خصوصیت float

مثال

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

img 
{
float:right;
}

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

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

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

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

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

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

    

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

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

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

مقدار توضیحات نمایش دادن
left عنصر در سمت چپ شناور می شود.
right عنصر در سمت راست شناور می شود.
none

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