🎁 تخفیفات عیدانه دوره های آموزشی آتریا را از دست ندهید🎁

CSS Borders - آموزش طراحی سایت

در این بخش از آموزش طراحی سایت به آموزش مشخصه border (حاشیه) در CSS می پردازیم.

CSS Borders - آموزش طراحی سایت

در این بخش از آموزش طراحی سایت به آموزش حاشیه ها در CSS می پردازیم. در طراحی صفحات وب یک سری زمان ها هست که نیاز داریم تا برای عناصر خود در صفحه HTML حاشیه ای را در نظر بگیریم. این کار را با استفاده از پراپرتی border به راحتی می توانیم انجام دهیم.

مشخصه Border در CSS به شما اجازه می دهد که استایل، عرض، طول و رنگ "حاشیه" عناصر HTML را تنظیم کنید. در زیر نمونه ای از این استایل دهی ها را می بینید.

آموزش طراحی سایت


 CSS Border Style (تنظیم استایل حاشیه)

با مشخصه border-style می توانید شکل و سبک حاشیه خود را انتخاب کنید.

  • dotted یک حاشیه نقطه چین را تعریف می کند.
  • dashed یک حاشیه با استفاده از - را تعریف می کند.
  • solid یک حاشیه با استفاده از خط ساده را تعریف می کند.
  • double یک حاشیه ی دوتایی را تعریف می کند.
  • groove یک حاشیه با سایه سه بعدی به شکل groove تعریف می کند.
  • ridge یک حاشیه با سایه سه بعدی به شکل ridge تعریف می کند.
  • inset یک حاشیه با سایه سه بعدی به شکل inset تعریف می کند.
  • outse یک حاشیه با سایه سه بعدی به شکل outse تعریف می کند.
  • none هیچ حاشیه ای را تعریف نمی کند.
  • hidden یک حاشیه مخفی تعریف می کند.

مشخصه border-style می تواند از یک تا چهار مقدار داشته باشد (حاشیه بالا، راست، چپ و پایین). به عبارتی شما می توانید برای هر سمت عنصر HTML یک حاشیه با شکل متفاوت داشته باشید.

مثال:

آموزش طراحی سایت


نتیجه مثال بالا به شکل زیر است:

آموزش طراحی سایت


CSS Border Width (تنظیم عرض حاشیه)

با استفاده از مشخصه border-widthمی توانید عرض حاشیه عناصر HTML را تعیین کنید.

عرض می تواند با استفاده از واحدهای مطلق (px, pt, cm, em) یا با استفاده از مقادیر thin, medium, thick تعریف شود. مثال زیر حالت های مختلف را نشان می دهد.

آموزش CSS


خروجی مثال بالا یه شکل زیر است:

 آموزش border در css


عرض در یک طرف بخصوص

مشخصه border-width می تواند یک تا چهار مقدار داشته باشد، حاشیه بالا، راست، پایین و چپ:

آموزش CSS


آموزش طراحی سایت


CSS Border Color (تنظیم رنگ حاشیه)

مشخصه border-color برای تنظیم رنگ حاشیه عناصر HTML به کار می رود. شما می توانید رنگ حاشیه عناصر را به روش های مختلف اعمال کنید.

  • با استفاده از نام رنگ مانند "Blue"
  • با استفاده از یک مقدار HEX – مانند "ff0000 #"
  • با استفاده از یک مقدار RGB – مانند "rgb(255,0,0)"
  • با استفاده از یک مقدار HSL – مانند "hsl(0, 100%, 50%)"
  • Transparent: رنگ پس زمینه عنصر والد

نکته: اگر رنگ حاشیه تنظیم نشده باشد، حاشیه رنگ عنصر HTML  را به خود می گیرد. در زیر مثال های متفاوتی از رنگ دهی حاشیه عنصر HTML را می بینید.

آموزش CSS


آموزش طراحی سایت


رنگ برای یک حاشیه به خصوص

مشخصه border-color می تواند یک تا چهار مقدار را داشته باشد، حاشیه بالا، راست، پایین و چپ. به عبارتی می توانید برای هر جهت یک عنصر HTML رنگ متفاوتی را درنظر بگیرید.

آموزش border در css


آموزش طراحی سایت


Rounded Borders (حاشیه گرد)

مشخصه border-radius برای اضافه کردن حاشیه گرد به یک عنصر HTML به کار می رود. مثال های زیر این مفهوم را به خوبی نشان می دهند.

آموزش CSS


نحوه استفاده از مشخصه border-radius

آموزش طراحی سایت

آموزش طراحی سایت آموزش CSS آموزش border در css دوره آموزش طراحی سایت آموزش حاشیه در CSS

مقالات این دسته بندی