آموزش کار با حاشیه ها یا Borders در CSS

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

آموزش کار با حاشیه ها یا Borders در CSS

Free-Learn

کار با حاشیه ها یا Borders در CSS

حاشیه یا بوردر یا به انگلیسی Border به یک خط به دور لبه های یک عنصر گفته می شود، این ویژگی دارای چندین حالت می باشد که این حالت ها به شرح زیر می باشد :

  • border-style : شکل یا طرح خط دور لبه را مشخص میکند
  • border-width : اندازه خط دور لبه را مشخص میکند
  • border-color : رنگ خط دور لبه را مشخص میکند

بهتر است بدانید هر عنصر در CSS دارای ۴ جهت کلی می باشد ، این ۴ جهت میشه بالا – راست – پایین – چپ ، یعنی ما میتونیم برای هر یک از این جهات استایل تعریف کنیم.

یعنی میتونیم بفرض مثال برای لبه بالا یک نوع شکل و اندازه و رنگ مشخص کنیم و برای لبه پایین یک نوع دیگه، پس میخوام بگم که بدونید میشه برای هر ۴ جهت استایل تعریف کرد.

Free-Learn

آموزش ویژگی border-style در CSS

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

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

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

مثال : در مثال زیر از تمامی مقادیر بالا استفاده شده است.

امتحان کنید

Free-Learn

ویژگی border-width در CSS

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

مثال :

امتحان کنید

Free-Learn

ویژگی border-color در CSS

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

مثال :

امتحان کنید

Free-Learn

خلاصه نویسی ویژگی های CSS

یه چیزی در CSS داریم به اسم خلاصه نویسی، یعنی اینکه ما یک یا چندین ویژگی رو بصورت خلاصه مینویسیم جوری که هم از نظر خوانایی بهتره هم از نظر کمتر شدن حجم فایل CSS مون.

شکل کلی بصورت زیر می باشد : (ویژگی border-style ضروری می باشد و حتما باید نوشته شود)

 

مثلا همین ۳ تا ویژگی که الان دیدید رو میتونیم تو یه خط بصورت خلاصه بنویسیم، لطفا به مثال زیر توجه نمایید :

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب