آموزش CSSآموزش طراحی سایت

Border در CSS

در ادامه آموزش CSS با دستورات مربوط به ساختارلایه ها و باکس ها آشنا خواهید شد. توسط دستورات ساختار و لایه بندی باکس ها در  css می‌توانید ظاهر کلیه عناصری را که در صفحه HTML مورد استفاده قرار داده‌اید، تغییر دهید. شما می‌توانید حاشیه ها، ساختار خطوط بیرونی، فاصله از لبه داخلی باکس را به  هر آنچه  که مد نظر شماست ، توسط این دستورات تغییر دهید. در بخش اول از این دسته آموزش ، به بررسی حاشیه(Border) میپردازیم و دستورات را مورد برسی قرار میدهیم.

 

ساختار و لایه بندی باکس ها

  • حاشیه (Border) (این پست)
  • خطوط بیرونی (Outline)
  • فاصله از لبه بیرونی باکس (Margin)
  • فاصله از لبه داخلی باکس (Padding)

 

خاصیت Border درCSS

خاصیت های Border به شما این مکان را می دهند که style ، اندازه و رنگ حاشیه ی یک المان را تغییر دهید.

نکته:توجه داشته باشید که هیچ یک از خاصیت های Border تا زمانی که خاصیت Border-style مقداردهی نشدهباشند، تاثیری نخواهند داشت.

مقادیر Border-style

  • None هیچ حاشیه ای تعریف نمی شود.
  •  Dotted حاشیه ی نقطه چین تعریف می کند.
  •  Dashed حاشیه ی خط چین تعریف می کند.
  •  Solid یک حاشیه با خط ممتد رسم می کند.
  • Double دو خط حاشیه تعریف می کند.
  •  Groove یک خط حاشیه ی سه بعدی نمایش می دهد که در آن خطوط بالایی و سمت چپ پررنگ تر ازخطوط دیگر هستند.
  •  Ridge در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شوند.
  •  Inset این مقدار یک حاشیه ی داخلی سه بعدی تعریف می کند که در آن معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند.
  •  Outset حاشیه ی سه بعدی خارجی تعریف می کند که در آن خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند.

ضخامت حاشیه (Border width)

با استفاده از خاصیت Border-width می توان ضخامت خط حاشیه را تنظیم کرد.
عرض  (width) یا بر حسب پیکسل تنظیم می شود و یا با بهره گیری از سه مقدار از پیش تعریف شده ی thin ، medium و thick .

 نکته : خاصیت ” Border-width “زمانی که به تنهایی بکار برده می شود، کار خاصی انجام نمی دهد. ابتدا باید بهوسیله ی خاصیت ” Border-style “خطوط حاشیه را مقدار دهی (تنظیم) کنید.

p.one {

border-style: solid;

border-width: 5px;

}

p.two {

border-style: solid;

border-width: medium;
 }

 

رنگ خط حاشیه  (Border color)

خاصیت border-color به منظور تنظیم و مقداردهی رنگ خط حاشیه مورد استفاده قرار می گیرد.رنگ خط حاشیه را می توان با مقادیر زیر تنظیم کرد.

Name -اسم رنگ دلخواه را مشخص می کند، مانند ” red”

RGB -یک مقدار red blue green) RGB )  تعریف می کند.

Hex- یک مقدار شانزده شانزدهی(hex) مانند “#ff0000” مشخص می کند

 نکته : چنانچه رنگ خط حاشیه مقداردهی نشده باشد، border رنگ خود را از خاصیت color مربوطه به ارث می برد.

خاصیت ” border-color “اگر به تنهایی بکار گرفته شود، هیچ اثری نخواهد داشت. بدین معنا که شما باید درمرحله ی اول با استفاده از خاصیت ” border-style “، خطوط حاشیه را مقداردهی کنید.

p.one {

border-style: solid;

border-color: red;

}

p.two {

border-style: solid;

border-color: #98bf21;

}

تعریف حاشیه به صورت مجزا برای هر طرف در CSS

این امکان وجود دارد که برای حاشیه ی هر طرف ظاهری متفاوت تعریف کرد (برای هر طرف یک حاشیه یمتفاوت داشت)

p {

border-top-style: dotted;

border-right-style : solid;

border-bottom-style: dotted;

border-left-style: solid;

}

مثال بالا را همچنین می توان با تنها یک خاصیت تنظیم یا مقدار دهی کرد.

p {

border-style: dotted solid;

}

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

 

border-style dotted solid double dashed;

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

border-style dotted solid double;

حاشیه سمت بالا نقطه چین می شود.
حاشیه های سمت راست و چپ با خط معمولی ترسیم می شوند.
حاشیه ی سمت پایین دو خطه می شود.

border-style dotted solid;

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

border-style dotted;

هر چهار حاشیه با خطی معمولی تعریف می شوند.

 

خاصیت border-style در مثال بالا بکار گرفته شده، اگرچه قابلیت استفاده از آن با border-width وborder-color وجود نیز وجود دارد.

 

خاصیت Border-Shorthand

همان طور که در مثال های فوق مشاهده می کنید، خاصیت های مختلفی وجود دارند که در برخورد و کار باخطوط حاشیه باید به آن ها توجه داشت.

به منظور کاهش اندازه ی کد (مختصر نویسی یا بهینه نوشتن کد)، همچنین می توان تمامی خاصیت های جداگانه را در یک خاصیت واحد تعریف کرد. این خاصیت را مختصر نویسی کد یا همان short-hand propertyمی نامند.

خاصیت ذکر شده در واقع فشرده یا خلاصه ی خاصیت های مجزای زیر است.

border-width
border-style (الزامی )
border-color

 

p {

border: 5px solid red;

}

خب این قسمت از آموزش برنامه نویسی به اتمام رسید، در بخش های آینده از مباحث آموزش CSS به مباحث دیگر این زبان می پردازیم. و شما میتوانید لیست این دوره را در سایدبار مشاهده نمایید. با ما همراه باشید .

 

برچسب ها

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

‫4 نظرها

    1. سلام، چرا اتفاقا در روزهای آتی به شکل فشرده آموزش ها رو خواهیم گذاشت.
      ممنونم از حضورتون 🙂

      1
  1. سلام
    من میخوام یک border بزارم دور یک Class دیگه که چند آیکون داخلش هست
    در عکس نمایش دادم : up.vbiran.ir/uploads/8946156619995533828_dxaaaa.jpg
    میخوام بدونم دقیقا باید چی بذارم و کد css رو کجا قرار بدم؟
    اگر ممکنه راهنمایی کنید

    1. سلام علی
      میتونی از این کد زیر استفاده کنی، برای شما اعمال نمیشد و باید important میزدیم. و به جای عبارت sample-class هم یک کلاس مناسب قرار بده.

      .sample-class {
          border: 1px dotted #ffffff !important;
      }

پاسخی بگذارید

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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر