border در css – مرزها در css
خوش اومدین به پنجمین جلسه از دوره آموزش CSS. امروز قرار هست که در مورد border در CSS صحبت کنیم. borders این امکان رو به ما میدن که دور تا دور selector مورد نظر خودمون رو یک خط با شکل و ضخامت و رنگ دلخواه رسم کنیم. در تصویر زیر نمونه هایی از کاربرد border در CSS رو میتونید ببینید
برای border در CSS ما چند ویژگی داریم که توی این جلسه با همه اونها آشنا میشیم:
- border-style : نوع مرز
- border-width : ضخامت مرز
- border-color : رنگ مرز
- border : اعمال سه ویژگی بالا بصورت همزمان
- border-radius : گرد کردن دور مرز
border-style و تعیین نوع border در CSS
با استفاده از این ویژگی ما میتونیم نوع مرز خودمون رو مشخص کنیم. این ویژگی چند مقدار مشخص رو میگیره که در لیست زیر میتونید اونها رو ببینید:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
ما با اختصاص دادن هر کدام از مقادیر بالا به ویژگی border-style میتونیم از اون نوع مرز استفاده کنیم. نتیجه هر کدوم از این مقادیر رو میتونید در پایین ببینید:
همونطور که در تصویر بالا میبینید استفاده از هر مقدار برای border-style نوع مرز متفاوتی رو برای ما بوجود میاره. کدی که باعث شکل گیری تصویر بالا شده است رو در پایین ببینید:
<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
اگر در قطعه کد بالا دقت کنید من برای مقداردهی به هر border-style از یکی از مقادیر و نوع های خط استفاده کردم. با این کار این مقدار به border های 4 طرف تگ ما اختصاص داده میشه(همونطور که در تصویر خروجی هم میبینید) حالا اگه قصد داشته باشم به هر کدام از borderهای چپ، راست، بالا و پایین مقدار border-style مجزایی قرار بدیم میتونیم از روش زیر استفاده کنیم:
p.one {
border-style: solid dotted; /* solid top and buttom, dotted right and left */
}
p.two {
border-style: solid dotted ridge none; /* solid top, dotted right, ridge bottom and none left */
}
همچنین ما میتونیم با استفاده از چهار ویژگی زیر به صورت مستقیم برای هر یک از چهار جهت چپ و راست و بالا و پایین مقدار دلخواه خودمون رو وارد کنیم:
- border-right-style
- border-left-style
- border-top-style
- border-bottom-style
border-width و تعیین ضخامت border در CSS
ما با استفاده از ویژگی border-style موق شدیم یک نوع مرز تعریف کنیم. ویژی border-width این امکان رو به ما میده که ضخامت این مرز رو مشخص کنیم. در تصویر زیر چند border را با مقدار border-width متفاوت میبینید:
من با استفاده از قطعه کد زیر borderهای بالا رو رسم کردم:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {border-style: solid;border-width: 5px;}
p.two {border-style: solid;border-width: medium;}
p.three {border-style: dotted;border-width: 2px;}
p.four {border-style: dotted;border-width: thick;}
p.five {border-style: double;border-width: 15px;}
p.six {border-style: double;border-width: thick;}
</style>
</head>
<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
</body>
</html>
اگه در تگ style کد بالا دقت کنید من برای مقداردهی به border-width در p.one مقدار 5px رو وارد کردم. این مقدار به 4 border دور selector یعنی بالا، پایین، چپ و راست تعلق میگیره. اگه قصد داشته باشم، با استفاده از همین ویژگی border-width به هر کدام از مرزهای چپ، راست، بالا و پایین مقدار جداگانه ای اختصاص بدم از روش زیر استفاده میکنم:
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
همانطور که در بخش توضیحات کدهای بالا هم میبینید اگر ما از دو مقدار برای border-width استفاده کنیم، مقدار اول به مرزهای بالا و پایین و مقدار دوم به مرزهای چپ و راست تخصیص داده میشه.
حالا اگه از چهار عدد استفاده کنیم به ترتیب اولین مقدار به مرز بالا، دومی به راست، سومی به پایین و چهارمی به چپ اختصاص پیدا میکنه.
همچنین ما میتونیم با استفاده از چهار ویژگی زیر به صورت مستقیم برای هر یک از چهار جهت چپ و راست و بالا و پایین مقدار دلخواه خودمون رو وارد کنیم:
- border-right-width
- border-left-width
- border-top-width
- border-bottom-width
border-color و تعیین رنگ border در CSS
برای مشخص کردن رنگ یک border میتونیم از ویژگی border-color استفاده کنیم. با استفاده از قواعدی که در درس رنگ ها در CSS گفته ایم، میتونیم به راحتی مقدار رنگ موردنظرمون رو برای border خودمون انتخاب کنیم.
بنابراین ما قادر هستیم با 5 روش به border-color مقداردهی کنیم:
- استفاده از نام رنگ
- استفاده از کد RGB رنگ
- استفاده از کد HEX رنگ
- استفاده از کد HSL رنگ
- transparent حالت شفاف
borderهای بالا با استفاده از کدهای زیر ایجاد شدند:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
</body>
</html>
همانطور که در کدبالا میبینید من برای تعریف رنگ مرز، در مقابل ویژگی border-color نام یک رنگ رو وارد کردم. ما میتونستیم از روشهای دیگه هم استفاده کنیم و رنگی رو به border خودمون اختصاص بدیم. همچنین رنگ تعیین شده ما به چهار border دور (چپ،راست،بالا و پایین) تخصیص داده شده است. ما میتونیم با استفاده از روش زیر به هرکدام از borderهای چپ ، راست، بالا و پایین رنگ مجزایی بدهیم.
p.one {
border-style: solid;
border-color: red green; /* red top and buttom, green right and left */
}
p.two {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
همانطور که در توضیحات دو ویژگی border-color ملاحظه میکنید اگر من از نام یا کد دو رنگ استفاده کنم، رنگ اول به borderهای بالا و پایین و رنگ دوم به borderهای چپ و راست اختصاص داده میشه.
همینطور اگر از نام یا کد چهار رنگ استفاده کنم، به ترتیب رنگ اول به border بالا، دومی به مرز راست، سومی به مرز پایین و چهارمی به مرز سمت چپ اختصاص داده میشه.
همچنین ما میتونیم با استفاده از چهار ویژگی زیر به صورت مستقیم برای هر یک از چهار جهت چپ و راست و بالا و پایین مقدار دلخواه خودمون رو وارد کنیم:
- border-right-color
- border-left-color
- border-top-color
- border-bottom-color
ویژگی border در CSS و تعریف ویژگی های استایل، رنگ، ضخامت بصورت همزمان
ما بجای اینکه برای تعریف هر کدام از ویژگی های border-style و border-color و border-width از ویژگی جداگانه ای استفاده کنیم، میتوانیم مقادیر موردنظرمون را در داخل ویژگی border بنویسیم. به مثال زیر دقت کنید:
p {
border-style: solid;
border-color: red;
border-width: 5px;
}
نتیجه قطعه کد CSS بالا با قطعه کد CSS پایین یکسان است:
p {
border: 5px solid red;
}
همینطور که میبینید ما با استفاده از ویژگی border تونستیم به راحتی کد خودمون رو کوتاه کنیم.
همچنین ما میتونیم برای کوتاه نویسی ویژگی های مرزهای اختصاصی چپ و راست و بالا و پایین هم از property های زیر استفاده کنیم:
- border-left
- border-right
- border-bottom
- border-top
دستورالعمل مقداردهی به این چهار ویژگی همانند ویژگی border هست.
نکته مهم : فراموش نکنید که تعریف مقدار border-style اجباری هست. اگر ما هیچ مقداری برای border-style مشخص نکنیم (چه در تگ border و چه روش های قبلی که توضیح دادیم) عملا bordeer-width و border-color نتیجه ای در پی ندارند.
گرد کردن گوشه های border با استفاده از ویژگی border-radius
پس از اینکه border خودمون رو رسم کردیم، ویژگی border-radius این امکان رو به ما میده که گوشه های تیز border رو گرد کنیم. مثال زیر رو ببینید:
همانطور که در تصویر بالا میبینید border سبزرنگ گوشه های گردی داره و همانند border قرمزرنگ تیز نیست. این کار با استفاده از ویژگی border-radius تنظیم شده است. کد زیر رو ببینید:
<!DOCTYPE html>
<html>
<head>
<style>
.one {
border: 3px solid red;
}
.two {
border: 3px solid green;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="one">Simple border</p>
<p class="two">Round border</p>
</body>
</html>
همانطور که در کد بالا میبینید من برای مقداردهی به ویژگی border-radius از یک مقدار استفاده کردم. برای اینکه برای هر گوشه به طور مجزا مقداردهی کنیم میتوانیم از روش زیر استفاده کنیم:
p.one {
border-radius: 0px 10px; /* 0px top-left and bottom-right, 10px top-right and bottom-left */
}
p.two {
border-radius: 0px 10px 5px 2px; /* 0px top-left, 10px top-right, 5px bottom-right, 2px bottom-left */
}
همینطور که در توضیحات نوشتم اگر ما از 2 مقدار برای border-radius استفاده کنیم، مقدار اول به گوشه های بالا – چپ و پایین راست اختصاص پیدا میکنه و مقدار دوم به گوشه های بالا-راست و پایین-چپ اختصاص پیدا میکنه.
همینطور اگه از 4 مقدار استفاده کنیم، مقدار اول برای گوشه بالا-چپ و مقدار دوم برای گوشه بالا- راست، مقدار سوم برای گوشه پایین-راست و مقدار چهارم برای گوشه پایین-چپ استفاده میشه.
همچنین این امکان وجود داره که با استفاده از چهار ویژگی زیر به صورت اختصاصی برای هر گوشه ای مقداردهی رو انجام بدیم:
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
در این پست بصورت جامع و کامل در مورد border در CSS صحبت کردیم. امیدوارم که استفاده لازم رو برده باشید. اگر سوالی در مورد border در CSS دارید، بپرسید حتما پاسخ میدم. پیشنهاد میکنم ویدیو این درس رو حتما در یوتیوب ببینید که نکات رو بصورت عملی هم دنبال کنید.