borderدر css

آشنایی با Border ها

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

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

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

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

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

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

 

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

برای یک خط مرزی خصوصیات زیادی می توان برشمرد اما مهم ترین خصوصیت آن، نوع خط مرزی است که با استفاده از ویژگی border-style مشخص می شود. حال مقادیری که می توان به این مشخصه نسبت داد به شرح زیر است :

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

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;

}

• 

 

ضخامت حاشیه (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;

}

رنگ خط حاشیه  (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 green;

}

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

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

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

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

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

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

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

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 برای بیضی سازی عنصر دوم به کار رفته.

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

لیست تمامی مشخصه های خطوط مرزی

در انتهای این آموزش تمامی مشخصه های قابل استفاده برای خطوط مرزی (border) را همراه با کاربرد هریک برایتان لیست کرده ایم .امید که مفید فایده بوده باشد.

border: با این ویژگی می توان تمامی مشخصه های خطوط مرزی (پهنا، نوع خط و رنگ) را در یک خط تعریف نمود که به خلاصه سازی کدها کمک شایانی می کند.

border-color: رنگ خطوط مرزی بالا و پایین و سمت راست و چپ را در یک خط تعریف می کند.

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

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

border-radius: برای تمامی خطوط مرزی هر 4 سمت، مقدار گردی گوشه ها را مشخص می کند.

 

border-bottom : تمامی خصوصیات خط مرزی پایینی ( اعم از نوع خط، پهنا و رنگ آن) را در یک خط تعریف می کند.

border-left : تمامی خصوصیات خط مرزی سمت چپ (اعم از نوع خط، پهنا و رنگ آن) را در یک خط تعریف می کند.

border-top : تمامی خصوصیات خط مرزی بالایی (اعم از نوع خط، پهنا و رنگ آن) را در یک خط تعریف می کند.

border-right : تمامی خصوصیات خط مرزی سمت راست (اعم از نوع خط، پهنا و رنگ آن) در یک خط تعریف می کند.

 

border-bottom-color: رنگ خط مرزی پایینی را مشخص می کند.

border-right-color: رنگ خط مرزی سمت راست را مشخص می کند.

border-top-color: رنگ خط مرزی بالایی را مشخص می کند.

border-left-color: رنگ خط مرزی سمت چپ را مشخص می کند.

 

border-bottom-style: نوع خط مرزی پایینی را مشخص می کند.

border-left-style: نوع خط مرزی سمت چپ را مشخص می کند.

border-right-style: نوع خط مرزی سمت راست را مشخص می کند.

border-top-style: نوع خط مرزی بالایی را مشخص می کند.

 

border-bottom-width: پهنای خط مرزی پایینی را تنظیم می کند.

border-left-width: پهنای خط مرزی سمت چپ را تنظیم می کند.

border-right-width: پهنای خط مرزی سمت راست را تنظیم می کند.

border-top-width:  پهنای خط مرزی بالایی را تنظیم می کند.

نتیجه گیری

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

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

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

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

 

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: حانیه گل لاله کرمانی