آموزش border در css

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

ویژگی border یعنی چه ؟

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

از ویژگی border-style برای تعیین نوع حاشیه عنصر استفاده می شود.

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

border-style:dotted; // خط مرزی به صورت نقطه چین ایجاد میکند
border-style:dashed; // خط مرزی به صورت خطچین ایجاد میکند
border-style:solid; // خط مرزی به صورت خط ساده و ممتد ایجاد میکند
border-style:double; // خط مرزی دولایه (دوبل) ایجاد میکند

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

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

برای اینکه بتوانید ترتیب را بهتر یاد بگیرید همیشه در جهت ساعت گرد عدد را ها بخوانید: بالا، راست، پایین و چپ.

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

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

و اگر یک مقدار باشد آن مقدار مربوط به هر چهار طرف عنصر می باشد.

توسط این خاصیت می توان حالت خطوط حاشیه را بر حسب یکی از حالت های زیر تعیین کرد :

none : در این حالت هیچ خطی به عنوان خطوط حاشیه عنصر نمایش داده نمی شود .

hidden : در این حالت خطوط حاشیه مخفی هستند .

dotted : در این حالت خطوط حاشیه به صورت نقطه نقطه نمایش داده می شوند .

dashed : در این حالت خطوط حاشیه به صورت بریده بریده نمایش داده می شوند.

solid : در این حالت خطوط حاشیه به صورت معمولی نمایش داده می شوند .

doubled : در این حالت خطوط حاشیه به صورت دو خطی نمایش داده می شوند .

groove : در این حالت خطوط حاشیه به صورت ۳D نمایش داده می شوند که معمولا خطوط بالایی و سمت چپ پر رنگ تر از خطوط دیگر هستند .

ridge : در این حالت خطوط حاشیه به صورت ۳D با طیف رنگی نمایش داده می شوند .

inset : در این حالت خطوط حاشیه به صورت ۳D نمایش داده می شوند که معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند .

outset : در این حالت خطوط حاشیه به صورت ۳D نمایش داده می شوند که معمولا خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند .

نکته: همونطور که در توضیح مقدار none گفته شد، اولین شرط برای داشتن حاشیه های طرفین عنصر CSS، تعریف خاصیت border-style هست، با نبودن border-style، بقیه خاصیت ها هیچ کاری انجام نمیدن، انگار دیواری نداریم ولی براش ضخامت و رنگ در نظر می‌گیریم که غیرممکنه.

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

برای تعیین پهنای خط مرزی از مشخصه border-width استفاده میکنیم.
مقداری که این مشخصه دریافت میکنه میتونه از مقادیر پیشفرض باشه که عبارتند از thin , thick و medium و یا اینکه مقدار عددی رو بر حسب پیکسل به اون نسبت بدید:

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

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

•  thin : در این حالت خطوط حاشیه نازک خواهند بود .
• medium : در این حالت خطوط حاشیه متوسط خواهند بود .
•  thick : در این حالت خطوط حاشیه ضخیم خواهند بود .
• length : در این حالت صخامت خطوط حاشیه را بر حسب واحدی مثل پیکسل ( pixel ) یا نقطه ( pt ) تعیین می کنیم .

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

با بکارگیری مشخصه border-color میتونید رنگ این خط مرزی رو تعیین کنید.

• برای این منظور میتونید از نام رنگ (مثلا red)
• کد RGB
• و یا کد HEX استفاده کنید .

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

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

تعیین خط مرزی مجزا برای هر جهت

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

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

شاید بخواهید برای هر طرف بلاک یک مدل خط مرزی داشته باشید. به مثال زیر توجه کنید:

خط مرزی بالا ، راست ، پایین و چپ با یکدیگر تفاوت دارند.

همونطور که میبینید خط مرزی

• بالا از نوع نقطه چین
• سمت راست از نوع خط چین
• پایین از نوع ممتد
• و چپ از نوع دولایه است

css این مثال به شکل زیر خواهد بود :

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

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

نکته : مشخصه border-style میتواند از یک تا چهار مقدار را دریافت کند. در مثالهای اولیه ما فقط یک مقدار رو برای این مشخصه تعیین کردیم و در مثال بالا چهار مقدار مختلف رو برای این مشخصه تعیین کردیم و دونستیم هر مقدار برای کدوم جهت هست. حالا اگر ۲ مقدار یا ۳ مقدار اختصاص داده شده بود چی؟ از کجا بدونیم کدوم مقدار برای کدام جهت هست؟! به مثال زیر توجه کنید:

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

مختصر نویسی خصوصیت border

زمانی که از خاصیت border استفاده می کنید، توجه داشته باشید که ترتیب مقادیر به صورت زیر خواهد بود:

1. border-width
2. border-style
3. border-color

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

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

تمام خواص مربوط به لبه در CSS Wiki

border
کلیه خصوصیات لبه های یک عنصر را در یک مرحله تنظیم می کند

border-bottom
کلیه خصوصیات لبه پایینی یک عنصر را در یک مرحله تنظیم می کند

border-bottom-color
رنگ لبه پایینی یک عنصر را تنظیم می کند

border-bottom-style
style لبه پایینی یک عنصر را تنظیم می کند

border-bottom-width
عرض لبه پایینی یک عنصر را تنظیم می کند

border-color
رنگ لبه های چهار سمت یک عنصر را تنظیم می کند

border-left
کلیه خصوصیات لبه سمت چپ یک عنصر را در یک مرحله تنظیم می کند

border-left-color
رنگ لبه سمت چپ یک عنصر را تنظیم می کند

border-left-style
style لبه سمت چپ یک عنصر را تنظیم می کند

border-left-width
عرض لبه سمت چپ یک عنصر را تنظیم می کند

border-right
کلیه خصوصیات لبه سمت راست یک عنصر را در یک مرحله تنظیم می کند

border-right-color
رنگ لبه سمت راست یک عنصر را تنظیم می کند

border-right-style
style لبه سمت راست یک عنصر را تنظیم می کند

border-right-width
عرض لبه سمت راست یک عنصر را تنظیم می کند

border-style
style لبه های چهار سمت یک عنصر را تنظیم می کند

border-top
کلیه خصوصیات لبه بالایی یک عنصر را در یک مرحله تنظیم می کند

border-top-color
رنگ لبه بالایی یک عنصر را تنظیم می کند

border-top-style
style لبه بالایی یک عنصر را تنظیم می کند

border-top-width
عرض لبه بالایی یک عنصر را تنظیم می کند

border-width
عرض لبه های چهار سمت یک عنصر را تنظیم می کند

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