خانه / مقالات اموزشی / css / آموزش CSS text-decoration
آموزش CSS
آموزش CSS

آموزش CSS text-decoration

آموزش CSS (فصل سوم – جلسه ۱) : قالب بندی متون

خصوصیت direction

این خاصیت مشابه صفت dir در تگ های HTML می باشد و برای تراز متن استفاده می شود، و یکی از ۲ مقدار زیر را می پذیرد:

  • ltr : مقدار پیشفرض و متن را چپ چین می کند و معمولا برای متون انگلیسی است
  • rtl : متن را راست چین می کند. و معمولا برای متون فارسی است

خاصیت line-height

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

مثال:

 

همانطور که گفتیم اندازه ی line-height به اندازه فونت بستگی دارد، به طور مثال اگر اندازه فونت تگ p در مثال بالا ۱۰px باشد مقدار ۲ برای خصوصیت line-height برابر با  ۲۰px خواهد شد..

نکته : توصیه می شود که از خصوصیت line-height فقط برای تگ body استفاده شود، زیرا در صورت استفاده آن برای دیگر تگ ها، در صورت تغییر اندازه فونت، اندازه line- height نیز تغییر خواهد کرد، اما در تگ body این صور نیست و با تغییر اندازه ی فونت، line-height همه ی عناصر یکسان خواهد بود.

با تخصیص مقدار به line-height مقدار به دو قسمت مساوی تقسیم شده و نصف آن به فضای خالی بالای خط و نصف دیگر به فضای خالی پایین خط اختصاص داده می شود.

مثال :

و کد css :
 

نتیجه در مرورگر:

1x1.trans آموزش CSS (فصل سوم   جلسه 1) : قالب بندی متون

خصوصیت letter-spacing

خاصیت letter spacing یک فضای خالی اضافی بین کاراکتر ها ایجاد می کند. برای این خاصیت دو مقدار عددی مثبت و منفی مجاز می باشد که استفاده از مقادیر منفی باعث تو رفتگی و به هم ریختگی حروف می شود.

مثال:

و کد css زیر:
 

1x1.trans آموزش CSS (فصل سوم   جلسه 1) : قالب بندی متون

خصوصیت word-spacing

خاصیت word-spacing یک مقدار فضای خالی اضافی برای فاصله بین لغات تعیین می کن. این مقدار نیز می تواند هم منفی و هم مثبت باشد.

مثال:

و کد css زیر:
1x1.trans آموزش CSS (فصل سوم   جلسه 1) : قالب بندی متون

خصوصیت text-indent

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

خصوصیت text-align

این خاصیت مشابه صفت align در تگ های HTML می باشد و برای تراز بندی افقی متن استفاده می شود، و یکی از چهار زیر را می پذیرد:

  • Left : مقدار پیشفرض و متن را از چپ تراز می کند.
  • Right : متن را از سمت راست تراز می کند.
  • Center : متن را از وسط تراز می کند.
  • Justify : متن را از دو طرف تراز می کند.

مثال: استفاده از خاصیت های text-indent و text-align

کد html :

و کد css زیر :
 

1x1.trans آموزش CSS (فصل سوم   جلسه 1) : قالب بندی متون

خصوصیت text-decoration

از این خاصیت برای underline (زیرخط دار) کردن متون و یا برداشتن underline از لینک ها، استفاده می شود و  از ۵ مقدار زیر را می پذیرد:

  • Underline : یک خط زیر متن می کشد.
  • Overline : یک خط بالای متن می کشد.
  • Line-through : یک خط روی متن می کشد.
  • Blink : متن را به صورت چشمک زن نمایش می دهد و معادل تگ <blink>  در HTML است.
  • None : مقدار پیشفرض و برای از بین بردن خط ها.

 درضمن می توان به طور همزمان از ۴  مقدار اول، استفاده کرد.

مثال :

و کد css :
 

1x1.trans آموزش CSS (فصل سوم   جلسه 1) : قالب بندی متون

بسیار خب تا به اینجا با ۶ خصوصیت قالب بندی متن آشنا شدید، در جلسه دوم شما را با بقیه خصوصیات قالب بندی متن آشنا خواهیم کرد.

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

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

دیدگاهتان را بنویسید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net