آموزش css/خاصيت border خطوط حاشيه در CSS : با استفاده از مجموعه خواص border در CSS ، می توان برای بيشتر عنصرهای HTML خطوط حاشيه تعيين کرد . خطوط حاشيه خطوطي هستند ، که به دور عنصر مورد نظر کشيده می شوند . توضيح : خطوط حاشيه به دور يک عنصر در چهار جهت بالا ، پايين ، راست و چپ کشيده می شوند . در CSS می توان هر يک از اين خواص را به تنهايي تعريف کرده و برای هر کدام خواص جداگانه ای مثل رنگ ، ضخامت و ... تعيين کرد . ما ابتدا در اين قسمت خاصيت border را معرفی کرده و سپس تعيين آن را برای جهت های مختلف توضيح می دهيم : خاصيت border : خاصيت چند مقداری جهت دريافت کليه ویژگی های برای حاشيه کامل به دور عنصر است ، که هر يک از اين ويژگی ها بايد به ترتيب زير وارد شود : border : [ border-width ] [ border-style ] [ border-color ] [h=3] مجموعه خواص border : [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] مجموعه خواص border [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] border-width [/TD] [TD="class: prbody"] thin medium thick length [/TD] [TD="class: prbody"] توسط اين خاصيت می توان ضخامت خطوط حاشيه را به وسيله يکی از حالت های زير تعيين کرد : - thin : در اين حالت خطوط حاشيه نازک خواهند بود . - medium : در اين حالت خطوط حاشيه متوسط خواهند بود . - thick : در اين حالت خطوط حاشيه ضخيم خواهند بود . - length : در اين حالت صخامت خطوط حاشيه را بر حسب واحدی مثل پيکسل ( pixel ) يا نقطه ( pt ) تعيين می کنيم . [/TD] [/TR] [TR] [TD="class: prbody"] border-style [/TD] [TD="class: prbody"] none hidden dotted dashed solid double groove ridge inset outset [/TD] [TD="class: prbody"] توسط اين خاصيت می توان حالت خطوط حاشيه را بر حسب يکی از حالت های زير تعيين کرد : - none : در اين حالت هيچ خطی به عنوان خطوط حاشيه عنصر نمايش داده نمی شود . - hidden : در اين حالت خطوط حاشيه مخفی هستند . - dotted : در اين حالت خطوط حاشيه به صورت نقطه نقطه نمايش داده می شوند . - dashed : در اين حالت خطوط حاشيه به صورت بريده بريده نمايش داده می شوند . - solid : در اين حالت خطوط حاشيه به صورت معمولی نمايش داده می شوند . - doubled : در اين حالت خطوط حاشيه به صورت دو خطی نمايش داده می شوند . - groove : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط بالايي و سمت چپ پر رنگ تر از خطوط ديگر هستند . - ridge : در اين حالت خطوط حاشيه به صورت 3D با طيف رنگی نمايش داده می شوند . - inset : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط بالايي و سمت چپ دارای سايه و تيره تر از خطوط ديگر هستند . - outset : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط پايينی و سمت راست دارای سايه و تيره تر از خطوط ديگر هستند . [/TD] [/TR] [TR] [TD="class: prbody"] border-color [/TD] [TD="class: prbody"] نام رنگ rgb (r,g,b) عدد هگزادسيمال [/TD] [TD="class: prbody"] تعيين کننده رنگ خطوط حاشيه است . رنگ میتواند به روش های زير تعيين شود : نام رنگ مثل blue يا red . تعيين رنگ به وسيله تابع rgb به صورت زير : ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb اين تابع مقدار 3 رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ توسط عددی بين 0 تا 255 تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل رنگ بيشتر خواهد بود . Example : rgb (10,65,232) نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال : ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز # Example : #08FF00 [/TD] [/TR] [/TABLE] مثال : در CSS می توان به بسياری از عناصر خطوط حاشيه داد . همچنين می توان هر يک از خواص border را به صورت جدا و يا در قالب خاصيت چند مقداری وارد کرد . به مثال های زير دقت کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال border [/TD] [/TR] [TR] [TD="class: header, colspan: 2, align: right"] در مثال زير به يک جدول و خانه های آن خاصيت border داده ايم . در حالت اول به صورت تکی و در حالت دوم به صورت خاصيت چند مقداری اين کار را کرده ايم . در خاصيت border بهتر است به صورت چند مقداری عمل کنيم . نکته مهم : در جدول بايد خاصيت border را بر هر يک از خانه های جدول ( تگ td ) به صورت جداگانه اعمال کنيم . خواص هر خانه می تواند کاملا با ديگران متفاوت باشد . [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت اول [/TD] [/TR] [TR] [TD="class: body"] < table cellspacing="0" style="border-color: Blue; border-style: solid; border-width: medium; width: 500px" > < tr > < td style="border-color: Blue; border-style: solid; border-width: medium" > Cell 1 < /td > < td style="border-color: Green; border-style: solid; border-width: medium" > Cell 2 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE] [TR] [TD] Cell 1 [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت دوم [/TD] [/TR] [TR] [TD="class: body"] < table cellspacing="0" style="border: solid medium blue ; width: 500px" > < tr > < td style= "border: solid medium blue" > Cell 1 < /td > < td style= "border: solid medium green" > Cell 2 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 500"] [TR] [TD] Cell 1 [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] در حالت زير خواص متفاوتی را برای هر کدام از خانه های جدول تعيين کرده ايم . [/TD] [/TR] [TR] [TD="class: body"] < table cellpadding="5" cellspacing="5" style="border: solid medium blue; width: 500px" > < tr > < td style="border: solid thin blue" > Cell 1 solid , thin < /td > < td style="border: dashed medium blue" > Cell 2 dashed , medium < /td > < td style="border: double thick maroon" > Cell 3 double , thick < /td > < /tr > < tr > < td style="border: dotted thick green" > Cell 4 dotted , thick < /td > < td style="border: outset medium green" > Cell 5 outset , medium < /td > < td style="border: inset medium red" > Cell 6 inset , medium < /td > < /tr > < tr > < td style="border: ridge medium red" > Cell 7 ridge , medium < /td > < td style="border: groove medium red" > Cell 8 groove , medium < /td > < td style="border: hidden medium blue" > Cell 9 hidden , medium < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 500"] [TR] [TD] Cell 1 solid , thin [/TD] [TD] Cell 2 dashed , medium [/TD] [TD] Cell 3 double , thick [/TD] [/TR] [TR] [TD] Cell 4 dotted , thick [/TD] [TD] Cell 5 outset , medium [/TD] [TD] Cell 6 inset , medium [/TD] [/TR] [TR] [TD] Cell 7 ridge , medium [/TD] [TD] Cell 8 groove , medium [/TD] [TD] Cell 9 hidden , medium [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] منبع: developer1
پاسخ : آموزش css/خاصيت border تکته مهم : خطوط حاشيه برای هر عنصر در 4 جهت بالا ، راست ، پايين و چپ تعيين می شود . در CSS می توان تعيين يا عدم تعيين و خصوصيات خط حاشيه را برای هر جهت به صورت جدا مقدار دهی کرد . 1 ) تعيين به صورت خاصيت چند مقداری : هر يک از خواص border-color , border-width , border-style معرفی شده در قسمت بالا می توانند خصوصيات 4 جهت خطوط حاشيه به دور يک عنصر را به صورت کامل در قالب يک خاصيت به شرح زير دريافت کنند : border- style : خط بالاstyle خط راستstyle خط پايينstyle خط چپstyle border- width : خط بالاwidth خط راستwidth خط پايينwidth خط چپwidth border- color : خط بالاcolor خط راستcolor خط پايينcolor خط چپcolor مثال : به طور مثال اگر خاصيت border-color برای يک خانه جدول به صورت زير تنظيم شود ، داريم : border-color : Red Black Blue Green ; به اين معنی است که رنگ خط حاشيه بالا قرمز ، رنگ حاشيه راست مشکی ، رنگ حاشيه پايين آبی و رنگ حاشيه چپ سبز خواهد بود . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px maroon; width: 500px; height: 100px" > < tr > < td style="border-style: solid dashed solid dashed; border-color: Red Blue Green black" > Cell 1 < /td > < td style="border-style: dashed solid dashed solid; border-color: Green Black Red Blue" > Cell 2 < /td > < /tr > </table> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 500"] [TR] [TD] Cell 1 [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] 2 ) تعيين به صورت خاصيت تک مقداری : هر يک از خواص فوق را می توان به صورت تک مقداری نيز ، مقدار دهی کرد . مجموعه خواص جدول زير در برگيرنده کليه صفات ممکن برای خطوط 4 گانه هستند : [TABLE="class: pr"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prname"] border-right [/TD] [TD="class: prbody"] در برگيرنده خواص کلی خط حاشيه برای خط حاشيه سمت راست عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است : border-right : [ border-right-width] [ border-right-style ] [ border-right-color ] [/TD] [/TR] [TR] [TD="class: prname"] border-top [/TD] [TD="class: prbody"] در برگيرنده خواص کلی خط حاشيه برای خط حاشيه بالای عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است : border-top : [ border-top-width] [ border-top-style ] [ border-top-color ] [/TD] [/TR] [TR] [TD="class: prname"] border-bottom [/TD] [TD="class: prbody"] در برگيرنده خواص کلی خط حاشيه برای خط حاشيه پايين عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است : border-bottom : [ border-bottom-width] [ border-bottom-style ] [ border-bottom-color ] [/TD] [/TR] [TR] [TD="class: prname"] border-left [/TD] [TD="class: prbody"] در برگيرنده خواص کلی خط حاشيه برای خط حاشيه سمت چپ عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است : border-left : [ border-left-width] [ border-left-style ] [ border-left-color ] [/TD] [/TR] [TR] [TD="class: prname"] border-right-color [/TD] [TD="class: prbody"] رنگ خط حاشيه سمت راست عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-top-color [/TD] [TD="class: prbody"] رنگ خط حاشيه بالای عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-bottom-color [/TD] [TD="class: prbody"] رنگ خط حاشيه پايين عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-left-color [/TD] [TD="class: prbody"] رنگ خط حاشيه سمت چپ عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-right-style [/TD] [TD="class: prbody"] style خط حاشيه سمت راست عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-top-style [/TD] [TD="class: prbody"] style خط حاشيه بالای عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-bottom-style [/TD] [TD="class: prbody"] style خط حاشيه پايين عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-left-style [/TD] [TD="class: prbody"] style خط حاشيه سمت چپ عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-right-width [/TD] [TD="class: prbody"] پهنای خط حاشيه سمت راست عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-top-width [/TD] [TD="class: prbody"] پهنای خط حاشيه بالای عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-bottom-width [/TD] [TD="class: prbody"] پهنای خط حاشيه پايين عنصر را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prname"] border-left-width [/TD] [TD="class: prbody"] پهنای خط حاشيه سمت چپ عنصر را تعيين می کند . [/TD] [/TR] [/TABLE] مثال : به مثال زير و نحوه تعيين خواص برای خطوط حاشيه خانه جدول توجه کنيد . برای دريافت اطلاعات راجع به هر خاصيت موس را چند لحظه روی کد آن نگه داريد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px maroon; width: 500px; height: 100px" > < tr > < td style =" border-top: dotted 3px green ; border-bottom-color: Red; border-bottom-style : double ; border-bottom-width : 2px; border-right: dashed 2px blue ; border-left: dashed 1px yellow" > Cell 1 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 500"] [TR] [TD] Cell 1 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR]
