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

خصوصیت direction

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

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

خاصیت line-height

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

مثال:

p { line-height: 2; }

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

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

مثال :

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

و کد css :

p { line-height: 3; }

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

خصوصیت letter-spacing

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

مثال:

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

و کد css زیر:

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

خصوصیت word-spacing

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

مثال:

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

و کد css زیر:

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

خصوصیت text-indent

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

خصوصیت text-align

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

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

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

کد html :

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

 و کد css زیر :

h2 { text-align: center; }
p {
text-indent: 20px;
text-align: justify;
}

خصوصیت text-decoration

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

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

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

مثال :

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

و کد css :

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

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

چه امتیازی به این مقاله می دید؟

1 2 3 4 5