ثبت نام کنید

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ آدرس ایمیل خود را وارد کنید، یک ایمیل حاوی لینک بازیابی رمز عبور برای شما ارسال می شود.

پرسیدن سوال

برای پرسیدن سوال، ابتدا باید وارد حساب کاربری خود شوید.

آموزش css – قسمت ششم(Border)

سلام

با ششمین قسمت از آموزش CSS در خدمتتون هستیم، در این قسمت می پردازیم به خاصیت Border، توسط Border می توانید به عنصر های مورد نظرتون(منظور تگ ها هستند، تگهایی مثل div,img,span و …) حاشیه(لبه) بدین، در ادامه همراه بپرسم باشید تا به صورت کامل با خاصیت Border آشنا بشیم.

آموزش:

  • Border Style

توسط خاصیت border-style می توانید مشخص کنید که حاشیه ای که میخواهد نمایش داده شود، از چه نوعی باشد.

در زیر مقدارهایی که خاصین border-style میگیرد را توضیح دادیم:

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

مثالی از تمام مقدارهایی که خاصیت border-style میگیرد:

نتیجه:

border-style

border-style

نکته: تنها در صورتی حاشیه ها نمایش داده می شود که از خاصیت border-style استفاده کرده باشید و به آن مقداری داده باشید.

  • Border Width

از این خاصیت برای تعیین ضخامت حاشیه ها استفاده می کنیم.

برای تنظیم مقدار border-width می توانیم از واحد های اندازه گیری مثل px, pt, cm, em و … و یا با یکی از سه مقدار پیشفرض thin, medium, thick تعیین کنیم.

حتما بخوانید:  آموزش سیستم عامل DOS - قسمت سیزدهم(حذف برنامه ها)

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

نتیجه:

beporsam.ir

beporsam.ir

beporsam.ir

beporsam.ir

beporsam.ir

beporsam.ir

beporsam.ir

نکته: برای استفاده از خاصیت border-width می بایست اول از خاصیت border-style استفاده کنید.

  • Border Color

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

مقدار این خاصیت را باید به یکی از سه شکل زیر تعیین کنیم:

  1. name: نام رنگ را باید بنویسیم.
  2. hex: به صورت هگزادسیمال مشخص می شود.
  3. rgb: به صورت rgb می توانیم استفاده کنیم.

برای آشنایی به چگونگی رنگ دهی در css، این آموزش را مطالعه کنید.

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

نتیجه:

border-color

border-color

  • مرزبندی در Border
حتما بخوانید:  معرفی ربات تلگرام سایت تویتر

در خاصیت Boorder می توانیم برای هر چهار جهت بالا، پایین، چپ، راست یک نوع حاشیه تعریف کنیم، به مثال زیر توجه کنید:

نتیجه:

individual-sides

individual-sides

حالا کد بالا را می توانید به صورت خلاصه در یک خط بنویسید:

خاصیت 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

در مثال هایی که در بالا آوردیم یک نمونه از خلاصه نویسی را توضیح دادیم، حال در ادامه همراه باشید تا بیشتر با خلاصه نویسی در border آشنا شویم.

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

از خاصیت های زیر می توانیم به ترتیب در border برای خلاصه نویسی استفاده کنیم:

  • border-width
  • border-style
  • border-color

از سه خاصیت بالا، فقط خاصیت border-style ضروری هست، در ما بقی خاصیت ها می توانیم مقدار آن ها را وارد نکنیم.

حال به مثال زیر توجه کنید:

حتما بخوانید:  تگ های HTML - تگ rp

نتیجه:

beporsam.ir

همچنین می توانید تمام خاصیت ها را فقط برای یک طرف مشخص کنید، به مثال زیر توجه کنید:

نتیجه:

Left Border Styles

در کد بالا به جای border-left همچنین میتوانید از سه جهت دیگه یعنی border-right, border-top, border-bottom استفاده کنید.

  • حاشیه گرد

توسط خاصیت border-radius می توانیم حاشیه ها گرد کنیم، به مثال زیر توجه کنید:

نتیجه:

rounded-border

rounded-border

  • خواص مربوط به حاشیه

در جدول زیر می توانید تمام خواصی که مربوط به Border است را مشاهده کنید.

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

 

این بود آموزش بخش Border در css، امیدوارم مفید بوده باشه 🙂

هرگونه سوالی یا مشکلی در رابطه با مطلب فوق داشتید؛ در سایت بپرسید، پاسخگوی سوالات شما هستیم، برای پرسیدن سوال کلیک کنید.

موفق باشید.


درباره SOLTANE GHALBHAمدیر

امیدوارم از سایت رضایت کافی را داشته باشید :)

دنبال کردن من

نظر شما چیست؟