جلسه پنجم: border در 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

پست پیشنهادی: آموزش وردپرس جلسه3: نصب و راه اندازی وردپرس

border-width و تعیین ضخامت border در CSS

ما با استفاده از ویژگی border-style موق شدیم یک نوع مرز تعریف کنیم. ویژی border-width این امکان رو به ما میده که ضخامت این مرز رو مشخص کنیم. در تصویر زیر چند border را با مقدار border-width متفاوت میبینید:

تعیین ضخامت border در CSS با استفاده از 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

پست پیشنهادی: جلسه چهارم: تصویر در HTML، تگ img و تگ map

border-color و تعیین رنگ border در CSS

برای مشخص کردن رنگ یک border میتونیم از ویژگی border-color استفاده کنیم. با استفاده از قواعدی که در درس رنگ ها در CSS گفته ایم، میتونیم به راحتی مقدار رنگ موردنظرمون رو برای border خودمون انتخاب کنیم.

بنابراین ما قادر هستیم با 5 روش به border-color مقداردهی کنیم:

استفاده از نام رنگ
استفاده از کد RGB رنگ
استفاده از کد HEX رنگ
استفاده از کد HSL رنگ
transparent حالت شفاف

تعیین رنگ border در CSS با استفاده از ویژگی border-color

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-radius

همانطور که در تصویر بالا میبینید 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 دارید، بپرسید حتما پاسخ میدم. پیشنهاد میکنم ویدیو این درس رو حتما در یوتیوب ببینید که نکات رو بصورت عملی هم دنبال کنید.

همه ویدیوهای دوره آموزش CSS

جلسه پنجم: border در css – مرزها در css

در این بخش در مورد border در css صحبت میکنیم و ویژگی های مربوط به border و مرزها در CSS رو مورد بررسی قرار میدیم.

border-style و تعیین نوع border در CSS

border-width و تعیین ضخامت border در CSS

border-color و تعیین رنگ border در CSS

ویژگی border در CSS و تعریف ویژگی های استایل، رنگ، ضخامت بصورت همزمان

گرد کردن گوشه های border با استفاده از ویژگی border-radius

مطالب مرتبط

جلسه سی ام: طراحی Responsive با CSS

جلسه بیست و نهم: مدیا کوئری Media Queries در CSS

جلسه بیست و هشتم: ویژگی Flexbox در CSS

جلسه بیست و هفتم: ویژگی box-sizing در css

جلسه بیست و ششم: افکت دادن به عکس در CSS

جلسه بیست و پنجم: ایجاد تولتیپ Tooltip در CSS