> border در CSS
میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

border در CSS

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

ویژگی border  در CSS ویژگی ایست که با استفاده از آن می توان یک خط به دور لبه ی داخلی ( یعنی درون ) یک عنصر کشید، و بطور کلی با استفاده از این ویژگی می توان ۳ ویژگی زیر را بصورت خلاصه نوشت :

  • border-width
  • border-style (ضروری)
  • border-color
  • border-radius

این خواص در CSS به شما اجازه می دهد تا رنگ و سبک یا Style لبه های یک عنصر را مشخص کنید.

 


خاصیت border-style

خاصیت border-style مشخص می کند که چه نوع لبه ای نمایش داده شود.

نکته: هیچ کدام از خواص مربوط به Border نمایش داده نمی شود مگر اینکه خاصیت border-style تنظیم شده باشد.

مقادیر خاصیت border-style:

none: هیچ لبه ای نمایش داده نمی شود

dotted: لبه ها به صورت نقطه نقطه ای نمایش داده می شود

dashed: لبه ها به صورت خط تیره نمایش داده می شود

solid: لبه ها به صورت خالص و یکپارچه نمایش داده می شود

double: دو لبه نمایش داده می شود

groove: یک لبه سه بعدی گود دار نمایش داده می شود

ridge: یک لبه سه بعدی برجسته نمایش داده می شود

inset: یک لبه سه بعدی inset نمایش داده می شود

outset: یک لبه سه بعدی outset نمایش داده می شود

 

 

تنظیم لبه ها، به صورت جداگانه

در CSS این امکان وجود دارد که برای اضلاع مختلف، لبه های مختلف تعریف کرد.

 

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

مثال بالا را می توان با یک خاصیت نیز تنظیم کرد:

 

border-style:dotted solid;

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

  1. border-style:dotted solid double dashed;
    • dotted لبه بالا
    • solid لبه راست
    • double لبه پایین
    • dashed لبه چپ
  2. border-style:dotted solid double;
    • dotted لبه بالا
    • solid لبه راست و چپ
    • double لبه پایین
  3. border-style:dotted solid;
    • dotted لبه بالا و پایین
    • solid لبه راست و چپ
  4. border-style:dotted;
    • dotted تمام چهار لبه

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


خاصیت border-width

این خاصیت برای تنظیم کردن عرض یا ضخامت لبه ها استفاده می شود.

مقدار border-width به پیکسل تنظیم می شود، البته با یکی از سه مقدار از پیش تعریف شده thin و medium یا thick نیز می تواند تنظیم شود.

نکته : اگر خاصیت border-style تنظیم نشده باشد خاصیت border-width کار نخواهد کرد.

 

 

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

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

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

 

همچنین می توان برای هر کدام از سمت های لبه ضخامت مختلفی در نظر گرفت مانند مثال زیر

 

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

در مثال اول که border-width دو مقدار عددی گرفته مقدار اول برای لبه بالا و پایین و مقدار دوم برای لبه راست و چپ استفاده می شود

در مثال سوم که border-width چهار مقدار عددی گرفته مقدار اول لبه بالا و مقدار دوم لبه راست  و مقدار سوم لبه پایین و مقدار چهارم لبه چپ استفاده می شود.

 


خاصیت border-color

از ویژگی border-color برای تنظیم رنگ چهار لبه ها استفاده می شود.

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

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

تنظیم رنگ لبه ها به صورت جداگانه

خاصیت border-color می تواند از یک تا چهار مقدار داشته باشد (برای حاشیه بالا ، مرز راست ، مرز پایین و مرز چپ).

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

نکته :  در تنظیم رنگ ها می توان رنگ ها را به صورت نام یا بصورت  RGB یا HEX و .. تنظیم کرد

 


 

مختصر نویسی خصوصیت border

همان طور که در مثال بالا دیدید، برای تنظیم لبه ها با خواص زیادی سروکار داریم.

این امکان وجود دارد که تمام خواص بالا را به یک خاصیت تبدیل کنیم تا کدمان کوتاه تر شود، این خاصیت برای تنظیم لبه ها، خاصیت “border” نام دارد:

 

border:5px solid red;

زمانی که از خاصیت border استفاده می کنید، توجه داشته باشید که ترتیب مقادیر به صورت زیر خواهد بود:

  1. border-width
  2. border-style
  3. border-color

اگر یکی از مقادیر بالا قید نشود مشکلی پیش نخواهد آمد البته همان طور که قبلاً گفته شد خاصیت border-style مورد نیاز است، تنها چیزی که باید رعایت شود ترتیب مقادیر است.

 


خاصیت border-radius

این ویژگی برای گرد کردن گوشه های لبه ها استفاده می شود و به صورت عدد یا درصد می توان مقدار دهی کرد.

 

p {
  border: 2px solid red;
  border-radius: 5px;
}

 


امیدواریم آموزش رنگ ها در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

border cssborder css styleborder در CSSborder ها در csscssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfانواع border در cssتگ border در cssخاصیت border در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهدستور border در cssساختار دستورات CSSسی اس اسصفت border در cssفارسی w3schoolsکاربرد border در cssکتاب آموزش css فارسیکد border در cssلبه ها در cssویژگی های border در css
ارسال دیدگاه

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

×

سلام کاربر عزیز

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

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟