ورود

**saberi** · ۹۴/۶/۲۳، ۱۰:۰۰ عصر

کار با border و outline در css

در طراحی و فرم بندی ظاهر صفحات وب، از خصوصیات زیادی در css استفاده می شود که هر کدام می توانند قابلیتی ویژه را برایمان ایجاد نمایند تا به کمک آن قابلیت، به هدف مورد انتظار خود دست یابیم، یکی از این ویژگی ها، قابلیت ایجاد انواع خطوط به شکل ها و طرح های مختلف در وب با استفاده از ویژگی های border و outline در css است که بی گمان کم تر طراحی پیدا می شود که از آنها در قالب ها، طرح ها یا صفحات خود استفاده نکرده باشد، لذا در این قسمت از آموزش مقدماتی css، به این موضوع حتی الامکان به صورت کامل خواهیم پرداخت.

ایجاد خط با ویژگی border در css

با استفاده از ویژگی border در css می توان به راحتی انواع مختلف خطوط را برای لایه ها و عناصر صفحات وب تعریف و تنظیم کرد، برای انجام این کار، ویژگی border معمولا از تنظیمات و مقادیر زیرمجموعه خود استفاده می کند که به طور دقیق، رنگ، اندازه خطوط، نوع و... را مشخص می کنند، به مثال زیر که یک کلاس در css است توجه کنید.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

در کلاس ساده بالا، به راحتی یک خط به صورت solid یا جامد (خطوط معمولی) با کد رنگی 999# و اندازه 1 پیکسل ایجاد کرده ایم، به این صورت کلاس بالا به طور پیش فرض این خط را در هر چهار طرف (بالا، پائین، چپ و راست) لایه یا عنصر در صفحات وب ترسیم خواهد کرد، برای ترسیم خطوط در css، نوع یا همان style آنها باید الزاما تعیین شود (به فرض solid، dotted و...) اما تنظیم سایر موراد اختیاری است، برای ترسیم خطوط متفاوت نیز، می توان از مقادیر زیر برای style در border استفاده کرد:

- dashed: برای ترسیم خطوط با فاصله (علامت dash یا -).
- dotted: برای ترسیم خطوط با فاصله (علامت نقطه یا dot).
- double: برای ترسیم خطوط به صورت دوتایی یا دوبل.
- groove: برای ترسیم خطوط به شکل شیاری و برجسته.
- hidden: برای ترسیم خطوط پنهان در صفحه.
- inset: برای ترسیم خطوط سه بعدی با برجستگی داخلی.
- outset: برای ترسیم خطوط سه بعدی با برجستگی بیرونی.
- none: هیچ خطی ترسیم نمی شود.
- ridge: برای ترسیم خطوط شیاری و برجسته.
- solid: برای ترسیم خطوط معمولی.
برای مقادیر اندازه عرض خطوط نیز می توان از مقادیر پیکسل، درصد و... استفاده کرد، علاوه بر این از سه مقدار زیر هم می توان برای این مقصود استفاده نمود:
- medium: ایجاد خطوط با اندازه استاندارد و پیش فرض مرورگر.
- thin: ایجاد خطوط نازک و ظریف.
- thick: ایجاد خطوط ضخیم و برجسته.
برای مقادیر رنگ نیز می توانید از کدهای هگز (مانند 0000FF#) یا rgb (مانند (255,100,125)rgb) و همچنین عنوان های رنگی (مانند red ،blue، green و...) استفاده کنید.

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و همچنین مثالی دیگر:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

شیوه های نگارش (syntax) خاصیت border در css

شیوه تعریف و نگارش (syntax) خاصیت border در css به حالتی که در بالا از آن استفاده کرده ایم محدود نمی شود، در واقع حالت فوق نوع کاربرد مختصر نویسی این خاصیت است، اگر بخواهید از border به شکل سفارشی تری استفاده نمائیم، به فرض برای هر ضلع یک لایه در صفحه، یک نوع خاص از خط و با اندازه و رنگ متفاوت داشته باشیم، می توانیم از سایر پارامترهای این خاصیت به شکل زیر استفاده نمائیم.
- تعریف خطوط برای یک ضلع خاص:
بدین منظور از border-right، border-left، border-top و border-bottom استفاده می کنیم، به عنوان مثال:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

کلاس فرضی بالا، برای لایه ای که از این کلاس برای آن استفاده می شود، سه خط به صورت solid در سمت بالا، چپ و راست ترسیم خواهد کرد و در پائین لایه، از ویژگی border-bottom پیروی کرده و خط را به صورت double ایجاد می کند.

مثالی دیگر:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

علاوه بر این، سه پارامتر color، style و width را می توان به صورت جداگانه نیز برای خطوط در css تعریف کرد، البته این روش همیشه هم ضروری نیست و با شیوه مختصر نویسی نیز می توان به راحتی خطوط مختلف را ترسیم کرد، اما در مواقعی ممکن است استفاده از این سبک کاربرد داشته باشد؛ بدین منظور از سه خاصیت ذکر شده به صورت زیر استفاده می شود:

- border-width (یا به شیوه ترکیبی به صورت به فرض border-bottom-width): برای تعیین عرض خطوط.

- border-color (یا به شیوه ترکیبی به صورت به فرض border-top-color): برای تعیین رنگ خطوط.

- border-style (یا به شیوه ترکیبی به صورت به فرض border-left-style): برای تعیین نوع خطوط.

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

همچنین مثالی دیگر:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و همچنین مثال زیر:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

همانطور که پیش تر گفتیم، استفاده از ویژگی style برای خاصیت border جهت ترسیم آن ضروری و سایر موارد از قبیل رنگ و اندازه اختیاری است، یعنی یک خط در صفحات وب با css بدون وجود یکی از مقادیر style برای border قابل ترسیم شدن نیست.

ایجاد خط برجسته با ویژگی outline در css

اگرچه ترسیم خطوط با border در css در بیشتر موارد نیازهایمان را در طراحی صفحات وب مرتفع می کند، اما قدرت css از این هم فراتر رفته و ورای خطوط border امکان ایجاد خطوط دیگری را نیز می دهد که به آنها outline می گویند، همان طور که از نام آن پیدا است، outline برای ایجاد خطوط (فراتر از border) به کار گرفته می شود، استفاده از این قابلیت معمولا به جهت برجسته نمودن یا تنظیم موقعیت یک بلاک کاربرد دارد، البته این ویژگی در مقایسه با border از بیشتر خاصیت های آن استفاده می کند (به جزء موارد مربوط به جهت های مختلف left، right، top و bottom)، لذا اگر نحوه کار border را به درستی فرا بگیرید، تنظیم خطوط outline چندان مبهم نخواهد بود؛ تنها تفاوت بین border و outline در این است که اندازه border جزء عنصری که از آن استفاده می کند محسوب می شود (و به اندازه آن عنصر اضافه می شود)، اما اندازه outline مستقل بوده و جزء عنصر وابسته نیست.

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

از آنجایی که تنظیمات outline کاملا مشابه با border است (به جزء موارد مربوط به جهت های مختلف left، right، top و bottom)، در اینجا صرفا به ذکر چند مثال بسنده می کنیم .

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مثالی دیگر:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و همچنین مثال زیر:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

برای آشنایی بیشتر با نحوه کار border و outline می توانید از مثال های زیر استفاده نمائید.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

ورود
نام کاربری:
گذرواژه‌:	گذرواژه‌تان را فراموش کرده‌اید؟
	مرا به خاطر بسپار