صفحه اصلی / css / اموزش کامل border در border property – css

اموزش کامل border در border property – css

اموزش کامل border در border property – css

با سلام خدمت شما بازدیدکنندگان گرامی مجله اینترنتی شماسافت در این پست از مبحث برنامه نویسی و توسعه – css قصد اموزش کامل خاصیت border در css داریم. برای اینکه بتوانید به عناصر وب سایت خود به بهترین شکل قالب دهی تا پایان این اموزش «اموزش کامل border در border property – css» همراه ما باشید.

 

ویژگی Border در css :

border یا حاشیه ها در css یک خاصیت بسیار کاربردی در css می باشند که شاید کمتر صفحه ای در دنیای وب می توان یافت که از ان در وب سایت خود استفاده نکرده باشد. این ویژگی به شما اجازه می دهد قالب و حاشیه هایی برای عناصر صفحه خود ازجمله تصاویر ، متن ها ، دکمه ها و … طراحی کنید.

برای مثال در زیر یک div به همراه استایل border را می بینید.

Bordered DIV

 

آشنایی با مقادیر و خواص استایل border در css :

به طور کلی border و حاشیه ها در css به ۵ صورت قابل تعریف هستند.

  1. border:حالت کلی;
  2. border-left:حاشیه سمت چپ;
  3. border-right:حاشیه سمت راست;
  4. border-bottom:حاشیه پایین عنصر;
  5. border-top:حاشیه بالای عنصر;

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

مقدار دهی کدهای بالا به شکل زیر می باشد.

border : رنگ , نوع , اندازه;

برای مثال:

Bordered Div

 

Bordered Div

 

Bordered Div

مقدار اول در کد های بالا شامل اندازه حاشیه می باشد و به صورت کلی با واحد px قرار داده میشود.

مقدار دوم در کد های بالا شامل نوع حاشیه می باشد و مقدارهای زیر را می پذیرد.

  1.  dashed: برای ترسیم خطوط با فاصله (علامت dash یا -).
  2. dotted: برای ترسیم خطوط با فاصله (علامت نقطه یا dot).
  3. double: برای ترسیم خطوط به صورت دوتایی یا دوبل.
  4. groove: برای ترسیم خطوط به شکل شیاری و برجسته.
  5. hidden: برای ترسیم خطوط پنهان در صفحه.
  6. inset: برای ترسیم خطوط سه بعدی با برجستگی داخلی.
  7. outset: برای ترسیم خطوط سه بعدی با برجستگی بیرونی.
  8. none: هیچ خطی ترسیم نمی شود.
  9. ridge: برای ترسیم خطوط شیاری و برجسته.
  10. solid: برای ترسیم خطوط معمولی.

مثال ها را برای کدهای بالا به ترتیب در زیر می توانید ببنید.

انواع حاشیه ها در سی اس اس

 

dashed Bordered Div

 

dotted Bordered Div

 

double Bordered Div

 

groove Bordered Div

 

hidden Bordered Div

 

inset Bordered Div

 

outset Bordered Div

 

none Bordered Div

 

ridge Bordered Div

 

solidBordered Div

 

و در نهایت اخرین مقدار در کدهای بالا رنگ حاشیه ها می باشد.

 

استایل دهی جزئی به border ها در css:

انچه در بالا ذکر کردیم استایل دهی به صورت کلی بود شما میتوانید با استفاده از کدهای زیر به صورت جزئی و با شخصی سازی بیشتر به استایل دهی بپردازید.

 

این بود اموزش کامل border در border property – css به زودی اموزش border ها و خواص در Css3 نیز در وب سایت گذاشته خواهد شد. امیدواریم بهره کافی از این سایت برده باشید حتما نظرات و سوالات خود را در دیدگاه ها برای ما ارسال کنید.

 

 

مطالب پیشنهادی:

قالب صفحه ۴۰۴ اموزش تگ های مهم html کار با خواص table در css اموزش کار با counter در css

برای دنبال کردن مطالب ما در کانال شماسافت عضو شوید.

عضویت

پاسخ دهید

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