راسخون

مرجع CSS

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

خصوصیت border-image-source

مثال

از یک عکس به عنوان حاشیه در اطراف یک عنصر div استفاده کنید:

div
{
border-image-source: url(border.png);
}

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

    

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

می توانید به بیاموز border-image مراجعه نمایید.

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

با استفاده از خصوصیت border-image-source می توانید از یک عکس به جای استایل های border که توسط خصوصیات border-style داده می شود استفاده کنید.

توجه: اگر مقدار "none" باشد، یا اگر عکس نمایش داده نشود، استایل های border استفاده خواهند شد.

مقدار پیشفرض none
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderImageSource="url(border.png)"

نحوه استفاده

border-image-source: none|image;
مقدار توضیحات
none

هیچ عکسی استفاده نخواهد شد.
image

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

 

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

خصوصیت border-image-width

مثال

تعیین پهنای image-border (عکس حاشیه):

div
{
border-image-source: url(border.png);
border-image-width: 30 30;
}

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

    

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

می توانید به بیاموز border-image مراجعه نمایید.

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

با استفاده از خصوصیت border-image-width می توانید اندازه ی پهنای (عرض) حاشیه ی عکس را تعیین کنید.

در واقع می توانید offset را برای 9 بخش زیر تعیین نمایید:

  1. گوشه بالا - چپ
  2. لبه بالا
  3. گوشه بالا - راست
  4. لبه راست
  5. گوشه پایین - راست
  6. لبه پایین
  7. گوشه پایین - چپ
  8. لبه چپ
  9. ناحیه وسط عکس

بعبارتی border-image-width، فاصله داخلی 9 ناحیه ذکر شده از لبه بالا، راست، پایین و چپ است.

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

نحوه استفاده

border-image-width: number|%|auto;

توجه: این خصوصیت  فاصله حاشیه داخلی (offset) از بالا، راست، پایین و چپ عکس اصلی را مشخص می کند و همانطور که در مثال زیر مشاهده می کنید عکس اصلی را به 9 ناحیه تقسیم می کند (4 تا گوشه، 4 تا لبه و 1 فضای وسط عکس). فضای وسط عکس حذف خواهد شد مگر اینکه از کلمه کلیدی "fill" استفاده نمایید.

 این خصوصیت می تواند از یک تا چهار مقدار داشته باشد (مانند خصوصیت border-image-slice) و ترتیب مقادیر بصورت top و right و bottom و left است. شما می توانید از واحدهای درصد یا پیکسل استفاده کنید.

اگر مقدار چهارم قلم گرفته شود، با مقدار دوم تنظیم خواهد شد، اگر مقدار سوم قلم گرفته شود با مقدار اول تنظیم می شود و اگر مقدار دوم قلم گرفته شود با مقدار اول تنظیم می شود. مقادیر منفی قابل قبول نیست.

اگر عرض برای border تنظیم نشده باشد خصوصیت border-image اثری نخواهد داشت. برای مرورگرهایی که border-image را پشتیبانی می کنند، تکه های تصویرتان در عرض مشخص شده مقیاس می گیرند.

مثال:

border-image-width: 0.5em 1.0em;

border-image-source: url(/pix/css/css3/properties/border-image-1.png); 
border-image-slice: 28; 
border-image-width: 0.5em 1.0em; 
border-image-outset: 0; 
border-image-repeat: round;

در مثال بالا،

  1. گوشه بالا - چپ
  2. لبه بالا
  3. گوشه بالا - راست
  4. لبه راست
  5. گوشه پایین - راست
  6. لبه پایین
  7. گوشه پایین - چپ
  8. لبه چپ
  9. ناحیه وسط عکس
مقدار توضیحات
number

 تعداد تکرار border-width مربوطه را نشان می دهد.
%

به سایز تصویر حاشیه اشاره دارد.
auto

 

 

border-image-source: url(/pix/css/css3/properties/border-image-1.png); 
border-image-slice: 28; 
border-image-width: 0.5em 1.0em; 
border-image-outset: 0; 
border-image-repeat: round;

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

خصوصیت border-radius

مثال

گرد کردن گوشه های عنصر <div>:

div
{
border:2px solid;
border-radius:25px;
}

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

    

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

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

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

با استفاده از خصوصیت مختصر border-radius، می توانید چهار خصوصیت زیر را در یک مرحله تنظیم نمایید:

  1. border-top-left-radius
  2. border-top-right-radius
  3. border-bottom-right-radius
  4. border-bottom-left-radius

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

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

نحوه استفاده

border-radius: 1-4 length|% / 1-4 length|%;

توجه: دو مقدار lenght یا درصد در واقع مشخص کننده شعاع یکی از چهار سمت بیضی است که شکل گوشه های بیرونی لبه را تعریف می کند.

مقادیر اول شعاع افقی گوشه ها را مشخص می کنند که بترتیب برابر است با:

  1. بالا - چپ
  2. بالا - راست
  3. پایین - راست
  4. پایین چپ

مقادیر دوم شعاع عمودی است و ترتیب آنها مانند بالاست. اگر مقدار دوم قلم گرفته شود، از مقدار اول برای آن استفاده می شود. اگر خصوصیت را با صفر تنظیم نمایید، گوشه ها مربعی می شود. اگر مقدار اول را با درصد تنظیم نمایید، این مقدار نسبت به width عنصر سنجیده می شود و همچنین برای مقدار دومی نیز نسبت به height عنصر محاسبه می شود.

مقدار توضیحات نمایش دادن
length شکل گوشه ها را تعیین می کند.
% شکل گوشه ها را به درصد تعیین می کند.

مثال 1

border-radius:2em;

برابر است با:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

مثال 2

border-radius: 2em 1em 4em / 0.5em 3em;

برابر است با:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
 

 

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

خصوصیت border-top-left-radius

مثال

گرد کردن گوشه بالا سمت چپ یک عنصر <div>:

div
{
border:2px solid;
border-top-left-radius:2em;
}

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

    

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

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت border-top-left-radius را پشتیبانی نمی کند.

 

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

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

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

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

نحوه استفاده

border-top-left-radius: length|% [length|%];

توجه: دو مقدار lenght یا درصد در خصوصیت border-top-left-radius در واقع مشخص کننده شعاع یکی از چهار سمت بیضی است که شکل گوشه های بیرونی لبه را تعریف می کند.

مقدار اول شعاع افقی و مقدار دوم شعاع عمودی است. اگر مقدار دوم قلم گرفته شود، از مقدار اول برای آن استفاده می شود. اگر خصوصیت را با صفر تنظیم نمایید، گوشه ها مربعی می شود. اگر مقدار اول را با درصد تنظیم نمایید، این مقدار نسبت به width عنصر سنجیده می شود و همچنین برای مقدار دومی نیز نسبت به height عنصر محاسبه می شود.

مقدار توضیحات نمایش دادن
length شکل گوشه ی بالا سمت چپ را تعیین می کند.
% شکل گوشه ی بالا سمت چپ را به درصد تعیین می کند.
 

 

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

خصوصیت border-top-right-radius

مثال

گرد کردن گوشه بالا سمت راست عنصر <div>:

div
{
border:2px solid;
border-top-right-radius:2em;
}

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

    

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

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت border-top-right-radius را پشتیبانی نمی کند.

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

با استفاده از خصوصیت border-top-right-radius، می توانید شکل لبه در گوشه بالا سمت راست را تعیین نمایید.

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

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

نحوه استفاده

border-top-right-radius: length|% [length|%];

توجه: دو مقدار lenght یا درصد در خصوصیت border-top-right-radius در واقع مشخص کننده شعاع یکی از چهار سمت بیضی است که شکل گوشه های بیرونی لبه را تعریف می کند.

مقدار اول شعاع افقی و مقدار دوم شعاع عمودی است. اگر مقدار دوم قلم گرفته شود، از مقدار اول برای آن استفاده می شود. اگر خصوصیت را با صفر تنظیم نمایید، گوشه ها مربعی می شود. اگر مقدار اول را با درصد تنظیم نمایید، این مقدار نسبت به width عنصر سنجیده می شود و همچنین برای مقدار دومی نیز نسبت به height عنصر محاسبه می شود.

مقدار توضیحات نمایش دادن
length شکل گوشه ی بالا سمت راست را تعیین می کند.
% شکل گوشه ی بالا سمت راست را به درصد تعیین می کند.
 

 

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

خصوصیت box-shadow

مثال

این مثال برای عنصر div سایه قرار داده است:

div
{
box-shadow: 10px 10px 5px #888888;
}

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

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

    

خاصیت box-shadow توسط مرورگرهای IE9+ ، Opera، Firefix، ChromeT Safari 5.1.1 پشتیبانی می شود.

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

با استفاده از خاصیت box-shadow می تواین یک یا چند سایه به box داد.

مقدار پیشفرض none
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.boxShadow="10px 10px 5px #888888"

نحوه استفاده

box-shadow: h-shadow v-shadow blur spread color inset;

توجه: با استفاده از این خاصیت می توان یک یا چند سایه را به box داد. خاصیت یک لیستی از سایه هاست که با کاما از همدیگر جدا شده اند، و هر کدام با مقادیری با طول 2-4 مشخص شده اند، یک رنگ اختیاری دارند، و یک کلید واژه inset اختیاری نیز می گیرند.

مقدار توضیحات نمایش دادن
h-shadow

الزامی است. مکان سایه افقی را مشخص می کند. اعداد منفی نیز مجاز است.
v-shadow

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

اختیاری است. میزان blur را مشخص می کند.
spread

اختیاری. سایز سایه را مشخص می کند.
color

اختیاری است. رنگ سایه را مشخص می کند. رنگ پیش فرض مشکی است.

نکته: در مرورگر Safari پارامتر رنگ الزامی است. اگر رنگ را مشخص نکنید، سایه به هیچ وجه نمایش داده نمی شود.
inset

اختیاری است. سایه را از سایه خارجی به سایه داخلی تغییر می دهد.
 

 

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

خصوصیت overflow-x

مثال

برش دادن لبه های سمت چپ و راست محتوای داخل div، اگر محتوا سرریز کند:

div
{
overflow-x:hidden;
}

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

    

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

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

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

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

برای تشخیص برش دادن لبه های بالا و پایین از خصوصیت overflow-y استفاده کنید.

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

نحوه استفاده

overflow-x: visible|hidden|scroll|auto|no-display|no-content;
مقدار توضیحات نمایش دادن
visible

محتوا برش داده نمی شود، و ممکن است از داخل کادر بیرون بزند.
hidden

محتوا برش داده می شود - ولی هیچ مکانیسمی برای scroll شدن فراهم نمی شود.
scroll

محتوا برش داده می شود و scroll می شود.
auto

در صورتی که سرریز رخ دهد، مکانیزم scroll به کار گرفته می شود.
no-display

اگر محتوا داخل کادر جا نشود و سرریز رخ دهد، کل کادر نمایش داده نمی شود.
no-content

اگر محتوا داخل کادر جا نشود و سرریز رخ دهد، کل محتوا مخفی می شود.
 

 

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

خصوصیت overflow-y

مثال

برش دادن لبه های بالا و پایین محتوای داخل div، در صورتی که محتوا سرریز کند:

div
{
overflow-y:hidden;
}

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

    

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

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

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

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

برای تشخیص برش دادن لبه سمت راست یا لبه سمت چپ از خصوصیت overflow-x استفاده کنید.

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

نحوه استفاده

overflow-y: visible|hidden|scroll|auto|no-display|no-content;
مقدار توضیحات نمایش دادن
visible

محتوا برش داده نمی شود، و ممکن است از داخل کادر بیرون بزند.
hidden

محتوا برش داده می شود - ولی هیچ مکانیسمی برای scroll شدن فراهم نمی شود.
scroll

محتوا برش داده می شود و scroll می شود.
auto

در صورتی که سرریز رخ دهد، مکانیزم scroll به کار گرفته می شود.
no-display

اگر محتوا داخل کادر جا نشود و سرریز رخ دهد، کل کادر نمایش داده نمی شود.
no-content

اگر محتوا داخل کادر جا نشود و سرریز رخ دهد، کل محتوا مخفی می شود.
 

 

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

خصوصیت overflow-style

مثال

تنظیم کردن روش scroll شدن هنگامی که یک عنصر سرریز می کند:

div
{
overflow:auto;
overflow-style:marquee,panner;
}

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

    

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

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

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

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

نحوه استفاده

overflow-style: auto|scrollbar|panner|move|marquee;

توجه: مقدار overflow-style یا auto است، یا لیستی از متدها با ترتیب دلخواهتان است. مرورگر باید اولین متدی که در لیست ذکر شده است و پشتیبانی می کند را استفاده کند.

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

یک scollbar به عناصری که سرریز می کنند اضافه می کند.
panner  
move

کاربر می تواند محتوای یک عنصر را حرکت دهد. به نوعی، کاربر می تواند محتوا را به اطراف با استفاده از موس drag کند.
marquee محتوا به صورت خود کار بدون هیچ رویدادی از سمت کاربرحرکت می کند.
 

 

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

خصوصیت rotation

مثال

چرخش 180 درجه ای عنصر h1:

h1
{
rotation-point:50% 50%;
rotation:180deg;
}

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

    

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

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

خصوصیت rotation یک عنصر block را حول نقطه ای که توسط خصوصیت rotation-point مشخص می شود، در جهت خلاف عقربه های ساعت می چرخاند.

نکته: padding، content، border و background نیز چرخانده می شوند!

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.rotation="180deg"

نحوه استفاده

rotation: angle;
مقدار توضیحات
angle

میزان چرخش عنصر را مشخص می کند. مقادیر ممکن 0deg تا 360deg

 

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

خصوصیت rotation-point

مثال

چرخش 180 درجه ای عنصر h1 حول نقطه مشخص:

h1
{
rotation-point:50% 50%;
rotation:180deg;
}

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

    

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

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

خصوصیت rotation-point یک زوج عدد است که یک نقطه را به عنوان افست از لبه بالایی گوشه چپ مشخص می کند. در حقیقت چرخش حول این نقطه صورت می گیرد.

نکته: خصوصیت rotation-point در کنار خصوصیت rotation به کار می رود.

مقدار پیشفرض 50% 50%
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.rotationPoint="25% 25%"

نحوه استفاده

rotation-point: value;
مقدار توضیحات
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

در صورتی که یک کلید واژه مشخص کردید، مقدار دوم "center" خواهد بود.
x% y%

درصدها اشاره به عرض و ارتفاع کادر حاشیه دارد.

 

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

خصوصیت opacity

مثال

تنظیم میزان شفافیت یک عنصر div:

div
{
opacity:0.5;
}

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

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

    

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

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، از خاصیت جایگزین filter برای تنظیم شفافیت استفاده می کند. مانند: (filter:Alpha(opacity=50.

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

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

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

نحوه استفاده

opacity: value|inherit;
مقدار توضیحات نمایش دادن
value

میزان شفافیت عنصر از 0.0 ( کاملا شفاف) تا 1.0 (کاملا مات) مشخص می کند.
inherit  تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

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

خصوصیت opacity

مثال

تنظیم میزان شفافیت یک عنصر div:

div
{
opacity:0.5;
}

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

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

    

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

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، از خاصیت جایگزین filter برای تنظیم شفافیت استفاده می کند. مانند: (filter:Alpha(opacity=50.

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

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

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

نحوه استفاده

opacity: value|inherit;
مقدار توضیحات نمایش دادن
value

میزان شفافیت عنصر از 0.0 ( کاملا شفاف) تا 1.0 (کاملا مات) مشخص می کند.
inherit  تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

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

خصوصیت opacity

مثال

تنظیم میزان شفافیت یک عنصر div:

div
{
opacity:0.5;
}

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

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

    

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

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، از خاصیت جایگزین filter برای تنظیم شفافیت استفاده می کند. مانند: (filter:Alpha(opacity=50.

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

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

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

نحوه استفاده

opacity: value|inherit;
مقدار توضیحات نمایش دادن
value

میزان شفافیت عنصر از 0.0 ( کاملا شفاف) تا 1.0 (کاملا مات) مشخص می کند.
inherit  تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

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

خصوصیت height

مثال

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

p.ex
{
height:100px;
width:100px;
}

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

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

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

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

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

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

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

    

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

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

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

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