ورود ثبت نام

border ها در css

border ها در css
به نام خدا امروز میخواهیم border ها در css را به شما آموزش دهیم.یکی از پر کاربرد ترین پراپرتی های زبان css این ها هستند.هنوز در مقادیری که یک المان میخواهد به خود اختصاص بدهد هستیم.border و margin دو تا از این ها هستند.در قسمت های بعد این موضوع تمام میشود و به پراپرتی های دیگر css خواهیم پرداختدر قسمت قبلی ما با اندازه و فاصله در css آشنا شدیم.حال میخواهیم همان div هایی که فاصله دادیم را border بدهیم.با mosqdevelopers همراه باشید.

border

border ها همان حاشیه های مرزی هر المان هستند.اگر شما به یک تگ border بدهید انگار دور آن را خط کشیده اید.یک مثالی بزنیم تا بیشتر متوجه بشید:
div{
border:1px solid red;
}
در کد بالا ما یک border به پهنای 1px درست کردیم و رنگ آن را قرمز گذاشتیم.مقدار solid به این معنی است که ، خطی که شما میکشید ممتد باشد.استایل های گوناگونی وجود دارد که میتوانید به جای solid استفاده کنید:
dotted
dashed
solid
double
groove
ridge
outset
none
hidden
border
border
border
border
border
border
border
border
border
border ها هم مثل margin ها به چهار جهت بالا ، راست ، پایین ، چپ تقسیم میشوند که شما میتوانید جداگانه برای اندازه ، رنگ ، استایل به چهار جهت border بدهیدبه کد زیر دقت کنید:
div{
border-width: 1px 2px 3px 4px;
	border-style: solid dotted dashed solid;
    border-color: red orange green black;
    }
border
از اسم پیداست که border-width پهنای border را مشخص میکند.border-style استایل مورد نظر مثلا solid را مشخص میکند.border-color هم رنگ آن را.همان طور که گفته شد border ها مثل margin ها مقدار دهی میشود.یعنی:
div{
    border-style:solid dotted;
    }
بالا و پایین استایل solid ، چپ و راست استایل dotted به خود اختصاص میدهند.یک مورد مهم در مورد border ها این است که مقدار style واجب است که نوشته شود.اگر شما فقط رنگ و اندازه را مشخص کنید،border به المان شما اختصاص داده نمیشود.یک مثال دیگر از border ها:
div{
    border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
  }
در اینجا ما به تک تک جهت ها استایل مورد نظر را دادیم ولی اگه راه سریع تر را بخواهید همان مورد اولی که گفتم کفایت میکند.

border-radius

اینجا هدف ما گرد کردن دور border هاست.نمونه ی زیر را ببینید:
می بینید که گوشه های border ما گرد شده است.این کار با border-radius انجام میشود:
div{
border:1px solid red;
border-radius: 10px;
height: 30px;
}
و در اخر یک مثال در مورد border ها با هم می بینیم:
your text
div{
height: 30px;
border-bottom: 4px solid red;
background-color: lightgrey;
}
تا قسمت بعد

0 1868

telegram mosqdevelopers


دسته بندی ها

ios

پست های اخیر

banner

کاربردها و فرصت های شغلی زبان برنامه نویسی جاوا

زبان برنامه نویسی جاوا در ا...

ادامه مطلب


banner

ساخت جداول گوناگون در css

به نام خدا. در این قسمت میخوا...

ادامه مطلب


banner

کتابخوان های الکترونیکی برتر

به نام خدا ؛ تاحالا شده وقتت ت...

ادامه مطلب


banner

لاراول 6

انتظار ها به سررسید و سرانجام...

ادامه مطلب


banner

padding ها در css

به نام خدا در این قسمت قسط د...

ادامه مطلب


RSS RSS

نظرات ارزشمند خود را در مورد وبسایت با ما در میان بگذارید

© کلیه حقوق مادی و معنوی متعلق به تیم برنامه نویسی Mosquito Network می باشد