آموزش CSS - تغییر ظاهر متن Text

          mahdi 
            بازدید : 56
          چهارشنبه 25 مرداد 1391
           نظرات (0)
        

تغییر ظاهر متن Text

صفت TEXT
با صفت text می توانیم تغییر ظاهری متن ها را در فایل html تعیین کنیم. تغییراتی مانند تغییر رنگ ، افزایش یا کاهش فاصله بین حروف ، تراز نوشته و ... را می شود اعمال کرد. در ادامه به طور کامل برای شما ویژگیهای این صفت را توضیح میدهم .
صفت text دارای ویژگیهای :

Color:برای تغییر رنگ نوشته به کار می رود
Direction : چپ به راست یا راست به چپ نوشته را تعیین می کند
Letter-spacing : افزایش یا کاهش فاصله بین حروف را تعیین می کند
text-align : تراز نوشته از سمت چپ و راست را تعیین می کند
text-decoration :تعیین میکند لینک دارای زیر خط دار باشد یا خیر
text-indent : میزان تو رفتگی نوشته از خط را تعیین می کند
text-shadow : تعیین می کند متن شما دارای سایه باشد یا خیر
text-transform : تغییر شکل متن را تعیین می کند
white-space : فضای خالی کنار یک عنصر را تعیین می کند
word-spacing : افزایش یا کاهش فاصله بین کلمات را تعیین می کند

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

صفت color

رنگ متن را در صفحه اصلی مشخص می کند . به این صورت که می توانید برای هر پاراگراف یا تگ های هدینگ یک رنگ را در نظر بگیرید .
به مثال زیر توجه کنید :

body
{
color: red;
}
h2
{
color:green;
}

مشاهده دمو

صفت Direction
همانطور که میدانید متن فارسی باید از سمت راست نوشته شود و متن های دیگر از سمت چپ . مرورگر به طور پیش فرض متوجه چنین خاصیتی نمی شود و حتما باید بین تگ body در فایل css بوسیله صفت direction : rtl مشخص کنیم که متن از سمت راست نمایش داده شود
به مثال زیر توجه کنید :

body
{
direction: rtl;
}

مشاهده دمو

صفت Letter-spacing
این صفت چندان نسبت به بقیه ویژگیها کاربرد ندارد اما در بعضی از مواقع احتیاج دارید که بین حروف در یک پاراگراف فاصله ای ایجاد کنید .
به مثال زیر توجه کنید :

body
{
latter-spacing : 5px ;
}

مشاهده دمو

صفت Text-align
یکی از پرکاربردترین ویژگیهای متن text-align می باشد . یعنی شما مشخص می کنید هر قسمت از متن صفحه به چه صورتی تراز شود .از سمت راست .چپ یا از هر دو طرف. من برای اینکه با هر سه خاصیت آشنا بشید سه تا پاراگراف در فایل html خودم ایجاد کردم بعد هر کدام از آنها را به یک روش تراز میکنم .
به مثال زیر توجه کنید :

p.right
{
text-align : right ;
}
p.left
{
text-align : left ;
}
p.center
{
text-align : center ;
}
p.justify
{
text-align : justify ;
}

مشاهده دمو

صفت text-decoration
این صفت برای ایجاد متن های زیر خط دار استفاده می شود و دارای ویژگیهای none.underline.overline.line-trough
به مثال زیر توجه کنید :

p.right

{
text-align: right;
text-decoration: overline;
}
p.left

{
text-align: left;
text-decoration: line-through;
}
p.center

{
text-align: center;
text-decoration: none;
}
p.justify

{
text-align: justify;
text-decoration: underline;
}

مشاهده دمو

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

منبع

ارسال نظر برای این مطلب