آموزش CSS

آموزش CSS - حاشیه ها (Border)

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

خصوصیت Border :

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

خصوصیت border-width:

این خصوصیت عرض ناحیه Border را مشخص می کند. این یک خصوصیت مختصرنویسی شده برای تنظیم ضخامت هر چهار طرف حاشیه المان در یک زمان واحد است. به مثال زیر توجه کنید:

p {
    border-width: medium 10px thick 15px;
}

نکته: اگر مقدار خصوصیت border-width وجود نداشته باشد یا اصلا مشخص نشده باشد، مقدار پیش فرض یعنی متوسط برای آن مورد استفاده قرار می گیرد.

خصوصیت border-style:

خصوصیت border-style استایل و سبک حاشیه جعبه را تنظیم می کند. این یک خصوصیت مختصر نویسی شده برای تنظیم سبک خطوط برای هر چهار طرف المان است. به خاطر داشته باشید که این خصوصیت یکی از مقادیر زیر را اتخاذ می کند:

none, hidden, dashed, dotted, double, groove, inset, outset, ridge و solid.

none: حاشیه ای نخواهد داشت.

hidden: حاشیه پنهانی را تعریف می کند.

dotted: حاشیه نقطه چین را تعریف می کند

dashed: حاشیه خط چین را تعریف می کند

solid: حاشیه ای با خط ممتد را تعریف می کند.

: double دو حاشیه تعریف می کند. عرض دو حاشیه با مقدار border-width یکسان است.

groove: حاشیه سه بعدی تعریف می کند. این افکت به مقدار Border-color بستگی دارد.

ridge: در این حالت خطوط حاشیه به صورت سه بعدی تعریف می شوند

inset:حاشیه داخلی سه بعدی تعریف می کند

outset: حاشیه خارجی سه بعدی تعریف می کند

p {
    border-style: dotted;
}

خصوصیت border-color:

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

p {
    border-style: solid;
    border-color: #ff0000;
}

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

خصوصیت مختصر نویسی border:

خصوصیت Border یک خصوصیت مختصر نویسی شده برای تنظیم یک یا چند خصوصیت فردی حاشیه است.

p {
    border: 5px solid #ff4500;
}

اگر مقدار برای خصوصیت فردی حاشیه حذف شده یا مشخص نشده باشد، مقدار پیش فرض برای آن خصوصیت مورد استفاده قرار خواهد گرفت.

نکته: اگر مقدار خصوصیت border-color، حذف شده یا مشخص نشده باشد، خصوصیت رنگ المان به عنوان مقداری برای خصوصیت Border-color مورد استفاده قرار خواهد گرفت.

p {
    color: black;
    border: 5px solid;
}

اما در مورد خصوصیت border-style حذف کردن مقدار باعث می شود اصلا حاشیه ای نمایش داده نشود.

p {
    border: 5px #00ff00;
}
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...