٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

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

رابط کاربری CSS در این فصل شما با خصوصیات رابط کاربری CSS زیر آشنا خواهید شد: resize outline-offset پشتیبانی مرورگر اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل از ویژگی پشتیبانی می کند.…

محمد یوسفی

13 جولای 2021

رابط کاربری CSS

در این فصل شما با خصوصیات رابط کاربری CSS زیر آشنا خواهید شد:

  • resize
  • outline-offset

پشتیبانی مرورگر

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


تغییر اندازه CSS

resizeمشخص ملک اگر (و چگونه) یک عنصر باید قابل اندازه بندی مجدد توسط کاربر باشد.

مثال زیر اجازه می دهد تا کاربر فقط عرض عنصر <div> را تغییر اندازه دهد:

مثال

div {
  resize: horizontal;
  overflow: auto;
}

مثال زیر به کاربر اجازه می دهد فقط ارتفاع عنصر <div> را تغییر اندازه دهد:

مثال

div {
  resize: vertical;
  overflow: auto;
}

مثال زیر به کاربر اجازه می دهد ارتفاع و عرض عنصر <div> را تغییر اندازه دهد:

مثال

div {
  resize: both;
  overflow: auto;
}

در بسیاری از مرورگرها ، <textarea> به طور پیش فرض قابل تغییر اندازه است. در اینجا ، از ویژگی تغییر اندازه برای غیرفعال کردن تغییر سایز استفاده کرده ایم:

مثال

textarea {
  resize: none;
}

CSS Outline Offset

outline-offsetاموال اضافه می کند فضای بین یک طرح کلی و لبه یا مرز یک عنصر.

توجه: طرح کلی با مرزها متفاوت است! بر خلاف حاشیه ، رئوس مطالب خارج از مرز عنصر ترسیم می شود و ممکن است با سایر مطالب هم پوشانی داشته باشد. همچنین ، طرح کلی بخشی از ابعاد عنصر نیست. عرض و ارتفاع کل عنصر تحت تأثیر عرض رئوس مطالب قرار نمی گیرد.

مثال زیر از outline-offsetویژگی برای افزودن فضای بین مرز و طرح استفاده می کند:

مثال

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها