CSS ɗaɗi

CSS ɗaɗi

في هذا الفصل، ستتعلم عن الخاصيات التالية لـ CSS واجهة المستخدم:

  • resize
  • outline-offset

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

属性 Chrome IE Firefox Safari Opera
resize 4.0 لا يدعم 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS تعديل الحجم

resize تحدد الخاصية ما إذا كان العنصر يجب (أو كيف) تعديله حجمه من قبل المستخدم.

يمكن للمستخدم تعديل حجم هذا العنصر div!

تعديل الحجم: اضغط وأسحب الزاوية السفلية اليمنى لهذا العنصر div.

ملاحظة:Internet Explorer لا يدعم خاصية resize.

في المثال التالي، يسمح للمستخدم فقط بتعديل العرض للعنصر <div>:

مثال

div {
  resize: horizontal;
  overflow: auto;
}

亲自试一试

في المثال التالي، يسمح للمستخدم فقط بتعديل الارتفاع للعنصر <div>:

مثال

div {
  resize: vertical;
  overflow: auto;
}

亲自试一试

في المثال التالي، يمكن للمستخدم تعديل الارتفاع والعرض للعنصر <div>:

مثال

div {
  resize: both;
  overflow: auto;
}

亲自试一试

في العديد من المتصفحات، <textarea> قياسيًا قابلة للتوسع. هنا، نستخدم خاصية resize لتعطيل هذا التوسع:

مثال

textarea {
  resize: none;
}

亲自试一试

Kwacce ta CSS Outline Offset

outline-offset الخاصية تضيف مسافة بين الهيكل والحدود الخارجية للعنصر.

هذا div يحتوي على هيكل خارجي بعرض 15px عند حواف الحدود.

ملاحظة:الحدود والهيكل مختلفان! مختلفة عن الحدود، خط الهيكل يتم رسمه خارج حدود العنصر، وقد يتداخل مع محتوى آخر. بالإضافة إلى ذلك، الهيكل ليس جزءًا من حجم العنصر: عرض العنصر وارتفاعه لا يتأثران بسمك خط الهيكل.

هذا المثال يستخدم خاصية 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;
}

亲自试一试

CSS 用户界面属性

下表列出了所有用户界面属性：

属性 描述
outline-offset 在轮廓和元素的边框边缘之间添加空间。
resize 规定元素是否可由用户调整大小。