انجمن برنامه نویسان البرز

تبلیغات

استفاده از CSS Border یا همان حاشیه ها

استفاده از CSS Border یا همان حاشیه ها


با سلام خدمت کاربران عزیز امروز میخواهیم نحوه استفاده از CSS Border را به شما عزیزان آموزش بدهیم. Border ها در حقیقت حاشیه هایی هستند که دور تا دور المانهای ما قرار میگیرند . خصوصیت Border از سه بخش تسکیل شده است :

  • border-width
  • border-style
  • border-color

از خصوصیت border-width برای تعیین اندازه ی border استفاده میشود که میتواند مقادیر مختلف پیکسلی را در بر بگیرد برای مثال ۲px ، ۱۰px و …. .

از خصوصیت border-style برای تعیین نوع border استفاده میشود برای مثال اینکه border به صورت کامل یا خط چین و یا نقطه نقطه نمایش داده شود . ( گیج شدید ؟ نگران نباشید در مثالها به طور کامل این مورد بررسی میشود)

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

خوب این ۳ ویژگی به CSS Border اختصاص داده میشود.

به مثال زیر توجه کنید :


div {
	border-width: 3px;
	border-style: solid;
	border-color: red;
}
	

در این مثال ما برای تمام Div های موجود در صفحه حاشیه ای با عرض ۳px به صورت خط کامل و با رنگ قرمز قرار دادیم.
خصوصیات border-width و border-color خیلی پیچیده نیستند اما برای درک بهتر از خصوصیت border-style به تصویر زیر توجه کنید :

استایل حاشیه ها
borderstyles

خوب همانطور که در تصویر هم مشاهده میکنید اولین نوع خصوصیت border-style یعنی dashed حاشیه ای به صورت خط چین برای ما قرار میدهد ، خصوصیات بعدی به شرح زیر است :

  • dotted : نقطه چین
  • none : بدون border
  • groove : این حالت شبیه به یک کنده کاری یا ایجاد شکاف و تو رفتگی دور عنصر می باشد
  • double : دو border به عنوان حاشیه قرار میدهد
  • solid : خط کامل
  • inset : زمانی که از این حالت استفاده می کنیم عنصر شبیه به این دیده می شود که انگار فرورفتگی دارد.
  • outset : حالت متضاد حالت inset است و گویا عنصر حالت برآمدگی دارد.
  • ridge : حالت سه بعدی

نکته : در مورد خصوصیتهای border میتوان به هر سمت به صورت جداگانه خصوصیتی را اختصاص داد برای مثال :


div {
	border-left-style: dotted;
	border-right-style: solid;
	border-bottom-style: dashed;
	border-top-style: : double;
}
	

این قانون در مورد border-width و border-color هم صادق میباشد برای مثال :


div {
	border-left-color: red;
	border-right-color: blue;
	border-bottom-color: yellow;
	border-top-color: : green;
}
	

div {
	border-left-width: 2px;
	border-right-width: 5px;
	border-bottom-width: 7px;
	border-top-width: : 3px;
}
	

و اما اینکه میتوان تمام خصوصیات border را در یک خط به صورت اختصار به صورت زیر نوشت :


div {
	border: 3px solid red;
}
	

همانطور که مشاهده میکنید ابتدا border-width سپس border-style و در نهایت border-color به صورت تک خطی نوشته شده است.




کلمات کلیدی :

نظر بدهید

یک دیدگاه برای “استفاده از CSS Border یا همان حاشیه ها

  • احمد ایرانپور گفته
    8 ژوئن 17

    با درود
    خیلی جذاب و قشنگه .امیدوارم بقیه اش هم همینطور باشه