ویژگی color

از این ویژگی برای رنگ آمیزی متن استفاده می شود

روش استفاده :

color : رنگ

روش استفاده از رنگها قبلا بیان شده است

مثال :

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

خط اول :

رنگ تمامی متن های موجود در صفحه وب ابی می شود . در خط اول از نام رنگ استفاده شده است

خط دوم :

با استفاده از شماره رنگ ، تعیین شده که رنگ متنهایی که با تگ h1 در صفحه ایجاد می شوند چه رنگی باشد

 

خط سوم :

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

 

نکته :

اگر دو دستور زیر با هم در صفحه وب باشد ، دستور مربوط به h1 بر دستور مربوط به body اولویت پیدا می کند

body {color:blue;}
h1 {color:#00ff00;}

مشاهده و اجرای برنامه کامل

 

 

 

 

ویژگی text-align

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

 

روش استفاده :

text-align : تراز

 

تراز می تواند مقادیر زیر را داشته باشد :

right , left , center , justify

مثال :

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

 

خط اول :

تمام متن هایی که با تگ h1 ایجاد می شوند در وسط صفحه یا وسط سلول جدول یا وسط لایه خود ،  قرار می گیرند

خط دوم :

تمام متن هایی که با تگ های p که از کلاس date استفاده می کنند ایجاد شده اند در وسط صفحه یا سلول جدول یا لایه خود قرار می گیرند

 

خط سوم :

تمام متن هایی که با تگ های p که از کلاس main استفاده می کنند ایجاد شده اند تراز دوطرفه می شوند

 

مشاهده و اجرای برنامه کامل

 

 

 

ویژگی text-decoration

از این ویژگی برای تعیین زیر خط متنها استفاده می شود .

معمولا از این ویژگی برای حذف زیر خط متنهای پیوند که با تگ a ایجاد می شود استفاده می شود

روش استفاده :

text-decoration :مقدار

مثال 1 :

a {text-decoration:none;}
مقدار none باعث عدم نمایش خط زیر در پیوندها می شود
مثال 2:
در این مثال انواع مختلف مقدار text-decoration را مشاهده می کنید
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
خط اول :
خط بالای متنی که با تگ h1 ایجاد شده قرار می گیرد
خط 2:
خط وسط متنی که با تگ h2 ایجاد شده قرار می گیرد
خط 3:
خط زیر متنی که با تگ h3 ایجاد شده قرار می گیرد
خط 4:

متن به صورت چشمک زن دیده می شود با فایر فاکس مشاهده کنید

 

مشاهده و اجرای برنامه کامل

 

ویژگی text-transform

از این ویژگی برای تعیین حروف کوچک بزرگ تمام یا هر حرف دلخواه یا برای بزرگ کردن حرف اول هر کلمه استفاده می شود

 

روش استفاده :

text-transform:مقدار

 

مثال :

در مثالهای زیر مقادیر این ویژگی را مشاهده می کنید

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

خط اول :

متن هایی که با تگ p که از کلاس uppercase استفاده می کنند به صورت تمام حرف بزرگ مشاهده می شوند

خط دوم :

متن هایی که با تگ p که از کلاس lowercase استفاده می کنند به صورت تمام حرف کوچک مشاهده می شوند

خط سوم :

حرف اول تمام کلمات متن هایی که با تگ p که از کلاس capitalize استفاده می کنند به صورت  حرف بزرگ مشاهده می شوند

 

مشاهده و اجرای برنامه کامل

 

ویژگی text-indent

از این ویژگی برای ایجاد تو رفتگی در خط اول پاراگراف استفاده می شود

 

روش استفاده :

text-indent:مقدار تورفتگی

 

مثال :

p {text-indent:50px;}
خط اول متنی که با تگ p ایجاد شده به میزان 50 پیکسل تورفتگی پیدا می کند
 
ویژگی letter-spacing

برای تنظیم فاصله بین حروف متن بکار می رود

 

روش استفاده :

letter-spacing :مقدار

 

مقدار مثبت فاصله را بیشتر و مقدار منفی فاصله بین حروف را کمتر می کند

 

مشاهده و اجرای برنامه کامل

 

 

 

ویژگی line-height

برای تنظیم فاصله بین خطوط پاراگراف بکار می رود

 

روش استفاده :

line-height : مقدار فاصله

 

فاصله پیش فرض در بیشتر مرورگرها 110 درصد تا 120 درصد است

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

 

مشاهده و اجرای برنامه کامل

 

 

ویژگی direction

برای تنظیم جهت درست متنهایی که از کلمات فارسی و انگلیسی با هم استفاده می کنند بکار می رود

مقادیر ان می تواند rtl یا ltr باشد

اگر متن شما دارای کلمات فارسی است از rtl یعنی راست به چپ استفاده کنید

 

روش استفاده :

direction :مقدار

 

مشاهده و اجرای برنامه کامل

 

 

 

 

 

ویژگی word-spacing

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

 

روش استفاده :

 

word-spacing : مقدار

 

مشاهده و اجرای برنامه کامل

 white-space:nowrap

همچنین با دستور white-space:nowrap می توان مشخص نمود که با رسیدن متن به انتها ی صفحه آیا متن شکسته شده و به خط بعد برود یا خیر 

 

دستور white-space:nowrap به معنای این است که متن با رسیدن به انتهای صفحه شکسته نشود و همینطور در یک خط دیده شود در این صورت عرض صفحه افزایش می یابد

مشاهده و اجرای برنامه کامل

 

 

 

ویژگی vertical-align

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

روش استفاده :

 

vertical-align : مقدار

 

مقدار می تواند مقادیر زیر باشد :

text-top , text-bottom , text-middle

مشاهده و اجرای برنامه کامل