0
عضویت / ورود
شنبه، 29 آذر 1404 ( سرمایه گذاری برای تولید )

مرجع CSS

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

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

خصوصیت max-height

مثال

تنظیم حداکثر ارتفاع پاراگراف:

p
{
max-height:50px;
}
خودتان امتحان کنید »

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

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

تنظیم این خصوصیت باعث می شود مقدار ارتفاع از max-height بیشتر نشود.

توجه: مقدار خصوصیت max-height مقدار خصوصیت height را لغو می کند.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

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

 

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

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

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

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

خصوصیت max-width

مثال

تنظیم حداکثر عرض پاراگراف:

p
{
max-width:100px;
}
خودتان امتحان کنید »

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

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

تنظیم این خصوصیت باعث می شود مقدار ارتفاع از max-width بیشتر نشود.

توجه: مقدار خصوصیت max-width مقدار خصوصیت width را لغو می کند.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

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

 

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

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

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

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

خصوصیت min-height

مثال

تنظیم حداقل ارتفاع پاراگراف:

p
{
min-height:100px;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت min-height می توان حداقل ارتفاع یک عنصر را مشخص کرد.

تنظیم این خصوصیت باعث می شود مقدار ارتفاع از min-height کمتر نشود.

توجه: مقدار خصوصیت min-height مقدار خصوصیت height و max-height را لغو می کند

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

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

 

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

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

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

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

خصوصیت min-width

مثال

تنظیم حداقل عرض پاراگراف:

p
{
min-width:1000px;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت min-width می توان حداقل عرض یک عنصر را مشخص کرد.

تنظیم این خصوصیت باعث می شود مقدار عرض از min-width کمتر نشود.

توجه: مقدار خصوصیت min-width مقدار خصوصیت max-width و width را لغو می کند

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

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

 

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

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

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

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

خصوصیت width

مثال

تنظیم کردن ارتفاع و عرض پاراگراف:

p.ex
{
height:100px;
width:100px;
}
خودتان امتحان کنید »

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

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

استفاده از خصوصیت width می توان ارتفاع عناصر را تنظیم کرد.

توجه: خصوصیت width شامل padding، border و margin نمی شود؛ در واقع این خصوصیت ارتفاع محوطه داخل padding، border و margin را تنظیم می کند.

توجه: خصوصیت های max-width و min-width بر خصوصیت width غلبه می کنند.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

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

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

 

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

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

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

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

خصوصیت box-align

مثال

این مثال عنصر فرزند div را با استفاده از دو خاصیت box-align و box-pack در وسط قرار می دهد:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
خودتان امتحان کنید »

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

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

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت box-align را پشتیبانی نمی کنند.

مرورگر Internet Explorer 10 به پیشوند -ms- نیاز دارد.

مرورگر Firefox به پیشوند -moz- نیاز دارند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

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

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

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

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

نحوه استفاده

box-align: start|end|center|baseline|stretch;
مقدار توضیحات نمایش دادن
start

برای box هایی که در جهت نرمال هستند، لبه بالایی هر فرزند هم راستای لبه بالایی box قرار می گیرد. برای box هایی که در جهت عکس قرار دارند، لبه پایینی هر فرزند، هم راستا با لبه پایینی box قرار می گیرد.

 نمایش دادن »
end

برای box هایی که در جهت نرمال هستند، لبه بالایی هر فرزند هم راستای  لبه پایینی box قرار می گیرد. برای box هایی که در جهت عکس قرار دارند، لبه پایینی هر فرزند، هم راستا با لبه بالایی box قرار می گیرد.

 نمایش دادن »
center

فضای اضافی به طور مساوی تقسیم می شود، نیمی از از فضا بالای فرزند و نیم دیگر در پایین فرزند قرار می گیرد. به عبارتی فرزند در وسط قرار می گیرد.

 نمایش دادن »
baseline

اگر خاصیت box-orient دارای مقادیر inline-axis یا horizontal باشد، تمام فرزندان هم تراز با baseline خود قرار می گیرند.

 نمایش دادن »
stretch

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

  
 

 

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

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

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

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

خصوصیت box-direction

مثال

فرزندان div در این مثال، در جهت معکوس نمایش داده می شوند:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;

/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;

/* W3C */
display:box;
box-direction:reverse;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت box-direction را پشتیبانی نمی کنند.

مرورگر Internet Explorer 10 به پیشوند -ms- نیاز دارد.

مرورگر Firefox به پیشوند -moz- نیاز دارند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

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

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

با استفاده از خاصیت box-direction، جهت چینش فرزندان یک عنصر box را می توان مشخص کرد.

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

نحوه استفاده

box-direction: normal|reverse|inherit;
مقدار توضیحات نمایش دادن
normal

فرزندان را در جهت پیش فرض نمایش می دهد.

 نمایش دادن »
reverse

فرزندان را در جهت معکوس نمایش می دهد.

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

 

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

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

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

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

خصوصیت box-flex

مثال

در این مثال دو عنصر p انعطاف پذیر تعریف شده است. اگر box والد 300 پیکسل عرض داشته باشد، عرض عنصر p1، برابر 100 پیکسل و عرض عنصر p2 برابر 200 پیکسل خواهد بود:

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت box-flex را پشتیبانی نمی کنند.

مرورگر Internet Explorer 10 به پیشوند -ms- نیاز دارد.

مرورگر Firefox به پیشوند -moz- نیاز دارند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

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

 

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

با استفاده از خاصیت box-flexible می توان مشخص نمود که عناصر فرزند دارای سایز انعطاف پذیر یا انعطاف ناپذیر باشند.

نکته: سایز عناصری که انعطاف پذیر هستند، با اضافه و کم شدن والدشان، اضافه و کم می شوند. درصورتی که فضای اضافی در box موجود باشد، عناصر انعطاف پذیر کشیده می شوند تا این فضا را پر کنند.

مقدار پیشفرض 0.0 (مشخص می کند که عنصر انعطاف ناپذیر است)
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.boxFlex=2.0

نحوه استفاده

box-flex: value;
مقدار توضیحات
value

میزان انعطاف پذیری یک عنصر. برای مثال، فرزندی که خاصیتbox-flexible آن 2 است، به نسبت فرزندی که box-flexible آن 1 است دو برابر انعطاف پذیرتر است.

 

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

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

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

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

خصوصیت box-flex-group

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

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت box-flex-group را پشتیبانی نمی کنند.

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

با استفاده از خاصیت box-flexible-group عناصر انعطاف پذیر را به یک گروه flex اختصاص می دهیم.

نکته: سایز عناصری که انعطاف پذیر هستند، با اضافه یا کم شدن سایز والدشان، اضافه یا کم می شود.

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

نحوه استفاده

box-flex-group: integer;
مقدار توضیحات
integer عدد صحیح ( اولین گروه flex برابر 1 و مقادیر بیشتر برای گروه های flex بعدی استفاده می شود.

 

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

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

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

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

خصوصیت box-lines

مثال

در این مثال به عنصر div اجازه داده شده است که در چند خط کشیده شود.

div
{
display:box;
box-orient:horizontal;
box-lines:multiple;
width:200px;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت box-lines را پشتیبانی نمی کنند.

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

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

نکته: به طور پیش فرض، یک box افقی فرزندانش را در یک ردیف می چیند، و یک box عمودی فرزندانش را در یک ستون می چیند.

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

نحوه استفاده

box-lines: single|multiple;
مقدار توضیحات
single

تمام فرزندان در یک ردیف یا یک ستون قرار می گیرند (عناصری که سایز بیشتری دارند، به سادگی سرریز می شوند و از والدشان بزرگتر می شوند)
multiple

برای اینکه به تمام فرزندان فضا اختصاص داده شود، این خاصیت box را در چند خط کشیده می کند.

 

 

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

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

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

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

خصوصیت box-ordinal-group

مثال

این مثال ترتیب نمایش فرزندان یک box را مشخص می کند:

.box
{
display:-ms-flexbox; /* Internet Explorer 10 */
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-ms-flex-order:1; /* Internet Explorer 10 */
-moz-box-ordinal-group:1; /* Firefox */
-webkit-box-ordinal-group:1; /* Safari and Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-ms-flex-order:2; /* Internet Explorer 10 */
-moz-box-ordinal-group:2; /* Firefox */
-webkit-box-ordinal-group:2; /* Safari and Chrome */
box-ordinal-group:2;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت box-ordinal-group را پشتیبانی نمی کنند.

مرورگر Internet Explorer 10 به پیشوند -ms- نیاز دارد.

مرورگر Firefox به پیشوند -moz- نیاز دارند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

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

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

با استفاده از خاصیت box-ordinal-group ترتیب نمایش فرزندان یک box را می توان مشخص کرد.

عناصری با مقادیر کمتر قبل از عناصر مقدار بیشتر قرار می گیرند.

توجه: برای عناصری که دارای مقدار گروه مشابه هستند، چیدمان بر اساس ترتیب نوشتن آنها در سورس می باشد.

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

نحوه استفاده

box-ordinal-group: integer;
مقدار توضیحات نمایش دادن
integer

عدد صحیحی که ترتیب نمایش عناصر فرزند را مشخص می کند.

 نمایش دادن »
 

 

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

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

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

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

خصوصیت box-pack

مثال

این مثال عناصر یک div را با استفاده از هر دو خاصیت های box-pack و box-align در مرکز div قرار می دهد:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

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

مرورگر Internet Explorer10، خاصیت جایگزین ms-flex-pack- را پشتیبانی می کند.

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

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

توجه: box های انعطاف پذیر در مرورگرهای Internet Explorer 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.

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

با استفاده از خاصیت box-pack می توان مشخص کرد که فرزندان یک box هنگامی که سایز box از سایز فرزندان بیشتر است در کجا قرار گیرند.

این خاصیت مکان عمودی را در box های عمودی، و مکان افقی را در box های افقی مشخص می کند.

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

نحوه استفاده

box-pack: start|end|center|justify;
مقدار توضیحات نمایش دادن
start

برای boxهایی با جهت دهی نرمال، لبه سمت چپ اولین فرزند، در سمت راست قرار می گیرد، (فضای اضافی باقیمانده بعد از آخرین فرزند قرار می گیرد.) برای boxهایی با جهت دهی معکوس، لبه سمت راست آخرین فرزند، در سمت چپ قرار می گیرد، (فضای اضافی باقیمانده قبل از اولین فرزند قرار می گیرد.)

 نمایش دادن »
end

برای boxهایی با جهت دهی نرمال، لبه سمت راست آخرین فرزند، در سمت راست قرار می گیرد، (فضای اضافی باقیمانده قبل از اولین فرزند قرار می گیرد.)  برای  boxهایی با جهت دهی معکوس، لبه سمت چپ اولین فرزند، در سمت چپ قرار می گیرد، (فضای اضافی باقیمانده قبل از اولین فرزند قرار می گیرد.)

 نمایش دادن »
center

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

 نمایش دادن »
justify

فضای اضافی به طور مساوی بین فرزندان  تقسیم می شود (هیچ فضای اضافی قبل از اولین فرزند و بعد از آخرین فرزند وجود ندارد)

 نمایش دادن »

 

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

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

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

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

خصوصیت font

مثال

مشخص کردن تمام ویژگی ها در یک تخصیص:

p.ex1
{
font:15px arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}
خودتان امتحان کنید »

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

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

با استفاده از خاصیت مختصر شده font، می توانیم تمام ویژگی های مربوط به فونت را در یک تخصیص، تنظیم کنیم.

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

 "font-style font-variant font-weight font-size/line-height font-family"

مقادیر مربوط به font-size و font-family اجباری هستند. اگر مقادیر مربوط به سایر خاصیت ها، از قلم بیفتد، مقدار پیش فرض (در صورت وجود) برای آن لحاظ می شود.

توجه: خاصیت line-height فاصله بین خطوط را تنظیم می کند.

مقدار پیشفرض مشخص نشده
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.font="italic small-caps bold 12px arial,sans-serif"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

Font Properties

Property/مقدار توضیحات
font-style Style یک فونت را تنظیم می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-style مراجعه فرمایید.
font-variant کوچک یا بزرگ بودن حروف را مشخص می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به  font-variantمراجعه فرمایید.
font-weight ضخامت یک فونت را تنظیم می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-weight مراجعه فرمایید.
font-size/line-height اندازه یک فونت و فاصله بین خطوط را مشخص می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-size و line-height مراجعه فرمایید.
font-family نام فونت را تنظیم می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-family مراجعه فرمایید.
caption

از فونتی استفاده می کند که توسط کنترلهای caption به کار رفته است. (کنترلهای caption مانند Button و Drop-Down و غیره)
icon از فونتی استفاده می کند که توسط آیکن به کار گرفته شده است.
menu از فونتی استفاده می کند که توسط منوی پایین افتادنی استفاده شده است.
message-box از فونتی استفاده می کند که توسط پنجره پیغام استفاده شده است.
small-caption

یک ورژن کوچکتری از فونت caption
status-bar

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

 

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

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

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

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

خصوصیت font-family

مثال

مشخص کردن فونت یک پاراگراف:

p
{
font-family:"Times New Roman",Georgia,Serif;
}
خودتان امتحان کنید »

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

با استفاده از خاصیت font-family می توانیم فونت مربوط به یک عنصر تنظیم کنیم.

خاصیت font-family  می تواند چندین نام فونت را در خود به عنوان رزرو نگه دارد. اگر مرورگر از اولین فونت پشتیبانی نکرد، فونت بعدی را امتحان می کند.

به طور کلی دو نوع نام برای font-family وجود دارد:

  • family-name: در این روش باید نام یک Font را مشخص کنیم (مانند Tahoma,Arial)
  • generic-family: یک گروه از Fontهایی که شبیه یکدیگرند (مانند Serif,Monospase)

در تخصیص نام فونت، ابتدا از فونتهایی که خودتان مد نظر دارید استفاده کنید و در انتها همیشه از فونت های مشابه استفاده کنید، در این ثورت مرورگر، اگر فونت های مد نظر شما را در دسترس نداشت حتما از فونت های مشابه که در تخصیص ذکر شده است، استفاده می کند.

توجه: مقادیر را با کاما از همدیگر جدا نمایید.

توجه: اگر نام فونت حاوی خط فاصله بود، حتما باید در کوتیشن نوشته شود. تک کوتیشن هنگام  استفاده از خاصیت style در تگ های html ضروری است.

مقدار پیشفرض مشخص نشده
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.fontFamily="arial,sans-serif"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

مقدار توضیحات نمایش دادن
family-name
generic-family		 یک لیست دارای اولیت از نام فونتها یا فونت های مشابه را مشخص می کند. نمایش دادن »
inherit تعيين مي کند که نام فونت بايد از والدش، ارث بري داشته باشد.  
 

 

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

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

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

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

خصوصیت font-size

مثال

مشخص کردن اندازه متن عناصر مختلف:

h1 {font-size:250%}
h2 {font-size:200%}
p {font-size:100%}
خودتان امتحان کنید »

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

با استفاده از خصوصیت font-size می توانیم اندازه فونت را مشخص کنیم.

مقدار پیشفرض medium
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.fontSize="larger"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

مقدار توضیحات نمایش دادن
xx-small اندازه فونت را خیلی خیلی کوچک می کند. نمایش دادن »
x-small اندازه فونت را خیلی کوچک می کند. نمایش دادن »
small اندازه فونت را کوچک می کند. نمایش دادن »
medium اندازه فونت را متوسط قرار می دهد. این مقدار پیش فرض است. نمایش دادن »
large اندازه فونت را بزرگ قرار می دهد. نمایش دادن »
x-large اندازه فونت را خیلی بزرگ قرار می دهد. نمایش دادن »
xx-large اندازه فونت را خیلی خیلی بزرگ قرار می دهد. نمایش دادن »
smaller

اندازه فونت را از اندازه فونت عنصر والدش کوچکتر قرار می دهد.

 نمایش دادن »
larger

 اندازه فونت را از اندازه فونت عنصر والدش بزرگتر قرار می دهد.

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

 

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

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

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