بررسی مشخصه های Border در css

دسته بندی محصولات

بررسی مشخصه های Border در css

1397/06/21 670
CSS , 4.3 از 16 رای

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

 بررسی مشخصه های Border در css

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

بررسی مشخصه استایل Border

نام دقیق تری که برای این بخش در نظر گرفته می شود Border-style است. این ابزار این امکان را فراهم می سازد که برای خطوط مرزی حالت های مختلفی را فراهم سازیم. این ابزار به این صورت عمل می کند که اگر مقداری به آن تخصیص داده نشود در واقع مثال آن است که اصلا خط مرزی تعیین نشده است. این ابزار می تواند مقدارهای مختلفی دریافت نماید که به صورت زیر تعریف می شود.

border-style:dotted; // خط مرزی به صورت نقطه چین ایجاد می کند.


border-style:dashed; // خط مرزی به صورت خط چین ایجاد می کند.


border-style:solid; // خط مرزی به صورت خط ساده و ممتد ایجاد می کند.


border-style:double; // خط مرزی دولایه (دوبل) ایجاد می کند.

در صورتی که بخواهید از خط مرزی به صورت سه بعدی استفاده نمایید نیاز است که مقادیر inset، ridge، groove، outset را در متد مشخصی به کار ببرید.

بررسی مشخصه پهنا و رنگ Border

مورد بعدی که در خط  مرزی بسیار مهم است میزان پهنای آن است که با Border-width نمایش داده می شود. این مشخصه می تواند مقادیر پیش فرض را دریافت نماید. در واقع مقادیری که برای این بخش در نظر گرفته می شود، thick، thin،  medium و یا مقدارهای عددی است که البته بر حسب پیکسل تعیین می شود.

یک نمونه از این مورد را برای شما مثال زدیم.

border-width:2px; // تخصیص دادن مقداری عددی برحسب پیکسل

مورد بعدی در این زمینه رنگ خط مرزی است برای بکارگیری این مشخصه از Border-color استفاده می شود که در واقع رنگ خط  مرزی را تعیین می کند. شما برای انتخاب رنگ می توانید از نام رنگ کد آن استفاده کنید. مورد دیگری که در خصوص مقدار به کار رفته می تواند مناسب باشد transparent است. این مقدار سبب می شود که یک خط  مرزی شیشه ای و شفاف داشته باشید.

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

border-color:red;
border-color:#ff0000;

تعیین Border برای هر جهت

یک روش جالب دیگری که در خصوص خط مرزی وجود دارد استفاده از جهت خاص در این مسیر است که مثلاً شما می توانید خط مرزی بالا را به صورت نقطه چین درآورده و سمت راست را از نوع خط چین در آورید و برای بخش پایین از گزینه ممتد و برای سمت چپ نیز از نوع دو لایه استفاده کنید. به این ترتیب کدی که در این مسیر دیده می شود به این صورت است:

border-style: dotted dashed solid double;

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

border-top-style:dotted;
border-right-style:dashed;
border-bottom-style:solid;

موضوع مهمی که در خط مرزی وجود دارد دریافت یک تا چهار مقدار است. اگر به مثال های اولیه نگاهی بیندازید دیده می شود که به طور کلی تنها یک مقدار در نظر گرفته شده است اما در مثال بالا 4 مقدار برای این مشخصه تعیین می شود. سوالی که در این بخش وجود دارد به این صورت است که اگر از دو یا سه مقدار استفاده می شد چطور باید تشخیص می دادیم که برای کدام جهت است؟ در بخش بعد این موضوع را با مثال توضیح می دهیم.

تعیین Border با دو و سه مقدار

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

border-style: solid dotted dashed;

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

برای خط  مرزی دو مقداری نیز مورد اول برای سمت بالا و پایین و مورد دوم نیز برای سمت راست و چپ است. در صورتی که قصد شما این است که تنها یک سمت بلاک را خط مرزی دهید ،می توانید از مشخصه های -top ، -left و ... استفاده کنید.

بهتر است که برای مقداردهی مشخص خط مرزی را از مقدار پهنا آغاز کنید و سپس نوع و رنگ مورد نظر را وارد نمایید.

جمع بندی

در این مقاله در ابتدا اطلاع لازم در خصوص مشخصه های خط  مرزی ارائه شد. سپس روند مقدار دهی به صورت کلی و به صورت جهتی نیز با ذکر مثال توضیح داده شد و در نهایت هم روند جهت مقدار مشخص شد.

 

4.3 از 16 رای

نویسنده : تم شاپ

بزرگترین مرجع خرید و فروش قالب های حرفه ای

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

تعداد اعضای خانواده تم شاپ 17550 نفر

نظرات کاربران

0 نظر

درج نظر مخصوص اعضای سایت می باشد .

بررسی مشخصه های Border در css بازبینی شده توسط تم شاپ در 9/12/2018. بررسی مشخصه های Border در css برای داشتن یک فضای سایت دقیق نیاز به استایل بندی و استفاده از Border است. Border خود دارای مشخصه های خاص و روند مقداردهی مشخصی است. رتبه : 4.3