CSSطراحی سایتگوناگون

۱۱-خاصیت border در CSS

خاصیت border در css

 

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

 

 

خاصیت border-style

 

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

نکته: هیچکدام از خواص مربوط به Border نمایش داده نمی شود مگر اینکه خاصیت border-style تنظیم شده باشد.

 

مقادیر خاصیت border-style:

 

 

  • حال، خودتان امتحان کنید :

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

 

خاصیت border-width

 

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

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

نکته:اگر خاصیت border-style تنظیم نشده باشد خاصیت border-width کار نخواهد کرد.

 

  • تصویر قطعه کدبالا به شکل زیر است:

 


 

خاصیت border-color

 

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

  • name: نام رنگ باید مشخص شود مانند “blue”
  • RGB: به صورت RGB مشخص می شود مانند “(rgb(255,0,0”
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

این خاصیت همچنین با مقدار “transparent” نیز می تواند تنظیم شود.(لبه به رنگ Background خواهد بود)

نکته:اگر خاصیت border-style تنظیم نشده باشد خاصیت border-color کار نخواهد کرد.

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

 

تنظیم لبه ها به صورت جداگانه

 

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

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

  • مثال بالا رو میتوان به یک خاصیت دیگر نیز تنظیم نمود:(جایگیزین خطوط ۴تا۱۰ در قطعه کد بالا)
 

 

 

 

 


 

 

مختصر نویسی خصوصیت border

 

این امکان وجود دارد که تمام خواص بالا را به یک خاصیت تبدیل کنیم تا کدمان کوتاه تر شود، این خاصیت برای تنظیم لبه ها، خاصیت “border” نام دارد:

 

 

 

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

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

اگر یکی از مقادیر بالا قید نشود مشکلی پیش نخواهد آمد البته همان طور که قبلاً گفته شد خاصیت border-style مورد نیاز است، تنها چیزی که باید رعایت شود ترتیب مقادیر است.

 


 

خاصیتتوضیحات
borderکلیه خصوصیات لبه های یک عنصر را در یک مرحله تنظیم می کند
border-bottomکلیه خصوصیات لبه پایینی یک عنصر را در یک مرحله تنظیم می کند
border-bottom-colorرنگ لبه پایینی یک عنصر را تنظیم می کند
border-bottom-stylestyle لبه پایینی یک عنصر را تنظیم می کند
border-bottom-widthعرض لبه پایینی یک عنصر را تنظیم می کند
border-colorرنگ لبه های چهار سمت یک عنصر را تنظیم می کند
border-leftکلیه خصوصیات لبه سمت چپ یک عنصر را در یک مرحله تنظیم می کند
border-left-colorرنگ لبه سمت چپ یک عنصر را تنظیم می کند
border-left-stylestyle لبه سمت چپ یک عنصر را تنظیم می کند
border-left-widthعرض لبه سمت چپ یک عنصر را تنظیم می کند
border-rightکلیه خصوصیات لبه سمت راست یک عنصر را در یک مرحله تنظیم می کند
border-right-colorرنگ لبه سمت راست یک عنصر را تنظیم می کند
border-right-stylestyle لبه سمت راست یک عنصر را تنظیم می کند
border-right-widthعرض لبه سمت راست یک عنصر را تنظیم می کند
border-stylestyle لبه های چهار سمت یک عنصر را تنظیم می کند
border-topکلیه خصوصیات لبه بالایی یک عنصر را در یک مرحله تنظیم می کند
border-top-colorرنگ لبه بالایی یک عنصر را تنظیم می کند
border-top-stylestyle لبه بالایی یک عنصر را تنظیم می کند
border-top-widthعرض لبه بالایی یک عنصر را تنظیم می کند
border-widthعرض لبه های چهار سمت یک عنصر را تنظیم می کند

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

همچنین ببینید

بستن
بستن