فریم‌های عناصر (Borders)

مقدمه

در CSS هر عنصر به صورت یک باکس مستطیلی رندر می‌شود. این موضوع و ملحقات و جزئیات آن، مفهوم مهمی به نام Box Model را پدید می‌آورند که در درس بعدی به آن می‌پردازیم. اما در این درس، در مورد یکی از مؤلفه‌های Box Model یعنی فریم یا قاب (border) باکس‌ها صحبت می‌کنیم. فریم یک عنصر یا باکس در حالت پیش‌فرض نمایش داده نمی‌شود اما با استفاده از یک پراپرتی اختصاری به نام border و سایر پراپرتی‌های مرتبط با آن، می‌توانیم فریم عناصر را با استایل مورد نظر نمایش دهیم و این موضوعی است که چند و چون آن را در این درس بررسی خواهیم کرد.

پراپرتی‌های مربوط به Border

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

در ادامه، اطلاعات موجود در جدول بالا را با جزئیات بیشتر بررسی می‌کنیم و مثال‌هایی را نیز ارائه می‌دهیم.

تنظیم استایل فریم‌ها

چهار پراپرتی اول جدول بالا یعنی border-top-style، border-right-style، border-bottom-style و border-left-style برای تنظیم استایل فریم‌های عناصر کاربرد دارند و پراپرتی پنجم این جدول یعنی border-style یک پراپرتی اختصاری است که می‌تواند هر چهار پراپرتی را به طور همزمان و در قالب یک دستور، مقداردهی کند. همانطور که در جدول بالا نیز دیده می‌شود، این پراپرتی‌ها می‌توانند یکی از مقادیر زیر را دریافت کنند:

• none: این مقدار باعث عدم ترسیم فریم می‌شود.
• hidden: این مقدار باعث می‌شود که فریم مورد نظر نمایش داده نشود.
• dotted: این مقدار باعث می‌شود که فریم با استفاده از نقاط گرد (rounded dots) ترسیم شود. شعاع این نقاط برابر با نصف مقدار محاسبه‌شده برای عرض فریم (border-width) است.
• dashed: این مقدار باعث می‌شود که فریم با استفاده از خطوط فاصله (dashes) یا پاره‌خط‌ها ترسیم شود.
• solid: این مقدار باعث می‌شود که فریم به صورت یک خط توپر پیوسته ترسیم شود.
• double: این مقدار باعث ترسیم فریم به صورت دوخطی (double) می‌شود.
• groove: این مقدار یک استایل سه‌بعدی به فریم می‌دهد که باعث می‌شود فریم با یک ظاهر حک‌شده (carved appearance) نمایش داده شود. نتیجه‌ی استفاده از این مقدار به رنگ فریم وابسته است.
• ridge: این مقدار برعکس مقدار groove عمل می‌کند؛ یعنی فریم را با یک استایل توأم با بیرون‌زدگی (extruded appearance) نمایش می‌دهد.
• inset: این مقدار با توجه به رنگ فریم، یک استایل سه‌بعدی در آن ایجاد می‌کند که باعث می‌شود فریم کمی فشرده‌تر به نظر برسد.
• outset: این مقدار برعکس مقدار inset عمل می‌کند؛ یعنی با توجه به رنگ فریم، یک استایل سه‌بعدی در آن ایجاد می‌کند که باعث می‌شود فریم کمی برجسته‌تر به نظر برسد. در واقع، این مقدار مشابه استفاده از افکت emboss در نرم‌افزارهای گرافیکی مثل فتوشاپ است.

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

CSS

.box-1{
  border-top-style: solid;
  border-right-style: dashed;
  border-bottom-style: double;
  border-left-style: dotted;
}

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

• تخصیص یک مقدار به پراپرتی border-style به این معناست که آن مقدار برای هر چهار فریم بالا، راست، پایین و چپ در نظر گرفته شود. به همین دلیل در جدول بالا از عبارت all برای این مقدار استفاده شده است.
• تخصیص دو مقدار به پراپرتی اختصاری border-style به این معناست که مقدار اول برای فریم‌های عمودی (vertical) یعنی فریم بالا و پایین در نظر گرفته شود و مقدار دوم برای فریم‌های افقی (horizontal) یعنی فریم‌های چپ و راست. به همین دلیل است که در جدول بالا از عبارت vertical horizontal برای این وضعیت استفاده کرده‌ایم.
• تخصیص سه مقدار به پراپرتی اختصاری border-style به این معناست که مقدار اول برای فریم بالایی، مقدار دوم برای فریم های چپ و راست و مقدار سوم برای فریم پایینی در نظر گرفته شود. عبارت top horizontal bottom به همین دلیل انتخاب شده است.
• تخصیص چهار مقدار به پراپرتی اختصاری border-style به این معناست که هر مقدار برای یک فریم در نظر گرفته شود و ترتیب تخصیص مقادیر به این صورت است که از فریم بالایی شروع کرده و در جهت حرکت عقربه‌های ساعت حرکت می‌کنیم. عبارت top right bottom margin این ترتیب را نشان می‌دهد.

در مثال زیر، از پراپرتی اختصاری border-style برای تعیین استایل فریم‌های عناصر استفاده شده است:

CSS

.b1{
  border-style: groove;
}

.b2{
  border-style: solid dotted;
}

.b3{
  border-style: none sold dashed;
}

.b4{
  border-style: solid dashed inset dotted;
}

تنظیم رنگ فریم‌ها

یک گروه دیگر از پراپرتی‌های جدول بالا، آنهایی هستند که به تنظیم رنگ فریم‌های عناصر مربوط هستند. چهار پراپرتی border-top-color، border-right-color، border-bottom-color و border-left-color به همراه یک پراپرتی اختصاری با نام border-color که امکان تنظیم این چهار پراپرتی را در قالب یک دستور فراهم می‌کند، بدین منظور تعریف شده‌اند. طبیعتاً مقداری که هر یک از این پراپرتی‌ها می‌توانند دریافت کنند، یک مقدار رنگی است. مثال زیر را ببینید:

CSS

h1{
  width: 50%;
  border-style: solid;
  border-top-color: rgb(255, 0, 0);
  border-right-color: green;
  border-bottom-color: #ff6a00;
  border-left-color: hsl(205, 100%, 50%);
}

دقت داشته باشید که تنظیم استایل فریم برای نمایش آن ضروری است. به عبارت دیگر، اگر از یکی از پراپرتی‌های border-style استفاده نکنیم، سایر پراپرتی‌های مربوط به رنگ و عرض فریم نیز بی‌اثر می‌شوند. به همین دلیل است که در مثال بالا فریم بالایی عنصر p نمایش داده نمی‌شود.

مشابه آنچه که در مورد پراپرتی‌های تنظیم‌کننده‌ی استایل فریم‌ها دیدیم، در مورد پراپرتی‌های تنظیم‌کننده‌ی رنگ فریم نیز یک پراپرتی اختصاری با نام border-color وجود دارد که به ما امکان می‌دهد که این پراپرتی‌ها را در قالب یک دستور مقداردهی کنیم. در اینجا هم می‌توان از یک تا چهار مقدار را برای پراپرتی border-color وارد کرد:

• تخصیص یک مقدار رنگی به پراپرتی border-color به این معناست که آن رنگ برای هر چهار فریم بالا، راست، پایین و چپ در نظر گرفته شود.
• تخصیص دو مقدار رنگی به پراپرتی اختصاری border-color به این معناست که مقدار اول برای فریم‌های عمودی (vertical) یعنی فریم بالا و پایین در نظر گرفته شود و مقدار دوم برای فریم‌های افقی (horizontal) یعنی فریم‌های چپ و راست.
• تخصیص سه مقدار رنگی به پراپرتی اختصاری border-color به این معناست که رنگ اول برای فریم بالایی، رنگ دوم برای فریم های چپ و راست و رنگ سوم برای فریم پایینی در نظر گرفته شود.
• تخصیص چهار مقدار رنگی به پراپرتی اختصاری border-color به این معناست که هر رنگ برای یک فریم در نظر گرفته شود و ترتیب تخصیص مقادیر به این صورت است که از فریم بالایی شروع کرده و در جهت حرکت عقربه‌های ساعت حرکت می‌کنیم.

در مثال زیر از پراپرتی اختصاری border-color برای تعیین رنگ فریم‌های عناصر استفاده شده است:

CSS

.b1{
  border-color: red;
}

.b2{
  border-color: red #32a1ce;
}

.b3{
  border-color: red rgba(170, 50, 200, .6) green;
}

.b4{
  border-color: red yellow green hsla(60, 90%, 50%, .8);
}

دقت داشته باشید که در اینجا پراپرتی border-style برای انتخابگر div تنظیم شده است؛ در غیر این صورت، پراپرتی‌های border-color بی اثر می‌شدند.

تنظیم عرض فریم‌ها

از بین پراپرتی‌های ارائه‌شده در جدول بالا، چهار پراپرتی border-top-width، border-right-width، border-bottom-width و border-left-width به همراه پراپرتی اختصاری border-width برای تنظیم اندازه‌ی عرض فریم‌های عناصر کاربرد دارند. این پراپرتی‌ها می‌توانند یکی از مقادیر زیر را دریافت کنند:

• مقادیر طولی: یک مقدار از نوع داده‌ای <length> که معرف یک مقدار طولی بر حسب واحدهایی مانند px، em و غیره است.
• کلمات کلیدی: یکی از کلمات کلیدی thin، medium و thick که در مستندات CSS مقدار دقیق آنها تعیین نشده و به مرورگرها واگذا شده اما چیزی که مسلم است این است که رابطه‌ی thin < medium < thick وجود دارد.

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

CSS

h1{
  border-style: solid;
  border-top-width: 4px;
  border-right-width: 1.2em;
  border-bottom-width: thin;
  border-left-width: thick;
}

همانند پراپرتی‌های مربوط به استایل و رنگ فریم‌ها، پراپرتی‌های مربوط به عرض فریم‌ها را نیز می‌توان با استفاده از پراپرتی اختصاری border-width به طور همزمان و در قالب تنها یک دستور مقداردهی کرد و در این مورد هم مانند دو مورد قبل، امکان تخصیص یک تا چهار مقدار به پراپرتی border-width وجود دارد:

• تخصیص یک مقدار به پراپرتی border-width به این معناست که آن مقدار برای عرض هر چهار فریم بالا، راست، پایین و چپ در نظر گرفته شود.
• تخصیص دو مقدار به پراپرتی اختصاری border-width به این معناست که مقدار اول برای عرض فریم‌های عمودی (vertical) یعنی فریم بالا و پایین در نظر گرفته شود و مقدار دوم برای فریم‌های افقی (horizontal) یعنی فریم‌های چپ و راست.
• تخصیص سه مقدار رنگی به پراپرتی اختصاری border-width به این معناست که مقدار اول برای فریم بالایی، مقدار دوم برای فریم های چپ و راست و مقدار سوم برای فریم پایینی در نظر گرفته شود.
• تخصیص چهار مقدار به پراپرتی اختصاری border-width به این معناست که هر مقدار برای یک فریم در نظر گرفته شود و ترتیب تخصیص مقادیر به این صورت است که از فریم بالایی شروع کرده و در جهت حرکت عقربه‌های ساعت حرکت می‌کنیم.

در مثال زیر از پراپرتی اختصاری border-width برای تنظیم عرض فریم‌های عناصر استفاده شده است:

CSS

.b1{
  border-width: thick;
}

.b2{
  border: 4px 1.25em;
}

.b3{
  border-width: 2ex 1.25ex .5ex;
}

.b4{
  border-width: 0 4px 8px 12px;
}

تنظیم همه‌ی پراپرتی‌های فریم‌ها

تا اینجای کار با سه پراپرتی اختصاری border-style، border-color و border-width آشنا شدیم و دیدیم که هر یک از این پراپرتی‌های اختصاری می‌توانند مشخصه‌ی مورد نظر یعنی استایل، رنگ و عرض را برای چهار فریم اطراف یک عنصر تنظیم کنند و لذا هر یک می‌توانند تا چهار پراپرتی دیگر را به طور همزمان مقداردهی کنند. اما در اینجا قصد داریم به جای مشخصه‌ها، فریم‌ها را ملاک قرار دهیم و برای هر یک از فریم‌ها مشخصه‌های استایل، رنگ و عرض را تعیین کنیم.

در واقع، قصد داریم پراپرتی‌های border-top، border-right، border-bottom و border-left را بررسی کنیم که هر کدام یک پراپرتی اختصاری است که می‌تواند از یک تا سه مشخصه‌ی استایل، رنگ و عرض را برای فریم مورد نظر تنظیم کند. البته یکی از این مقادیر باید حتماً‌ به مشخصه‌ی استایل اختصاص داشته باشد و ترتیب قرارگیری مقادیر نیز مهم نیست. مثال زیر را ببینید:

CSS

div{
  border-top: dotted;
  border-right: solid red;
  border-bottom: green dashed;
  border-left: 3px solid gray;
}

پراپرتی فوق‌اختصاری border

همه‌ی پراپرتی‌های مربوط به فریم‌های عناصر را می‌توان با استفاده از یک پراپرتی فوق‌اختصاری به نام border تنظیم کرد. علت «فوق‌اختصاری» نامیدن این پراپرتی این است که در حقیقت، border یک پراپرتی اختصاری برای پراپرتی‌های border-style، border-color و border-width است و می‌دانیم که هر یک از این سه پراپرتی به نوبه‌ی خود، پراپرتی‌هایی اختصاری برای چهار پراپرتی دیگر هستند. یک کاربرد مهم پراپرتی border به زمانی مربوط می‌شود که بخواهیم هر چهار فریم اطراف یک عنصر، ظاهر مشابهی داشته باشند. مثال زیر را ببیند:

CSS

.b1{
  border: 2px solid red;
}

.b2{
  border: dashed;
}

.b3{
  border: dotted 3px green;
}

.b4{
  border: inset blue;
}

همانطور که در مثال بالا دیده می‌شود، با استفاده از پراپرتی border می‌توانیم از یک تا سه مشخصه‌ی استایل، رنگ و ضخامت یا عرض فریم را برای هر چهار فریم تنظیم کنیم که البته یکی از این مشخصه‌ها باید حتماً استایل باشد و در ضمن، ترتیب قرارگیری مقادیر نیز اهمیتی ندارد.