0

مرجع CSS

 
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت appearance

مثال

نمایش عنصر <div> مانند یک دکمه:

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

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

مرورگر Firefox به پیشوند -moz- نیاز دارد.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.


تعریف و کاربرد

با استفاده از خصوصیت appearance، می توانید نحوه نمایش عنصر را شبیه دیگر عناصر قرار دهید.

مقدار پیشفرض normal
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.appearance="button"

نحوه استفاده

appearance: normal|icon|window|button|menu|field;
مقدار توضیحات
normal عنصر را بصورت عادی نمایش می دهد.
icon عنصر را مانند یک تصویر کوچک، نشان می دهد.
window عنصر را مانند یک viewport نمایش می دهد.
button عنصر را مانند یک دکمه نمایش می دهد.
menu عنصر را مانند یک منو نمایش می دهد. (گزینه هایی را برای انتخاب کاربر تنظیم می کند)
field عنصر را مانند یک فیلد ورودی نمایش می دهد.

 

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:49 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت box-sizing

مثال

چهار <div> با اندازه یکسان و خروجی های متفاوت:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای 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"

نحوه استفاده

box-sizing: content-box|border-box|inherit:
مقدار توضیحات
content-box اندازه عنصر فقط شامل Content می شود و  Padding و Border و Margin محاسبه نمی شود. (مقدار پیشفرض)
border-box اندازه عنصر شامل Content و Padding و Border می شود اما Margin محاسبه نمی شود. (این مدل در IE8 و نسخه های قبلی آن اعمال می شود)
inherit  تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
 

 

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:50 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت nav-down

مثال

مشخص کردن اینکه عنصر بعدی هنگام کلیک روی دکمه مکان نمای پایین چه عنصری است:

button#b1
{
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;
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

در حال حاضر خصوصیت nav-down تنها توسط مرورگر Opera پشتیبانی می شود.


تعریف و کاربرد

با استفاده از خصوصیت nav-down می توان مشخص کرد که هنگام فشردن کلید مکان نمای پایین، کدام عنصر انتخاب شود.

مقدار پیشفرض auto
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.navDown="#div2"

نحوه استفاده

nav-down: auto|id|target-name|inherit;
مقدار توضیحات
auto

مرورگر مشخص می کند که عنصر بعدی چه عنصری باشد.

id    شناسه (id) عنصر بعدی را مشخص می کند.
target-name

 target frameی که به عنوان عنصر بعدی شناخته می شود را مشخص می کند.

inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:50 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت nav-index

مثال

مشخص کردن اینکه هنگام کلیک روی دکمه های مکان نما، عنصر بعدی چه عنصری است:

button#b1
{
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;
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

در حال حاضر خصوصیت nav-down تنها توسط مرورگر Opera پشتیبانی می شود.


تعریف و کاربرد

با استفاده از خصوصیت nav-index می توان ترتیب انتخاب عنصر (tabbing) را مشخص کرد.

مقدار پیشفرض auto
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.navIndex=2

نحوه استفاده

nav-index: auto|number|inherit;
مقدار توضیحات
auto ترتیب انتخاب عناصر توسط مرورگر انجام شود.
number

ترتیب انتخاب عنصر با فشردن دکمه تب(tabbing) را مشخص می کند.

inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:51 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت nav-left

مثال

مشخص کردن اینکه هنگام کلیک روی دکمه های مکان نما، عنصر بعدی چه عنصری است:

button#b1
{
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;
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

در حال حاضر خصوصیت nav-left تنها توسط مرورگر Opera پشتیبانی می شود.


تعریف و کاربرد

با استفاده از خصوصیت nav-left می توان مشخص کرد که هنگام فشردن کلید مکان نمای پایین، کدام عنصر انتخاب شود.

مقدار پیشفرض auto
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.navLeft="#div2"

نحوه استفاده

nav-left: auto|id|target-name|inherit;
مقدار توضیحات
auto

مرورگر مشخص می کند که عنصر بعدی چه عنصری باشد.

id

شناسه (id) عنصر بعدی را مشخص می کند.

target-name

 target frameی که به عنوان عنصر بعدی شناخته می شود را مشخص می کند.

inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:52 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت nav-right

مثال

مشخص کردن اینکه عنصر بعدی هنگام کلیک روی دکمه مکان نمای پایین چه عنصری است:

button#b1
{
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;
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

در حال حاضر خصوصیت nav-right تنها توسط مرورگر Opera پشتیبانی می شود.


تعریف و کاربرد

با استفاده از خصوصیت nav-right می توان مشخص کرد که هنگام فشردن کلید مکان نمای راست، کدام عنصر انتخاب شود.

مقدار پیشفرض auto
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.navRight="#div2"

نحوه استفاده

nav-right: auto|id|target-name|inherit;
مقدار توضیحات
auto

مرورگر مشخص می کند که عنصر بعدی چه عنصری باشد.

id

شناسه (id) عنصر بعدی را مشخص می کند.

target-name

 target frameی که به عنوان عنصر بعدی شناخته می شود را مشخص می کند.

inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:53 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت nav-up

مثال

مشخص کردن اینکه هنگام کلیک روی دکمه های مکان نما، عنصر بعدی چه عنصری است:

button#b1
{
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;
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

در حال حاضر خصوصیت nav-up تنها توسط مرورگر Opera پشتیبانی می شود.


تعریف و کاربرد

با استفاده از خصوصیت nav-up می توان مشخص کرد که هنگام فشردن کلید مکان نمای بالا، کدام عنصر انتخاب شود.

 

مقدار پیشفرض auto
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.navUp="#div2"

نحوه استفاده

nav-up: auto|id|target-name|inherit;
مقدار توضیحات
auto

مرورگر مشخص می کند که عنصر بعدی چه عنصری باشد.

id

شناسه (id) عنصر بعدی را مشخص می کند.

target-name

 target frameی که به عنوان عنصر بعدی شناخته می شود را مشخص می کند.

inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:54 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت outline-offset

مثال

رسم خطی به ضخامت 15 پیکسل در اطراف border عنصر:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، به جز Internet Explorerخصوصیت outline-offset را پشتیبانی می کنند.


تعریف و کاربرد

با استفاده از خصوصیت outline-offset، می توان افستی را در اطراف border عنصر ایجاد کرد.

outlineها با borderها از دو نظر متفاوت هستند:

  • outlineها فضا اشغال نمی کنند.
  • outlineها ممکن است مستطیلی نباشند.
مقدار پیشفرض 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.outlineOffset="15px"

نحوه استفاده

outline-offset: length|inherit:
مقدار توضیحات
length

فاصله outline از حاشیه را مشخص می کند.

inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:54 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت resize

مثال

مشخص کردن اینکه آیا یک عنصر div بتواند توسط کاربر تغییر سایز پیدا کند:

div
{
resize:both;
overflow:auto;
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Chrome، Safari و Firefox خصوصیت resize را پشتیبانی می کنند.


تعریف و کاربرد

با استفاده از خصوصیت resize می توان مشخص کرد که یک کاربر می تواند عنصری را تغییر سایز دهد یا خیر.

توجه: خصوصیت resize برای عناصری به کار می رود که خصوصیت overflow آن هر مقداری به جز "visible" باشد

مقدار پیشفرض none
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.resize="both"

نحوه استفاده

resize: none|both|horizontal|vertical:
مقدار توضیحات نمایش دادن
none

کاربر نمی تواند سایز عنصر را تغییر دهد.

نمایش دادن »
both

کاربر می تواند هم سایز ارتفاع و هم سایز عرض یک عنصر را تغییر دهد.

نمایش دادن »
horizontal

کاربر می تواند سایز عرض یک عنصر را تنظیم کند.

نمایش دادن »
vertical

کاربر می تواند سایز ارتفاع یک عنصر را تنظیم کند.

نمایش دادن »
 

 

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:55 AM
تشکرات از این پست
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS

مرجع CSS در اینجا تمام شد 

از مدیران خواهش می کنم این پست رو به صورت اعلان در بیارن تا دسترسی به اون راحتر بشه

 

منبع : بیاموز

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393  2:56 AM
تشکرات از این پست
mohammad98
amirbarmaj
amirbarmaj
کاربر جدید
تاریخ عضویت : فروردین 1397 
تعداد پست ها : 2

پاسخ به:مرجع CSS

واقعا خوب بود خیلی ممنون

دو سال بود سی اس اس کار نکرده بودم دنبال یه پیجی بودم که همه کد هارو قرار داده باشه که یهو چشمم خورد به این مطلبتون

مرسی

دوشنبه 20 فروردین 1397  3:16 PM
تشکرات از این پست
baliz_group
baliz_group
کاربر جدید
تاریخ عضویت : مهر 1400 
تعداد پست ها : 1
محل سکونت : یزد

پاسخ به:مرجع CSS

yesآژانس دیجیتال مارکتینگ بالیزyes

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

مزایای طراحی سایت بالیز:

طراحی قالب اختصاصی، طراحی با CMS محبوب وردپرس، بالاترین کیفیت، یک سال پشتیبانی فنی، آموزش کامل کار با سایت

رعایت قوانین پایه سئو، رعایت اصول امنیت سایت، بهبود سرعت سایت و...

 

کافیست چند ثانیه وقت گذاشته و از سایت ما دیدن فرمایید.

https://balizgroup.com/

چهارشنبه 21 مهر 1400  11:01 AM
تشکرات از این پست
دسترسی سریع به انجمن ها