استایل Border در CSS

در ادامه آموزش CSS با دستورات مربوط به ساختارلایه ها و باکس ها آشنا خواهید شد. توسط دستورات ساختار و لایه بندی باکس ها در  css می‌توانید ظاهر کلیه عناصری را که در صفحه HTML مورد استفاده قرار داده‌اید، تغییر دهید. شما می‌توانید حاشیه ها، ساختار خطوط بیرونی، فاصله از لبه داخلی باکس را به  هر آنچه  که مد نظر شماست ، توسط این دستورات تغییر دهید. در بخش اول از این دسته آموزش ، به بررسی حاشیه(Border) میپردازیم و دستورات را مورد برسی قرار میدهیم.

ساختار و لایه بندی باکس ها

• حاشیه (Border) (این پست)
• خطوط بیرونی (Outline)
• فاصله از لبه بیرونی باکس (Margin)
• فاصله از لبه داخلی باکس (Padding)

خاصیت Border در CSS

خاصیت های Border به شما این مکان را می دهند که style ، اندازه و رنگ حاشیه ی یک المان را تغییر دهید.

مقادیر Border-style

• None هیچ حاشیه ای تعریف نمی شود.
•  Dotted حاشیه ی نقطه چین تعریف می کند.
•  Dashed حاشیه ی خط چین تعریف می کند.
•  Solid یک حاشیه با خط ممتد رسم می کند.
• Double دو خط حاشیه تعریف می کند.
•  Groove یک خط حاشیه ی سه بعدی نمایش می دهد که در آن خطوط بالایی و سمت چپ پررنگ تر ازخطوط دیگر هستند.
•  Ridge در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شوند.
•  Inset این مقدار یک حاشیه ی داخلی سه بعدی تعریف می کند که در آن معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند.
•  Outset حاشیه ی سه بعدی خارجی تعریف می کند که در آن خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند.

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

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

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
 }

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

خاصیت border-color به منظور تنظیم و مقداردهی رنگ خط حاشیه مورد استفاده قرار می گیرد.رنگ خط حاشیه را می توان با مقادیر زیر تنظیم کرد.

Name: اسم رنگ دلخواه را مشخص می کند، مانند ”red”

RGB: یک مقدار Red Blue Green) RGB ) تعریف می کند.

Hex: یک مقدار شانزده شانزدهی(hex) مانند “#ff0000” مشخص می کند.

خاصیت ”border-color“ اگر به تنهایی بکار گرفته شود، هیچ اثری نخواهد داشت. بدین معنا که شما باید درمرحله ی اول با استفاده از خاصیت ”border-style“، خطوط حاشیه را مقداردهی کنید.

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: #98bf21;
}

تعریف حاشیه به صورت مجزا برای هر طرف در CSS

این امکان وجود دارد که برای حاشیه ی هر طرف ظاهری متفاوت تعریف کرد (برای هر طرف یک حاشیه متفاوت داشت)

p {
border-top-style: dotted;
border-right-style : solid;
border-bottom-style: dotted;
border-left-style: solid;
}

مثال بالا را همچنین می توان با تنها یک خاصیت تنظیم یا مقدار دهی کرد.

p {
border-style: dotted solid;
}

خاصیت border-style می تواند از یک تا چهار مقدار را  داشته باشد.

border-style dotted solid double dashed;

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

border-style dotted solid double;

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

border-style dotted solid;

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

border-style dotted;

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

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

خاصیت Border-Shorthand

همان طور که در مثال های فوق مشاهده می کنید، خاصیت های مختلفی وجود دارند که در برخورد و کار باخطوط حاشیه باید به آن ها توجه داشت.

به منظور کاهش اندازه ی کد (مختصر نویسی یا بهینه نوشتن کد)، همچنین می توان تمامی خاصیت های جداگانه را در یک خاصیت واحد تعریف کرد. این خاصیت را مختصر نویسی کد یا همان short-hand property می نامند.

خاصیت ذکر شده در واقع فشرده یا خلاصه ی خاصیت های مجزای زیر است.

border-width
border-style (الزامی)
border-color

p {
border: 5px solid red;
}

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