تبلیغات متنی و بنر

آموزش CSS 3 > رابط کاربری در CSS 3 > خاصیت appearence

خاصیت appearence :

خاصیت appearence به شما این امکان را می دهد که عنصر HTML مورد نظرتان را به شکل یک المنت رابط کاربری دیگر ( مثل یک دکمه فرمان ) نمایش دهید .
برای مثال یک پاراگراف را به صورت دکمه فرمان بر روی صفحه نمایش دهید . یا کاری کنید یک عکس همانند یک آیکون نشان داده شود .
شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax appearance : normal | icon | window | button | menu | field ;

مثال : appearance : button ;

در جدول زیر به تشریح هر یک از حالت های ممکن برای خاصیت appearance می پردازیم .

syntax توضیح هر یک از موارد
توضیح حالت
مقدار  این خاصیت تعیین کننده نحوه نمایش عنصر مورد نظر است .
استفاده از این پارامتر اجباری است .
  • normal : در این حالت عنصر به حالت عادی نمایش داده می شود .
  • icon : باعث می شود تا عنصر به صورت یک عکس کوچک ( آیکون ) نمایش داده شود .
  • window :این حالت عنصر را به صورت یک پنجره یا فریم نمایش می دهد .
  • button : این حالت عنصر را به صورت یک دکمه فرمان نمایش می دهد .
  • menu : این حالت عنصر را به صورت یک منو نمایش می دهد .
  • field : این حالت عنصر را به صورت یک فیلد نمایش می دهد .
 normal
icon
window
button
menu
field

پشتیانی در مرورگر های مختلف :

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

کد لازم برای پشتیانی نوع مرورگر
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت  moz-appearance- بنویسید .
مرورگر اپرا باز این خاصیت پشتیانی نمی کند .
مرورگر اکسپلورر از این خاصیت پشتیانی نمی کند .
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت webkit-appearance- بنویسید .

مثال عملی :

در مثال های زیر به تشریح نحوه استفاده از این خاصیت پرداخته ایم .

مثال  1 - نمایش یک پاراگراف به صورت دکمه فرمان
<!DOCTYPE html>
<html>
   <head>
        <style>
                div
                      {
                           appearance: button;
                          -moz-appearance: button; /* Firefox */
                          -webkit-appearance: button; /* Safari and Chrome */
                       }
        </style>
    </head>
<body>
    <div> نمایش همانند یک دکمه </div>
</body>
</html> 		کد
نمایش همانند یک دکمه
 خروجی

icon  مثال  2 - نمایش یک عکس به صورت
<!DOCTYPE html>
<html>
   <head>
        <style>
                img
                      {
                           appearance: icon;
                          -moz-appearance: icon; /* Firefox */
                          -webkit-appearance: icon; /* Safari and Chrome */
                       }
        </style>
    </head>
<body>
    <img    src="../Pic/ADS/css.png" />
</body>
</html> 		کد
خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟