قالب بندی متون

 

خصوصیت direction

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

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

خاصیت line-height

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

مثال:

1 p { line-height: 2; }

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

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

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

مثال :

1 <p> 7Learn.com: Javascript and Web Design Tutorials </p>

و کد css :

1 p { line-height: 3; }

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

line height <a  style=آموزش CSS (فصل سوم جلسه 1) : قالب بندی متون" title="line-height" width="232" height="214" />

خصوصیت letter-spacing

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

مثال:

1 <p class="p1"> 7Learn.com: Javascript and Web Design Tutorials </p>
2 <p class="p2"> 7Learn.com: Javascript and Web Design Tutorials </p>

و کد css زیر:

1 .p1 { letter-spacing: 2px; }
2 .p2 { letter-spacing: -2px; }

letter spacing <a  style=آموزش CSS (فصل سوم جلسه 1) : قالب بندی متون" title="letter-spacing" width="469" height="183" />

خصوصیت word-spacing

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

مثال:

1 <p class="p1"> 7Learn.com: Javascript and Web Design Tutorials </p>
2 <p class="p2"> 7Learn.com: Javascript and Web Design Tutorials </p>

و کد css زیر:

1 .p1 { word-spacing: 5px; }
2 .p2 { word-spacing: -5px; }

word spacing <a  style=آموزش CSS (فصل سوم جلسه 1) : قالب بندی متون" title="word-spacing" width="370" height="183" />

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

خصوصیت text-align

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

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

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

کد html :

1 <h2> 7Learn.com </h2>
2 <p> Javascript and Web Design Tutorials/ Javascript and Web Design Tutorials/ Javascript and Web Design Tutorials</p>

 و کد css زیر :

1 h2 { text-align: center; }
2 p {
3     text-indent: 20px;
4     text-align: justify;
5 }

text indent and text align <a  style=آموزش CSS (فصل سوم جلسه 1) : قالب بندی متون" title="text-indent-and-text-align" width="402" height="225" />

خصوصیت text-decoration

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

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

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

مثال :

1 <h2> 7Learn.com </h2>
2 <p> Javascript and Web Design Tutorials </p>

و کد css :

1 h2 { text-decoration: underline overline; }
2 p { text-decoration: line-through; }

text dicoration <a  style=آموزش CSS (فصل سوم جلسه 1) : قالب بندی متون" title="text-dicoration" width="293" height="198" />

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

ارسال نظر