خانه / آموزش CSS / بخش ششم- آموزش حاشیه ها (Borders)در CSS
پشتیبان وب سایت وردپرس
حاشیه ها در سی اس اس"

تاریخ بروزرسانی: ۱۴ بهمن ۱۳۹۷ تعداد بازدید : 24 بازدید بدون دیدگاه

بخش ششم- آموزش حاشیه ها (Borders)در CSS

قدم قبلی >< قدم بعدی
 حاشیه ها (Borders)در CSS
آموزش حاشیه ها (Borders)در CSS

خصوصیات حاشیه ها در CSS

در CSS شما می توانید بوسیله خصوصیات حاشیه ها (Borders)، سبک (style)، عرض (width) و رنگ (color) حاشیه هر عنصر را مشخص کنید.

خصوصیات حاشیه ها

 سبک حاشیه ها (Border Style)

ویژگی حاشیه ی سبک نوع حاشیه را برای نمایش مشخص می کند.

مقادیر زیر برای حاشیه مجاز می باشند:

نقطه نقطه(dotted) – یک حاشیه نقطه خالص را تعریف می کند.
قطعه قطعه شده (dashed)– حاشیه نقاطی را تعریف می کند.
محکم(solid)– یک حاشیه محکم را تعریف می کند.
دوگانه(double)– حاشیه دوگانه را تعریف می کند.
شیار(groove)– حاشیه سه بعدی را مشخص می کند. اثر بستگی به مقدار حاشیه رنگ دارد.
برآمدگی(ridge)– حاشیه سه بعدی را مشخص می کند. اثر بستگی به مقدار حاشیه رنگ دارد.
وصله(inset)– یک حاشیه سه بعدی را تعریف می کند. اثر بستگی به مقدار حاشیه رنگ دارد.
آغاز (outset)– تعریف یک حاشیه بی پایان ۳D است. اثر بستگی به مقدار حاشیه رنگ دارد.
هیچ کدام (none)– هیچ حاشیهی را تعریف نمی کند.
پنهان (hidden)– حاشیه پنهان را تعریف می کند.

ویژگی های سبک حاشیه ها می تواند از یک تا چهار ارزش (برای حاشیه بالا، حاشیه راست، حاشیه پایین، و حاشیه چپ) داشته باشد، در این خصوص به نمونه آخر توجه کنید.

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

می توانید در تصویر زیر نمونه هر کدام از مقادیر مجاز برای حاشیه را ببینید.

مقادیر مجاز برای حاشیه

توجه: هیچ یک از ویژگی‌های دیگر حاشیه در CSS که در زیر توضیح داده شده‌است هیچ تاثیری نخواهد داشت مگر اینکه خصیصه حاشیه ی سبک تنظیم شود !

عرض حاشیه (Border Width)

ویژگی border-width عرض چهار طرف حاشیه ها را مشخص می کند.

عرض را می توان به عنوان یک اندازه مشخص کرد (در مقادیر:   px، pt، cm، em) یا با استفاده از یکی از سه مقدار از پیش تعیین شده: نازک، متوسط ​​یا ضخیم تنظیم کرد.

ویژگی عرض حاشیه می تواند از یک تا چهار مقدار (برای حاشیه بالا، حاشیه راست، حاشیه پایین و حاشیه چپ) داشته باشد.

مثال:

با اجرا کردن کد بالا تصویر زیر را خواهید دید:

عرض چهار طرف حاشیه ها

رنگ حاشیه ها (Border Color)

ویژگی رنگ حاشیه برای تنظیم رنگ چهار طرف حاشیه استفاده می شود.

رنگ را می توان توسط روش های زیر تعیین کرد:

  • نام رنگ – مشخص کردن یک نام رنگ ، مانند ” قرمز “
  • شانزده‌شانزدهی – مقدار مبنای شانزده‌شانزدهی را مشخص کند ، مثل ” # ff۰۰۰۰ “
  • یک مقدار RGB را مشخص کنید ، مانند ” rgb ( ۲۵۵ ، ۰ ، ۰ ) “
  • شفاف

خصوصیات رنگ حاشیه می تواند از یک تا چهار ارزش (برای حاشیه بالا، حاشیه راست، حاشیه پایین و حاشیه چپ) داشته باشد.

اگر رنگ حاشیه تنظیم نشده باشد، رنگ عنصر را ارث می برد.

مثال:

با اجرا کردن کد بالا تصویر زیر را خواهید دید:

بیشتر بدانید:  بخش بیستم- آموزش ویژگی position در css

ویژگی رنگ حاشیه

 

حاشیه – کناره های تکی

از توجه به مثال های بالا مشخص می شود که ممکن است حاشیه دیگری برای هر کناره مشخص شود.

در CSS، برای مشخص کردن هر یک از کناره های حاشیه ها (بالا، راست، پایین و سمت چپ) نیز ویژگی هایی وجود دارد:

مثال:

با اجرا کردن کد بالا تصویر زیر را خواهید دید:

کناره های حاشیه

با اجرا کردن کد زیر نتیجه ی مشابهی نسبت به نمونه بالا بدست می آورید:

مثال:

در اینجا دستورالعملی برای این که چگونه کار کنید، وجود دارد:

اگر خصوصیات حاشیه دارای چهار مقدار است:

 سبک حاشیه: dotted solid double dashed

  • حاشیه بالا dotted است
  • حاشیه راست solid است
  • حاشیه پایین double است
  • حاشیه چپ dashed است

اگر خصوصیات حاشیه دارای سه مقدار باشد:

سبک حاشیه: dotted solid double؛

  • حاشیه بالا dotted است
  • حاشیه های راست و چپ solid هستند
  • حاشیه پایین double است

اگر خصوصیات حاشیه دارای دو مقدار باشد:

سبک حاشیه: dotted solid 

  • حاشیه های بالا و پایین dotted هستند
  • حاشیه های راست و چپ solid هستند

اگر خصوصیات حاشیه یک مقدار دارد:

سبک حاشیهdotted

  • تمام چهار حاشیه dotted هستند

خصوصیت سبک حاشیه در مثال های بالا استفاده شده. البته، آن هم با عرض حاشیه و رنگ حاشیه کار می کند.

حاشیه – ویژگی های کوتاه

همانطور که می توانید از مثال های بالا مشاهده کنید، در هنگام کار با حاشیه ها، ویژگی های زیادی وجود دارد.

برای کوتاه کردن کد، همچنین می توان تمام خصوصیات حاشیه های تکی را در یک ویژگی مشخص کرد.

خصیصه حاشیه یک ویژگی مختصر و کوتاه شده برای ویژگی های حاشیه تکی است:

  • عرض حاشیه
  • سبک حاشیه (مورد نیاز)
  • رنگ حاشیه

مثال:

با اجرا کردن کد بالا تصویر زیر را خواهید دید:

حاشیه های تکیشما همچنین می توانید تمام خصوصیات حاشیه تکی را فقط برای یک طرف مشخص کنید:

حاشیه چپ

با اجرا کردن کد بالا تصویر زیر را خواهید دید:

حاشیه چپ

 

حاشیه پایین

با اجرا کردن کد بالا تصویر زیر را خواهید دید:

حاشیه پایین

حاشیه های گرد

ویژگی border-radius برای اضافه کردن حاشیه های گرد به یک عنصر استفاده می شود:

مثال:

با اجرا کردن کد بالا تصویر زیر را خواهید دید:

 

توجه: خصوصیات border-radius در IE8 و نسخه های قبلی پشتیبانی نمی شود.

اگر رنگ حاشیه ای تنظیم نشده باشد، رنگ عنصر را ارث می برد.

گام قبلی >< گام بعدی

لینک کوتاه این مطلب: https://tiktheme.com/?p=15051


کانال تلگرام تیک تم

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *