راسخون

مرجع CSS

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

خصوصیت max-height

مثال

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

p
{
max-height:50px;
}

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

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

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

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

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

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

    

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

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

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

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

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

 

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

خصوصیت max-width

مثال

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

p
{
max-width:100px;
}

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

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

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

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

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

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

    

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

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

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

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

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

 

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

خصوصیت min-height

مثال

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

p
{
min-height:100px;
}

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

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

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

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

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

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

    

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

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

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

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

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

 

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

خصوصیت min-width

مثال

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

p
{
min-width:1000px;
}

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

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

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

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

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

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

    

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

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

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

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

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

 

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

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

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

    

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

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

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

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

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

 

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

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

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

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

    

هیچ کدام از مرورگرهای اصلی، خصوصیت 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

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

  
 

 

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

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

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

    

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

 

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

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

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

    

هیچ کدام از مرورگرهای اصلی، خصوصیت 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 است دو برابر انعطاف پذیرتر است.

 

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

خصوصیت box-flex-group

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

    

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

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

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

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

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

نحوه استفاده

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

 

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

خصوصیت box-lines

مثال

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

div
{
display:box;
box-orient:horizontal;
box-lines:multiple;
width:200px;
}

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

    

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

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

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

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

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

نحوه استفاده

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

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

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

 

 

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

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

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

    

هیچ کدام از مرورگرهای اصلی، خصوصیت 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

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

 

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

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

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

    

هیچ یک از مرورگرهای اصلی، خصوصیت 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

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

 

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

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

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

    

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

 

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

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

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

    

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

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

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

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

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

 

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

خصوصیت font-size

مثال

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

h1 {font-size:250%}
h2 {font-size:200%}
p {font-size:100%}

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

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

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

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

    

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