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

- visibility ٣ mode_comment

خصوصیت direction

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

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

خاصیت line-height

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

مثال:

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

info نکته :

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

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

مثال :

و کد css :

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

خصوصیت letter-spacing

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

مثال:

و کد css زیر:

خصوصیت word-spacing

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

مثال:

و کد css زیر:

comment دیدگاه کاربران
kiansoft2000

عالی بود

yoosef

سجاد جان واقعا خسته نباشید
از همه بچه های این سایت تشکر میکنم واسه خاطر زحمت هایی که میکشید

ممنون ، بندهه هم از شما و کاربران عزیزی که پیگیر مطالب سایت هستید تشکر می کنم .

صفحه هر چند ثانیه یه بار می پره بالا یا پایین. آدم دیونه می شه برا خوندن مطلب

چنین مشکلی وجود نداره دوست عزیز . مطمئنید ؟

1234567890

با سلام

3 ردیف با 4 عکس دارم ، وقتی که صفحه نمایش browser را کوچیک میکنم در هر ردیف 2 عکس قرار میگیرد . میخواستم بدونم اینو با media درست میکنن ؟ اگه آره ، چطوری میتونم تشخیص بدم که به width , height چه مقداری میتونم بدم ؟

با تشکر از آموزش ها و ایتکه وقتی برای پاسخگویی به ما قرار میدهید .

سید رضا

سلام. خسته نباشید.
لقمان جان ممکنه آموزش طراحی responsive design رو هم قرار بدین؟
ضمنا یه ایمیل از خودت بیزحمت بده چند تا سوال کوتاه ازت دارم میخوام تو میل ازت بپرسم.

لقمان آوند

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

بسیار ممنون

Mohammad Mirzaei

این اموزش واقعا به دردم خورد ممنون

نیاز به لاگین

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