جلسه ۱۶ – border در CSS

منظور از ویژگی border یعنی چه ؟ انواع border در css را چطور می‌تونیم بشناسیم؟ نحوه ایجاد کادر در html به چه صورت است؟ چگونگی تغییر رنگ border در html و ایجاد کادر دور متن و چندین سوال دیگر که همه مربوط به حاشیه یا همان Border در CSS هست را در این مقاله مورد بررسی قرار می‌دهیم.

آشنایی با Border ها

Border ها رو به عنوان اولین نوع از کادر های قابل مشاهده، در این جلسه یاد می‌گیریم.

Border ها دستورات مختص به خودشون رو در CSS دارا هستن. وظیفه Border در CSS، به وجود آوردن حاشیه و مرز برای عناصر هست. پس اگر به دنبال جواب نحوه کادر بندی در html بودید، فکر کنم حالا به جوابتون رسیدید که با استفاده از CSS می‌تونیم این کار را در صفحات HTML انجام بدیم. راستی فراموش نکنید، اگر با زبان HTML آشنا نیستید، میتوانید اموزش html میزفا را مطالعه کنید.

انگار که مثلا یک عنصر <p> یا <div> داریم و می‌خوایم دورش رو دیوار بکشیم. حالا این دیوار دارای شکل، ضخامت و رنگ هست. حتی ممکنه روی این دیوار تصاویر خاصی رسم شده باشه. به همین سادگی! برای تفهیم بهتر، به تصویر زیر توجه کنین:

حالا بحث رو یخورده تخصصی تر کنیم و از دنیای دیوار واقعی آجری وارد دنیای مجازی CSS بشیم.

خاصیت های border در CSS

خاصیت های border به شما این امکان رو میدن که شکل، اندازه و رنگ حاشیه ی یک عنصر رو تغییر بدین.

این خاصیت ها عبارتند از:

1. ‌border-style نوع حاشیه رو مشخص می‌کنه.
2. border-color رنگ حاشیه رو مشخص می‌کنه.
3. ‌border-width ضخامت حاشیه رو مشخص می‌کنه.
4. border تمام کار ها رو یک جا انجام میده. (این خاصیت ها به خاصیت های shorthand معروفن و کار چندین خاصیت رو در یک خاصیت جا می‌دن).
5. border-image به جای رنگ زدن حاشیه، روی اون عکس قرار می‌ده. (این خاصیت رو تو جلسه ۶۸ میزفا می‌تونین مطالعه کنین).

نوع حاشیه (border-style)

این خاصیت، می‌تونه مقادیر زیر رو قبول کنه:

• None: هیچ حاشیه ای تعریف نمیشه. ( فرقی با فرانخوندن border-style نداره )
•  Dotted: حاشیه به شکل نقطه چین تعریف می‌کنه.
•  Dashed: حاشیه به شکل خط چین تعریف می‌کنه.
•  Solid: حاشیه به شکل خط ممتد تعریف می‌کنه.
• Double: حاشیه به شکل دو خط موازی و روی هم تعریف می‌کنه.
•  Groove: یک خط حاشیه ی سه بعدی نمایش می‌ده که در اونن خطوط بالایی و سمت چپ پررنگ تر از خطوط دیگه هستن.
•  Ridge: در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شن.
•  Inset: این مقدار یک حاشیه ی داخلی سه بعدی تعریف می‌کنه که در اون معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگه هستن.
•  Outset: حاشیه ی سه بعدی خارجی تعریف می‌کنه که در اون خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگه هستن.

[box type=”note” align=”aligncenter” class=”” width=””]نکته: همونطور که در توضیح مقدار none گفته شد، اولین شرط برای داشتن حاشیه های طرفین عنصر CSS، تعریف خاصیت border-style هست، با نبودن border-style، بقیه خاصیت ها هیچ کاری انجام نمیدن، انگار دیواری نداریم ولی براش ضخامت و رنگ در نظر می‌گیریم که غیرممکنه.[/box]

ضخامت حاشیه (border-width)

با استفاده از خاصیت border-width می‌تونیم ضخامت خط حاشیه رو تنظیم کنیم.
عرض (width) به دو شکل می‌تونه تعریف بشه:

1. بر حسب واحد پیکسل ( مثلا ۱۰ پیکسل، ۶ پیکسل و … )
2. به وسیله مقادیر thin, medium, thick

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

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

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

قطعه کد اول، ذکر می‌کنه:

در عناصر p، عنصری با کلاس one پیدا کن، به آن حاشیه ای از نوع solid (خط ممتد) و با ضخامت ۵ پیکسل اضافه کن.

قطعه کد دوم رو به خودتون می‌سپارم 🙂

رنگ خط حاشیه  (border-color)

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

نام پیش فرض – اسم رنگ دلخواه رو مشخص می‌کنه، مثل “red”

()rgb – یک مقدار red blue green) rgb )  تعریف می‌کنه.

Hex – یک مقدار شانزده شانزدهی(hex) مثل “#ff0000” مشخص می‌کنه.

 نکته : اگه رنگ خط حاشیه مقداردهی نشده باشه، border رنگ خودش رو از خاصیت color مربوط به عنصر موردنظر به ارث می‌بره.

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

p.two {
   border-style: solid;
   border-color: #98bf21;
}

خاصیت border یا border-shorthand

در تعریف خاصیت ها گفتیم که این خاصیت، تمام کار ها رو یک جا انجام میده! و واقعا هم همینطوره.

ما می‌تونیم بدون تعریف کردن border-style، border-width و border-color، تنها با خاصیت border، یک حاشیه کامل برای عنصرمون تعریف کنیم.

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

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

p {
   border: 5px solid red;
}

همانطور که گفتیم بدون تعریف مقادیر اضافه در مثال بالا به ترتیب عرض (5px) ، استایل (solid) و رنگ (red) در Border را مشخص کردیم و تونستیم با استفاده از border در html به کشیدن کادر دور متن بپردازیم.

تعریف حاشیه به صورت مجزا برای هر طرف در CSS

فرض کنین که ما به حاشیه ای نیاز داریم که دارای مرز های متفاوت باشه.

برای مثال، مرز چپ یک شکل، و مرز پایین یک شکل دیگه داشته باشه.

برای این منظور، می‌تونیم از دو روش استفاده کنیم:

شکستن خاصیت ها

تو این روش، می‌تونیم خاصیت های مورد نظرمون رو متناسب با هر کدوم از طرف های border بشکنیم.

به مثال زیر که تو اون، border-style رو شکوندیم توجه کنین:

p {
   /* --- استایل حاشیه بالا --- */
   border-top-style: dotted;
   /* --- استایل حاشیه راست --- */ 
   border-right-style : solid;
   /* --- استایل حاشیه پایین --- */ 
   border-bottom-style: dotted;
   /* --- استایل حاشیه چپ --- */ 
   border-left-style: solid;
}

همونطور که می‌بینین، تونستیم به هر کدوم از طرفین حاشیه، استایل متفاوتی رو اختصاص بدیم.

استفاده از مقادیر متوالی

تو این روش، بدون شکستن خاصیت مورد نظر، کافیه مقادیر مورد نظرمون رو به صورت متوالی وارد کنیم.

برای نمونه، استایل دهی مثال قبل رو، تو اینجا فقط با یک خاصیت و چند مقدار انجام دادیم:

p {
   /* --- استایل تمامی حاشیه ها --- */ 
   border-style: dotted solid; 
}

حالا این مقدار دهی چطور کار می‌کنه؟ کافیه به مثال های زیر توجه کنین:

مقدار چهارگانه :

p{
   border-style: dotted solid double dashed;
   border-color:#23282d;
   border-width:3px;
}

تو این کد، خاصیت border-style چهار خاصیت رو قبول کرده. الگوی چهار خاصیت به شکل زیر خواهد بود:

border-style: [حاشیه چپ] [حاشیه پایین] [حاشیه راست] [حاشیه بالا];

با توجه به الگوی بالا داریم:

حاشیه ی بالایی نقطه چین می‌شه.
حاشیه ی سمت راست عنصر با خطی معمولی کشیده می‌شه.
حاشیه ی پایین با دو خط نمایش داده می‌شه
حاشیه ی سمت چپ خط چین می‌شه.

مقدار سه گانه :

p{
   border-style: dotted solid double;
   border-color:#23282d;
   border-width:3px;
}

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

border-style: [حاشیه پایین] [حاشیه چپ و راست] [حاشیه بالا];

بنابراین داریم:

حاشیه سمت بالا نقطه چین می‌شه.
حاشیه های سمت راست و چپ با خط معمولی ترسیم می‌شه.
حاشیه ی سمت پایین دو خطه می‌شه.

مقدار دوگانه :

p{
   border-style: dotted solid;
   border-color:#23282d;
   border-width:3px;
}

خاصیت border-style در اینجا، دو مقدار رو قبول کرده. الگوی مورد نظر تو حالت دو مقدار به شکل زیر خواهد بود:

border-style: [حاشیه چپ و راست] [حاشیه بالا و پایین];

حاشیه های سمت بالا و پایین نقطه چین می‌شن.
حاشیه های سمت راست و چپ با خطی معمولی کشیده می‌شن.

حالت پیشفرض :

p{
   border-style: dotted;
   border-color:#23282d;
   border-width:3px;
}

در اینجا حالت پیش فرض و تک مقدار اولیه رو داریم. الگوی این حالت به شکل زیره:

border-style:[تمام حاشیه ها];

بدین ترتیب هر چهار حاشیه با خطی معمولی تعریف می‌شن.

خاصیت های border-color و border-width رو هم می‌تونیم مانند مثال های بالا، تغییر بدیم و مقدار دهی کنیم.

تعریف انحنا برای گوشه عناصر

تو این بخش، به این مسئله می‌پردازیم که چطور می‌تونیم برای گوشه عناصرمون، انحنا و خمودگی به وجود بیاریم؟

ما در تعریف انحنا، بر خلاف تعریف border، با چپ، راست، بالا و پایین روبرو نیستیم. بلکه سمت های ما عبارت خواهد بود از:

• top-left: بالا چپ
• top-right: بالا راست
• bottom-right: پایین راست
• bottom-left: پایین چپ

تعریف انحنا برای عناصر، می‌تونه توسط دو روش انجام بگیره:

• استفاده از خاصیت های مجزا
• استفاده از خاصیت border-radius

مقدار مورد قبول این خاصیت ها، دقیقا مثل border، می‌تونه بر حسب پیکسل و درصد بیان بشه.

نکته: برای تعریف انحنا، حتما لازم نیست که برای عنصر مورد نظرتون border تعریف کنید.

استفاده از خاصیت های مجزا

خاصیت های مجزایی که به ما برای تعریف انحنا کمک می‌کنن، عبارت هستن از:

• border-top-left-radius: انحنای گوشه ی بالا چپ عنصر
• border-top-right-radius: انحنای گوشه ی بالا راست عنصر
• border-bottom-left-radius: انحنای گوشه ی پایین چپ عنصر
• border-bottom-right-radius: انحنای گوشه ی پایین راست عنصر

مثال:

تو مثال بالا، گوشه های بالا چپ، و پایین چپ، به شکل منحنی تغییر کردن.

برای بدست آوردن نتیجه بالا، از کد زیر می‌تونیم استفاده کنیم:

div{
   /* --- گوشه بالا سمت چپ --- */
   border-top-left-radius: 30px;
   /* --- گوشه بالا سمت راست --- */
   border-bottom-left-radius: 30px;
}

استفاده از خاصیت border-radius

این خاصیت، خاصیت کوتاه شده یا shorthand property خاصیت های مجزا به حساب میاد.

توسط این خاصیت، می‌تونیم چندین انحنای مختلف رو فقط با یک دستور تعریف کنیم.

مقدار دهی به این خاصیت، در چهار حالت مختلف، می‌تونه اتفاق بیفته:

مقدار چهار گانه:

در این حالت، خاصیت border-radius، چهار حالت قبول می‌کنه.

الگوی قبول این چهار حالت، به فرم زیر خواهد بود:

border-radius: [بالا چپ]  [بالا راست]  [پایین راست]  [پایین چپ];

برای مثال، در شکل زیر از حالت چهار گانه استفاده می‌کنیم:

div{
   border-radius: 22px 45px 30px 10px;
}

شعاع انحنای بالا چپ ۲۲ پیکسل، بالا راست ۴۵ پیکسل، پایین راست ۳۰ پیکسل و پایین چپ ۱۰ پیکسل خواهد بود.

مقدار سه گانه:

در حالت سه گانه، به خاصیت border-radius، سه مقدار اختصاص می‌دیم.

الگوی قبول خاصیت، به فرم زیر خواهد بود:

border-radius: [بالا چپ]  [بالا راست | پایین چپ]  [پایین راست];

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

div{
   border-radius: 22px 45px 10px;
}

در کد بالا، شعاع انحنای بالا سمت چپ ۲۲پیکسل، بالا سمت راست و پایین سمت چپ ۴۵ پیکسل، و پایین سمت راست ۱۰ پیکسل تعریف شده.

حالت دو گانه:

در این حالت، خاصیت مورد نظر ما پذیرای دو مقدار خواهد بود.

این دو مقدار، طبق الگوی زیر نوشته می‌شن:

border-radius: [بالا چپ | پایین راست]  [بالا راست | پایین چپ];

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

div{
   border-radius: 10px 30px;
}

در کد بالا، شعاع انحنای حاشیه های بالا چپ و پایین راست، ۱۰ پیکسل، و حاشیه های بالا راست و پایین چپ، ۳۰ پیکسل تعیین شده.

حالت پیشفرض

حالت پیشفرض، عمومی ترین حالتی هست که مورد استفاده قرار می‌گیره.

در این حالت، خاصیت border-radius تنها یک مقدار قبول می‌کنه:

border-radius: [تمام گوشه ها];

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

div{
   border-radius: 50px;
}

توسط کد بالا، شعاع انحنای تمامی گوشه ها، ۵۰ پیکسل تعریف شده.

تعریف دایره

یکی دیگه از قابلیت های خاصیت border-radius، اینه که می‌تونیم با کمک اون شکل هایی مثل دایره و یا بیضی بسازیم.

این عملیات، توسط مقدار های درصدی انجام می‌شه.

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

/* --- کد دایره --- */
div.circle{
   padding:40px;
   border-radius: 50%;
}

/* --- کد بیضی --- */
div.ellipse{
   width:100px;
   border-radius: 50%;
   padding:40px;
}

دایره سازی عناصر مورد نظر با دستور border-radius:50% انجام می‌شه.

نکته: خاصیت width برای بیضی سازی عنصر دوم به کار رفته. در مورد این خاصیت تو مقاله عرض و ارتفاع در میزفا بیشتر مطالعه کنین.

نکته: دایره زمانی شکل می‌گیره که عرض و ارتفاع عنصر مورد نظر با هم برابر باشن.

امیدوارم مثال ها رو به خوبی متوجه شده باشین.

اگه مشکلی دارین حتما تو قسمت نظرات ذکر کنین، حتما پاسخگو خواهم بود.

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

چه کدی از border رو برای ساختن نتیجه زیر پیشنهاد می‌کنین؟

نکته: کد رو هم با روش “مقادیر متوالی” و هم “شکستن خاصیت ها” بنویسین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

تو این مقاله، با بحث border یا همون حاشیه عناصر تو CSS و انواع border در html و CSS آشنا شدیم.

فهمیدیم که می‌تونیم با خاصیت هایی نظیر border-style و border-width، ویژگی های حاشیه رو تعیین کنیم و همچنین، با خاصیتی مثل border، می‌تونیم تنها در یک خط تمام ویژگی های حاشیه رو مشخص کنیم.

همینطور یاد گرفتیم که چطور می‌تونیم با استفاده از خاصیت هایی که یاد گرفتیم، ویژگی های هر قسمت از حاشیه رو به صورت مجزا تعیین کنیم و با دو روش “شکستن خاصیت ها” و “استفاده از مقادیر متوالی” برای انجام این کار آشنا شدیم.

در نهایت، با مفهوم انحنا و radius برای عناصرمون آشنا شدیم و نحوه استفاده از خاصیت border-radius رو یاد گرفتیم.

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

مدیر محتوا: علی اسمعیلی