حاشیه CSS

حاشیه CSS

با استفاده از مجموعه خواص border در CSS ، می توان برای بيشتر عنصرهای HTML خطوط حاشيه تعيين کرد . خطوط حاشيه خطوطي هستند ، که به دور عنصر مورد نظر کشيده می شوند .خطوط حاشيه به دور يک عنصر در چهار جهت بالا ، پايين ، راست و چپ کشيده می شوند . در CSS می توان هر يک از اين خواص را به تنهايي تعريف کرده و برای هر کدام خواص جداگانه ای مثل رنگ ، ضخامت و … تعيين کرد .

حاشیه CSS حاشیه CSS حاشیه CSS border style

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

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

استایل حاشیه

خصوصیات استایل حاشیه ، نوع حاشیه برای نمایش را مشخص می کند.هیچ یک از خصوصیات حاشیه تا زمانی که خاصیت border-style تنظیم نشود ، تاثیری نخواهند داشت.

 

حاشیه CSS  حاشیه CSS حاشیه CSS Capture 9

نقطه چین (dotted) : حاشیه نقطه چین

خط چین (dashed) : حاشیه خط چین

ساده (solid) : حاشیه تک خط ساده

دو خطی (double) : حاشیه دو خطی. عرض بین دو حاشیه همان مقدار border-width است

فرو رفته (groove) : حاشیه فرو رفته سه بعدی. تأثیر بستگی به مقدار border-color دارد

برآمده (ridge) : حاشیه برآمده سه بعدی. تأثیر بستگی به مقدار border-color دارد

ریزش کرده (inset) : حاشیه ریزش کرده سه بعدی. تأثیر بستگی به مقدار border-color دارد

ابتدا: حاشیه برجسته سه بعدی. تأثیر بستگی به مقدار border-color دارد

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

حاشیه CSS  حاشیه CSS حاشیه CSS Capture 8تعیین عرض حاشیه

خاصیت border-width برای تعیین عرض حاشیه استفاده می شود. عرض با پیکسل تنظیم می شود. یا با استفاده از یکی از سه مقادیر از پیش تعریف شده : نازک، متوسط و یا ضخیم توجه: اگر خاصیت عرض “حاشیه” را به تنهایی استفاده کنید کار نمی کند. ابتدا از خاصیت border-style برای تعیین حاشیه ها استفاده کنید.

حاشیه CSS حاشیه CSS حاشیه CSS Capture 10

رنگ حاشیه

خاصیت border-color برای تنظیم رنگ حاشیه استفاده می شود. رنگ می تواند توسط موارد زیر مشخص شود . شما همچنین می توانید رنگ حاشیه را به “transparent” تنظیم کنید.

  • name – نام یک رنگ را مشخص می کند ، مانند “red”
  • RGB – مقدار RGB را مشخص می کند ، مانند “rgb (255،۰،۰)”
  • Hex – مقدار hex را مش خص می کند ، مانند “# FF0000”

 

اگر “border-color” به تنهایی استفاده شود کار نمی کند. ابتدا از خاصیت “border-style” برای تعیین حاشیه ها استفاده کنید.

حاشیه – خاصیت مختصر نویسی

همانطور که نمونه های فوق را مشاهده می کنید، هنگامی که با حاشیهها مواجه می شوید ، خصوصیات بسیاری برای در نظر گرفتن وجود دارد.
برای کوتاه کردن کد، مشخص کردن خصوصیات منفرد حاشیه در یک خاصیت نیز ممکن است. این یک خاصیت مختصر نویسی نامیده می شود.
خاصیت border مختصرنویسی برای خصوصیات منفرد حاشیه زیر است:

  • border-width
  • border-style (لازم است)
  • border-color

 

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

خاصیت توضیحات
border تنظیم تمام خصوصیات حاشیه در یک بیانیه
border-bottom تنظیم تمام خصوصیات حاشیه پایین در یک بیانیه
border-bottom-color تنظیم رنگ حاشیه پایین
border-bottom-style تنظیم استایل حاشیه پایین
border-bottom-width تنظیم عرض حاشیه پایین
border-color تنظیم رنگ هر چهار حاشیه
border-left تنظیم تمام خصوصیات حاشیه چپ در یک بیانیه
border-left-color تنظیم رنگ حاشیه سمت چپ
border-left-style تنظیم استایل حاشیه سمت چپ
border-left-width تنظیم عرض حاشیه سمت چپ
border-right تنظیم تمام خصوصیات حاشیه راست در یک بیانیه
border-right-color تنظیم رنگ حاشیه راست
border-right-style تنظیم استایل حاشیه سمت راست
border-right-width تنظیم عرض حاشیه راست
border-style تنظیم استایل هر چهار حاشیه
border-top تنظیم تمام خصوصیات حاشیه بالا در یک بیانیه
border-top-color تنظیم رنگ حاشیه بالا
border-top-style تنظیم استایل حاشیه بالا
border-top-width تنظیم عرض حاشیه بالا
border-width تنظیم عرض هر چهار حاشیه

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید