لرن HTML5

خاصیت border در CSS این امکان را به شما می دهد که استایل، عرض و رنگ حاشیه یک عنصر HTML را مشخص کنید. در این فصل از آموزش CSS شما با انواع border ها و استایل های مربوط به آن آشنا خواهید شد.

❮ جلسه قبل

خاصیت border در CSS

خاصیت border در CSS این امکان را به شما می دهد که استایل، عرض و رنگ حاشیه یک عنصر HTML را مشخص کنید.

از چهار طرف حاشیه دارم

حاشیه ی پایین (bottom morder) به رنگ قرمز دارم

حاشیه ای با گوشه های گرد دارم

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

خاصیت border-style در CSS

خاصیت border-style در CSS مشخص می کند که حاشیه به چه شکلی نمایش داده شود.

استفاده از مقادیر زیر برای این خاصیت مجاز است:

dotted - حاشیه ای نقطه نقطه را تعریف می کند
dashed - حاشیه ای به شکل خطوط فاصله را تعریف می کند
solid - حاشیه ای به شکل یک خط مستقیم را تعریف می کند
double - حاشیه به شکل دو خط مستقیم را تعریف می کند
groove - یک حاشیه سه بعدی با استایل groove را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد
ridge - یک حاشیه سه بعدی با استایل ridge را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد
inset - یک حاشیه سه بعدی با استایل inset را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد
outset - یک حاشیه سه بعدی با استایل outset را تعریف می کند که نتیجه نمایش آن بستگی به خاصیت border-color دارد
none - باعث می شود عنصر مورد نظر بدون حاشیه نشان داده شود
hidden - حاشیه را مخفی می کند

خاضیت border-style می تواند از یک تا چهار مقدار مختلف (برای هر یک حاشیه بالا، حاشیه راست، حاشیه پایین و حاشیه چپ) داشته باشد.

مثال

مثالی برای استایل های مختلف border:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

نتیجه:

حاشیه نقطه ای.

حاشیه خطوط فاصله.

حاشیه به شکل خط.

حاشیه به شکل دو خط.

حاشیه سه بعدی با استایل groove.

حاشیه سه بعدی با استایل ridge.

حاشیه سه بعدی با استایل inset.

حاشیه با استایل outset.

بدون حاشیه.

حاشیه مخفی.

حاشیه ترکیبی.

خودتان امتحان کنید »

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

خاصیت border-width در CSS

خاصیت border-width عرض چهار حاشیه (بالا، راست، پایین، چپ) را مشخص می کند.

این خاصیت را می توان با یکی از واحد های: em ,cm ,pt ,px و ... و یا با یکی از مقادیر پیشفرض: thin (نازک)، medium (متوسط) و thick (ضخیم) مقدار دهی کرد.

خاصیت border-width می تواند از یک تا چهار مقدار برای هر یک از حاشیه های بالا، راست، پایین و چپ داشته باشد.

عرض این حاشیه 5px است

مثال

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

خودتان امتحان کنید »

خاصیت border-color در CSS

خاصیت border-color رنگ چهار حاشیه (بالا، راست، پایین و چپ) مشخص می کند.

در CSS رنگ ها می تونن به یکی از شکل های زیر مشخص شوند:

نام یک رنگ معتبر - مانند "red" (قرمز)
مقدار هگزادسیمال (HEX) - شبیه این: "#ff0000"
مقدار RGB - شبیه این: "(rgb(255,0,0"

خاصیت border-color می تواند از یک تا چهار مقدار برای هر یک از حاشیه های بالا، راست، پایین و چپ داشته باشد.

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

حاشیه قرمز

مثال

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
  border-color: green;
}

p.three {
  border-style: solid;
  border-color: red green blue yellow;
}

خودتان امتحان کنید »

تعیین border جداگانه برای هر سمت

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

همچنین در 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;
- حاشیه بالا dotted است
- حاشیه راست solid است
- حاشیه زیرین double است
- حاشیه چپ dashed است

اگر خاصیت border-style سه مقدار داشته باشد:

border-style: dotted solid double;
- حاشه بالا dotted است
- حاشیه های چپ و راست solid هستند
- حاشیه زیرین double است

اگر خاصیت border-style دو مقدار داشته باشد:

border-style: dotted solid;
- حاشیه های بالا و پایین dotted هستند
- حاشیه های راست و چپ solid هستند

اگر خاصیت border-style یک مقدار داشته باشد:

border-style: dotted;
- هر چهار حاشیه dotted هستند

توضیحاتی که در بالا برای خاصیت border-style داده شد، برای خاصیت های border-width و border-color نیز صدق می کند.

border ها در CSS - خاصیت مختصر نویسی (shorthand)

همان طور که در مثال های بالا مشاهده کردید، خاصیت های زیادی برای مشخص کردن حاشیه یک عنصر HTML وجود دارد و باید کدنویسی زیادی برای تعیین حاشیه یک عنصر انجام داد.

برای کوتاه شدن کد نویسی، میتوان تمام خصوصیات مربوط به حاشیه را در یک ویژگی جمع کرد.

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