در این بخش از آموزش طراحی سایت به آموزش حاشیه ها در 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 تعریف شود. مثال زیر حالت های مختلف را نشان می دهد.
خروجی مثال بالا یه شکل زیر است:
عرض در یک طرف بخصوص
مشخصه border-width می تواند یک تا چهار مقدار داشته باشد، حاشیه بالا، راست، پایین و چپ:
CSS Border Color (تنظیم رنگ حاشیه)
مشخصه border-color برای تنظیم رنگ حاشیه عناصر HTML به کار می رود. شما می توانید رنگ حاشیه عناصر را به روش های مختلف اعمال کنید.
- با استفاده از نام رنگ مانند "Blue"
- با استفاده از یک مقدار HEX – مانند "ff0000 #"
- با استفاده از یک مقدار RGB – مانند "rgb(255,0,0)"
- با استفاده از یک مقدار HSL – مانند "hsl(0, 100%, 50%)"
- Transparent: رنگ پس زمینه عنصر والد
نکته: اگر رنگ حاشیه تنظیم نشده باشد، حاشیه رنگ عنصر HTML را به خود می گیرد. در زیر مثال های متفاوتی از رنگ دهی حاشیه عنصر HTML را می بینید.
رنگ برای یک حاشیه به خصوص
مشخصه border-color می تواند یک تا چهار مقدار را داشته باشد، حاشیه بالا، راست، پایین و چپ. به عبارتی می توانید برای هر جهت یک عنصر HTML رنگ متفاوتی را درنظر بگیرید.
Rounded Borders (حاشیه گرد)
مشخصه border-radius برای اضافه کردن حاشیه گرد به یک عنصر HTML به کار می رود. مثال های زیر این مفهوم را به خوبی نشان می دهند.
نحوه استفاده از مشخصه border-radius
