خصوصیت color

مثال

مشخص کردن رنگ متن برای عناصر مختلف:

body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}

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

با استفاده از خاصیت color می توانیم رنگ متن را مشخص کنیم.

مقدار پیشفرض	مشخص نشده
ارث بری	بله
نسخه	CSS1
JavaScript ساختار	object.style.color="#FF0000"

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

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

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.

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

نکته ها و ترفندها

نکته: از رنگ پس زمینه و رنگ متن برای خواناتر کردن متن استفاده نمایید.

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

مقدار	توضیحات	نمایش دادن
color	رنگ متن را تعیین می کند.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت direction

مثال

راست به چپ کردن جهت متن:

div
{
direction:rtl;
}

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

با استفاده از خاصیت direction می توانیم جهت نوشتن متن را مشخص کنیم.

نکته: برای تنظیم پشتیبانی از چندزبانی در یک صفحه مشابه، خاصیت direction را به همراه خاصیت unicode-bidi به کار ببرید.

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

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

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

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

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

مقدار	توضیحات	نمایش دادن
ltr	جهت نوشتن از چپ به راست می باشد. مقدار پیش فرض است.
rtl	جهت نوشتن از راست به چپ می باشد.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت letter-spacing

مثال

تنظیم فاصله حروف برای عناصر h1 و h2:

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

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

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

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

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

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

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

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

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

خصوصیت line-height

مثال

تنظیم کردن ارتفاع خطوط به درصد:

p.small {line-height:90%}
p.big {line-height:200%}

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

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

با استفاده از خصوصیت line-height می توان ارتفاع خطوط را مشخص کرد.

توجه: مقادیر منفی غیر قابل قبول است.

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

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

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

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

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

مقدار	توضیحات	نمایش دادن
normal	ارتفاع خطوط به صورت نرمال می باشد. این مقدار پیش فرض است.
number	عددی است که در سایز فونت فعلی ضرب می شود، تا ارتفاع خط را تنظیم کند.
length	ارتفاع خط میزان ثابتی به درصد، پیکسل، سانتی متر و غیره است.
%	ارتفاع خط به نسبت میزان ارتفاع فعلی خط به درصد مشخص می شود.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت text-align

مثال

تنظیم ترازبندی عناصر h1، h2 و h3

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

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

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

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

مقدار پیشفرض	چپ در صورتی که جهت ltr باشد و راست در صورتی که جهت rtl باشد
ارث بری	بله
نسخه	CSS1
JavaScript ساختار	object.style.textAlign="right"

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

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

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

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

مقدار	توضیحات	نمایش دادن
left	نوشته ها در سمت چپ تراز می شوند.
right	نوشته ها در سمت راست تراز می شوند.
center	نوشته ها در وسط قرار می گیرند.
justify	خطوط را می کشد تا تمام خط ها عرض یکسانی داشته باشند (مشابه روزنامه ها و مجله ها)
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت text-decoration

مثال

تنظیم آذین بندی (Decoration) عناصر h1، h2 و h3

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}

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

خصوصیت text-decoration نحوه آذین بندی نوشته ها را مشخص می کند.

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

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

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

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

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

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

مقدار	توضیحات	نمایش دادن
none	تعریف یک متن معمولی. این مقدار پیش فرض است.
underline	تعریف خطی زیر متن
overline	تعریف خطی روی متن
line-through	تعریف خطی روی متن
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت text-indent

مثال

تورفتگی خط اول پاراگراف به اندازه 50 پیکسل

p
{
text-indent:50px;
}

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

با استفاده از خصوصیت text-indent می توان میزان تورفتگی اولین خط یک متن را مشخص کرد.

توجه: مقادیر منفی قابل قبول است. در صورتی که عدد منفی وارد شد، تورفتگی به صورت عکس عمل می کند.

مقدار پیشفرض	0
ارث بری	بله
نسخه	CSS1
JavaScript ساختار	object.style.textIndent="50px"

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

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

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

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

مقدار	توضیحات	نمایش دادن
length	مشخص کردن یک مقدار ثابت برای میزان تورفتگی به px, pt, cm, em و غیره
%	تعیین میزان تورفتگی با استفاده از %، میزان تورفتگی به اندازه درصدی از عنصر والدش در نظر گرفته می شود.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت text-transform

مثال

تبدیل بزرگی و کوچکی حروف:

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

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

با استفاده از خصوصیت text-transform می توان حروف یک متن را به حروف بزرگ یا کوچک تبدیل کرد.

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

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

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

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

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

مقدار	توضیحات	نمایش دادن
none	تبدیلی صورت نمی گیرد. حروف به همان صورتی که هستند نمایش داده می شود. مقدار پیش فرض است.
capitalize	حرف اول هر کلمه را تبدیل به حرف بزرگ می کند.
uppercase	تمام کاراکترها را تبدیل به حرف بزرگ می کند.
lowercase	تمام کاراکترها را تبدیل به حرف کوچک می کند.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت unicode-bidi

مثال

باز نویسی متن:

div
{
direction:rtl;
unicode-bidi:bidi-override;
}

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

با استفاده از ترکیب خصوصیت unicode-bidi با خصوصیت direction می توان مشخص کرد که آیا متن باید بازنویسی شود تا چند زبانی را در یک سند پشتیبانی کند یا خیر.

مقدار پیشفرض	normal
ارث بری	بله
نسخه	CSS2
JavaScript ساختار	object.style.unicodeBidi="bidi-override"

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

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

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

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

مقدار	توضیحات	نمایش دادن
normal	از هیچ گونه جایگذاری اضافه استفاده نمی کند. این مقدار پیش فرض است.
embed	یک سطح جایگذاری اضافه ایجاد می کند.
bidi-override	یک سطح جایگذاری اضافه را ایجاد می کند. مرتب شدن دوباره به خصوصیت direction بستگی دارد.
inherit	عيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت white-space

مثال

در این مثال تنظیم شده است که متون داخل پاراگراف هرگز نشکند و به خط بعدی نرود:

p
{
white-space:nowrap;
}

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

با استفاده از خصوصیت white-space می توان مشخص کرد که خطوط فاصله داخل یک عنصر چگونه مدیریت شوند.

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

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

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

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

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

مقدار	توضیحات	نمایش دادن
normal	هر تعداد خط فاصله می تواند دنبال هم تکرار شوند. هنگامی که نیاز شد، متن به خط بعدی می رود. این مقدار پیش فرض است.
nowrap	هر تعداد خط فاصله می تواند دنبال هم تکرار و به صورت یک خط فاصله تجمیع شوند. در این حالت متن هیچگاه به خط بعدی نمی رود. برای رفتن به خط بعد باید از </ br> استفاده نمود.
pre	خطوط فاصله توسط مرورگر نگه داشته می شوند. متن تنها زمانی به خط بعدی می رود که با عملیات شکستن خط مانند تگ <pre> مواجه شود.
pre-line	هر تعداد خط فاصله می تواند دنبال هم تکرار شوند. هنگامی که نیاز شد متن به خط بعدی می رود. با استفاده از line break ها نیز متن به خط بعدی می رود.
pre-wrap	خطوط فاصله توسط مرورگر نگه داشته می شود. . هنگامی که نیاز شد متن به خط بعدی می رود. با استفاده از line break ها نیز متن به خط بعدی می رود.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت vertical-align

مثال

تراز بندی عمودی تصاویر:

img
{
vertical-align:text-top;
}

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

با استفاده از خصوصیت vertical-align می توان تراز بندی عمودی یک عنصر را تنظیم کرد.

مقدار پیشفرض	baseline
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.verticalAlign="bottom"

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

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

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

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

مقدار	توضیحات	نمایش دادن
length	یک عنصر را به میزان طول مشخص شده، بالا یا پایین می برد. مقادیر منفی نیز قابل قبول است.
%	یک عنصر را به میزان درصدی از خصوصیت "line-height" بالا یا پایین می برد. مقادیر منفی نیز قابل قبول است.
baseline	خط پایه عنصر را با خط پایه عنصر والدش هم تراز می کند. این مقدار پیش فرض است.
sub	عنصر را جوری تراز بندی می کند که گویی زیر نویس به نظر برسد.
super	عنصر را جوری تراز بندی می کند که گویی بالا نویس به نظر برسد.
top	لبه بالایی عنصر هم تراز با بلندترین عنصر خط می شود.
text-top	لبه بالایی عنصر هم تراز با نوشته های عنصر پدرش می شود.
middle	عنصر در وسط عنصر والدش قرار می گیرد.
bottom	لبه پایینی عنصر هم تراز با پایین ترین عنصر خط می گردد.
text-bottom	لبه پایینی عنصر هم تراز با لبه پایینی نوشته های عنصر پدرش می شود.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت word-spacing

مثال

تنظیم کردن 30 پیکسل فاصله بین کلمات در پاراگراف ها :

p
{
word-spacing:30px;
}

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

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

مقادیر منفی نیز قابل قبول است.

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

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

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

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

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

مقدار	توضیحات	نمایش دادن
normal	مشخص می کند که فاصله بین کلمات عادی است. این مقدار پیش فرض است.
length	فاصله بین کلمات را در واحدهای px، pt، cm، em و ... تعریف می کند. مقادیر منفی نیز قابل قبول است.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

خصوصیت text-justify

مثال

وقتی متن justify می شود، فاصله بین واژه ها تغییر می کند:

div
{
text-align:justify;
text-justify:inter-word;
}

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

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

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

با استفاده از خصوصیت text-justify می توان مشخص کرد، هنگامی متن justify می شود، روش justify شدن چگونه باشد.

این خصوصیت مشخص می کند که متون justify شده چگونه بایستی تراز بندی و فاصله بندی شوند.

مقدار پیشفرض	auto
ارث بری	بله
نسخه	CSS3
JavaScript ساختار	object.style.textJustify="inter-word"

نحوه استفاده

مقدار	توضیحات	نمایش دادن
auto	مرورگر الگوریتم justify کردن را تعیین می کند.
inter-word	فاصله ی بین متون کم یا زیاد می شود.
inter-ideograph	متن را با حروف مجازی justify می کند.
inter-cluster	فقط محتوایی که حاوی فاصله های بین واژه ای نباشد، justify می شود.
distribute	مانند روزنامه، به جز زبان های آسیای شرقی (مانند Thai)، آخرین خط justify نمی شود.
kashida	محتوا را با کشیدن کاراکترهای jusify می کند.
trim
none	justification را غیر فعال می کند.

خصوصیت text-outline

مثال

تنظیم خط خارجی (outline) برای متن:

p.test
{
text-outline: 2px 2px #ff0000;
}

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

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

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

با استفاده از خصوصیت text-outline می توان برای یک متن خط خارجی (outline) مشخص کرد.

مقدار پیشفرض	none
ارث بری	بله
نسخه	CSS3
JavaScript ساختار	object.style.textOutline="2px 2px #ff0000"

نحوه استفاده

text-outline: thickness blur color;

مقدار	توضیحات
thickness	الزامی است. میزان ضخامت outline را مشخص می کند.
blur	اختیاری است. درجه تیرگی خط خارجی را مشخص می کند.
color	برای مشاهده مقادیر ممکن برای رنگ CSS Colors را ملاحظه بفرمایید.

خصوصیت text-overflow

مثال

استفاده از خصوصیت text-overflow:

div.test
{
text-overflow:ellipsis;
}

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

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

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

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

با استفاده از خصوصیت text-overflow می توان مشخص کرد هنگامی متن از عنصر والدش سرریز می کند، چه اتفاقی رخ دهد.

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

نحوه استفاده

text-overflow: clip|ellipsis|string;

مقدار	توضیحات	نمایش دادن
clip	متن برش داده می شود.
ellipsis	متن اضافه را حذف می کند و یک سه نقطه ("...") به جای آن نمایش می دهد.
string	رشته داده شده را در متن بریده شده نمایش می دهد.