0
عضویت / ورود
پنجشنبه، 11 بهمن 1403 ( جهش تولید با مشارکت مردم )

مرجع CSS

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

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

خصوصیت animation-play-state

مثال

متوقف کردن انیمیشن:

animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari and Chrome */
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-play-state را پشتیبانی می کنند.

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

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

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

با استفاده از خصوصیت animation-play-state می توان اجرا یا توقف انیمشن را تعیین نمود.

توجه: با استفاده از این خصوصیت در JavaScript می توان اجرای انیمیشن را در طول یک سیکل، متوقف نمود.

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

نحوه استفاده

animation-play-state: paused|running;
مقدار توضیحات نمایش دادن
paused انیمیشن را متوقف می کند. نمایش دادن »
running انیمیشن را اجرا (run) می کند. نمایش دادن »

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

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

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

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

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

خصوصیت background

مثال

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

body
{ 
background: #00ff00 url('smiley.gif') no-repeat fixed center; 
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

از خصوصیت background می توانید برای مختصر نویسی خصوصیت های مربوط به پس زمینه استفاده نمایید.

خصوصیت هایی که می توایند تنظیم نمایید:

  1. background-color
  2. background-position
  3. background-size
  4. background-repeat
  5. background-origin
  6. background-clip
  7. background-attachment
  8. background-image

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

مقدار پیشفرض see individual properties
ارث بری خیر
نسخه CSS1 + new properties in CSS3
JavaScript ساختار object.style.background="red url(smiley.gif) top left no-repeat"

نحوه استفاده

background: color position size repeat origin clip attachment image;
مقدار توضیحات CSS
background-color رنگ پس زمینه یک عنصر را تنظیم می کند. 1
background-position شروع مکان قرارگیری عکس پس زمینه را تنظیم می کند. 1
background-size اندازه تصویر پس زمینه را تنظیم می کند. 3
background-repeat چگونگی تکرار عکس پس زمینه را تنظیم می کند. 1
background-origin ناحیه قرار گیری عکس پس زمینه را مشخص می کند. (تصویر پس زمینه می تواند در قسمت محتوی (content-box)، لبه (border-box) و یا مکان (padding-box) قرار گیرد) 3
background-clip ناحیه رنگ آمیزی پس زمینه را مشخص می کند. 3
background-attachment مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه  
background-image عکس های پس زمینه را تنظیم می کند. 1

بیاموزهای مرتبط

Styling Backgrounds (بیاموز CSS)

CSS3 Background (بیاموز CSS3)

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

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

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

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

خصوصیت background-attachment

مثال

چگونه عکس پس زمینه را ثابت کنیم:

body
{ 
background-image:url('w3css.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت background-attachment می توانید تنظیم نمایید که، اگر صفحه Scroll داشت و به سمت پایین یا بالا حرکت کردیم آیا عکس پس زمینه در جای خود ثابت بماند یا خیر.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

مقدار توضیحات
scroll عکس پس زمینه همراه با عنصر، scroll می شود. (مقدار پیشفرض)
fixed عکس پس زمینه نسبت به محل نمایش، ثابت می شود.
local عکس پس زمینه همراه با محتویات عنصر، scroll می شود.
 

 

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

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

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

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

خصوصیت background-color

مثال

تنظیم رنگ پس زمینه چند عنصر مختلف: (در انتهای این بیاموز، مثال های بیشتری را خواهید دید)

body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت background-color می توانید رنگ پس زمینه یک عنصر را تنظیم نمایید.

پس زمینه یک عنصر، شامل padding و border نیز می شود. (اما margin جزو آن نیست)

مقدار پیشفرض transparent
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.backgroundColor="#00FF00"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

نکته ها و ترفندها

توجه: زمانی که از عکس یا رنگ پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.

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

مقدار توضیحات نمایش دادن
color برای مشاهده لیست رنگ ها، به لینک HTML Colors مراجعه نمایید. نمایش دادن »
transparent تعیین می کند که رنگ پس زمینه باید ناپیدا (transparent) باشد. transparent مقدار پیشفرض است. نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
مثالs

مثال - خودتان امتحان کنید

تنظیم background-color قسمتی از یک متن
این مثال، نشان می دهد که چگونه رنگ پس زمینه قسمتی از یک متن را تنظیم نماییم.

 

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

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

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

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

خصوصیت background-image

مثال

تنظیم عکس پس زمینه، برای عنصر <body>:

body
{
background-image:url('paper.gif');
background-color:#cccccc;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت background-image، می توانید برای یک عنصر، یک یا چند عکس پس زمینه تنظیم نمایید.

پس زمینه یک عنصر، شامل content و border و padding است. (margin شامل پس زمینه نمی شود)

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

مقدار پیشفرض none
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.backgroundImage="url(stars.gif)"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

نکته ها و ترفندها

نکته: بدلیل اینکه ممکن است عکس پس زمینه، قابل دسترس نباشد، همیشه یک background-color تنظیم نمایید.

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

مقدار توضیحات
url('URL') URL عکس پس زمینه، برای تنظیم بیشتر از یک عکس، URLها را با کاما از هم جدا نمایید.
none هیچ عکسی بعنوان پس زمینه نمایش داده نمی شود. (مقدار پیشفرض)
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باش

 

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

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

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

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

خصوصیت background-position

مثال

چگونگی مکان دهی عکس پس زمینه:

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت background-position، می توانید مکان شروع قرارگیری عکس پس زمینه را مشخص نمایید.

توجه: برای اینکه این خصوصیت در مرورگرهای Firefox و Opera کار کند، باید خصوصیت background-attachment را با مقدار "fixed" تنظیم نمایید.

مقدار پیشفرض 0% 0%
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.backgroundPosition="center"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

مقدار توضیحات نمایش دادن
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 اگر تنها یک keyword را مشخص نماید، قسمت دوم با مقدار "center" تنظیم خواهد شد. نمایش دادن »
x% y% مقدار اول مکان افقی و مقدار دوم مکان عمودی را مشخص می کند. گوشه بالا سمت چپ، 0% 0% است و گوشه پایین سمت راست 100% 100% است. اگر تنها یک مقدار را مشخص نمایید، قسمت دوم با مقدار "50%" تنظیم خواهد شد. (مقدار پیشفرض 0% 0%) نمایش دادن »
xpos ypos مقدار اول مکان افقی و مقدار دوم مکان عمودی را مشخص می کند. گوشه بالا سمت چپ، 0 0 است. واحد اعداد می تواند پیکسل یا هر واحد دیگری در CSS باشد (CSS Units). اگر تنها یک مقدار را مشخص نمایید، قسمت دوم با مقدار "50%" تنظیم خواهد شد. نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
مثالs

مثال - خودتان امتحان کنید

مکان دهی عکس پس زمینه
این مثال نشان می دهد که چگونه عکس پس زمینه را در صفحه مکان دهی نماییم.

مکان دهی عکس پس زمینه با استفاده از درصد
این مثال نشان می دهد که چگونه با استفاده از واحد درصد، عکس پس زمینه را مکان دهی نماییم.

مکان دهی عکس پس زمینه با استفاده از پیکسل
این مثال نشان می دهد که چگونه با استفاده از واحد پیکسل، عکس پس زمینه را مکان دهی نماییم.

 

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

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

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

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

خصوصیت background-repeat

مثال

تکرار عکس پس زمینه به صورت افقی:

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت background-repeat، می توانید نحوه تکار عکس پس زمینه را در جهت افقی و عمودی مشخص نمایید. (اگر مایل به تکرار آن هستید)

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

مقدار پیشفرض repeat
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.backgroundRepeat="repeat-y"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

نکته ها و ترفندها

نکته: عکس پس زمینه طبق مقداری که برای خصوصیت background-position تنظیم نموده اید مکان دهی می شود. اگر مقداری برای این خصوصیت تنظیم ننمایید، عکس همیشه در گوشه بالا سمت چپ قرار می گیرد.

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

مقدار توضیحات نمایش دادن
repeat عکس پس زمینه در هر دو جهت تکرار می شود. (مقدار پیشفرض) نمایش دادن »
repeat-x عکس پس زمینه در جهت افقی تکرار می شود. نمایش دادن »
repeat-y عکس پس زمینه در جهت عمودی تکرار می شود. نمایش دادن »
no-repeat عکس پس زمینه تکرار نمی شود. نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
مثالs

مثال - خودتان امتحان کنید

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

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

نمایش عکس پس زمینه فقط یکبار
این مثال نحوه ی جلوگیری از تکرار عکس پس زمینه را نشان می دهد.

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

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

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

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

خصوصیت background-clip

مثال

مشخص کردن ناحیه رنگ آمیزی پس زمینه:

div
{
background-color:yellow;
background-clip:content-box;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

با استفاده از خصوصیت background-clip، می توانید ناحیه رنگ آمیزی پس زمینه را مشخص نمایید.

مقدار پیشفرض border-box
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.backgroundClip="content-box"

نحوه استفاده

background-clip: border-box|padding-box|content-box;
مقدار توضیحات نمایش دادن
border-box محل رنگ آمیزی پس زمینه در قسمت border خواهد بود. نمایش دادن »
padding-box محل رنگ آمیزی پس زمینه در قسمت padding خواهد بود. نمایش دادن »
content-box محل رنگ آمیزی پس زمینه در قسمت content خواهد بود. نمایش دادن »
 

 

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

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

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

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

خصوصیت background-origin

مثال

عکس پس زمینه نسبت به content مکان دهی شده است:

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

با استفاده از خصوصیت background-origin، می توانید عکس پس زمینه را نسبت به یکی از مکان های content یا padding و یا border مکان دهی نمایید.

توجه: اگر خصوصیت background-attachment با مقدار "fixed" تنظیم شده باشد، این خصوصیت اثری نخواهد داشت.

مقدار پیشفرض padding-box
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.backgroundOrigin="content-box"

نحوه استفاده

background-origin: padding-box|border-box|content-box;
مقدار توضیحات نمایش دادن
padding-box عکس پس زمینه نسبت به padding مکان دهی می شود. نمایش دادن »
border-box عکس پس زمینه نسبت به border مکان دهی می شود. نمایش دادن »
content-box عکس پس زمینه نسبت به content مکان دهی می شود. نمایش دادن »
 

 

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

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

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

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

خصوصیت background-size

مثال

مشخص کردن اندازه عکس پس زمینه:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
خودتان امتحان کنید »

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

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

نحوه استفاده

background-size: length|percentage|cover|contain;
مقدار توضیحات نمایش دادن
length width و height عکس پس زمینه را تنظیم می کند. اولین مقدار width و دومی height است. اگر فقط یک مقدار تنظیم شود، دومی با مقدار "auto" تنظیم می شود. نمایش دادن »
percentage width و height عکس پس زمینه را بصورت درصدی از عنصر والدش تنظیم می کند. اولین مقدار width و دومی height است. اگر فقط یک مقدار تنظیم شود، دومی با مقدار "auto" تنظیم می شود. نمایش دادن »
cover اندازه عکس پس زمینه به قدری بزرگ می شود که تمام ناحیه content را بپوشاند. ممکن است مقداری از عکس پس زمینه داخل ناحیه content قرار نگیرد و قابل رویت نباشد. نمایش دادن »
contain اندازه عکس پس زمینه به قدری بزرگ می شود که در ناحیه content جا شود و در ضمن تمام آن قابل رویت باشد. نمایش دادن »
 

 

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

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

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

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

خصوصیت border

مثال

تنظیم style چهار لبه عنصر <p>:

p 
{
border:5px solid red;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت border، می توانید در یک مرحله، style چهار لبه اطراف عنصر را مشخص نمایید.

خصوصیت هایی که می توانید تنظیم نمایید بترتیب برابر است با:

  1. border-width
  2. border-style
  3. border-color

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

مقدار پیشفرض مشخص نشده
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.border="3px solid blue"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

مقدار توضیحات
border-width width لبه ها را مشخص می کند.
border-style style لبه ها رامشخص می کند.
border-color color لبه ها را مشخص می کند.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
 

 

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

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

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

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

خصوصیت border-bottom

مثال

تنظیم style لبه ی پایینی عنصر <p>:

p 
{
border-style:solid;
border-bottom:thick dotted #ff0000;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت border-bottom، می توانید در یک مرحله تمام خصوصیت های لبه پایینی را تنظیم نمایید.

خصوصیت هایی که می توانید تنظیم نمایید بترتیب برابر است با:

  1. border-bottom-width
  2. border-bottom-style
  3. border-bottom-color

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

مقدار پیشفرض مشخص نشده
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.borderBottom="3px solid blue"

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

مقدار توضیحات
border-bottom-width width لبه پایینی را مشخص می کند.
border-bottom-style style لبه پایینی را مشخص می کند.
border-bottom-color color لبه پایینی را مشخص می کند.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
 

 

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

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

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

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

خصوصیت border-bottom-color

مثال

تنظیم رنگ لبه ی پایینی عنصر <P>:

p 
{
border-style:solid;
border-bottom-color:#ff0000;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت border-bottom-color، می توانید رنگ لبه پایینی عناصر را تنظیم نمایید.

توجه: قبل از اینکه خصوصیت border-bottom-color را تنظیم نماید خصوصیت border-style را مقدار دهی کنید. یک عنصر باید لبه داشته باشد تا بتوان رنگ آنرا مشخص نمود.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

مقدار توضیحات نمایش دادن
color لطفاً جهت مشاهده رنگ های قابل استفاده به لینک روبرو مراجعه نمایید: HTML Colors نمایش دادن »
transparent مشخص می کند که رنگ لبه ها باید ناپیدا باشد. (مقدار پیشفرض) نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

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

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

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

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

خصوصیت border-bottom-color

مثال

تنظیم رنگ لبه ی پایینی عنصر <P>:

p 
{
border-style:solid;
border-bottom-color:#ff0000;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت border-bottom-color، می توانید رنگ لبه پایینی عناصر را تنظیم نمایید.

توجه: قبل از اینکه خصوصیت border-bottom-color را تنظیم نماید خصوصیت border-style را مقدار دهی کنید. یک عنصر باید لبه داشته باشد تا بتوان رنگ آنرا مشخص نمود.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

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

مقدار توضیحات نمایش دادن
color لطفاً جهت مشاهده رنگ های قابل استفاده به لینک روبرو مراجعه نمایید: HTML Colors نمایش دادن »
transparent مشخص می کند که رنگ لبه ها باید ناپیدا باشد. (مقدار پیشفرض) نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

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

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

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

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

خصوصیت border-bottom-style

مثال

تنظیم style لبه پایین عنصر <p>:

p 
{
border-style:solid;
border-bottom-style:dotted;
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت border-bottom-style، می توانید style لبه پایین یک عنصر را تنظیم نمایید.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

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

توجه: هیچ کدام از نسخه های Internet Explorer (بانضمام IE8)، مقدار "inherit" و "hidden" را پشتیبانی نمی کنند.

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

مقدار توضیحات نمایش دادن
none border مشخص نمی شود. نمایش دادن »
hidden بجز عنصر table در resolutionهای مختلف شبیه "none" است. نمایش دادن »
dotted لبه ها به صورت نقطه نقطه ای نمایش داده می شود. نمایش دادن »
dashed لبه ها به صورت خط تیره نمایش داده می شود. نمایش دادن »
solid لبه ها به صورت خالص و یکپارچه نمایش داده می شود. نمایش دادن »
double دو لبه نمایش داده می شود. نمایش دادن »
groove یک لبه سه بعدی گود دار (groove) نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد. نمایش دادن »
ridge یک لبه سه بعدی برجسته (ridge) نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد. نمایش دادن »
inset یک لبه سه بعدی inset نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد. نمایش دادن »
outset یک لبه سه بعدی outset نمایش داده می شود. افکت بستگی به مقدار خصوصیت border-color دارد. نمایش دادن »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

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

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

دوشنبه 10 آذر 1393  11:44 PM
تشکرات از این پست
دسترسی سریع به انجمن ها