قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / خطوط حاشيه در CSS

خطوط حاشيه در CSS

خطوط حاشيه در CSSReviewed by سالار on Mar 23Rating: 5.0

با استفاده از مجموعه خواص border در CSS ، می توان برای بيشتر عنصرهای HTML خطوط حاشيه تعيين کرد . خطوط حاشيه خطوطي هستند ، که به دور عنصر مورد نظر کشيده می شوند .

توضيح : خطوط حاشيه به دور يک عنصر در چهار جهت بالا ، پايين ، راست و چپ کشيده می شوند . در CSS می توان هر يک از اين خواص را به تنهايي تعريف کرده و برای هر کدام خواص جداگانه ای مثل رنگ ، ضخامت و … تعيين کرد .
ما ابتدا در اين قسمت خاصيت border را معرفی کرده و سپس تعيين آن را برای جهت های مختلف توضيح می دهيم :

خاصيت border :

خاصيت چند مقداری جهت دريافت کليه ویژگی های برای حاشيه کامل به دور عنصر است ، که هر يک از اين ويژگی ها بايد به ترتيب زير وارد شود :

border : [ border-width ] [ border-style ] [ border-color ]

خواص ارائه شده در اين قسمت در ليست زير قرار دارند ، برای دريافت اطلاعات درباره هر کدام بر روی آن کليک کنيد :

border-width
border-style
border-color
border-right
border-top
border-bottom
border-left
border-right-style
border-top-style
border-bottom-style
border-left-style
border-right-color
border-top-color
border-bottom-color
border-left-color
border-right-width
border-top-width
border-bottom-width
border-left-width

مجموعه خواص border :

مجموعه خواص border
نام خاصيت نوع خاصيت شرح
border-width thin
medium
thick
length
توسط اين خاصيت می توان ضخامت خطوط حاشيه را به وسيله يکی از حالت های زير تعيين کرد :
– thin : در اين حالت خطوط حاشيه نازک خواهند بود .
– medium : در اين حالت خطوط حاشيه متوسط خواهند بود .
– thick : در اين حالت خطوط حاشيه ضخيم خواهند بود .
– length : در اين حالت صخامت خطوط حاشيه را بر حسب واحدی مثل پيکسل ( pixel ) يا نقطه ( pt ) تعيين می کنيم .
border-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
توسط اين خاصيت می توان حالت خطوط حاشيه را بر حسب يکی از حالت های زير تعيين کرد :
– none : در اين حالت هيچ خطی به عنوان خطوط حاشيه عنصر نمايش داده نمی شود .
– hidden : در اين حالت خطوط حاشيه مخفی هستند .
– dotted : در اين حالت خطوط حاشيه به صورت نقطه نقطه نمايش داده می شوند .
– dashed : در اين حالت خطوط حاشيه به صورت بريده بريده نمايش داده می شوند .
– solid : در اين حالت خطوط حاشيه به صورت معمولی نمايش داده می شوند .
– doubled : در اين حالت خطوط حاشيه به صورت دو خطی نمايش داده می شوند .
– groove : در اين حالت خطوط حاشيه به صورت ۳D نمايش داده می شوند که معمولا خطوط بالايي و سمت چپ پر رنگ تر از خطوط ديگر هستند .
– ridge : در اين حالت خطوط حاشيه به صورت ۳D با طيف رنگی نمايش داده می شوند .
– inset : در اين حالت خطوط حاشيه به صورت ۳D نمايش داده می شوند که معمولا خطوط بالايي و سمت چپ دارای سايه و تيره تر از خطوط ديگر هستند .
– outset : در اين حالت خطوط حاشيه به صورت ۳D نمايش داده می شوند که معمولا خطوط پايينی و سمت راست دارای سايه و تيره تر از خطوط ديگر هستند .
border-color نام رنگ
rgb (r,g,b)
عدد هگزادسيمال
تعيين کننده رنگ خطوط حاشيه است . رنگ میتواند به روش های زير تعيين شود :

  1. نام رنگ مثل blue يا red .
  2. تعيين رنگ به وسيله تابع rgb به صورت زير :
    ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
    اين تابع مقدار ۳ رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ توسط عددی بين ۰ تا ۲۵۵ تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل رنگ بيشتر خواهد بود .

    Example : rgb (10,65,232)

  3. نعيين رنگ به صورت عددی ترکيبی در مبنای ۱۶ هگزادسيمال :
    ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز #

    Example : #08FF00

مثال : در CSS می توان به بسياری از عناصر خطوط حاشيه داد . همچنين می توان هر يک از خواص border را به صورت جدا و يا در قالب خاصيت چند مقداری وارد کرد . به مثال های زير دقت کنيد :

مثال border
در مثال زير به يک جدول و خانه های آن خاصيت border داده ايم . در حالت اول به صورت تکی و در حالت دوم به صورت خاصيت چند مقداری اين کار را کرده ايم . در خاصيت border بهتر است به صورت چند مقداری عمل کنيم .
نکته مهم : در جدول بايد خاصيت border را بر هر يک از خانه های جدول ( تگ td ) به صورت جداگانه اعمال کنيم . خواص هر خانه می تواند کاملا با ديگران متفاوت باشد .
حالت اول
< 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 >
کد
Cell 1 Cell 2
خروجی
حالت دوم
< 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 >
کد
Cell 1 Cell 2
خروجی
در حالت زير خواص متفاوتی را برای هر کدام از خانه های جدول تعيين کرده ايم .
< 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 >
کد
Cell 1
solid , thin
Cell 2
dashed , medium
Cell 3
double , thick
Cell 4
dotted , thick
Cell 5
outset , medium
Cell 6
inset , medium
Cell 7
ridge , medium
Cell 8
groove , medium
Cell 9
hidden , medium
خروجی

 


تکته مهم : خطوط حاشيه برای هر عنصر در ۴ جهت بالا ، راست ، پايين و چپ تعيين می شود . در CSS می توان تعيين يا عدم تعيين و خصوصيات خط حاشيه را برای هر جهت به صورت جدا مقدار دهی کرد .

۱ ) تعيين به صورت خاصيت چند مقداری :

هر يک از خواص border-color , border-width , border-style معرفی شده در قسمت بالا می توانند خصوصيات ۴ جهت خطوط حاشيه به دور يک عنصر را به صورت کامل در قالب يک خاصيت به شرح زير دريافت کنند :

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 ;

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

Example
< 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>
کد
Cell 1 Cell 2
خروجی

۲ ) تعيين به صورت خاصيت تک مقداری :

هر يک از خواص فوق را می توان به صورت تک مقداری نيز ، مقدار دهی کرد . مجموعه خواص جدول زير در برگيرنده کليه صفات ممکن برای خطوط ۴ گانه هستند :

نام خاصيت شرح
border-right در برگيرنده خواص کلی خط حاشيه برای خط حاشيه سمت راست عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است :

border-right : [ border-right-width] [ border-right-style ] [ border-right-color ]

border-top در برگيرنده خواص کلی خط حاشيه برای خط حاشيه بالای عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است :

border-top : [ border-top-width] [ border-top-style ] [ border-top-color ]

border-bottom در برگيرنده خواص کلی خط حاشيه برای خط حاشيه پايين عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است :

border-bottom : [ border-bottom-width] [ border-bottom-style ] [ border-bottom-color ]

border-left در برگيرنده خواص کلی خط حاشيه برای خط حاشيه سمت چپ عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است :

border-left : [ border-left-width] [ border-left-style ] [ border-left-color ]

border-right-color رنگ خط حاشيه سمت راست عنصر را تعيين می کند .
border-top-color رنگ خط حاشيه بالای عنصر را تعيين می کند .
border-bottom-color رنگ خط حاشيه پايين عنصر را تعيين می کند .
border-left-color رنگ خط حاشيه سمت چپ عنصر را تعيين می کند .
border-right-style style خط حاشيه سمت راست عنصر را تعيين می کند .
border-top-style style خط حاشيه بالای عنصر را تعيين می کند .
border-bottom-style style خط حاشيه پايين عنصر را تعيين می کند .
border-left-style style خط حاشيه سمت چپ عنصر را تعيين می کند .
border-right-width پهنای خط حاشيه سمت راست عنصر را تعيين می کند .
border-top-width پهنای خط حاشيه بالای عنصر را تعيين می کند .
border-bottom-width پهنای خط حاشيه پايين عنصر را تعيين می کند .
border-left-width پهنای خط حاشيه سمت چپ عنصر را تعيين می کند .

مثال : به مثال زير و نحوه تعيين خواص برای خطوط حاشيه خانه جدول توجه کنيد . برای دريافت اطلاعات راجع به هر خاصيت موس را چند لحظه روی کد آن نگه داريد :

Example
< 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 >
کد
Cell 1
خروجی

مطلب پیشنهادی

شی Screen در جاوا اسکريپت – صفحه نمایش

شی Screen در جاوا اسکريپت - صفحه نمایشReviewed by سالار on Dec 4Rating: 5.0شی Screen …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید