درحال بارگذاری

آموزش CSS | قسمت هشتم "بوردر ها در CSS"

تاریخ: یکشنبه, 23 شهریور 99

نویسنده: مهرداد نامور... بازیدها: 37 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب


آموزش CSS :

سلام به همراهان همیشگی کلاس برتر ، با یک مطلب دیگر از آموزش زبان CSS همراه شما هستیم ؛ در این آموزش قصد داریم تا شما رو با نحوه حاشیه گذاری در CSS و انواع استایل های آون آشنا کنیم.

 

 


CSS border properties ( ویژگی بوردر در CSS )

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

 
 

CSS Border Style ( انواع بوردر در CSS )

     پراپرتی border-style مشخص می کند که چه نوع حاشیه ای نمایش داده شود.
 
مقادیر زیر در CSS مجاز هستند :
  • dotted - حاشیه نقطه ای را مشخص می کند
  • dashed - حاشیه های شکسته را مشخص می کند
  • solid - حاشیه صاف را مشخص می کند
  • double - حاشیه دوتایی را مشخص می کند
  • groove - حاشیه شیاردار سه بعدی را تعریف می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
  • ridge - یک حاشیه سه بعدی مشخص می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
  • inset - یک حاشیه درج سه بعدی تعریف می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
  • outset - حاشیه شروع 3D را مشخص می کند. این اثر به مقدار رنگ حاشیه بستگی دارد
  • none - هیچ حاشیه ای را مشخص نمی کند
  • hidden - یک حاشیه پنهان را مشخص می کند

     پراپرتی border-style می تواند از یک تا چهار مقدار داشته باشد (برای حاشیه بالا ، حاشیه راست ، حاشیه پایین و حاشیه چپ).

 

مثال :

     نمایش استایل های مختلف بوردر :

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;}

نتیجه :

 

 dotted border

dashed border

solid border

double border

groove border

ridge border

inset border

outset border

No border

hidden border

mixed border

تست کنید

توجه: هیچ یک از دیگر ویژگی های border در CSS هیچ تأثیری نخواهد داشت مگر اینکه خاصیت حاشیه استایل تنظیم شود !

 

امیدوارم این آموزش برای شما مفید بوده باشد ؛ برای آشنایی بیشتر با تمامی ویژگی های بوردر در CSS پیشنهاد میکنم به مطلب "CSS Borders" در سایت w3school سر بزنید.


نویسنده: مهرداد نامور... بازیدها: 37 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب

جستجو
کلاس برتر
ارائه دهنده بهترین و به روز ترین ویدیو های و مقالات آموزشی و همچنین مقالات مختلف در رابطه با تکنولوژی ،معماری ،مدیریت و سایر رشته های کاربردی.ما برای شما بهترین ها را میخواهیم.

سایر خدمات مجموعهخدمات زیر تحت مدیریت برد تخصصی ارائه می شود.
طراحی وب سایت
راه اندازی و پشتیبانی شبکه
هوشمند سازی منازل
افزایش کارایی نیرو انسانی
تعمیرات دستگاه های الکترونیکی
طراحی داخلی
تبلیغات فضای مجازی
برنامه نویسی