CSS3 واجهة المستخدم
CSS3 واجهة المستخدم
في CSS3، وزيادة عدد من الميزات الجديدة واجهة المستخدم لضبط حجم عنصر، حجم الإطار والحدود الخارجية.
في هذا الفصل، وسوف تتعلم خصائص واجهة المستخدم التالية:
- تغيير حجم
- مربع التحجيم
- الخطوط العريضة لموازنة
دعم المتصفح
الأرقام الواردة في الجدول تمثل أول متصفح لدعم رقم الإصدار للممتلكات.
مباشرة بعد -webkit- الرقمية، -ms- أو -moz- قبل في دعم البادئة السمة الأولى رقم إصدار المتصفح.
| 属性 | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 15.0 |
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
| outline-offset | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 9.5 |
CSS3 تغيير حجم (تغيير الحجم)
في CSS3، تغيير الخاصية تحديد ما إذا كان عنصر يجب على المستخدم لضبط الحجم.
العنصر div حجمها من قبل المستخدم. (في فايرفوكس 4+، والكروم، وسفاري،)
رمز المغلق هو على النحو التالي:
مربع CSS3 تغيير الحجم (صندوق تحجيم)
مربع تحجيم الملكية يسمح لك لتحديد محتويات بالضبط من منطقة معينة من التكيف.
أمثلة
أحكام اثنين جنبا الى جنب مع كتلة الحدود:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
محاولة »
CSS3 تعديل شكل (إزاحة الخطوط العريضة)
الخطوط العريضة لموازنة الملكية تعويض كفاف ورسم الشخصية وراء حافة الحدود.
هناك نوعان من كفاف مختلفة والإطار:
- كفاف لا تشغل مساحة
- قد يكون المخطط غير مستطيلة
هذه الدرجة خارج الحدود 15 لديه بكسل كفاف.
رمز المغلق هو على النحو التالي:
أمثلة
أحكام خارج بكسل كفاف على حافة الحدود 15:
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
محاولة »
الميزات الجديدة واجهة المستخدم
| ممتلكات | تفسير | CSS |
|---|---|---|
| مظهر | انها تسمح لك لجعل مظهر عنصر مثل عناصر واجهة المستخدم القياسية | 3 |
| مربع التحجيم | انها تسمح لك للتكيف مع المنطقة وتحديد بعض العناصر في بعض الطريق | 3 |
| رمز | تم تعيين المبدعين من عنصر إلى رمز قدرة مماثلة. | 3 |
| الملاحة إلى أسفل | تحدد مكان للتنقل عند استخدام مفاتيح الأسهم للتنقل إلى أسفل | 3 |
| الملاحة مؤشر | تحدد أن عنصر ترتيب الجدولة | 3 |
| الملاحة يسار | تحديد مكان استخدام مفاتيح الأسهم الملاحة اليسرى للتنقل | 3 |
| الملاحة اليمين | تحديد مكان استخدام اليمين السهم مفاتيح التنقل للتنقل | 3 |
| الملاحة المتابعة | تحدد مكان للتنقل عند استخدام مفاتيح الأسهم للتنقل لأعلى | 3 |
| الخطوط العريضة لموازنة | تعديل كفاف الخارجي ورسم على حافة الحدود | 3 |
| تغيير حجم | تحديد ما إذا كان يتم تغيير حجم عنصر من قبل المستخدم | 3 |