مرجع CSS
خصوصیت appearance
مثال
نمایش عنصر <div> مانند یک دکمه:
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}
پشتیبانی مرورگرها
هیچ کدام از مرورگرهای اصلی خصوصیت appearance را پشتیبانی نمی کنند.
مرورگر Firefox به پیشوند -moz- نیاز دارد.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
تعریف و کاربرد
با استفاده از خصوصیت appearance، می توانید نحوه نمایش عنصر را شبیه دیگر عناصر قرار دهید.
| مقدار پیشفرض | normal |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.appearance="button" |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| normal | عنصر را بصورت عادی نمایش می دهد. |
| icon | عنصر را مانند یک تصویر کوچک، نشان می دهد. |
| window | عنصر را مانند یک viewport نمایش می دهد. |
| button | عنصر را مانند یک دکمه نمایش می دهد. |
| menu | عنصر را مانند یک منو نمایش می دهد. (گزینه هایی را برای انتخاب کاربر تنظیم می کند) |
| field | عنصر را مانند یک فیلد ورودی نمایش می دهد. |
خصوصیت box-sizing
مثال
چهار <div> با اندازه یکسان و خروجی های متفاوت:
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
پشتیبانی مرورگرها
مرورگرهای Internet Explorer، Opera، Chrome و Safari، خصوصیت box-sizing را پشتیبانی می کنند.
مرورگر Firefox از خاصیت جایگزین moz-box-sizing- پشتیبانی می کند.
تعریف و کاربرد
با استفاده از خصوصیت box_sizing می توانید عناصر را در یک ناحیه fit کنید.
در واقع با استفاده از خصوصیت های Width و Height تنها اندازه محتوا (Content) تعیین می شود و برای محاسبه اندازه واقعی Box، اندازه (Padding و Border و Margin) نیز باید به این اندازه اضافه شوند.
برای مثال، اگر بخواهید دو box که دارای حاشیه هستند کنار هم قرار گیرند، می توانید خاصیت box-sizing را "border-box" تنظیم کنید. این کار مرورگر را وادار می کند، تا box را با طول مشخص شده render کند و border , padding را داخل box قرار می دهد.
| مقدار پیشفرض | content-box |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.boxSizing="border-box" |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| content-box | اندازه عنصر فقط شامل Content می شود و Padding و Border و Margin محاسبه نمی شود. (مقدار پیشفرض) |
| border-box | اندازه عنصر شامل Content و Padding و Border می شود اما Margin محاسبه نمی شود. (این مدل در IE8 و نسخه های قبلی آن اعمال می شود) |
| inherit |
تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت nav-down
مثال
مشخص کردن اینکه عنصر بعدی هنگام کلیک روی دکمه مکان نمای پایین چه عنصری است:
{
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}
button#b2
{
top:40%;left:50%;
nav-index:2;
nav-right:#b3;nav-left:#b1;
nav-down:#b3;nav-up:#b1;
}
button#b3
{
top:70%;left:25%;
nav-index:3;
nav-right:#b4;nav-left:#b2;
nav-down:#b4;nav-up:#b2;
}
button#b4
{
top:40%;left:0%;
nav-index:4;
nav-right:#b1;nav-left:#b3;
nav-down:#b1;nav-up:#b3;
}
پشتیبانی مرورگرها
در حال حاضر خصوصیت nav-down تنها توسط مرورگر Opera پشتیبانی می شود.
تعریف و کاربرد
با استفاده از خصوصیت nav-down می توان مشخص کرد که هنگام فشردن کلید مکان نمای پایین، کدام عنصر انتخاب شود.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.navDown="#div2" |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| auto |
مرورگر مشخص می کند که عنصر بعدی چه عنصری باشد. |
| id | شناسه (id) عنصر بعدی را مشخص می کند. |
| target-name |
target frameی که به عنوان عنصر بعدی شناخته می شود را مشخص می کند. |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت nav-index
مثال
مشخص کردن اینکه هنگام کلیک روی دکمه های مکان نما، عنصر بعدی چه عنصری است:
{
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}
button#b2
{
top:40%;left:50%;
nav-index:2;
nav-right:#b3;nav-left:#b1;
nav-down:#b3;nav-up:#b1;
}
button#b3
{
top:70%;left:25%;
nav-index:3;
nav-right:#b4;nav-left:#b2;
nav-down:#b4;nav-up:#b2;
}
button#b4
{
top:40%;left:0%;
nav-index:4;
nav-right:#b1;nav-left:#b3;
nav-down:#b1;nav-up:#b3;
}
پشتیبانی مرورگرها
در حال حاضر خصوصیت nav-down تنها توسط مرورگر Opera پشتیبانی می شود.
تعریف و کاربرد
با استفاده از خصوصیت nav-index می توان ترتیب انتخاب عنصر (tabbing) را مشخص کرد.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.navIndex=2 |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| auto | ترتیب انتخاب عناصر توسط مرورگر انجام شود. |
| number |
ترتیب انتخاب عنصر با فشردن دکمه تب(tabbing) را مشخص می کند. |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت nav-left
مثال
مشخص کردن اینکه هنگام کلیک روی دکمه های مکان نما، عنصر بعدی چه عنصری است:
{
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}
button#b2
{
top:40%;left:50%;
nav-index:2;
nav-right:#b3;nav-left:#b1;
nav-down:#b3;nav-up:#b1;
}
button#b3
{
top:70%;left:25%;
nav-index:3;
nav-right:#b4;nav-left:#b2;
nav-down:#b4;nav-up:#b2;
}
button#b4
{
top:40%;left:0%;
nav-index:4;
nav-right:#b1;nav-left:#b3;
nav-down:#b1;nav-up:#b3;
}
پشتیبانی مرورگرها
در حال حاضر خصوصیت nav-left تنها توسط مرورگر Opera پشتیبانی می شود.
تعریف و کاربرد
با استفاده از خصوصیت nav-left می توان مشخص کرد که هنگام فشردن کلید مکان نمای پایین، کدام عنصر انتخاب شود.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.navLeft="#div2" |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| auto |
مرورگر مشخص می کند که عنصر بعدی چه عنصری باشد. |
| id |
شناسه (id) عنصر بعدی را مشخص می کند. |
| target-name |
target frameی که به عنوان عنصر بعدی شناخته می شود را مشخص می کند. |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت nav-right
مثال
مشخص کردن اینکه عنصر بعدی هنگام کلیک روی دکمه مکان نمای پایین چه عنصری است:
{
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}
button#b2
{
top:40%;left:50%;
nav-index:2;
nav-right:#b3;nav-left:#b1;
nav-down:#b3;nav-up:#b1;
}
button#b3
{
top:70%;left:25%;
nav-index:3;
nav-right:#b4;nav-left:#b2;
nav-down:#b4;nav-up:#b2;
}
button#b4
{
top:40%;left:0%;
nav-index:4;
nav-right:#b1;nav-left:#b3;
nav-down:#b1;nav-up:#b3;
}
پشتیبانی مرورگرها
در حال حاضر خصوصیت nav-right تنها توسط مرورگر Opera پشتیبانی می شود.
تعریف و کاربرد
با استفاده از خصوصیت nav-right می توان مشخص کرد که هنگام فشردن کلید مکان نمای راست، کدام عنصر انتخاب شود.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.navRight="#div2" |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| auto |
مرورگر مشخص می کند که عنصر بعدی چه عنصری باشد. |
| id |
شناسه (id) عنصر بعدی را مشخص می کند. |
| target-name |
target frameی که به عنوان عنصر بعدی شناخته می شود را مشخص می کند. |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت nav-up
مثال
مشخص کردن اینکه هنگام کلیک روی دکمه های مکان نما، عنصر بعدی چه عنصری است:
{
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}
button#b2
{
top:40%;left:50%;
nav-index:2;
nav-right:#b3;nav-left:#b1;
nav-down:#b3;nav-up:#b1;
}
button#b3
{
top:70%;left:25%;
nav-index:3;
nav-right:#b4;nav-left:#b2;
nav-down:#b4;nav-up:#b2;
}
button#b4
{
top:40%;left:0%;
nav-index:4;
nav-right:#b1;nav-left:#b3;
nav-down:#b1;nav-up:#b3;
}
پشتیبانی مرورگرها
در حال حاضر خصوصیت nav-up تنها توسط مرورگر Opera پشتیبانی می شود.
تعریف و کاربرد
با استفاده از خصوصیت nav-up می توان مشخص کرد که هنگام فشردن کلید مکان نمای بالا، کدام عنصر انتخاب شود.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.navUp="#div2" |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| auto |
مرورگر مشخص می کند که عنصر بعدی چه عنصری باشد. |
| id |
شناسه (id) عنصر بعدی را مشخص می کند. |
| target-name |
target frameی که به عنوان عنصر بعدی شناخته می شود را مشخص می کند. |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت outline-offset
مثال
رسم خطی به ضخامت 15 پیکسل در اطراف border عنصر:
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، به جز Internet Explorerخصوصیت outline-offset را پشتیبانی می کنند.
تعریف و کاربرد
با استفاده از خصوصیت outline-offset، می توان افستی را در اطراف border عنصر ایجاد کرد.
outlineها با borderها از دو نظر متفاوت هستند:
- outlineها فضا اشغال نمی کنند.
- outlineها ممکن است مستطیلی نباشند.
| مقدار پیشفرض | 0 |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.outlineOffset="15px" |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| length |
فاصله outline از حاشیه را مشخص می کند. |
| inherit | تعيين مي کند که بايد از والدش، ارث بري داشته باشد. |
خصوصیت resize
مثال
مشخص کردن اینکه آیا یک عنصر div بتواند توسط کاربر تغییر سایز پیدا کند:
{
resize:both;
overflow:auto;
}
پشتیبانی مرورگرها
مرورگرهای Chrome، Safari و Firefox خصوصیت resize را پشتیبانی می کنند.
تعریف و کاربرد
با استفاده از خصوصیت resize می توان مشخص کرد که یک کاربر می تواند عنصری را تغییر سایز دهد یا خیر.
| مقدار پیشفرض | none |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.resize="both" |
نحوه استفاده
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| none |
کاربر نمی تواند سایز عنصر را تغییر دهد. |
|
| both |
کاربر می تواند هم سایز ارتفاع و هم سایز عرض یک عنصر را تغییر دهد. |
|
| horizontal |
کاربر می تواند سایز عرض یک عنصر را تنظیم کند. |
|
| vertical |
کاربر می تواند سایز ارتفاع یک عنصر را تنظیم کند. |
|
مرجع CSS در اینجا تمام شد
از مدیران خواهش می کنم این پست رو به صورت اعلان در بیارن تا دسترسی به اون راحتر بشه
منبع : بیاموز
واقعا خوب بود خیلی ممنون
دو سال بود سی اس اس کار نکرده بودم دنبال یه پیجی بودم که همه کد هارو قرار داده باشه که یهو چشمم خورد به این مطلبتون
مرسی
طراحی حرفه ایی انواع سایت شامل: فروشگاهی، شرکتی، خدماتی، رزومه ای، برند شخصی، پزشکی، املاک، آموزشی، خبری و...
مزایای طراحی سایت بالیز:
طراحی قالب اختصاصی، طراحی با CMS محبوب وردپرس، بالاترین کیفیت، یک سال پشتیبانی فنی، آموزش کامل کار با سایت
رعایت قوانین پایه سئو، رعایت اصول امنیت سایت، بهبود سرعت سایت و...
کافیست چند ثانیه وقت گذاشته و از سایت ما دیدن فرمایید.
https://balizgroup.com/