آموزش CSS Border

خاصیت Border در CSS

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

توجه داشته باشید که هیچ یک از خاصیت های Border تا زمانی که خاصیت 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-یک مقدار RGB (red blue green) تعریف می کند.
• Hex-یک مقدار شانزده شانزدهی(hex)مانند "#ff0000" مشخص می کند.

همچنین می توان رنگ پس زمینه را شفاف "transparent " انتخاب کرد.

چنانچه رنگ خط حاشیه مقداردهی نشده باشد،border رنگ خود را از خاصیت colorمربوطه به ارث می برد.

        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