استایل بندی و تعیین خطوط مرزی و Border در CSS

[ آخرین بازنگری ۲۱ آبان ۱۳۹۵ ] [ نسخه چاپی ]

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

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

 

border-style

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

[restrict paid=”true”]

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


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


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


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

 

همچنین مقادیر groove ، ridge ، inset و outset هم هستند که خط مرزی سه بعدی ایجاد میکنند که امتحان کردن اونها رو به خود شما واگذار میکنم.

 

خطوط مرزی(border) در css

 

پهنای خط مرزی

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

 

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

رنگ خط مرزی

با بکارگیری مشخصه border-color میتونید رنگ این خط مرزی رو تعیین کنید. برای این منظور میتونید از نام رنگ (مثلا red) ، کد RGB و یا کد HEX استفاده کنید . همچنین میتونید مقدار transparent رو وارد کنید تا یک خط مرزی شیشه ای و شفاف ایجاد کنید.

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

 

نکته ای که بازهم یادآوری میکنم این هست که مشخصه های border-width و border-color بدون مشخصه border-style هیچ تغییری رو در ظاهر بلاک ایجاد نخواهد کرد.

 

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

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

 

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

 

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

 

border-style: dotted dashed solid double;

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

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

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

 

border-style: solid dotted dashed;

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

 

border-style: solid double;

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

 

اگر قصد داشته باشیم فقط یک سمت بلاک رو بوردر بدیم میتونیم مشخصه های border-right ، border-left , border-top و یا border-bottom استفاده کنیم.

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

 

Border:2px solid #ff0000;

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

 

border-width:2px;
border-style:solid;
border-color:#ff0000;

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

اگر جایی از درس مبهم بود یا سوالی در ذهن شما ایجاد شده خوشحال میشیم با ما در بخش دیدگاه ها در میون بگذارید.

در درس بعد در مورد حاشیه (Margin) صحبت خواهیم کرد و این مشخصه رو بررسی خواهیم کرد.

[/restrict]

احتمالا این مطالب برای شما جالب هستند

آموزش css – درس شانزدهم – موقعیت دهی به عناصر (Positioning)
آموزش css – درس هجدهم – کلاس کاذب (Pseudo Class)
استایل‌بندی لینک و پیوندها در صفحات وب با css
ایجاد منوی افقی ساده با تکنیکهای css
ساخت دکمه rollover با استفاده از فتوشاپ و css
آموزش css – درس بیستم – انواع واسطه ها و رسانه ها (Media Types)

گفتگو پیرامون استایل بندی و تعیین خطوط مرزی و Border در CSS

(منتشر شده: 0 | در انتظار تایید: 0)

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)