اینجا هستید :
خانه آموزش های طراحی وبسایت آموزش CSS کار با خاصیت border در زبان CSS همراه با نمونه کدها

کار با خاصیت border در زبان CSS همراه با نمونه کدها

کار با خاصیت border در زبان CSS همراه با نمونه کدها

در ادامه آموزش های سری زبان CSS می خواهیم به یکی از مهمترین و کاربردی ترین خواص در این زبان CSS یعنی خاصیت border اشاره کنیم.

در این خاصیت شما همانطور که از نام خاصیت border مشخص است می توانید کادر حاشیه به انواع شی ها و موجودیت های داخل صفحه بدهید.

در ادامه این مطلب شما را با خاصیت border از خواص زبان استایل دهی صفحات یعنی زبان CSS آشنا کنیم.

سری آموزش های سی اس اس (CSS)

خطوط حاشیه با خاصیت border :

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

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

ما ابتدا در این قسمت خاصیت border را معرفی کرده و سپس تعیین آن را برای جهت های مختلف توضیح می دهیم

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

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

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

border-width

border-left-style
border-style

border-right-color

border-color

border-top-color

border-right

border-bottom-color
border-top

border-left-color

border-bottom

border-right-width

border-left

border-top-width

border-right-style

border-bottom-width

border-top-style

border-left-width

border-bottom-style

آشنایی با مجموعه خاصیت 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)

عدد هگزا دسیمال

تعیین کننده رنگ خطوط حاشیه است . رنگ میتواند به روش های زیر تعیین شود :

۱- نام رنگ مثل blue یا red .

۲- تعیین رنگ به وسیله تابع rgb به صورت زیر :

( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb

این تابع مقدار ۳ رنگ را با هم ترکیب کرده و یک رنگ را ایجاد می کند .

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

Example : rgb (10,65,232)

۳- تعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ هگزادسیمال :

میزان رنگ آبی میزان رنگ سبز میزان رنگ قرمز #

Example : #08FF00

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

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

نکته مهم : در جدول باید خاصیت border را بر هر یک از خانه های جدول ( تگ td ) به صورت جداگانه اعمال کنیم . خواص هر خانه می تواند کاملا با دیگران متفاوت باشد.

حالت اول : به صورت تکی
حالت دوم : خاصیت چند مقداری

مثال : در حالت زیر خواص متفاوتی را برای هر کدام از خانه های جدول تعیین کرده ایم.

نکته مهم : خطوط حاشیه برای هر عنصر در ۴ جهت بالا ، راست ، پایین و چپ تعیین می شود . در 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-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

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

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

با تمامی جزئیات خاصیت border آشنا شدید. امیدواریم برای شما مفید واقع شده باشد. در جلسات بعدی شما را بیشتر با زبان کاربردی CSS و خواص آن آشنا خواهیم کرد.

درباره نویسنده

مدیریت علاقه دارم در زمینه آموزش های مباحث کامپیوتری و نرم افزاری هر دانش و تجربه ای دارم با کاربران عزیز به اشتراک بزارم... ♥
منتظر نظرات خوب شما هستیم!

هنوز هیچ دیدگاهی وجود ندارد

    • سلام , مهمان