کارکردن با متن

ویژگی رنگ (color)
ویژگی رنگ برای این استفاده می شود که رنگ متن را با یکی از سه نماد رنگ مشخص کنیم. همانطور که قبلا نیز گفته شد رنگها را می توانیم با سه روش مشخص کنیم:

• با استفاده از نام؛ مثلا white
• با استفاده از مقادیر مبنای 16
• بر اساس مقدار rgb

به صورت پیش فرض، مقدار آن به صورت inherit تنظیم می شود. یعنی اینکه مقدار آن بر اساس مقدار عنصر والد تنظیم می شود.

   

color : inherit |<color>

در تمام مرورگرهای مهم مقدار اولیه، رنگ مشکی است. در مثال زیر، رنگ متن پاراگراف را آبی تعریف می کنیم:

p { color : #00f; }

ویژگی text-transform
ویژگی text-transform نحوه نمایش متن (ازنظر بزرگی و کوچکی حروف) را کنترل می کند (که البته این ویژگی مربوط به حروف لاتین است). مقادیر ممکن به شرح زیر هستند، و مقدار none به عنوان مقدار اولیه تنظیم شده است:

 

text-transform :inherit | none | uppercase | lowercase | capitalize

همانطور که در بالا می بینید، این ویژگی باعث می شود متن به صورت تمام حروف بزرگ (uppercase)، تمام حروف کوچک (lowercase) نمایش داده می شود. و مقدار capitalize باعث می شود حرف اول هر کلمه به صورت بزرگ نوشته شود. این ویژگی به صورت پیش فرض ویژگی عنصر والد خود را به ارث می برد، شما می توانید از ویژگی none استفاده کنید تا مقدار به ارث گرفته شده text-transform را نادیده بگیرید.

text-transform :none; /* باعث می شود مقدار به ارث گرفته شده حذف شود */

ویژگی text-decoration
با استفاده از ویژگی text-decoration می توان یک یا بیشتر از یک افکت تصویری را به متن اضافه کرد.

 

text-decoration :none | underline + overline + line-through + blink

برای اینکه بیشتر از یک افکت تصویری را به متن اضافه کنید بعد از مقدار اول یک فاصله بگذارید و مقدار بعدی را بنویسید. در مثال پایین (که یک انتخاب کننده از نوع کلاس را تعریف کرده ایم) در بالا و پایین متن مربوط به کلاس، یک خط قرار می گیرد:

.highlight { text-decoration : underline overline; }

این ویژگی مقدار خود را از عنصر والد خود به ارث نمی برد، اما اثری که ایجاد می کند در تمام عناصر هم نسل خودش تاثیر می گذارد و نقشی همانند ارث گذاری را از خود باقی خواهد گذاشت.
معمولا از مقدار none برای این استفاده می کنیم که متن لینکها دارای زیرخط نباشد:

a{
text-decoration: none; 
}

ویژگی text-indent (تورفتگی)
با استفاده از ویژگی text-indent می توان خط اول مربوط به یک بلوک متن را دارای تورفتگی کرد. می توان برای این ویژگی یک واحد اندازه گیری مشخص کرد یا اینکه مقدار آن را بر اساس درصدی از عرض عنصر والد تعریف کرد. با استفاده از یک مقدار منفی، میزان تورفتگی را برعکس می کنیم. یعنی خط اول کمی جلوتر از کل بلوک متن باشد.

 

text-indent(block) : inherit | <length> | <percentage>

در مثال زیر، خط اول هر پاراگراف به اندازه یک em دارای تورفتگی خواهد بود:

p { text-indent :1em; }

ویژگی text-align
محتوای یک بلوک متن را می توان با استفاده از ویژگی text-align مرتب سازی کرد(به صورت افقی). می توان این ویژگی را جایگزین صفت منسوخ شده align در اچ تی ام ال کرد.

 

text-align (block) : inherit | left | center | right | justify

متن و سایر عناصر درونی مربوط به آن را می توان چپ چین، وسط چین، یا راست چین کرد. و ویژگی justify متن را از سمت راست و چپ می کشد تا خطوط به صورت برابر با یکدیگر قرار گیرند.

p { text-align : justify; }

ویژگی text-align مقدار خود را از عنصر والد خود به ارث می برد، بنابراین در عناصر فرزند باید آن را تغییر داد تا به مقدار اولیه خود که چپ چین (left) است برگردد. 

ویژگی direction
با استفاده از ویژگی direction می توانیم جهت متن را تغییر دهیم:

 

direction (block) :inherit | ltr | rtl

مقدار پیش فرض این ویژگی ltr است یعنی چپ به راست (برای زبان های لاتین). اما برای زبان فارسی یا زبانهای مشابه زبان فارسی باید این مقدار با rtl یا راست به چپ تنظیم شود. این مقدار مشخص می کند که متن باید از راست به چپ خوانده شود.

<p style="direction: rtl;">
متن داخل این پاراگراف به صورت راست به چپ نوشته می شود. 
</p>

این ویژگی مقدار خود را از عنصر والد خود به ارث می برد، بنابراین می توانید این مقدار را در عنصر body تنظیم کنید و مطمئن باشید که این ویژگی در تمام سند اعمال خواهد شد. 

ویژگی text-shadow
با استفاده از ویژگی text-shadow می توان افکت سایه را به متن اعمال کرد.

   

text-shadow :inherit | none | <offset-x><offset-y> | [<blur-radius>] [<color>]

سایه را می توان با تعریف کردن دو مقدار انحراف (offset) تعریف کرد؛ پس از آن دو مقدار انتخابی وجود دارند که یکی مربوط به شعاع محو شدن (blur radius) و دیگری مربوط به رنگ (color) سایه است. مقادیر انحراف x و y به عنوان مقادیر طولی مشخص می شوند که وابسته به متن هستند. مقادیر مثبت سایه را به سمت راست و پایین حرکت می دهند؛ مقادیر منفی سایه را به سمت چپ و بالا حرکت می دهند.
با تنظیم کردن مقدار شعاع محو شدن می توان اثر محو شدن را نیز اضافه کرد. این کار باعث می شود سایه کشیده شده و در کناره ها محو شود. آخرین مقدار انتخابی، رنگ سایه است. اگر هیچ رنگی مشخص نشود بیشتر مرورگرها رنگ سایه را مشابه رنگ متن انتخاب می کنند.

در مثال زیر قانون مربوط به css را طوری نوشته ایم که متن داخل عنصر h1 دارای یک سایه کوچک محو شده خاکستری در قسمت بالا سمت راست باشد:

h1{ text-shadow : 1px -1px 1px gray}

ویژگی text-shadow یک ویژگی مربوط به نسخه 3 css است که توسط بیشتر مرورگر های وب پشتیبانی می شود:
Chrome 2+, Firefox 3.5+, IE10+, Safari 1.2+& Opera 9.5+ 

ویژگی box-shadow
علاوه بر این که می توان برای متن سایه ایجاد کرد، با استفاده از ویژگی box-shadow می توان به یک عنصر بلاک نیز سایه داد.

box-shadow(block) : inherit | none | <inset><offset-x><offset-y> [<blur-radius>] [<spread-radius>] [<color>]

مقادیر مربوط به ویژگی box-shadow همانند مقادیر مربوط به ویژگی text-shadow است، و فقط دو استثنا در این زمینه وجود دارد. مقدار spread-radius که می توان با تنظیم کردن این مقدار سایه را کوچک یا بزرگ کرد. این مقدار به صورت انتخابی است و اگر مشخص نشود مقدار پیش فرض آن 0 است و در این صورت سایه با همان اندازه عنصر ساخته می شود. در مثال زیر یک سایه محو خاکستری در قسمت پایین سمت راست بلوک قرار داده می شود.

.drop-shadow { box-shadow : inset 3px 3px 3px 6px #ccc; }

ویژگی box-shadow یک ویژگی مربوط به نسخه 3 css است که در این نسخه های مرورگرهای وب پشتیبانی می شود:
Chrome 10+, Firefox4+, IE9+, Safari5.1+, & Opera10.5+.
شما می توانید با استفاده از پیشوندهای مخصوص مرورگرهای مختلف (-webkit, -moz) میزان استفاده از این ویژگی را افزایش دهید و امیدوار باشید که ویژگی مورد نظر شما در تعداد مرورگرهای بیشتری نمایش داده می شود:

.drop-shadow{
/* Chrome 1-5, Safari 2-5.1+ */
-webkit-box-shadow: 3px 3px 5px 6px #ccc;

/* Firefox 3.5+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc;

Box-shadow: 3px 3px 5px 6px #ccc;
}