سبد خرید (0)

تبلیغات

خاصیت border در CSS

خاصیت Border در CSS

Wiki

خواص مربوط به لبه ها در CSS

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

خاصیت border-style

Wiki

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

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

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

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

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

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

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

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

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

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

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

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

خودتان امتحان کنید: تنظیم چگونگی نمایش لبه ها


خاصیت border-width

Wiki

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

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

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

مثال (خاصیت border در CSS)

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
خودتان امتحان کنید »

 خاصیت border-color

Wiki

این خاصیت برای تنظیم رنگ لبه ها استفاده می شود. مقدار این خاصیت را می توان به یکی از روش های زیر تنظیم کرد:

  • name: نام رنگ باید مشخص شود مانند "red"
  • RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

این خاصیت همچنین با مقدار "transparent" نیز می تواند تنظیم شود.(لبه به رنگ Background خواهد بود)

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

مثال (خاصیت border در CSS)

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
خودتان امتحان کنید »

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

Wiki

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

مثال (خاصیت border در CSS)

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
خودتان امتحان کنید »

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

مثال (خاصیت border در CSS)

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

Wiki

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

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

مثال (خاصیت border در CSS)

border:5px solid red;
خودتان امتحان کنید »

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

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

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


تمام خواص مربوط به لبه در CSS

Wiki

خاصیتتوضیحات
border

کلیه خصوصیات لبه های یک عنصر را در یک مرحله تنظیم می کند

border-bottom

کلیه خصوصیات لبه پایینی یک عنصر را در یک مرحله تنظیم می کند

border-bottom-color

رنگ لبه پایینی یک عنصر را تنظیم می کند

border-bottom-style

style لبه پایینی یک عنصر را تنظیم می کند

border-bottom-width

عرض لبه پایینی یک عنصر را تنظیم می کند

border-color

رنگ لبه های چهار سمت یک عنصر را تنظیم می کند

border-left

کلیه خصوصیات لبه سمت چپ یک عنصر را در یک مرحله تنظیم می کند

border-left-color

رنگ لبه سمت چپ یک عنصر را تنظیم می کند

border-left-style

style لبه سمت چپ یک عنصر را تنظیم می کند

border-left-width

عرض لبه سمت چپ یک عنصر را تنظیم می کند

border-right

کلیه خصوصیات لبه سمت راست یک عنصر را در یک مرحله تنظیم می کند

border-right-color

رنگ لبه سمت راست یک عنصر را تنظیم می کند

border-right-style

style لبه سمت راست یک عنصر را تنظیم می کند

border-right-width

عرض لبه سمت راست یک عنصر را تنظیم می کند

border-style

style لبه های چهار سمت یک عنصر را تنظیم می کند

border-top

کلیه خصوصیات لبه بالایی یک عنصر را در یک مرحله تنظیم می کند

border-top-color

رنگ لبه بالایی یک عنصر را تنظیم می کند

border-top-style

style لبه بالایی یک عنصر را تنظیم می کند

border-top-width

عرض لبه بالایی یک عنصر را تنظیم می کند

border-width

عرض لبه های چهار سمت یک عنصر را تنظیم می کند

دیدگاه‌ها  

+1 # mohadeseh 1396-04-22 17:39
سلام چرا در آموزش بالا از border-rdius استفاده نکردید و از آن صحبتی نشده است؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-04-24 16:36
مطالب ارائه شده در بالا مربوط به CSS2 است اما خصوصیت border-rdius در CSS3 معرفی شده است که می توانید در لینک زیر توضحات کامل و جامع را در اینباره مطالعه فرمایید:
http://beyamooz.com/css3/649-%DA%AF%D8%B1%D8%AF-%DA%A9%D8%B1%D8%AF%D9%86-%DA%A9%D9%88%D8%B4%D9%87-%D9%87%D8%A7-%D8%AF%D8%B1-css3
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # گل گلی 1395-10-03 14:09
سلام.
در مواردی که نوشتید ترتیب باید رعایت بشه من ترتیب رو هم بهم می زنم دوباره اجرا میشه. مثل این:
border: red solid 10px ;
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-10-03 17:49
سلام. استاندارد اینه که ترتیب رعایت بشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مجید 1395-06-01 17:12
سلام چطور بردر رو بذارم وسط صفحه وقتی عرضش رو 20 درصد گذاشتم ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1395-06-04 16:40
سلام، متوجه سوالتون نشدم، لطف کنید خصوصیت هایی که برای این منظور استفاده کردید رو ذکر کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mina.z 1394-10-08 18:02
سلام خسته نباشید.
میشه بگید تا چه قسمتی از css را بخونیم کافیه و میشه جاوا اسکریپت را شروع کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-10-16 10:27
با سلام و تشکر.
مرز مشخصی نداره. اگر به تسلط لازم در CSS رسیدید، میتونید شروع به یادگیری جاوااسکریپت کنید.

در حین یادگیری CSSتون هم تقویت خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # .saeed 1394-05-14 16:55
سلام
ببخشید سوال دیگه ای داشتم.
من در قسمت مختصر نویسی مکان مقادیر را تغییر دادم یعنی ترتیب رو رعایت نکردم و مشکلی پیش نیامد.
خوب چرا باید به ترتیب باشه؟
مرسی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1395-04-13 17:52
سلام اگر ترتیب رو رعایت نکنید ممکن است که برخی از مرورگرها نتیجه را بدون هیچ مشکلی نشان بدهند اما به هرحال کدتان استاندارد نخواهد بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # rezax 1393-12-18 13:24
سلام و خسته نباشید
ایا می توان بردر با لبه های گرد ایجاد کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-12-18 13:57
سلام، برای گرد کردن گوشه ها در CSS به لینک زیر مراجعه کنید:
www.beyamooz.com/css3/649
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!