0
عضویت / ورود
جمعه، 12 بهمن 1403 ( جهش تولید با مشارکت مردم )

مرجع CSS

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

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

خصوصیت font-style

مثال

تنظیم استایل های مختلف برای سه پاراگراف متفاوت:

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
خودتان امتحان کنید »

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

با استفاده از خاصیت font-style می توان استایل متن را مشخص کرد.

مقدار پیشفرض normal
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.fontStyle="italic"

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت font-style را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
normal مرورگر استایل فونت را نرمال قرار می دهد. این مقدار پیش فرض است. نمایش دادن »
italic  تعیین می کند که استایل فونت باید به صورت مورب (italic) باشد. نمایش دادن »
oblique خیلی شبیه italic است، اما کمتر پشتیبانی می شود. نمایش دادن »
inherit تعيين مي کند که استایل فونت بايد از والدش، ارث بري داشته باشد.  
 

 

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

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

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

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

خصوصیت font-style

مثال

تنظیم استایل های مختلف برای سه پاراگراف متفاوت:

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
خودتان امتحان کنید »

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

با استفاده از خاصیت font-style می توان استایل متن را مشخص کرد.

مقدار پیشفرض normal
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.fontStyle="italic"

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت font-style را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
normal مرورگر استایل فونت را نرمال قرار می دهد. این مقدار پیش فرض است. نمایش دادن »
italic  تعیین می کند که استایل فونت باید به صورت مورب (italic) باشد. نمایش دادن »
oblique خیلی شبیه italic است، اما کمتر پشتیبانی می شود. نمایش دادن »
inherit تعيين مي کند که استایل فونت بايد از والدش، ارث بري داشته باشد.  
 

 

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

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

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

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

خصوصیت font-variant

مثال

تمام حروف پاراگراف به صورت حروف بزرگ نمایش داده می شوند:

p.small
{
font-variant:small-caps;
}
خودتان امتحان کنید »

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

هنگامی که font-varient مقدار small-caps را دارد، تمام حروف کوچک به حروف بزرگ تبدیل می شوند. با این وجود، حروف کوچکی که به حروف بزرگ تبدیل شده اند، از حروف بزرگ اصلی متن کوچکتر نمایش داده می شوند.

با استفاه از خاصیت font-varient مشخص می کنیم که آیا یک متن به صورت small-caps نمایش داده شود یا نه.

مقدار پیشفرض normal
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.fontVariant="small-caps"

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت font-variant را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
normal

مرورگر متن را به صورت عادی نمایش می دهد. این مقدار پیش فرض است.

 نمایش دادن »
small-caps

مرورگر حروف کوچک را به صورت حروف بزرگ (small-caps) نمایش می دهد.

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

 

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

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

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

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

خصوصیت font-weight

مثال

تنظیم کردن ضخامت متفاوت برای سه پاراگراف مختلف:

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
خودتان امتحان کنید »

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

با استفاده از خاصیت font-weight می توانیم مشخص کنیم که کاراکترهای متن به چه اندازه ضخیم یا نازک نمایش داده شوند.

مقدار پیشفرض normal
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.fontWeight="900"

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت font-weight را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
normal  کاراکترها به صورت نرمال نمایش داده می شوند. این مقدار پیش فرض است. نمایش دادن »
bold

کاراکترها را به صورت ضخیم نمایش می دهد.

 نمایش دادن »
bolder

کاراکترها از حالت bold ضخیم تر می باشند.

 نمایش دادن »
lighter تعیین می کند که کاراکترها باید از حالت bold نازک تر باشند. نمایش دادن »
100
200
300
400
500
600
700
800
900

این اعداد رنجی است که کاراکتر ها از نازک به ضخیم نمایش داده می شوند. عدد 400 معادل normal است و عدد 700 همان bold است.

 نمایش دادن »
inherit تعيين مي کند که ضخامت فونت بايد از والدش، ارث بري داشته باشد.  

 

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

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

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

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

خصوصیت @font-face

مثال

نسبت دادن یک فونت به یک عنصر و مشخص کردن آدرس فایل فونت، در قانون font-face@:

@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، قانون font-face@ را پشتیبانی می کنند.

مرورگرهای Internet Explorer 9+, Firefox, Chrome, Safari, Opera فونت های از نوع WOFF یا (Web Open Font Format) را پشتیبانی می کنند.

مرورگرهای Chrome, Safari, Opera فونت های از نوع TTF یا (True Type Fonts) و OTF یا (OpenType Fonts) را پشتیبانی می کنند.

همچنین مرورگرهای Chrome, Safari, Opera فونت ها یا اشکال SVG را پشتیبانی می کنند.

همچنین Internet Explorer فونت های EOT یا (Embedded OpenType) را پشتیبانی می کند.

توجه: Internet Explorer 8 به پایین از font-face@ پشتیبانی نمی کند.

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

با استفاده از از قانون font-face@، می توانید هر فونتی را که می خواهید استفاده نمایید. فقط کافی است در قانون font-face@ ابتدا یک نام برای فونت خود مشخص نمایید (مثلاً myFirstFont) و سپس آنرا به فایل فونتی که قبلاً روی سرور آپلود کرده اید هدایت کنید.

نکته: برای فونتِ URL، از حروف کوچک استفاده نمایید. استفاده از حروف بزرگ در IE می تواند نتیجه های متفاوت و غیر منتظره ای داشته باشد.

برای نسبت دادن یک فونت به یک عنصر، باید از خاصیت font-family استفاده کنید:

div
{
font-family: myFirstFont;
}

نحوه استفاده

@font-face
{
font-properties
}

در جدول زیر، لیستی از تمام خاصیت هایی که می توان در قانون font-face@ تعریف کرد، آمده است: (font-properties)

توصیف گر مقدار توضیحات
font-family name الزامی است. نام فونت را مشخص می کند.
src URL الزامی است. URL فایل فونت را مشخص می کند.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded		 اختیاری است. میزان کشیدگی کاراکترها را مشخص می کند. مقدار پیشفرض "normal" است.
font-style normal
italic
oblique		 اختیاری است. سبک یا Style فونت را مشخص می کند. مقدار پیشفرض "normal" است.
font-weight normal
bold
100
200
300
400
500
600
700
800
900		 اختیاری است. ضخامت فونت را مشخص می کند. مقدار پیشفرض "normal" است.
unicode-range unicode-range اختیاری است. محدوده کاراکترهای UNICODE را مشخص می کند. مقدار پیشفرض "U+0-10FFFF" است.
مثالs

مثال - خودتان امتحان کنید

مثال

باید نسخه درشت فونت خود را که شامل توضیحاتی برای Bold کردن متن است، اضافه نمایید:

@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
خودتان امتحان کنید »

فایل "Sansation_Bold.woff" یک فایل دیگر است که شامل کاراکترهای Bold برای فونت Sansation است.

مرورگرها از این فایل زمانی استفاده می کنند که یک قطعه از متن با فونت "myFirstFont"، ضخیم (Bold) شده باشد.

در این روش شما می توانید، قوانین font-face@ زیادی برای یک فونت داشته باشید.

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

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

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

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

خصوصیت font-size-adjust

مثال

با مقدار دهی خاصیت font-size-adjust، مرورگر اندازه فونت را به نسبت font-family تعیین می کند.

div
{
font-size-adjust: 0.58;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

Firefox تنها مرورگری است که خصوصیت font-size-adjust را پشتیبانی می کنند.

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

با استفاده از خاصیت font-size-adjust می توانیم هنگامی که اولین فونت انتخابی در دسترس نبود، کنترل بیشتری روی اندازه فونت ها داشته باشیم.

هنگامی که فونتی در دسترس نبود، مرورگر به سراغ دومین فونت مشخص شده می رود. این ممکن است تغییر ناگهانی را در اندازه فونت به وجود آورد.

برای جلوگیری از چنین تغییری از خصوصیت font-size-adjust استفاده نمایید.

تمام فونت ها دارای یک "مقدار تناسب" هستند که این مقدار تناسب اختلاف بین حرف کوچک "x" و حرف بزرگ "X" را نشان می دهد.

هنگامی که مرورگر مقدار تناسب اولین فونت انتخابی را بداند، می تواند اندازه فونتی که باید هنگام استفاده از دومین فونت لحاظ شود را تنظیم کند.

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

نحوه استفاده

font-size-adjust: number|none|inherit;
مقدار توضیحات
number مقدار تناسبی که باید استفاده شود را مشخص می کند.
none مقدار پیشفرض. هیچ تنظیم فونتی صورت نمی گیرد.
inherit اندازه تنظیم فونت را از عنصر پدرش به ارث می برد.

 

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

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

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

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

خصوصیت font-stretch

مثال

عریض تر کردن متن تمام عناصر div:

div
{
font-stretch: expanded;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

با استفاده از خاصیت Font-strech می توان یک متن را کشیده تر یا باریک تر (فشرده تر) کرد.

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

نحوه استفاده

font-stretch: wider|narrower|ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|inherit;
مقدار توضیحات
wider متن را کشیده تر می کند.
narrower  متن را باریک تر (فشرده تر) می کند.
ultra-condensed متن را تا جایی که امکان دارد باریک و فشرده می کند.
extra-condensed

متن را باریک تر از حالت condensed می کند، اما نه باریک تر از حالت ultra-condensed.
condensed

متن را باریک تر از حالت semi-condensed می کند، اما نه باریک تر از حالت extra-condensed.
semi-condensed

متن را باریک تر از حالت normal می کند، اما نه باریک تر از حالت condensed.
normal مقدار پیشفرض. هیچ فونتی کشیده نمی شود.
semi-expanded

متن را کشیده تر از حالت نرمال می کند، اما نه نه کشیده تر از حالت eapanded.
expanded

متن را کشیده تر از حالت semi-expanded می کند، اما نه نه کشیده تر از حالت extra-expanded.
extra-expanded

متن را کشیده تر از حالت expanded می کند، اما نه نه کشیده تر از حالت ultra-expanded.
ultra-expanded

متن را تا جایی که امکان دارد کشیده می کند.
inherit

میزان کشیده شدن متن از والدش ارث می بری می شود.

 

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

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

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

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

خصوصیت content

مثال

در این مثال URL هر لینک داخل یک پرانتز بعد از آن لینک قرار می گیرد:

a:after
{
content: " (" attr(href) ")";
}
خودتان امتحان کنید »

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

خاصیت content با ترکیب شبه عنصرهای after: و after: برای درج محتوا به کار می رود.

مقدار پیشفرض normal
ارث بری خیر
نسخه CSS2
JavaScript ساختار object.style.content="url(beep.wav)"

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت content را پشتیبانی می کنند.

توجه: IE8 به !DOCTYPE! نیاز دارد.

مقدارهای خصوصیت Content

مقدار توضیحات مثال
none اگر خصوصیت content تنظیم شده باشد، محتوای را خالی می کند. خودتان امتحان کنید »
normal اگر خصوصیت content تنظیم شده باشد، محتوای را به حالت معمول برمی گرداند که حالت پیش فرض "none" است. خودتان امتحان کنید »
counter یک شمارنده برای محتوای تنظیم می کند. خودتان امتحان کنید »
attr(attribute) محتوای را با مقدار یکی از ویژگی های عنصر انتخاب شده تنظیم می کند. خودتان امتحان کنید»
string محتوی را با یک متن تنظیم می کند. خودتان امتحان کنید »
open-quote در ابتدای محتوی یک کوتیشن نمایش می دهد. خودتان امتحان کنید »
close-quote در انتهای محتوی یک کوتیشن نمایش می دهد. خودتان امتحان کنید »
no-open-quote اگر برای ابتدای محتوای کوتیشن تنظیم شده باشد، آنرا حذف می کند. خودتان امتحان کنید »
no-close-quote اگر برای انتهای محتوای کوتیشن تنظیم شده باشد، آنرا حذف می کند. خودتان امتحان کنید »
url(url) یکی از انواع مدیاها را برای محتوای تنظیم می کند (عکس، صوت، ویدئو و ...) خودتان امتحان کنید »
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

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

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

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

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

خصوصیت counter-increment

مثال

روشی برای شماره دهی یک بخش و زیر مجموعه های آن مانند " section 1" و "1.1"، "1.2":

body
{
counter-reset:section;
}

h1
{
counter-reset:subsection;
}

h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}

h2:before 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
 
خودتان امتحان کنید »

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

با استفاده از خاصیت counter-increment می توان مقادیر یک یا چند شمارنده را افزایش داد.

خاصیت counter-increment معمولا با خاصیت counter-reset و خاصیت content استفاده می شود.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت counter-increment را پشتیبانی می کنند.

توجه: IE8 به !DOCTYPE! نیاز دارد.

مقدارهای خصوصیت

مقدار توضیحات
none

هیچ شمارنده ای اضافه نمی شود.
id number

id تعیین می کند که کدام شمارنده باید افزایش داده شود. counter مشخص می کند که شمارنده مذکور در هر مرتبه به چه میزان افزایش یابد. مقدار پیش فرض 1 است. مقادیر منفی و صفر نیز قابل قبول هستند. اگر id به شمارنده ای اشاره کند که توسط counter-reset مقدار دهی اولیه نشده باشد، مقدار اولیه پیش فرض صفر است.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
 

 

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

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

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

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

خصوصیت counter-reset

مثال

روشی برای شماره دهی یک بخش و زیر مجموعه های آن مانند " section 1" و "1.1"، "1.2":

body
{
counter-reset:section;
}

h1
{
counter-reset:subsection;
}

h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}

h2:before 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
خودتان امتحان کنید »

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

با استفاده از خاصیت counter-reset می توان یک یا چند شمارنده ایجاد نمود یا آنها را بازنشانی (reset) کرد.

خاصیت counter-reset معمولا با خاصیت های counter-increment و content استفاده می شود.

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

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت content-reset را پشتیبانی می کنند.

توجه: IE8 به !DOCTYPE! نیاز دارد.

مقدارهای خصوصیت

مقدار توضیحات
none

هیچ شمارنده ای بازنشانی نمی شود. مقدار پیش فرض none است.
id number

id تعیین می کند که کدام شمارنده باید بازنشانی شود. counter مشخص می کند که شمارنده مذکور در هر مرتبه به چه مقداری بازنشانی شود. مقدار پیش فرض 0 است.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

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

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

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

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

خصوصیت quotes

مثال

مشخص کردن علامت کوتیشنی که داخل عنصر کوتیشن دیگر قرار دارد:

q:lang(en)
{
quotes: "" "�" "'" "'";
}
خودتان امتحان کنید »

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

با استفاده از خصوصیت quotes می توان علامت کوتیشنی که داخل عنصر کوتیشن دیگر قرار دارد را مشخص کرد:

مقدار پیشفرض مشخص نشده
ارث بری بله
نسخه CSS2
JavaScript ساختار object.style.quotes="none"

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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت quotes را پشتیبانی می کنند.

توجه: IE8 به !DOCTYPE! نیاز دارد.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
none

کوتیشن بسته و کوتیشن باز داخل محتوا نمایش داده نمی شود.

 نمایش دادن »
string string string string

مشخص کردن نوع علامت کوتیشن. دو مقدار اولی برای اولین سطح کوتیشن به کار می رود. دو مقدار بعدی برای سطح بعدی یعنی کوتیشن هایی که داخل سطح اول قرار دارند و به همین ترتیب....

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

Quotation Mark Characters

Result توضیحات Entity Number
" کوتیشن دوبل "
' تک کوتیشن '
‹ تک گیومه باز

 

 ‹
› تک گیومه بسته ›
«

گیومه دوبل باز

 «
»

گیومه دوبل بسته

 »
‘

کوتیشن چپ

 ‘
’

کوتیشن راست

 ’
“

کوتیشن چپ دوبل

 “
”

کوتیشن راست دوبل

 ”
„

کوتیشن دوبل

 

 „

 

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

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

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

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

خصوصیت grid-columns

مثال

قرار دادن یک خط در وسط عنصر div، خط دیگر در فاصله 200 پیکسلی از سمت راست عنصر، و یک خط نیز در وسط فضای باقیمانده:

div
{
grid-columns:50% * * 200px;
}

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

با استفاده از خصوصیت grid-column می توان عرض هر ستون را به بخش هایی تقسیم کرد.

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

مقدار پیشفرض none
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.gridColumns="50% * * 200px"

نحوه استفاده

grid-columns: length|%|none|inherit;
مقدار توضیحات
length

اشاره به grid بلوک محتوا دارد.
%

اشاره به عرض بلوک محتوا دارد.
none  
inherit  

 

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

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

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

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

خصوصیت grid-rows

مثال

تعریف کردن یک ردیف عنوان به ارتفاع 100 پیکسل و اضافه کردن ردیف های دیگر در صورت نیاز:

div
{
grid-rows:100px (30px 60px);
}

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

The grid-rows property specifies the height of each row in the grid.

با استفاده از خصوصیت grid-rows می توان ارتفاع هر ردیف را به بخش هایی تقسیم کرد.

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

مقدار پیشفرض none
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.gridRows="100px (30px 60px)"

نحوه استفاده

grid-rows: length|%|none|inherit;
مقدار توضیحات
length اشاره به grid بلوک محتوا دارد.
% اشاره به عرض بلوک محتوا دارد
none  
inherit  

 

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

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

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

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

خصوصیت target

 

مثال

باز کردن تمام لینک ها در پنجره جدید، و قرار دادن پنجره جدید روی تمام سربرگ ها و پنجره های قبلی

a
{
target:new front;
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

با استفاده از خصوصیت مختصر شده target می توان تنظیمات مربوط به خصوصیت های target-name  ،target-new  و target-position را در یک تخصیص تعیین کرد.

مقدار پیشفرض current window above
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.target="new front"

نحوه استفاده

target: target-name target-new target-position;
مقدار توضیحات
target-name

مشخص می کند که لینک در کجا باز شود. (مقصد لینک کجاست)
target-new

مشخص می کند که آیا لینک بایستی در پنجره جدید باز شود یا در سربرگ جدیدی در پنجره جاری
target-position

مشخص می کند پنجره جدید کجا قرار گیرد.

توجه: خصوصیت های  target-position و target-new فقط در صورتی کار می کنند که خصوصیت target-name پنجره یا سربرگ جدید ایجاد کند.

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

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

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

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

خصوصیت target-name

مثال

باز کردن تمام لینک ها در سربرگ جدید:

a
{
target-name:new;
target-new:tab;
}

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

با استفاده از خصوصیت target-name می توان مشخص کرد لینک های جدید کجا باز شوند.

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

نحوه استفاده

target-name: current|root|parent|new|modal|name;
مقدار توضیحات
current

لینک دقیقا در همان frame، سربرگ و پنجره ای که هم اکنون قرار دارد باز می شود.
root

لینک در سربرگ یا پنجره جاری باز می شود.
parent

لینک در frame پدرش باز می شود. اگر frame جاری والدی نداشت، مقدار parent مانند مقدار root عمل می کند.
new

یک destination جدید ایجاد می شود. (target-new را ملاحظه بفرمایید.)
modal

لینک در یک پنجره modal (پنجره موقت) جدید باز می شود.
name

لینک در frame، پنجره یا سربرگی باز می شود که دارای نام مشخص شده باشند. اگر نام مقصد وجود نداشت، نام مقصد جدیدی با همان نام مشخص می شود.

 

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

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

سه شنبه 11 آذر 1393  1:52 AM
تشکرات از این پست
دسترسی سریع به انجمن ها