این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با حاشیه ها یا Borders در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با حاشیه ها یا Borders در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با حاشیه ها یا Borders در CSS
حاشیه یا بوردر یا به انگلیسی Border به یک خط به دور لبه های یک تگ گفته می شود، این ویژگی دارای چندین حالت می باشد که این حالت ها به شرح زیر می باشد :
- border-style : شکل یا طرح خط دور لبه
- border-width : اندازه خط دور لبه
- border-color : رنگ خط دور لبه
اینو دیگه همیشه بدونید، در زبان CSS تعدادی از تگ ها هستن که دارای ۴ جهت/ طرف می باشند، حال ویژگی Border هم همینطوره و دارای ۴ طرف می باشد :
- Border-Top – جهت بالا
- Border-Right – جهت راست
- Border-Bottom – جهت پایین
- Border-Left – جهت چپ
و این یعنی ما میتونیم برای هر یک از جهت ها استایل تعریف کنیم، مثلا برای لبه بالا یک نوع شکل و اندازه و رنگ مشخص کنیم و برای لبه پایین یک نوع دیگه، پس میخوام بگم که بدونید میشه برای هر ۴ جهت بصورت مجزا استایل تعریف کرد.
Free-Learn
ویژگی border-style
با استفاده از این ویژگی میتوان شکل یا استایل خط دور لبه های یک عنصر را مشخص کرد، این ویژگی دارای مقدارهای مختلفی می باشد که این مقادیر بصورت زیر می باشند :
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
مثال شماره ۱ : در مثال زیر از تمامی مقادیر بالا استفاده شده است
|
1 2 3 4 5 6 7 8 9 10 |
.dotted {border-style: dotted;} .dashed {border-style: dashed;} .solid {border-style: solid;} .double {border-style: double;} .groove {border-style: groove;} .ridge {border-style: ridge;} .inset {border-style: inset;} .outset {border-style: outset;} .none {border-style: none;} .hidden {border-style: hidden;} |
Free-Learn
ویژگی border-width
با استفاده از این ویژگی نیز میتوان اندازه خط دور لبه ی عنصرمان را مشخص کرد.
مثال شماره ۱ : مشخص کردن اندازه Border
|
1 2 3 4 |
.myBorder1{ border-style:solid; border-width:1px; } |
Free-Learn
ویژگی border-color
همونطور که از اسم این ویژگی نیز مشخصه با استفاده از آن میتوان رنگ خط دور لبه عنصر را مشخص کرد.
مثال شماره ۱ : مشخص کردن رنگ Border
|
1 2 3 4 5 |
.myBorder1{ border-style:solid; border-width:3px; border-color:blue; } |
Free-Learn
خلاصه نویسی ویژگی Border
اینم دیگه از همین الان بدونید، یه چیزی در CSS داریم به اسم خلاصه نویسی، یعنی اینکه ما میتونیم چندین ویژگی که بصورت مجزا هستن رو بصورت خلاصه در یک خط کد بنویسیم.
شکل کلی برای خلاصه نویسی ویژگی Border بصورت زیر می باشد :
- border-style ضروری می باشد و حتما باید نوشته شود
|
1 |
border: border-width border-style border-color; |
مثال : خلاصه نویسی ویژگی Border در CSS
|
1 2 3 |
.myBorder1{ border:3px solid red; } |
Free-Learn
استایل نوشتن برای یک جهت خاص
همونطور که گفتم ما میتونیم برای هر یک از جهت ها بصورت مجزا استایل بنویسیم.
مثال : استایل نوشتن فقط برای جهت سمت راست
|
1 2 3 |
.myBorder1{ border-right:4px solid #06935f; } |
