آموزش سی اس اس CSS

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

Border Style

پراپرتی border-style مشخص میکند که چه نوع بوردری نمایش داده شود.

مقادیری که شما مجاز به استفاده از آنها هستید به شرح زیر است:

• dotted - بوردری به شکل نقطه تعریف میکند
• dashed - بوردری به شکل خط چین تعریف میکند
• solid - بوردری به شکل خط تعریف میکند
• double - بوردری دوتایی تعریف میکند
• groove - بوردری با شیار سه بعدی تعریف میکند. اثر آن بستگی به رنگ بورد دارد
• ridge - بوردری لبه دار و سه بعدی تعریف میکند. اثر آن بستکی به رنگ بوردر دارد
• inset - بوردر inset سه بعدی تعریف میکند.اثر آن بستکی به رنگ بوردر دارد
• outset - بوردر outset سه بعدی تعریف میکند.اثر آن بستکی به رنگ بوردر دارد
• none - هیچ بوردری تعریف نمیکند.
• hidden - یک بوردر مخفی تعریف میکند

مثال

 
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
 

نکاتی که باید در ذهن داشته باشید

اگر پراپرتی border-style تعریف نشده باشد هیچ یک از پراپرتی های دیگر بوردر کار نخواهند کرد.

Border Width

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

اندازه بورد میتواند بصورت پیکسل، سانتیمتر یا ... تعیین شود و یا با استفاده از سه مقدار از پیش تعریف شده تعیین شود: thin، medium، یا thick.

مثال

 
p {
    border-style: solid;
    border-width: 5px;
}
 

Border Color

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

رنگ میتواند بصورت زیر تعریف شود:

• نام - نام رنگ نوشته میشود، مانند "red"
• HEX - مقدار hex نوشته میشود، مانند "#ff0000"
• RGB - مقدار RGB نوشته میشود، مانند "rgb(255,0,0)"
• transparent - بوردر هیچ رنگی نخواهد داشت

اگر border-color تعیین نشده باشد، رنگ خود را از رنگ المان به ارث میبرد.

مثال

 
p {
    border-style: solid;
    border-color: red;
}
 

تعیین جداگانه بوردر برای هر سمت

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

اگر border-style چهار مقدار داشته باشد:

• border-style: dotted solid double dashed;
  • بوردر بالایی به شکل نقطه است
  • بوردر سمت راست بصورت خطی است
  • بوردر پایینی به شکل دوتایی است
  • بوردر سمت چپ بصورت خط چین است

اگر border-style سه مقدار داشته باشد:

• border-style: dotted solid double;
  • بوردر بالایی به شکل نقطه است
  • بوردر سمت راست و چپ بصورت خطی است
  • بوردر پایینی به شکل دوتایی است

اگر border-style دو مقدار داشته باشد:

• border-style: dotted solid;
  • بوردر بالایی و پایینی به شکل نقطه است
  • بوردر سمت راست و چپ بصورت خطی است

اگر border-style یک مقدار داشته باشد:

• border-style: dotted;
  • همه بوردرها به شکل نقطه است

در مثال بالا از پراپرتی border-style استفاده شد. ولی این موضوع برای پراپرتی های border-width و border-color نیز صادق هستند.

Border

همانطور که در مثالهای بالا ملاحظه فرمودید برای تعیین بوردر پراپرتی های مختلفی وچود دارد.

میتوان کدهای بوردر را کوتاه کرد و تمامی پراپرتی های بوردر را داخل یک پراپرتی آورد.

پراپرتی کوتاه شده بوردر border نام دارد.

• border-width
• border-style (اجباری)
• border-color

مثال

 
p {
    border: 5px solid red;
}
 

همچنین شما میتوانید تمامی پراپرتی های بوردر را برای یک سمت استفاده کنید:

 
p {
    border-left: 6px solid red;
    background-color: lightgrey;
}
 

Rounded Borders

پراپرتی border-radius برای گرد کردن بوردرهای یک المان استفاده میشود

مثال

 
p {
 border: 2px solid red;
 border-radius: 5px;
}
 

نکاتی که باید در ذهن داشته باشید

IE8 و نسخه های قبل تر از آن از پراپرتی border-radius پشتیبانی نمیکنند.

نوشتن دیدگاه

نام (اجباری)

آدرس پست الکترونیکی (اجباری است اما نمایش داده نمی‌شود)

آدرس سایت

مرا برای دیدگاه‌های بعدی به یاد بسپار

ارسال

لغو