عضویت در سایت

ورود

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

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1170 آموزش و 2021 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

مشاوره حرفه ای دریافت کن
بلاگ
مقالات آموزشی

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

آموزش 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 تعیین کنیم.

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

مطلب پیشنهادی:  تگ های HTML - تگ bdo

نتیجه:

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، این آموزش را مطالعه کنید.

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

مطلب پیشنهادی:  اضافه کردن متن، عکس و ایموجی در B4A

نتیجه:

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 ضروری هست، در ما بقی خاصیت ها می توانیم مقدار آن ها را وارد نکنیم.

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

نتیجه:

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، امیدوارم مفید بوده باشه 🙂

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

موفق باشید.

درباره احمد آخوندیمدیر سایت

همیشه در تلاش برای یادگیری :) ارتباط با من: 09159352892

دنبال کردن

ارسال نظر

رفتن به بالا

سامانه آموزشی و خدماتی بپرسم

اولین وب سایت آموزشی و پرسش و پاسخ در ایران

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