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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۱۲ آبان ۱۳۹۱

فهرست محتوای این مقاله

خصوصیت direction

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

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

خاصیت line-height

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

مثال:

p { line-height: 2; }

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

نکته :

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

با تخصیص مقدار به 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 خصوصیت قالب بندی متن آشنا شدید، در جلسه دوم شما را با بقیه خصوصیات قالب بندی متن آشنا خواهیم کرد.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

gtanori

جناب یه سوال چطور میشه این همه کد رو حفظ کرد و قاطی نکرد روشی شما سراغ دارید من کد های پی اچ پی و html رو راحت یاد می گیریم ولی سی اس اس یه خورده اذیت می کنه

لقمان آوند

از نرم افزارهایی استفاده کنید که قابلیت auto-completion کدهای css رو داشته باشه ، تو این نرم افزار ها در حین تایپ کدها خودش موارد مربوطه رو پیشنهاد میده (معمولا در حین نوشتن با زدن کلیدهای ctrl+space پیشنهاد ها نمایش داده میشه). من phpStorm رو پینهاد می کنم برای همه ی زبون های تحت وب …

hamid zar

بله با تشکر فراوان خدمت شما استاد محترم جناب مهندس لقمانوند.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.