آموزش CSS – فصل ششم: حاشیه گذاری (border)

مولفه border

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

این متن حاشیه ای برابر 1 پیکسل و با رنگ قرمز دارد

این متن حاشیه ای برابر 3 پیکسل و با رنگ آبی دارد

سمت راست این متن، یک حاشیه قرمز رنگ 5 پیکسلی وجود دارد

تغییر استایل حاشیه با مولفه border-style

مولفه border-style مشخص می کند که چه نوع از حاشیه باید نمایش داده شود.

مقادیر زیر مجاز هستند:

• dotted یک حاشیه نقطه نقطه ای را تعریف می کند.
• dashed یک حاشیه با خط های یک در میان را تعریف می کند.
• solid یک حاشیه یک دست را تعریف می کند.
• double یک حاشیه دو خطی را تعریف می کند.
• groove یک شیار سه بعدی را تعریف می کند که جلوه آن به مقدار border-color وابسته است.
• ridge یک شیار برآمده سه بعدی را تعریف می کند که جلوه آن به مقدار border-color وابسته است.
• inset یک حاشیه داخل رفته سه بعدی را تعریف می کند که جلوه آن به مقدار border-color وابسته است.
• outset یک حاشیه بیرون آمده سه بعدی را تعریف می کند که جلوه آن به مقدار border-color وابسته است.
• none بدون حاشیه را تعریف می کند.
• hidden یک حاشیه مخفی را تعریف می کند.

 مولفه border-style می تواند برای هر یک از چهار جهتی که حاشیه بر دور المان قرار می گیرد (بالا، راست، پایین و چپ) مقدار داشته باشد.

نکته: هیچکدام دیگر از مولفه های حاشیه ای که در زیر توضیح داده شده بدون داشتن مولفه border-style هیچ جلوه ای نخواهند داشت!

کد های زیر:

نتیجه زیر را در پی خواهد داشت:

حالت نقطه با مقدار dotted.

با خط های یک در میان، با مقدار dashed.

دارای حاشیه یکدست با مقدار solid.

با حاشیه دو خطی، با مقدار double.

یک شیار سه بعدی با مقدار groove.

متن با یک شیار برآمده سه بعدی با مقدار ridge

یک حاشیه داخلی با مقدار inset

متن با یک حاشیه بیرون آمده با مقدار outset.

بدون هیچگونه حاشیه، با استفاده از مقدار none.

با یک حاشیه مخفی، با استفاده از مقدار hidden.

یک متن با استایل های گوناگون.

تعیین اندازه حاشیه با مولفه border-width

مولفه border-width عرض هر چهار حاشیه بالا، راست، پایین و چپ را مشخص می کند.

عرض را می توان با استفاده از واحد های اندازه گیری به یک اندازه دقیق تنظیم کرد (cm, em, px, pt) یا می توان با مقادیر از پیش تایین شده thin ، medium ، thick آن را تنظیم کرد.

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

مثال :

تعیین رنگ حاشیه با مولفه border-color

مولفه border-color برای تنظیم کردن رنگ چهار حاشیه استفاده می شود.

مقدار مورد نظر برای رنگ را میتوان به این صورت تنظیم کرد:

• یک نام رنگ معتبر – مثل red
• یک مقدار hex – مثل #ff0000
• یک مقدار rgb – مثل rgb(255,0,0)
• شفاف transparent

مولفه border-color نیز میتواند برای هر چهار جهت یک مقدار داشته باشد.

اگر border-color تنظیم نشود، رنگ حاضیه برابر رنگ خود المان خواهد شد.

مثال:

حاشیه گذاری اختصاصی برای جهت های خاص

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

در سی اس اس مولفه هایی نیز برای هریک از حاشیه ها وجود دارند (top, right, bottom, left)

مثال زیر با کد پایین تر ساخته شده است:

کد بالا را به صورت خلاصه می توان اینگونه نوشت:

پس جریان از این قرار است که:

اگر چهار مقدار را برای border-style قرار دهیم، مقدار اول جهت بالاست، مقدار دوم راست، مقدار سوم پایین و مقدار چهارم حاشیه چپ می باشد.

اگر سه مقدار را برای border-style قرار دهیم، مقدار اول جهت بالا بوده و مقدار دوم برای دو طرف حاشیه سبک گذاری می شود و مقدار سوم جهت پایین را مشخص می کند

اگر دو مقدار را برای border-style قرار دهیم، مقدار اول برای جهات پایین و بالا استفاده می شود و مقدار دوم برای دو طرف حاشیه استفاده می شود.

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

در مثال بالا از border-style استفاده کردیم، ولی بهتر است بدانید که روش کار با border-width و مولفه border-color نیز به همین صورت می باشد.

خلاصه نویسی تمام مولفه های حاشیه با مولفه border

همانطور که در مثال های بالا دیدید هنگام کار کردن با حاشیه ها مولفه های بسیاری کاربرد دارند.

برای کوتاه کردن کد همچنین ممکن است که تمام مولفه های مجزا را در یک مولفه مشخص کرد.

مولفه border مولفه مختصر شده برای مولفه های زیر می باشد:

• border-width
• border-style
• border-color

مثال:

نتیجه:

یک متن تستی

همچنین شما می توانید تمام مولفه های مجزا را فقط برای یک جهت مشخص کنید.

مثلا حاشیه چپ:

نتیجه:

یک متن تستی

حاشیه های منحنی با مولفه border-radius

مولفه border-radius برای اضافه کردن حاشیه های انحنا دار استفاده می شود.

مثال:

کد بالا، چیزی شبیه بلاک زیر را ایجاد می کند:

یک متن با حاشیه منحنی

نکته : مولفه border-radius در اینترنت اکسپلورر هشت و قدیمی تر از آن پشتیبانی نمیشود.