CSS استعمال کاربر

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;
}

亲自试一试

سی ایس ایس وادی توجیہ

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 规定元素是否可由用户调整大小。