0 اسپیناس وب اسپیناس وب

افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی

نمونه کارها

اموزش CSS (جلسه پنجم) -قالب بندي متون،direction خصوصیت

نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

ادامه اموزش طراحی سایت با CSS :

direction خصوصیت:

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

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

line-height خاصیت

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

مثال:

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

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

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

 

 

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 زیر:

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>

 

text-indent خصوصیت

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

text-align خصوصیت

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

Left : مقدار پیشفرض و متن را از چپ تراز می کند.

Right : متن را از سمت راست تراز می کند.

Center : متن را از وسط تراز می کند.

Justify  : متن را از دو طرف تراز می کند.

 

text-decoration خصوصیت

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

Underline : یک خط زیر متن می کشد.

Overline : یک خط بالای متن می کشد.

Line-through : یک خط روی متن می کشد.

Blink : متن را به صورت چشمک زن نمایش می دھد و معادل تگ >blink<  در HTML است.

None : مقدار پیشفرض و برای از بین بردن خط ھا.

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

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

 

اموزش طراحی سایت شرکتیبا CSS !! ادامه اموزش در جلسه بعدی…

درگ کنید مشاهده بستن پخش
0%